Simplifying lists and citations.

mlibrary · Dec 4, 2024 · 0aa42d3 · 0aa42d3
1 parent f55c76d
commit 0aa42d3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 40 deletions.
diff --git a/src/modules/lists/components/ActionsList/index.js b/src/modules/lists/components/ActionsList/index.js
@@ -114,6 +114,7 @@ const ActionsList = (props) => {
               {...data}
               action={props.active}
               setAlert={setAlert}
+              datastoreUid={props.datastore.uid}
               {...props}
             />
           )}
@@ -138,6 +139,7 @@ ActionsList.propTypes = {
     PropTypes.string,
     PropTypes.object
   ]),
+  datastore: PropTypes.object,
   setActive: PropTypes.func
 };
 

diff --git a/src/modules/lists/components/CitationAction/index.js b/src/modules/lists/components/CitationAction/index.js
@@ -3,6 +3,7 @@ import { Anchor, Tab, TabPanel, Tabs } from '../../../reusable';
 import React, { useEffect, useState } from 'react';
 import { cite } from '../../../citations';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 
 const citationOptions = [
   {
@@ -31,7 +32,10 @@ const citationOptions = [
   }
 ];
 
-const CitationAction = ({ datastore, list, record, setActive, setAlert, viewType }) => {
+const CitationAction = ({ datastoreUid, record, setActive, setAlert, viewType }) => {
+  const { [datastoreUid]: list = [] } = useSelector((state) => {
+    return state.lists || {};
+  });
   const [citations, setCitations] = useState({});
   const [loading, setLoading] = useState(true);
 
@@ -42,11 +46,11 @@ const CitationAction = ({ datastore, list, record, setActive, setAlert, viewType
       let records = [];
 
       if (viewType === 'Full') {
-        records = [{ datastoreUid: datastore.uid, recordUid: record.uid }];
+        records = [{ datastoreUid, recordUid: record.uid }];
       }
       if (viewType === 'List' && list.length > 0) {
         records = list.map((item) => {
-          return { datastoreUid: datastore.uid, recordUid: item.uid };
+          return { datastoreUid, recordUid: item.uid };
         });
       }
 
@@ -69,7 +73,7 @@ const CitationAction = ({ datastore, list, record, setActive, setAlert, viewType
       setLoading(false);
     };
     fetchCitations();
-  }, [viewType, record, datastore, list]);
+  }, [viewType, record, datastoreUid, list]);
 
   const handleCopy = (citationId) => {
     navigator.clipboard.writeText(document.getElementById(`citation-text-${citationId}`).innerText);
@@ -93,31 +97,32 @@ const CitationAction = ({ datastore, list, record, setActive, setAlert, viewType
       })}
 
       {citationOptions.map((citationOption) => {
-        const citation = citations[citationOption.id];
+        const { id, name } = citationOption;
+        const citation = citations[id];
         return (
-          <TabPanel key={`${citationOption.name}-panel`}>
+          <TabPanel key={`${name}-panel`}>
             {citation
               ? (
                   <>
                     <label
-                      htmlFor={`${citationOption.name}-label`}
+                      htmlFor={`${name}-label`}
                       className='margin-top__s'
-                      id={`${citationOption.name}-label`}
+                      id={`${name}-label`}
                     >
-                      {citationOption.name} citation
+                      {name} citation
                     </label>
                     <div
-                      id={`citation-text-${citationOption.id}`}
+                      id={`citation-text-${id}`}
                       className='y-spacing copy-citation padding-y__xs padding-x__s container__rounded'
                       contentEditable
-                      aria-describedby={`${citationOption.id}-disclaimer`}
-                      aria-labelledby={`${citationOption.name}-label`}
+                      aria-describedby={`${id}-disclaimer`}
+                      aria-labelledby={`${name}-label`}
                       role='textbox'
                       dangerouslySetInnerHTML={{ __html: citation }}
                     />
                     <p
                       className='font-small citation-disclaimer'
-                      id={`${citationOption.id}-disclaimer`}
+                      id={`${id}-disclaimer`}
                     >
                       These citations are generated from a variety of data sources.
                       Remember to check citation format and content for accuracy before including them in your work.
@@ -134,7 +139,7 @@ const CitationAction = ({ datastore, list, record, setActive, setAlert, viewType
                     </p>
                     <button
                       onClick={() => {
-                        return handleCopy(citationOption.id);
+                        return handleCopy(id);
                       }}
                       className='btn btn--primary'
                     >
@@ -153,12 +158,7 @@ const CitationAction = ({ datastore, list, record, setActive, setAlert, viewType
 };
 
 CitationAction.propTypes = {
-  datastore: PropTypes.shape({
-    uid: PropTypes.string.isRequired
-  }).isRequired,
-  list: PropTypes.arrayOf(PropTypes.shape({
-    uid: PropTypes.string.isRequired
-  })),
+  datastoreUid: PropTypes.string,
   record: PropTypes.shape({
     uid: PropTypes.string.isRequired
   }),

diff --git a/src/modules/lists/components/List/index.js b/src/modules/lists/components/List/index.js
@@ -8,20 +8,18 @@ import { Record } from '../../../records';
 import { setA11yMessage as setA11yMessageAction } from '../../../a11y';
 import { useLocation } from 'react-router-dom';
 
-const List = (props) => {
-  const list = useSelector((state) => {
-    return state.lists[props.currentDatastore];
+const List = ({ activeDatastore, currentDatastore }) => {
+  const { [currentDatastore]: list = [] } = useSelector((state) => {
+    return state.lists || {};
   });
   const [active, setActive] = useState('');
   const dispatch = useDispatch();
   const { search } = useLocation();
   const setA11yMessage = (message) => {
     return dispatch(setA11yMessageAction(message));
   };
-  const { activeDatastore } = props;
   const { name, slug, uid } = activeDatastore;
-  const tempList = list || [];
-  const listLength = tempList.length;
+  const listLength = list.length;
   const to = `/${slug}${search}`;
 
   return (
@@ -58,19 +56,10 @@ const List = (props) => {
               <section className='lists-section'>
                 <h2 className='lists-actions-heading u-display-inline-block u-margin-right-1 u-margin-bottom-none'>Actions</h2>
                 <span className='text-small'>Select what to do with this list.</span>
-                <ActionsList {...props} setActive={setActive} active={active} prejudice={prejudice.instance} datastore={activeDatastore} />
+                <ActionsList {...{ active, datastore: activeDatastore, prejudice: prejudice.instance, setActive }} />
               </section>
-              {tempList.map((record, index) => {
-                return (
-                  <Record
-                    record={record}
-                    datastoreUid={uid}
-                    key={index}
-                    searchQuery={search}
-                    type='medium'
-                    list={tempList}
-                  />
-                );
+              {list.map((record, index) => {
+                return <Record key={index} {...{ datastoreUid: uid, list, record }} />;
               }
               )}
             </>
@@ -86,8 +75,7 @@ const List = (props) => {
 
 List.propTypes = {
   activeDatastore: PropTypes.object,
-  currentDatastore: PropTypes.string,
-  setA11yMessage: PropTypes.func
+  currentDatastore: PropTypes.string
 };
 
 export default List;