Converting Link components to Anchor. Converting class components…

… to functional.
mlibrary · Sep 27, 2023 · a3cc655 · a3cc655
1 parent 986505c
commit a3cc655
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 386 deletions.
diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
@@ -1,8 +1,6 @@
-/** @jsxImportSource @emotion/react */
 import React from 'react';
 import { useSelector, connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-// import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Icon, Button } from '../../../reusable';
 import getFilters from './getFilters';
@@ -133,7 +131,8 @@ class FiltersContainer extends React.Component {
         <Button
           style={{ marginTop: '1rem' }}
           type='submit'
-        ><Icon icon='search' size={24} /> Advanced Search
+        >
+          <Icon icon='search' size={24} /> Advanced Search
         </Button>
       </>
     );
@@ -149,12 +148,6 @@ FiltersContainer.propTypes = {
   ])
 };
 
-function mapDispatchToProps (dispatch) {
-  return bindActionCreators({
-    setAdvancedFilter
-  }, dispatch);
-}
-
 function ActiveAdvancedFilters (datastore) {
   const currentDatastore = datastore.datastore.uid;
   const { advanced } = useSelector((state) => {
@@ -201,104 +194,47 @@ function ActiveAdvancedFilters (datastore) {
   return (
     <section aria-label='active-filters'>
       <div
-        css={{
+        style={{
           display: 'flex',
           flexWrap: 'wrap',
           gap: '0.25em'
         }}
       >
         <h2
           id='active-filters'
-          css={{
+          className='u-margin-top-none'
+          style={{
             fontSize: '1rem',
-            marginTop: '0',
             marginBottom: SPACING.XS
           }}
         >
           Active filters
         </h2>
         <span
-          css={{
+          style={{
             color: COLORS.neutral['300'],
             paddingRight: '0.5em'
           }}
         >
           ({items.length})
         </span>
-        {/* {items.length > 1 &&
-          <Link
-            to={location.href.replace(location.origin, '')}
-            css={{
-              display: 'inline-block',
-              textDecoration: 'underline',
-              color: COLORS.neutral['300']
-            }}
-          >
-            Clear all active filters
-          </Link>} */}
       </div>
 
-      <p
-        className='font-small'
-        css={{
-          marginTop: '0'
-        }}
-      >
+      <p className='font-small u-margin-top-none'>
         Unselect active filters through the options below.
       </p>
 
       <ul
-        css={{
-          // display: 'flex',
-          // flexWrap: 'wrap',
-          // gap: SPACING.XS,
-          // margin: 0,
-          // marginTop: SPACING.XS,
-          // listStyle: 'none'
+        style={{
           fontSize: '0.9rem',
           marginLeft: '2.5rem',
           marginTop: '0'
         }}
       >
         {items.map((item, i) => {
           return (
-            <li
-              key={i + item.group + item.value}
-              css={{
-                // flex: '1 1 100%',
-                // maxWidth: `calc(100% - ${SPACING.XS})%`,
-                // [MEDIA_QUERIES.LARGESCREEN]: {
-                //   maxWidth: `calc(50% - ${SPACING.XS})`
-                // },
-                // [MEDIA_QUERIES.XLSCREEN]: {
-                //   maxWidth: `calc(33% - ${SPACING.XS})`
-                // }
-              }}
-            >
-              <div
-                css={{
-                  // alignItems: 'center',
-                  // color: COLORS.green['500'],
-                  // background: COLORS.green['100'],
-                  // border: `solid 1px ${COLORS.green['200']}`,
-                  // borderRadius: '4px',
-                  // display: 'flex',
-                  // gap: '0.25em',
-                  // height: '100%',
-                  // justifyContent: 'space-between',
-                  // padding: `${SPACING.XS} ${SPACING.S}`,
-                  // textAlign: 'left',
-                  // width: '100%'
-                  // ':hover': {
-                  //   border: `solid 1px ${COLORS.green['400']}`,
-                  //   textDecoration: 'underline'
-                  // }
-                }}
-                kind='secondary'
-              >
-                <span><span css={{ fontWeight: 600 }}>{typeof filterGroups[item.group] !== 'object' ? titleCase(item.group) : filterGroups[item.group].name}:</span> {item.value}</span>
-                {/* <Icon icon='close' /> */}
-              </div>
+            <li key={i + item.group + item.value}>
+              <span className='strong'>{typeof filterGroups[item.group] !== 'object' ? titleCase(item.group) : filterGroups[item.group].name}:</span> {item.value}
             </li>
           );
         })}
@@ -308,16 +244,18 @@ function ActiveAdvancedFilters (datastore) {
 }
 
 function mapStateToProps (state, props) {
-  const {
-    datastore
-  } = props;
-
   return {
     filters: getFilters({
-      filterGroups: state.advanced[datastore.uid].filters,
-      activeFilters: state.advanced[datastore.uid].activeFilters
+      filterGroups: state.advanced[props.datastore.uid].filters,
+      activeFilters: state.advanced[props.datastore.uid].activeFilters
     })
   };
 }
 
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    setAdvancedFilter
+  }, dispatch);
+}
+
 export default connect(mapStateToProps, mapDispatchToProps)(FiltersContainer);
diff --git a/src/modules/browse/components/BrowseAtoZ/index.js b/src/modules/browse/components/BrowseAtoZ/index.js
@@ -1,18 +1,11 @@
 import React from 'react';
-import { withRouter, Link } from 'react-router-dom';
 import qs from 'qs';
+import { Anchor } from '../../../reusable';
 import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
 
-class BrowseAtoZ extends React.Component {
-  state = {
-    startsWith: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
-  };
-
-  createBrowseTo = ({ query, filter }) => {
-    const {
-      match
-    } = this.props;
-
+function BrowseAtoZ (props) {
+  const createBrowseTo = ({ query, filter }) => {
     const queryString = qs.stringify({
       query,
       filter,
@@ -23,50 +16,28 @@ class BrowseAtoZ extends React.Component {
       allowDots: true,
       format: 'RFC1738'
     });
-
-    return `/${match.params.datastoreSlug}?${queryString}`;
+    return `/${props.match.params.datastoreSlug}?${queryString}`;
   };
 
-  render () {
-    return (
-      <section className='browse'>
-        <h2 className='heading-large' style={{ marginTop: '0' }}>Titles A-Z</h2>
-        <ul className='browse-list'>
-          {this.state.startsWith.map((character, key) => {
-            return (
-              <li className='browse-item' key={key}>
-                <Link
-                  className='browse-button'
-                  to={this.createBrowseTo({
-                    query: 'browse_starts_with:' + character
-                  })}
-                >{character}
-                </Link>
-              </li>
-            );
-          })}
-          <li className='browse-item'>
-            <Link
-              className='browse-button'
-              to={this.createBrowseTo({
-                query: 'browse_starts_with:0-9'
-              })}
-            >0-9
-            </Link>
-          </li>
-          <li className='browse-item'>
-            <Link
-              className='browse-button'
-              to={this.createBrowseTo({
-                query: 'browse_starts_with:Other'
-              })}
-            >Other
-            </Link>
-          </li>
-        </ul>
-      </section>
-    );
-  }
+  return (
+    <section className='browse'>
+      <h2 className='heading-large' style={{ marginTop: '0' }}>Titles A-Z</h2>
+      <ul className='browse-list'>
+        {['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0-9', 'Other'].map((character, key) => {
+          return (
+            <li className='browse-item' key={key}>
+              <Anchor
+                className='browse-button'
+                to={createBrowseTo({ query: 'browse_starts_with:' + character })}
+              >
+                {character}
+              </Anchor>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
 }
 
 BrowseAtoZ.propTypes = {

diff --git a/src/modules/core/components/TrimLink/index.js b/src/modules/core/components/TrimLink/index.js
diff --git a/src/modules/core/index.js b/src/modules/core/index.js
@@ -5,7 +5,6 @@ import Loading from './components/Loading';
 import Icon from './components/Icon';
 import ShowAllChildren from './components/ShowAllChildren';
 import TrimString from './components/TrimString';
-import TrimLink from './components/TrimLink';
 import Multiselect from './components/Multiselect';
 import DateRangeInput from './components/DateRangeInput';
 import Checkbox from './components/Checkbox';
@@ -24,7 +23,6 @@ export {
   Icon,
   ShowAllChildren,
   TrimString,
-  TrimLink,
   Multiselect,
   DateRangeInput,
   Checkbox,

diff --git a/src/modules/filters/components/CheckboxFilters/index.js b/src/modules/filters/components/CheckboxFilters/index.js
@@ -1,9 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Anchor, Icon } from '../../../reusable';
 import { SPACING, COLORS } from '../../../reusable/umich-lib-core-temp';
-import Icon from '../../../reusable/components/Icon';
 import { getURLWithFilterRemoved, newSearch } from '../../utilities';
 import PropTypes from 'prop-types';
 
@@ -12,12 +11,10 @@ export default function CheckBoxFiltersContainer () {
     return state;
   });
   const { order, groups } = filters;
-
   const checkboxes = order.reduce((acc, id) => {
     if (groups[id] && groups[id].type === 'checkbox') {
       acc = acc.concat(groups[id]);
     }
-
     return acc;
   }, []);
 
@@ -70,7 +67,7 @@ CheckboxFilterContainer.propTypes = {
 
 function CheckboxFilter ({ label, isChecked, url }) {
   return (
-    <Link
+    <Anchor
       to={url}
       css={{
         display: 'flex',
@@ -98,7 +95,7 @@ function CheckboxFilter ({ label, isChecked, url }) {
         />
       </span>
       {label}
-    </Link>
+    </Anchor>
   );
 }