Creating DatastoreMain and separating logic.

mlibrary · Dec 3, 2024 · f55c76d · f55c76d
1 parent c8cab29
commit f55c76d
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 62 deletions.
diff --git a/src/modules/datastores/components/DatastoreMain/index.js b/src/modules/datastores/components/DatastoreMain/index.js
@@ -0,0 +1,58 @@
+import { DatastoreNavigation, FlintAlerts, Landing } from '../../../datastores';
+import { RecordFull, Results } from '../../../records';
+import { Route, Routes } from 'react-router-dom';
+import { GetThisPage } from '../../../getthis';
+import { List } from '../../../lists';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { SearchBox } from '../../../search';
+import { useSelector } from 'react-redux';
+
+const DatastoreMain = ({ activeDatastore, currentDatastore, datastores, query }) => {
+  const { active: activeFilters } = useSelector((state) => {
+    return state.filters;
+  });
+  const { active: activeInstitution, defaultInstitution, options } = useSelector((state) => {
+    return state.institution;
+  });
+  const { page, searching, sort } = useSelector((state) => {
+    return state.search;
+  });
+  const currentFilters = activeFilters[currentDatastore];
+  const activeFilterCount = currentFilters ? Object.keys(currentFilters).length : 0;
+
+  return (
+    <>
+      <SearchBox {...{ activeDatastore, query }} />
+      <DatastoreNavigation {...{ activeFilters, activeInstitution, currentDatastore, datastores, page, query, sort }} />
+      <FlintAlerts {...{ currentDatastore }} />
+      <Routes>
+        <Route
+          path='record/:recordUid/get-this/:barcode'
+          element={<GetThisPage />}
+        />
+        <Route
+          path='record/:recordUid'
+          element={<RecordFull />}
+        />
+        <Route
+          path='list'
+          element={<List {...{ activeDatastore, currentDatastore }} />}
+        />
+        <Route
+          index
+          element={searching ? <Results {...{ activeDatastore, activeFilterCount }} /> : <Landing {...{ activeDatastore, defaultInstitution, options }} />}
+        />
+      </Routes>
+    </>
+  );
+};
+
+DatastoreMain.propTypes = {
+  activeDatastore: PropTypes.object,
+  currentDatastore: PropTypes.string,
+  datastores: PropTypes.array,
+  query: PropTypes.string
+};
+
+export default DatastoreMain;
diff --git a/src/modules/datastores/components/FlintAlerts/index.js b/src/modules/datastores/components/FlintAlerts/index.js
@@ -1,12 +1,16 @@
 import { Alert, Anchor } from '../../../reusable';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 
-const FlintAlerts = ({ datastore, institutions = [] }) => {
+const FlintAlerts = ({ currentDatastore }) => {
+  const { institutions = [] } = useSelector((state) => {
+    return state.profile || {};
+  });
   const [dismiss, setDismiss] = useState([]);
   const handleDismissClick = () => {
     setDismiss((previousDismiss) => {
-      return [...previousDismiss, datastore];
+      return [...previousDismiss, currentDatastore];
     });
   };
   const messages = {
@@ -16,14 +20,14 @@ const FlintAlerts = ({ datastore, institutions = [] }) => {
     website: (<>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://libguides.umflint.edu/library'>Thompson Library website</Anchor>.</>)
   };
 
-  if (!Object.keys(messages).includes(datastore) || !institutions.includes('Flint') || dismiss.includes(datastore)) {
+  if (!Object.keys(messages).includes(currentDatastore) || !institutions.includes('Flint') || dismiss.includes(currentDatastore)) {
     return null;
   }
 
   return (
     <Alert type='warning'>
       <div className='flex alert--flint'>
-        <span>{messages[datastore]}</span>
+        <span>{messages[currentDatastore]}</span>
         <button
           className='btn btn--small btn--secondary no-background'
           onClick={handleDismissClick}
@@ -36,8 +40,7 @@ const FlintAlerts = ({ datastore, institutions = [] }) => {
 };
 
 FlintAlerts.propTypes = {
-  datastore: PropTypes.string,
-  institutions: PropTypes.array
+  currentDatastore: PropTypes.string
 };
 
 export default FlintAlerts;
diff --git a/src/modules/datastores/components/Landing/index.js b/src/modules/datastores/components/Landing/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-const Landing = ({ activeDatastore, institution }) => {
+const Landing = ({ activeDatastore, defaultInstitution, options }) => {
   const [searchParams] = useSearchParams();
   const { uid, name } = activeDatastore;
   const landingContent = {
@@ -65,12 +65,12 @@ const Landing = ({ activeDatastore, institution }) => {
               To find materials closest to you, please choose a library
             </h2>
             <p className='flex flex__responsive'>
-              {institution.options.map((library, index) => {
+              {options.map((library, index) => {
                 return (
                   <Anchor
                     key={index}
                     to={`?library=${library.replaceAll(' ', '+')}`}
-                    className={`btn btn--secondary ${library === (searchParams.get('library') || institution.defaultInstitution) ? 'btn--secondary--active' : ''}`}
+                    className={`btn btn--secondary ${library === (searchParams.get('library') || defaultInstitution) ? 'btn--secondary--active' : ''}`}
                   >
                     {library}
                   </Anchor>
@@ -89,7 +89,8 @@ const Landing = ({ activeDatastore, institution }) => {
 
 Landing.propTypes = {
   activeDatastore: PropTypes.object,
-  institution: PropTypes.object
+  defaultInstitution: PropTypes.string,
+  options: PropTypes.array
 };
 
 export default Landing;
diff --git a/src/modules/datastores/index.js b/src/modules/datastores/index.js
@@ -1,5 +1,6 @@
 import { addDatastore, changeActiveDatastore } from './actions';
 import DatastoreInfoContainer from './components/DatastoreInfoContainer';
+import DatastoreMain from './components/DatastoreMain';
 import DatastoreNavigation from './components/DatastoreNavigation';
 import DatastoreRoute from './components/DatastoreRoute';
 import datastoresReducer from './reducer/';
@@ -10,6 +11,7 @@ export {
   addDatastore,
   changeActiveDatastore,
   DatastoreInfoContainer,
+  DatastoreMain,
   DatastoreNavigation,
   DatastoreRoute,
   datastoresReducer,

diff --git a/src/modules/lists/components/List/index.js b/src/modules/lists/components/List/index.js
@@ -1,21 +1,24 @@
 import { Anchor, Breadcrumb, H1 } from '../../../reusable';
 import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import ActionsList from '../ActionsList';
 import prejudice from '../../prejudice';
 import PropTypes from 'prop-types';
 import { Record } from '../../../records';
 import { setA11yMessage as setA11yMessageAction } from '../../../a11y';
-import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 const List = (props) => {
+  const list = useSelector((state) => {
+    return state.lists[props.currentDatastore];
+  });
   const [active, setActive] = useState('');
   const dispatch = useDispatch();
   const { search } = useLocation();
   const setA11yMessage = (message) => {
     return dispatch(setA11yMessageAction(message));
   };
-  const { activeDatastore, list } = props;
+  const { activeDatastore } = props;
   const { name, slug, uid } = activeDatastore;
   const tempList = list || [];
   const listLength = tempList.length;
@@ -83,7 +86,7 @@ const List = (props) => {
 
 List.propTypes = {
   activeDatastore: PropTypes.object,
-  list: PropTypes.array,
+  currentDatastore: PropTypes.string,
   setA11yMessage: PropTypes.func
 };
 

diff --git a/src/modules/pages/components/DatastorePage/index.js b/src/modules/pages/components/DatastorePage/index.js
@@ -1,55 +1,37 @@
-import { DatastoreNavigation, FlintAlerts, Landing } from '../../../datastores';
 import React, { useEffect } from 'react';
-import { RecordFull, Results } from '../../../records';
 import { Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { AdvancedSearch } from '../../../advanced';
 import { BrowsePage } from '../../../browse';
+import { DatastoreMain } from '../../../datastores';
 import { findWhere } from '../../../reusable/underscore';
-import { GetThisPage } from '../../../getthis';
-import { List } from '../../../lists';
 import { NoMatch } from '../../../pages';
-import { SearchBox } from '../../../search';
 import { setDocumentTitle } from '../../../a11y';
 import { switchPrideToDatastore } from '../../../pride';
 
 const DatastorePage = () => {
   const { pathname } = useLocation();
-  const params = useParams();
+  const { datastoreSlug } = useParams();
   const dispatch = useDispatch();
 
-  const { active: activeFilters } = useSelector((state) => {
-    return state.filters;
-  });
   const { active: currentDatastore, datastores } = useSelector((state) => {
     return state.datastores;
   });
   const activeDatastore = findWhere(datastores, {
     uid: currentDatastore
   });
-  const institution = useSelector((state) => {
-    return state.institution;
-  });
-  const { institutions } = useSelector((state) => {
-    return state.profile || {};
-  });
-  const { page, query, searching, sort } = useSelector((state) => {
+  const { query } = useSelector((state) => {
     return state.search;
   });
-  const currentFilters = activeFilters[currentDatastore];
-  const activeFilterCount = currentFilters ? Object.keys(currentFilters).length : 0;
   const isAdvanced = useSelector((state) => {
     return Boolean(state.advanced[currentDatastore]);
   });
-  const list = useSelector((state) => {
-    return state.lists[currentDatastore];
-  });
 
   useEffect(() => {
-    if (params.datastoreSlug) {
-      switchPrideToDatastore(params.datastoreSlug);
+    if (datastoreSlug) {
+      switchPrideToDatastore(datastoreSlug);
     }
-  }, [params.datastoreSlug, dispatch]);
+  }, [datastoreSlug, dispatch]);
 
   useEffect(() => {
     if (activeDatastore) {
@@ -82,31 +64,7 @@ const DatastorePage = () => {
         />
         <Route
           path='/*'
-          element={(
-            <>
-              <SearchBox {...{ activeDatastore, query }} />
-              <DatastoreNavigation {...{ activeFilters, activeInstitution: institution.active, currentDatastore, datastores, institution, page, query, sort }} />
-              <FlintAlerts {...{ datastore: activeDatastore.uid, institutions }} />
-              <Routes>
-                <Route
-                  path='record/:recordUid/get-this/:barcode'
-                  element={<GetThisPage />}
-                />
-                <Route
-                  path='record/:recordUid'
-                  element={<RecordFull />}
-                />
-                <Route
-                  path='list'
-                  element={<List {...{ activeDatastore, list }} />}
-                />
-                <Route
-                  index
-                  element={searching ? <Results {...{ activeDatastore, activeFilterCount }} /> : <Landing {...{ activeDatastore, institution }} />}
-                />
-              </Routes>
-            </>
-          )}
+          element={<DatastoreMain {...{ activeDatastore, currentDatastore, datastores, query }} />}
         />
       </Routes>
     </main>