TS: pages/Taxonomy + Extract Taxonomy/ExactMatchSearch

src/components/Taxonomy/ExactMatchSearch/index.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+
+import { createSelector } from 'reselect';
+import { format } from 'url';
+
+import loadData from 'higherOrder/loadData/ts';
+import descriptionToPath from 'utils/processDescription/descriptionToPath';
+
+type Props = {
+  onSearchComplete: (payload?: TaxonommyTreePayload | null) => void;
+};
+interface LoadedProps extends Props, LoadDataProps<TaxonommyTreePayload> {}
+
+const ExactMatchSearch = ({ data, onSearchComplete }: LoadedProps) => {
+  useEffect(() => {
+    onSearchComplete(data && !data.loading ? data.payload : null);
+  });
+  return null;
+};
+
+const getURLFromState = createSelector(
+  (state: GlobalState) => state.settings.api,
+  (state: GlobalState) => state.customLocation.description,
+  (state: GlobalState) => state.customLocation.search as { search: string },
+  ({ protocol, hostname, port, root }, description, { search }) => {
+    if (search && search.match(/^\d+$/)) {
+      const desc = {
+        ...description,
+        taxonomy: {
+          db: 'uniprot',
+          accession: search,
+        },
+      };
+      try {
+        return format({
+          protocol,
+          hostname,
+          port,
+          pathname: root + descriptionToPath(desc),
+        });
+      } catch {
+        return;
+      }
+    } else if (search && search.match(/^[\w ]+$/)) {
+      try {
+        return format({
+          protocol,
+          hostname,
+          port,
+          pathname: root + descriptionToPath(description),
+          search: `?scientific_name=${search}`,
+        });
+      } catch {
+        return;
+      }
+    }
+  },
+);
+
+export default loadData(getURLFromState as LoadDataParameters)(
+  ExactMatchSearch,
+);

src/pages/Taxonomy/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import ExactMatchSearch from 'components/Taxonomy/ExactMatchSearch';
+import loadable from 'higherOrder/loadable';
+
+import subPages from 'subPages';
+import config from 'config';
+
+import EndPointPage from '../endpoint-page';
+
+const SummaryAsync = loadable({
+  loader: () =>
+    import(
+      /* webpackChunkName: "taxonomy-summary" */ 'components/Taxonomy/Summary'
+    ),
+  loading: false,
+});
+const ListAsync = loadable({
+  loader: () =>
+    import(/* webpackChunkName: "taxonomy-list" */ 'components/Taxonomy/List'),
+  loading: false,
+});
+
+const subPagesForTaxonomy = new Map();
+for (const subPage of config.pages.taxonomy.subPages as Array<string>) {
+  subPagesForTaxonomy.set(subPage, subPages.get(subPage));
+}
+
+const childRoutes = /(\d+)|(all)/i;
+
+type Props = {
+  search?: InterProLocationSearch;
+};
+const Taxonomy = ({ search }: Props) => {
+  const [accSearch, setAccSearch] = useState<
+    TaxonommyTreePayload | null | undefined
+  >(null);
+  const searchTerm = search && (search.search as string);
+  return (
+    <>
+      {searchTerm && <ExactMatchSearch onSearchComplete={setAccSearch} />}
+      <EndPointPage
+        subpagesRoutes={childRoutes}
+        listOfEndpointEntities={ListAsync}
+        SummaryAsync={SummaryAsync}
+        subPagesForEndpoint={subPagesForTaxonomy}
+        exactMatch={(searchTerm && accSearch) || null}
+      />
+    </>
+  );
+};
+
+const mapStateToProps = createSelector(
+  (state: GlobalState) => state.customLocation.search,
+  (search) => ({ search }),
+);
+
+export default connect(mapStateToProps)(Taxonomy);

src/pages/index.js

@@ -40,6 +40,7 @@ const Structure = loadable({
   loader: () => import(/* webpackChunkName: "structure-page" */ './Structure'),
 });
 const Taxonomy = loadable({
+  // $FlowFixMe
   loader: () => import(/* webpackChunkName: "taxonomy-page" */ './Taxonomy'),
 });
 const Proteome = loadable({