Merge pull request #396 from mlibrary/LIBSEARCH-899-convert-choose-af…

…filiation-into-a-select-dropdown-filter-option

[LIBSEARCH-899] Convert ChooseAffiliation into a select dropdown filter option.

package.json

@@ -32,7 +32,6 @@
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-autosuggest": "^10.1.0",
-    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-modal": "^3.16.1",

src/modules/affiliation/components/ChooseAffiliation/index.js

@@ -0,0 +1,65 @@
+import { React, useState } from 'react';
+
+const initialAffiliationState = {
+  active: undefined,
+  defaultAffiliation: 'aa',
+  affiliationOptions: {
+    aa: 'Ann Arbor',
+    flint: 'Flint'
+  }
+};
+
+function ChooseAffiliation () {
+  let defaultAffiliation = initialAffiliationState.defaultAffiliation;
+  // Set default affiliation if query parameter exists
+  const urlParams = new URLSearchParams(window.location.search);
+  const affiliationParam = urlParams.get('affiliation');
+  if (affiliationParam) {
+    defaultAffiliation = affiliationParam;
+    // Set localStorage
+    localStorage.setItem('affiliation', affiliationParam);
+  }
+  const affiliationLocalStorage = localStorage.getItem('affiliation');
+  // Set default affiliation if localStorage exists
+  if (affiliationLocalStorage) {
+    defaultAffiliation = affiliationLocalStorage;
+  }
+  const [affiliation, setAffiliation] = useState(defaultAffiliation);
+  const onAffiliationChange = (event) => {
+    const value = event.target.value;
+    setAffiliation(value);
+    urlParams.set('affiliation', value);
+    window.location.href = `${window.location.origin}${window.location.pathname}?${urlParams.toString()}`;
+  };
+
+  return (
+    <fieldset className='institution-select-container'>
+      <legend className='visually-hidden'>Choose Affiliation</legend>
+      <label
+        className='institution-select-label institution-select-label-text'
+        htmlFor='choose-affiliation'
+      >
+        Affiliation
+      </label>
+      <select
+        className='dropdown'
+        id='choose-affiliation'
+        autoComplete='off'
+        value={affiliation}
+        onChange={onAffiliationChange}
+        aria-describedby='affiliation-description'
+      >
+        {Object.keys(initialAffiliationState.affiliationOptions).map((affiliationOption) => {
+          return (
+            <option value={affiliationOption} key={`affiliation-${affiliationOption}`}>
+              {initialAffiliationState.affiliationOptions[affiliationOption]}
+            </option>
+          );
+        })}
+      </select>
+      <p className='font-small' id='affiliation-description'>Selecting an affiliation helps us connect you to available online materials licensed for your campus. You can still use Library Search if you're not affiliated with either campus.</p>
+    </fieldset>
+  );
+}
+
+export { initialAffiliationState, ChooseAffiliation };

src/modules/affiliation/index.js

@@ -1,13 +1,7 @@
-import ChooseAffiliation from './components/choose-affiliation';
+import { ChooseAffiliation } from './components/ChooseAffiliation';
 import affiliationReducer from './reducer';
 import { setDefaultAffiliation, setActiveAffilitation } from './actions';
 
-export function affiliationCookieSetter (affiliation) {
-  if (affiliation) {
-    document.cookie = `affiliation=${affiliation};path=/`;
-  }
-}
-
 export {
   ChooseAffiliation,
   affiliationReducer,

src/modules/affiliation/reducer/index.js

@@ -1,15 +1,7 @@
+import { initialAffiliationState } from '../components/ChooseAffiliation';
 import * as actions from '../actions/';
 
-const initialState = {
-  active: undefined,
-  defaultAffiliation: 'aa',
-  affiliationOptions: {
-    aa: 'Ann Arbor',
-    flint: 'Flint'
-  }
-};
-
-const affiliationReducer = (state = initialState, action) => {
+const affiliationReducer = (state = initialAffiliationState, action) => {
   switch (action.type) {
     case actions.SET_DEFAULT_AFFILIATION:
       return {

src/modules/core/components/SearchHeader/index.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import config from '../../../../config';
-import { ChooseAffiliation } from '../../../affiliation';
 import { MEDIA_QUERIES } from '../../../reusable/umich-lib-core-temp';
 
 function SearchHeader (props) {
@@ -63,7 +62,6 @@ function SearchHeader (props) {
             </a>
           );
         })}
-        <ChooseAffiliation />
       </nav>
     </m-website-header>
   );