Merge pull request #436 from mlibrary/history-react-router-dom-update…

…-part-1

`history` and `react-router-update` - Part 1

src/modules/browse/components/BrowseAtoZ/index.js

@@ -1,22 +1,25 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import qs from 'qs';
 import { Anchor } from '../../../reusable';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 
-function BrowseAtoZ (props) {
+function BrowseAtoZ () {
+  const { datastoreSlug } = useParams();
   const createBrowseTo = ({ query, filter }) => {
-    const queryString = qs.stringify({
-      query,
-      filter,
-      sort: 'title_asc'
-    }, {
-      arrayFormat: 'repeat',
-      encodeValuesOnly: true,
-      allowDots: true,
-      format: 'RFC1738'
-    });
-    return `/${props.match.params.datastoreSlug}?${queryString}`;
+    const queryString = qs.stringify(
+      {
+        query,
+        filter,
+        sort: 'title_asc'
+      },
+      {
+        arrayFormat: 'repeat',
+        encodeValuesOnly: true,
+        allowDots: true,
+        format: 'RFC1738'
+      }
+    );
+    return `/${datastoreSlug}?${queryString}`;
   };
 
   return (
@@ -40,8 +43,4 @@ function BrowseAtoZ (props) {
   );
 }
 
-BrowseAtoZ.propTypes = {
-  match: PropTypes.object
-};
-
-export default withRouter(BrowseAtoZ);
+export default BrowseAtoZ;

src/modules/browse/components/BrowseByFilters/index.js

@@ -1,115 +1,84 @@
 import React from 'react';
 import { Anchor } from '../../../reusable';
-import { withRouter } from 'react-router-dom';
-import qs from 'qs';
 import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+import qs from 'qs';
 
-function BrowseFilter (props) {
-  const { browserFilterTo, filter } = props;
-
-  if (filter.value) {
-    return (
-      <Anchor
-        to={browserFilterTo(filter.value)}
-        className='browse-filter-link'
-      >
-        <span className='browse-filter-link__text'>{filter.name}</span>
-        <span className='browse-filter-link__count'>({filter.count})</span>
-      </Anchor>
-    );
-  }
-
-  return (
-    <h3 className='heading-medium' style={{ marginTop: '0' }}>{filter.name}</h3>
-  );
-}
-
-BrowseFilter.propTypes = {
-  filter: PropTypes.object,
-  browserFilterTo: PropTypes.func
-};
-
-function Node (props) {
+function NestedList ({ filter, browserFilterTo }) {
   return (
-    <li key={props.node.name}>
-      <BrowseFilter
-        filter={props.node}
-        browserFilterTo={props.browserFilterTo}
-      />
-      {props.children &&
+    <li>
+      {filter.value
+        ? (
+          <Anchor to={browserFilterTo(filter.value)} className='browse-filter-link'>
+            <span className='browse-filter-link__text'>{filter.name}</span>
+            <span className='browse-filter-link__count'>({filter.count})</span>
+          </Anchor>
+          )
+        : (
+          <h3 className='heading-medium'>{filter.name}</h3>
+          )}
+      {filter.children && (
         <ul>
-          {props.children.map((childnode, key) => {
+          {filter.children.map((child) => {
             return (
-              <Node
-                key={key}
-                node={childnode}
-                browserFilterTo={props.browserFilterTo}
-              >
-                {childnode.children}
-              </Node>
+              <NestedList
+                key={child.name}
+                filter={child}
+                browserFilterTo={browserFilterTo}
+              />
             );
           })}
-        </ul>}
+        </ul>
+      )}
     </li>
   );
 }
 
-Node.propTypes = {
-  children: PropTypes.array,
-  browserFilterTo: PropTypes.func,
-  node: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.object
-  ])
+NestedList.propTypes = {
+  browserFilterTo: PropTypes.func.isRequired,
+  filter: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string,
+    count: PropTypes.number,
+    children: PropTypes.array
+  }).isRequired
 };
 
-function NestedList (props) {
-  /*
-    loop through the items array and create a new component for each, passing
-    the current person (id and name) and its children (items.children) as props
-  */
-  return (
-    <ul className='nested-list'>
-      {props.items.map((item, key) => {
-        return (
-          <Node key={key} node={item} browserFilterTo={props.browserFilterTo}>
-            {item.children}
-          </Node>
-        );
-      })}
-    </ul>
-  );
-}
+function BrowseByFilters ({ filters }) {
+  const { datastoreSlug } = useParams();
 
-NestedList.propTypes = {
-  browserFilterTo: PropTypes.func,
-  items: PropTypes.array
-};
+  const browserFilterTo = (uid) => {
+    return (value) => {
+      const queryString = qs.stringify({
+        filter: { [uid]: value },
+        sort: 'title_asc'
+      }, {
+        arrayFormat: 'repeat',
+        encodeValuesOnly: true,
+        allowDots: true,
+        format: 'RFC1738'
+      });
+      return `/${datastoreSlug}?${queryString}`;
+    };
+  };
 
-function BrowseByFilters (props) {
   return (
     <>
-      {Object.keys(props.filters).map((uid) => {
-        const name = props.filters[uid].name;
-
+      {Object.keys(filters).map((uid) => {
         return (
           <section key={uid} className='browse u-margin-top-1'>
-            <h2 className='heading-large' style={{ marginTop: '0' }}>{name}</h2>
-            <NestedList
-              items={props.filters[uid].filters}
-              browserFilterTo={(value) => {
-                const queryString = qs.stringify({
-                  filter: { [uid]: value },
-                  sort: 'title_asc'
-                }, {
-                  arrayFormat: 'repeat',
-                  encodeValuesOnly: true,
-                  allowDots: true,
-                  format: 'RFC1738'
-                });
-                return `/${props.match.params.datastoreSlug}?${queryString}`;
-              }}
-            />
+            <h2 className='heading-large u-margin-top-none'>{filters[uid].name}</h2>
+            <ul className='nested-list'>
+              {filters[uid].filters.map((filter) => {
+                return (
+                  <NestedList
+                    key={filter.name}
+                    filter={filter}
+                    browserFilterTo={browserFilterTo(uid)}
+                  />
+                );
+              })}
+            </ul>
           </section>
         );
       })}
@@ -118,8 +87,10 @@ function BrowseByFilters (props) {
 }
 
 BrowseByFilters.propTypes = {
-  match: PropTypes.object,
-  filters: PropTypes.object
+  filters: PropTypes.objectOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    filters: PropTypes.array.isRequired
+  })).isRequired
 };
 
-export default withRouter(BrowseByFilters);
+export default BrowseByFilters;

src/modules/getthis/components/GetThisPage/index.js

@@ -6,39 +6,6 @@ import { GetThisOptionList, GetThisRecord } from '../../../getthis';
 import { Breadcrumb } from '../../../reusable';
 import PropTypes from 'prop-types';
 
-class GetThisPageTemplate extends React.Component {
-  render () {
-    const { recordUid } = this.props;
-
-    return (
-      <article className='container container-narrow'>
-        <div className='u-margin-top-1'>
-          <Breadcrumb
-            items={[
-              { text: 'Catalog', to: `/catalog${document.location.search}` },
-              { text: 'Record', to: `/catalog/record/${recordUid}${document.location.search}` },
-              { text: 'Get This' }
-            ]}
-          />
-        </div>
-        <section>
-          <h1 className='heading-xlarge' id='maincontent' tabIndex='-1'>Get This</h1>
-        </section>
-
-        {this.props.children}
-      </article>
-    );
-  }
-}
-
-GetThisPageTemplate.propTypes = {
-  recordUid: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ])
-};
-
 class GetThisPage extends React.Component {
   componentDidMount () {
     const { recordUid, barcode } = this.props.match.params;
@@ -60,21 +27,37 @@ class GetThisPage extends React.Component {
     const { record } = this.props;
     const { barcode, recordUid } = this.props.match.params;
 
-    if (record && record.fields && record.fields.length === 0 && record.names.length === 0) {
-      return (
-        <GetThisPageTemplate>
-          <div className='alert'>
-            <p><span className='strong'>Error:</span> Unable to find this record.</p>
-          </div>
-        </GetThisPageTemplate>
-      );
-    }
-
     return (
-      <GetThisPageTemplate recordUid={recordUid}>
-        <GetThisRecord barcode={barcode} />
-        <GetThisOptionList record={record} />
-      </GetThisPageTemplate>
+      <article className='container container-narrow'>
+        <div className='u-margin-top-1'>
+          <Breadcrumb
+            items={[
+              { text: 'Catalog', to: `/catalog${document.location.search}` },
+              { text: 'Record', to: `/catalog/record/${recordUid}${document.location.search}` },
+              { text: 'Get This' }
+            ]}
+          />
+        </div>
+        <section>
+          <h1 className='heading-xlarge' id='maincontent' tabIndex='-1'>Get This</h1>
+        </section>
+        {(() => {
+          if (record?.fields?.length === 0 && record?.names?.length === 0) {
+            return (
+              <div className='alert'>
+                <p><span className='strong'>Error:</span> Unable to find this record.</p>
+              </div>
+            );
+          }
+
+          return (
+            <>
+              <GetThisRecord barcode={barcode} />
+              <GetThisOptionList record={record} />
+            </>
+          );
+        })()}
+      </article>
     );
   }
 }

src/modules/lists/components/GoToList/index.js

@@ -1,25 +1,26 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { Anchor } from '../../../reusable';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 
-function GoToList (props) {
-  if (!props.list) return null;
+function GoToList ({ list, datastore }) {
+  const location = useLocation();
+
+  if (!list) return null;
 
   return (
     <section className='lists-link-container lists-link' aria-live='polite'>
       <div className='list-info'>
-        <p className='lists-content'>Go to <Anchor to={`/${props.datastore.slug}/list${props.location.search}`}>My Temporary {props.datastore.name} List</Anchor> to email, text, and export citations.</p>
+        <p className='lists-content'>Go to <Anchor to={`/${datastore.slug}/list${location.search}`}>My Temporary {datastore.name} List</Anchor> to email, text, and export citations.</p>
       </div>
-      <p className='lists-count-tag'><span className='strong'>{props.list?.length || 0}</span> in list</p>
+      <p className='lists-count-tag'><span className='strong'>{list.length || 0}</span> in list</p>
     </section>
   );
 }
 
 GoToList.propTypes = {
-  location: PropTypes.object,
   list: PropTypes.array,
   datastore: PropTypes.object
 };
 
-export default withRouter(GoToList);
+export default GoToList;