Replacing Tabs with actual navigation in order to retain active fil…

…ters from each datastore.

src/modules/advanced/components/AdvancedSearchContainer/index.js

@@ -1,49 +1,68 @@
 import './styles.css';
-import { Breadcrumb, H1, Tab, TabPanel, Tabs } from '../../../reusable';
+import { Anchor, Breadcrumb, H1 } from '../../../reusable';
 import AdvancedSearchForm from '../AdvancedSearchForm';
 import React from 'react';
+import { stringifySearch } from '../../../search';
 import { useSelector } from 'react-redux';
 
 const AdvancedSearchContainer = () => {
-  const datastores = useSelector((state) => {
-    return state.datastores.datastores;
+  const { active: activeDatastoreUid, datastores } = useSelector((state) => {
+    return state.datastores;
   });
-  const activeDatastoreUid = useSelector((state) => {
-    return state.datastores.active;
+  const { page, query, sort } = useSelector((state) => {
+    return state.search;
   });
-  const activeDatastoreIndex = datastores.findIndex((datastore) => {
+  const { active: activeFilters } = useSelector((state) => {
+    return state.filters;
+  });
+  const { active: library } = useSelector((state) => {
+    return state.institution;
+  });
+  const activeDatastore = datastores.find((datastore) => {
     return datastore.uid === activeDatastoreUid;
   });
-  const activeDatastore = datastores[activeDatastoreIndex];
+  const queryString = (datastoreUid = activeDatastoreUid, nav) => {
+    const stringSearch = stringifySearch({
+      filter: activeFilters[datastoreUid],
+      library: datastoreUid === 'mirlyn' ? library : null,
+      page: nav || page[datastoreUid] === 1 ? null : page[datastoreUid],
+      query,
+      sort: sort[datastoreUid]
+    });
+    return stringSearch ? `?${stringSearch}` : '';
+  };
 
   return (
     <div className='container container-narrow margin-top__m'>
       <Breadcrumb
         items={[
-          { text: `${activeDatastore.name}`, to: `/${activeDatastore.slug}${document.location.search}` },
+          { text: `${activeDatastore.name}`, to: `/${activeDatastore.slug}${queryString()}` },
           { text: 'Advanced Search' }
         ]}
       />
 
       <H1 className='heading-xlarge'>Advanced Search</H1>
       <p className='font-lede'>Select a search category below for associated advanced search options.</p>
 
-      <Tabs defaultActiveIndex={activeDatastoreIndex}>
-        {datastores.map((ds) => {
-          return (
-            <Tab key={`tab-${ds.uid}`}>
-              {ds.name}
-            </Tab>
-          );
-        })}
-        {datastores.map((ds) => {
-          return (
-            <TabPanel key={`panel-${ds.uid}`} className='tab-panel-container'>
-              <AdvancedSearchForm datastore={ds} />
-            </TabPanel>
-          );
-        })}
-      </Tabs>
+      <nav className='advanced-search-nav' aria-label='Advanced Search Datastores'>
+        <ol className='flex__responsive list__unstyled'>
+          {datastores.map((datastore) => {
+            return (
+              <li key={datastore.uid}>
+                <Anchor
+                  to={`/${datastore.slug}/advanced${queryString({ datastoreUid: datastore.uid, nav: true })}`}
+                  aria-current={activeDatastoreUid === datastore.uid && 'page'}
+                  className='underline__hover'
+                >
+                  {datastore.name}
+                </Anchor>
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+
+      <AdvancedSearchForm datastore={activeDatastore} />
     </div>
   );
 };

src/modules/advanced/components/AdvancedSearchContainer/styles.css

@@ -1,12 +1,63 @@
-.tab-panel-container {
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 2px 0px, rgba(0, 0, 0, 0.24) 0px 2px 4px 0px;
-  padding: 1rem;
-  background: var(--search-color-grey-100);
-  border-radius: 0 0 4px 4px;
+.advanced-search-nav ol {
+  gap: 0;
 }
 
-@media only screen and (min-width: 641px) {
-  .tab-panel-container {
-    padding: 2rem;
+.advanced-search-nav a {
+  border-color: var(--search-color-grey-400);
+  border-style: solid;
+  border-width: 0 0 0 3px;
+  display: block;
+  height: 100%;
+  padding: 0.5rem 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .advanced-search-nav a {
+    border-radius: 4px 4px 0 0;
+    border-width: 3px 0 0 0;
+  }
+}
+
+@media (min-width: 820px) {
+  .advanced-search-nav a {
+    padding: 0.5rem 1rem;
+  }
+}
+
+.advanced-search-nav a[aria-current="page"] {
+  border-color: inherit;
+}
+
+@media (min-width: 640px) {
+  .advanced-search-nav a[aria-current="page"] {
+    background-color: white;
+    box-shadow:
+      0 2px 2px 0 var(--search-color-grey-400),
+      0 2px 4px 0 var(--search-color-grey-400);
+    position: relative;
   }
-}
+
+  .advanced-search-nav a[aria-current="page"]:after {
+    content: '';
+    background-color: inherit;
+    bottom: -5px;
+    height: 5px;
+    left: -2px;
+    position: absolute;
+    right: -2px;
+  }
+
+  .advanced-search-nav li:first-child a[aria-current="page"]:after {
+    left: 0;
+  }
+}
+
+.advanced-search-nav a:not([aria-current="page"]) {
+  color: var(--search-color-grey-700);
+}
+
+@media (min-width: 640px) {
+  .advanced-search-nav a:not([aria-current="page"]) {
+    border-color: transparent;
+  }
+}