Reducing the amount of data being pulled into components, from the fu…

…ll `record` to just certain properties.

src/modules/records/components/RecommendedResource/index.js

@@ -1,16 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const RecommendedResource = ({ record }) => {
-  const isRecommended = record.fields.some((item) => {
-    return item.uid === 'highly_recommended';
+const RecommendedResource = ({ fields = [] }) => {
+  const isRecommended = fields.some(({ uid }) => {
+    return uid === 'highly_recommended';
   });
 
   return isRecommended ? <span className='recommended-resource-tag strong'>Recommended</span> : null;
 };
 
 RecommendedResource.propTypes = {
-  record: PropTypes.object
+  fields: PropTypes.array
 };
 
 export default RecommendedResource;

src/modules/records/components/Record/index.js

@@ -62,7 +62,7 @@ const Header = ({ datastoreUid, record }) => {
           </span>
         );
       })}
-      <RecommendedResource {...{ record }} />
+      <RecommendedResource {...{ fields: record.fields }} />
     </h3>
   );
 };
@@ -84,8 +84,8 @@ const Record = ({ datastoreUid, list, record }) => {
           <Header {...{ datastoreUid, record }} />
           <AddToListButton item={record} />
         </div>
-        <Zotero {...{ record }} />
-        <RecordMetadata {...{ record }} />
+        <Zotero {...{ fields: record.fields }} />
+        <RecordMetadata {...{ metadata: record.metadata }} />
       </div>
 
       <div className='record-holders-container'>

src/modules/records/components/RecordFull/index.js

@@ -151,14 +151,14 @@ const FullRecord = () => {
                   <TrimString string={title} expandable key={index} />
                 );
               })}
-              <RecommendedResource record={record} />
+              <RecommendedResource fields={record.fields} />
             </H1>
             <AddToListButton item={record} />
           </div>
           <RecordDescription record={record} />
-          <Zotero record={record} />
+          <Zotero fields={record.fields} />
           <h2 className='full-record__record-info'>Record info:</h2>
-          <RecordMetadata record={record} />
+          <RecordMetadata metadata={record.metadata} />
           {inDatastore && (
             <p>
               The University of Michigan Library aims to describe its collections in a way that respects the people and communities who create, use, and are represented in them. We encourage you to

src/modules/records/components/RecordMetadata/index.js

@@ -2,29 +2,28 @@ import { ContextProvider, Metadata } from '../../../reusable';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const RecordMetadata = ({ record }) => {
-  const { metadata } = record;
-
-  if (!metadata) {
-    return null;
-  }
-
+const RecordMetadata = ({ metadata = {} }) => {
   return (
     <ContextProvider
-      render={(context) => {
+      render={({ viewType }) => {
+        if (!metadata || Object.keys(metadata).length === 0) {
+          return null;
+        }
+
         const data = {
           Full: metadata.full,
           Medium: metadata.medium,
           Preview: metadata.preview
         };
-        return <Metadata data={data[context.viewType] || metadata.full} viewType={context.viewType} />;
+
+        return <Metadata {...{ data: data[viewType] || metadata.full, viewType }} />;
       }}
     />
   );
 };
 
 RecordMetadata.propTypes = {
-  record: PropTypes.object
+  metadata: PropTypes.object
 };
 
 export default RecordMetadata;

src/modules/records/components/RecordPreview/index.js

@@ -53,7 +53,7 @@ const Header = ({ datastoreUid, record, searchQuery }) => {
             </Anchor>
           );
         })}
-        <RecommendedResource record={record} />
+        <RecommendedResource fields={record.fields} />
       </h3>
     </>
   );
@@ -109,8 +109,8 @@ const RecordPreview = ({ datastoreUid, record, searchQuery }) => {
   return (
     <article className='record-preview'>
       <Header {...{ datastoreUid, record, searchQuery }} />
-      <RecordMetadata {...{ record }} />
-      <Zotero {...{ record }} />
+      <RecordMetadata {...{ metadata: record.metadata }} />
+      <Zotero {...{ fields: record.fields }} />
       <Footer {...{ record, searchQuery }} />
     </article>
   );

src/modules/records/components/Zotero/index.js

@@ -20,9 +20,9 @@ import PropTypes from 'prop-types';
  *
  * And tell Zotero COinS was created.
  */
-const Zotero = ({ record }) => {
+const Zotero = ({ fields = [] }) => {
   const [z3988, setZ3988] = useState(null);
-  const [value] = getFieldValue(getField(record.fields, 'z3988'));
+  const [value] = getFieldValue(getField(fields, 'z3988'));
 
   useEffect(() => {
     setZ3988(value);
@@ -46,7 +46,7 @@ const Zotero = ({ record }) => {
 };
 
 Zotero.propTypes = {
-  record: PropTypes.object
+  fields: PropTypes.array
 };
 
 export default Zotero;