Merge pull request #506 from mlibrary/LIBSEARCH-968-articles-results-…

…in-everything-results-view-have-no-truncation-on-author-data-displayed

[LIBSEARCH-968] Articles results in Everything results view have no truncation on author data displayed

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,30 +2,28 @@ import { ContextProvider, Metadata } from '../../../reusable';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const RecordMetadata = ({ kind, 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} kind={kind} />;
+
+        return <Metadata {...{ data: data[viewType] || metadata.full, viewType }} />;
       }}
     />
   );
 };
 
 RecordMetadata.propTypes = {
-  kind: PropTypes.string,
-  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 }} kind='condensed' />
-      <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;

src/modules/reusable/components/Metadata/index.js

@@ -10,6 +10,7 @@ import { BrowseLink } from '../../../browse';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { stringifySearch } from '../../../search';
+import { TrimString } from '../../../core';
 import { useSelector } from 'react-redux';
 
 const DescriptionItem = ({ browse, children, href, search }) => {
@@ -63,7 +64,7 @@ DescriptionItem.propTypes = {
   search: PropTypes.object
 };
 
-const Description = ({ data }) => {
+const Description = ({ data, viewType }) => {
   if (Array.isArray(data)) {
     return (
       <ol className='list__unstyled'>
@@ -79,7 +80,7 @@ const Description = ({ data }) => {
     );
   }
 
-  const { icon, image, text } = data;
+  const { icon, image, search: { scope } = {}, text } = data;
 
   return (
     <DescriptionItem {...data}>
@@ -91,7 +92,7 @@ const Description = ({ data }) => {
             className='margin-right__2xs text-grey__light'
           />
         )}
-        {text}
+        {scope === 'author' && viewType !== 'Full' ? <TrimString {...{ string: text, trimLength: 64 }} /> : text}
       </span>
       {image && (
         <img
@@ -108,26 +109,27 @@ Description.propTypes = {
   data: PropTypes.oneOfType([
     PropTypes.array,
     PropTypes.object
-  ])
+  ]),
+  viewType: PropTypes.string
 };
 
-export default function Metadata ({ data, kind }) {
+export default function Metadata ({ data, viewType }) {
   return (
     <dl className='flex__responsive metadata-list'>
       {data.map((datum, datumIndex) => {
         const { description, term, termPlural } = datum;
         const isExpandable = description.length > 5;
         return (
-          <div className={kind === 'condensed' ? '' : 'metadata-list-item'} key={datumIndex}>
+          <div className={viewType === 'Preview' ? '' : 'metadata-list-item'} key={datumIndex}>
             <Expandable>
-              <dt className={kind === 'condensed' ? 'visually-hidden' : ''}>
+              <dt className={viewType === 'Preview' ? 'visually-hidden' : ''}>
                 {term}
               </dt>
               <ExpandableChildren show={isExpandable ? 4 : description.length}>
                 {description.map((descriptor, index) => {
                   return (
                     <dd key={index}>
-                      <Description data={descriptor} />
+                      <Description data={descriptor} viewType={viewType} />
                     </dd>
                   );
                 })}
@@ -143,5 +145,5 @@ export default function Metadata ({ data, kind }) {
 
 Metadata.propTypes = {
   data: PropTypes.array,
-  kind: PropTypes.string
+  viewType: PropTypes.string
 };