Moving useSelector into Metadata so the store is not access every…

… time `Description` is rendered.
mlibrary · Nov 22, 2024 · d9c4005 · d9c4005
1 parent c8b82d2
commit d9c4005
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/src/modules/metadata/components/Description/index.js b/src/modules/metadata/components/Description/index.js
@@ -4,15 +4,22 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { stringifySearch } from '../../../search';
 import { TrimString } from '../../../core';
-import { useSelector } from 'react-redux';
 
-const Description = ({ data, viewType }) => {
-  const { active: activeInstitution, defaultInstitution } = useSelector((state) => {
-    return state.institution;
-  });
-  const { active: activeDatastore, datastores } = useSelector((state) => {
-    return state.datastores;
-  });
+const Description = ({ activeDatastore, data, datastores, institution, viewType }) => {
+  if (Array.isArray(data)) {
+    return (
+      <ol className='list__unstyled'>
+        {data.map((datum, index) => {
+          return (
+            <li key={index}>
+              {index > 0 && <Icon icon='navigate_next' className='text-grey__light' />}
+              <Description activeDatastore={activeDatastore} data={datum} datastores={datastores} institution={institution} viewType={viewType} />
+            </li>
+          );
+        })}
+      </ol>
+    );
+  }
 
   const { browse, href, icon, search, text } = data;
   const searchScope = search?.scope || {};
@@ -26,7 +33,7 @@ const Description = ({ data, viewType }) => {
     const { scope, type, value } = search;
     anchorAttributes.to = `/${slug}?${stringifySearch({
       filter: type === 'filtered' ? { [scope]: value } : {},
-      library: uid === 'mirlyn' ? (activeInstitution || defaultInstitution) : {},
+      library: uid === 'mirlyn' ? institution : '',
       query: type === 'fielded' ? `${scope}:${value}` : value
     })}`;
   }
@@ -60,7 +67,13 @@ const Description = ({ data, viewType }) => {
 };
 
 Description.propTypes = {
-  data: PropTypes.object,
+  activeDatastore: PropTypes.string,
+  data: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object
+  ]),
+  datastores: PropTypes.array,
+  institution: PropTypes.string,
   viewType: PropTypes.string
 };
 

diff --git a/src/modules/metadata/components/Metadata/index.js b/src/modules/metadata/components/Metadata/index.js
@@ -3,14 +3,23 @@ import {
   ContextProvider,
   Expandable,
   ExpandableButton,
-  ExpandableChildren,
-  Icon
+  ExpandableChildren
 } from '../../../reusable';
 import Description from '../Description';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useSelector } from 'react-redux';
 
 const Metadata = ({ metadata = {} }) => {
+  const { active: activeInstitution, defaultInstitution } = useSelector((state) => {
+    return state.institution;
+  });
+  const { active: activeDatastore, datastores } = useSelector((state) => {
+    return state.datastores;
+  });
+
+  const institution = activeInstitution || defaultInstitution;
+
   return (
     <ContextProvider
       render={({ viewType }) => {
@@ -40,20 +49,7 @@ const Metadata = ({ metadata = {} }) => {
                       {description.map((descriptor, index) => {
                         return (
                           <dd key={index}>
-                            {Array.isArray(descriptor)
-                              ? (
-                                  <ol className='list__unstyled'>
-                                    {descriptor.map((descript, number) => {
-                                      return (
-                                        <li key={number}>
-                                          {number > 0 && <Icon icon='navigate_next' className='text-grey__light' />}
-                                          <Description data={descript} />
-                                        </li>
-                                      );
-                                    })}
-                                  </ol>
-                                )
-                              : <Description data={descriptor} viewType={viewType} />}
+                            <Description activeDatastore={activeDatastore} data={descriptor} datastores={datastores} institution={institution} viewType={viewType} />
                           </dd>
                         );
                       })}