Merge pull request #443 from mlibrary/class-component-conversions-part-3

Class component conversions part 3
mlibrary · Mar 21, 2024 · 42f6d19 · 42f6d19
2 parents 059a72a + 999bf63
commit 42f6d19
Show file tree

Hide file tree

Showing 26 changed files with 294 additions and 622 deletions.
diff --git a/src/modules/advanced/components/AdvancedSearchContainer/index.js b/src/modules/advanced/components/AdvancedSearchContainer/index.js
@@ -17,7 +17,7 @@ function AdvancedSearchContainer () {
   const activeDatastore = datastores[activeDatastoreIndex];
 
   return (
-    <div className='container container-narrow margin-top__m'>
+    <div className='container container-narrow' style={{ marginTop: 'var(--search-spacing-m)' }}>
       <Breadcrumb
         items={[
           { text: `${activeDatastore.name}`, to: `/${activeDatastore.slug}${document.location.search}` },

diff --git a/src/modules/core/components/DetailsList/index.js b/src/modules/core/components/DetailsList/index.js
diff --git a/src/modules/core/index.js b/src/modules/core/index.js
@@ -1,6 +1,5 @@
 import Checkbox from './components/Checkbox';
 import DateRangeInput from './components/DateRangeInput';
-import DetailsList from './components/DetailsList';
 import Footer from './components/Footer';
 import Icon from './components/Icon';
 import MultipleChoice from './components/MultipleChoice';
@@ -12,7 +11,6 @@ import TrimString from './components/TrimString';
 export {
   Checkbox,
   DateRangeInput,
-  DetailsList,
   Footer,
   Icon,
   MultipleChoice,

diff --git a/src/modules/getthis/components/GetThisOptionList/index.js b/src/modules/getthis/components/GetThisOptionList/index.js
diff --git a/src/modules/getthis/components/GetThisOptions/index.js b/src/modules/getthis/components/GetThisOptions/index.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Alert } from '../../../reusable';
+import GetThisOption from '../GetThisOption';
+import { Authentication } from '../../../profile';
+import PropTypes from 'prop-types';
+
+function GetThisOptions ({ record }) {
+  if (!record?.getthis) {
+    return (
+      <Alert>
+        <p>Loading holding options...</p>
+      </Alert>
+    );
+  }
+
+  const { status, options } = record.getthis;
+
+  if (status === 'Not logged in') {
+    return (
+      <Authentication button>
+        <span className='strong'>Log in</span> to view request options
+      </Authentication>
+    );
+  }
+
+  if (status === 'Success') {
+    return options?.length
+      ? (
+        <>
+          {options.map((option, index) => {
+            return (
+              <GetThisOption option={option} key={index} />
+            );
+          })}
+        </>
+        )
+      : (
+        <Alert type='error'>
+          No options available.
+        </Alert>
+        );
+  }
+
+  return (
+    <Alert>
+      <p>Sorry, something unexpected happened.</p>
+      <p><span className='strong'>Status:</span> {status}</p>
+    </Alert>
+  );
+}
+
+GetThisOptions.propTypes = {
+  record: PropTypes.object.isRequired
+};
+
+export default GetThisOptions;
diff --git a/src/modules/getthis/components/GetThisPage/index.js b/src/modules/getthis/components/GetThisPage/index.js
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams, useLocation } from 'react-router-dom';
 import { requestRecord, requestGetThis } from '../../../pride';
-import { GetThisOptionList, GetThisRecord } from '../../../getthis';
+import { GetThisOptions, GetThisRecord } from '../../../getthis';
 import { Alert, Breadcrumb, H1 } from '../../../reusable';
 
 const GetThisPage = () => {
@@ -43,7 +43,12 @@ const GetThisPage = () => {
         : (
           <>
             <GetThisRecord barcode={barcode} />
-            <GetThisOptionList record={record} />
+            <section className='card get-this-section y-spacing'>
+              <h2 className='fieldset-label margin-top__none'>
+                How would you like to get this item?
+              </h2>
+              <GetThisOptions record={record} />
+            </section>
           </>
           )}
     </article>

diff --git a/src/modules/getthis/index.js b/src/modules/getthis/index.js
@@ -1,11 +1,11 @@
+import GetThisForm from './components/GetThisForm';
+import GetThisOptions from './components/GetThisOptions';
 import GetThisPage from './components/GetThisPage';
-import GetThisOptionList from './components/GetThisOptionList';
 import GetThisRecord from './components/GetThisRecord';
-import GetThisForm from './components/GetThisForm';
 
 export {
+  GetThisForm,
+  GetThisOptions,
   GetThisPage,
-  GetThisOptionList,
-  GetThisRecord,
-  GetThisForm
+  GetThisRecord
 };
diff --git a/src/modules/marc/components/MARCTable/index.js b/src/modules/marc/components/MARCTable/index.js
@@ -1,116 +1,72 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Leader = ({ marc }) => {
-  if (marc.leader) {
-    return (
-      <tr>
-        <td className='marc__field-name' colSpan='3'><abbr title='LEADER'>LDR</abbr></td>
-        <td>{marc.leader}</td>
-      </tr>
-    );
-  }
-
-  return null;
+const name = (field) => {
+  return Object.keys(field)[0];
 };
 
-Leader.propTypes = {
-  marc: PropTypes.object
-};
+const FieldValue = ({ field }) => {
+  const value = field[name(field)];
 
-const FieldName = ({ field }) => {
-  const name = Object.keys(field)[0];
+  if (typeof value === 'string') {
+    return value;
+  };
 
+  const subfields = value.subfields;
   return (
-    <td className='marc__field-name'>
-      {name}
-    </td>
+    <>
+      {subfields?.map((subfield, index) => {
+        const subfieldName = name(subfield);
+        return (
+          <span className='marc__subfield' key={index}>
+            <span className='strong'>|{subfieldName}</span> {subfield[subfieldName]}
+          </span>
+        );
+      })}
+    </>
   );
 };
 
-FieldName.propTypes = {
-  field: PropTypes.object
+FieldValue.propTypes = {
+  field: PropTypes.object.isRequired
 };
 
-const FieldIndicator = ({ field, ind }) => {
-  const name = Object.keys(field)[0];
-  const value = field[name];
-  const indicator = value[ind];
-
+function MARCTable ({ marc }) {
   return (
-    <td>{indicator}</td>
-  );
-};
-
-FieldIndicator.propTypes = {
-  field: PropTypes.object,
-  ind: PropTypes.string
-};
-
-const FieldValue = ({ field }) => {
-  const name = Object.keys(field)[0];
-  const value = field[name];
-
-  if (typeof value === 'string') {
-    return (
-      <td>
-        {field[name]}
-      </td>
-    );
-  }
-
-  if (typeof value === 'object') {
-    if (value.subfields) {
-      return (
-        <td>
-          {value.subfields.map((subfield, index) => {
-            const subfieldName = Object.keys(subfield)[0];
-
+    <div className='marc__container'>
+      <h2 className='marc__heading'>MARC Data</h2>
+      <table className='table marc__table'>
+        <tbody>
+          {marc.leader && (
+            <tr>
+              <td className='marc__field-name' colSpan='3'><abbr title='LEADER'>LDR</abbr></td>
+              <td>{marc.leader}</td>
+            </tr>
+          )}
+          {marc.fields.map((field, index) => {
+            const fieldName = name(field);
             return (
-              <span className='marc__subfield' key={index}><span className='strong'>|{subfieldName}</span> {subfield[subfieldName]}</span>
+              <tr key={index}>
+                <td className='marc__field-name'>
+                  {fieldName}
+                </td>
+                {['ind1', 'ind2'].map((indicator) => {
+                  return (
+                    <td key={`${indicator}-${index}`}>
+                      {field[fieldName][indicator]}
+                    </td>
+                  );
+                })}
+                <td>
+                  <FieldValue field={field} />
+                </td>
+              </tr>
             );
           })}
-        </td>
-      );
-    }
-  }
-
-  return (
-    <td>
-      temp
-    </td>
+        </tbody>
+      </table>
+    </div>
   );
-};
-
-FieldValue.propTypes = {
-  field: PropTypes.object
-};
-
-class MARCTable extends React.Component {
-  render () {
-    const { marc } = this.props;
-
-    return (
-      <div className='marc__container'>
-        <h2 className='marc__heading'>MARC Data</h2>
-        <table className='table marc__table'>
-          <tbody>
-            <Leader marc={marc} />
-            {marc.fields.map((field, index) => {
-              return (
-                <tr key={index}>
-                  <FieldName field={field} />
-                  <FieldIndicator field={field} ind='ind1' />
-                  <FieldIndicator field={field} ind='ind2' />
-                  <FieldValue field={field} />
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
 }
 
 MARCTable.propTypes = {