DS-734: Add alumni events to federated search

gatsby-browser.js

@@ -9,6 +9,7 @@ import React from 'react';
 // Contexts.
 import { GlobalStateProvider } from './src/contexts/GlobalContext';
 import { AuthContextProvider } from './src/contexts/AuthContext';
+import { SearchModalProvider } from './src/components/search/Modal/SearchModalContext';
 
 // CSS
 import './src/styles/global.css';
@@ -19,7 +20,9 @@ import './src/styles/light-forms.css';
 // Exports.
 export const wrapRootElement = ({ element }) => (
   <GlobalStateProvider>
-    <AuthContextProvider>{element}</AuthContextProvider>
+    <AuthContextProvider>
+      <SearchModalProvider>{element}</SearchModalProvider>
+    </AuthContextProvider>
   </GlobalStateProvider>
 );
 

src/components/components.js

@@ -59,12 +59,12 @@ import Redirect from './redirect/Redirect';
 import RegistrationFormPage from './page-types/registrationFormPage/registrationFormPage';
 import { SBSAAMainNav } from './storyblok/saaMainNav';
 import { SBSAAMainMenuGroup } from './storyblok/saaMainMenuGroup';
-import SearchFacet from './search/searchFacet';
-import SearchField from './search/searchField';
+import SearchFacet from './search/SearchFacet';
+import SearchField from './search/SearchField';
 import SearchPage from './page-types/searchPage';
-import SearchPager from './search/searchPager';
-import SearchResults from './search/searchResults';
-import SearchSuggestions from './search/searchSuggestions';
+import SearchPager from './search/SearchPager';
+import SearchResults from './search/SearchResults';
+import SearchSuggestions from './search/SearchSuggestions';
 import Section from './layout/section';
 import SimpleImage from './media/simpleImage';
 import Story from './content-types/story/story';

src/components/content-types/perk/perkPageView.js

@@ -2,7 +2,7 @@ import SbEditable from 'storyblok-react';
 import React from 'react';
 import { Heading } from '../../simple/Heading';
 import CardImage from '../../media/cardImage';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 
 const PerkPageView = (props) => {
   // Destructure props

src/components/content-types/story/storyPageView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { DateTime } from 'luxon';
 import { Container } from '../../layout/Container';
 import { Heading } from '../../simple/Heading';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import CreateBloks from '../../../utilities/createBloks';
 import FullWidthImage from '../../media/fullWidthImage';
 import getNumBloks from '../../../utilities/getNumBloks';

src/components/identity/GlobalHeader/GlobalHeader.jsx

@@ -1,17 +1,17 @@
-import React, { useState, useRef } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FlexBox } from '../../layout/FlexBox';
 import { SBLinkType } from '../../../types/storyblok/SBLinkType';
 import * as styles from './GlobalHeader.styles';
 import CreateBloks from '../../../utilities/createBloks';
 import Logo from '../logo';
-import OpenSearchModalButton from '../../search/openSearchModalButton';
+import OpenSearchModalButton from '../../search/Modal/OpenSearchModalButton';
 import SbLink from '../../../utilities/sbLink';
-import SearchModal from '../../search/searchModal';
+import SearchModal from '../../search/Modal/SearchModal';
 import AlumniLogo from '../../../images/saa-logo-white.svg';
 import { SBBlokType } from '../../../types/storyblok/SBBlokType';
-import useEscape from '../../../hooks/useEscape';
 import useDisplay from '../../../hooks/useDisplay';
+import SearchModalContext from '../../search/Modal/SearchModalContext';
 
 export const GlobalHeaderProps = {
   siteName: PropTypes.string,
@@ -30,48 +30,15 @@ const GlobalHeader = ({
   mainNav,
   hasHero,
   isDark,
-  searchPageUrl,
 }) => {
-  const [modalOpen, setModalOpen] = useState(false);
-  const desktopRef = useRef(null);
-  const mobileRef = useRef(null);
-  const openSearchRef = useRef(null);
-  const openSearchMobileRef = useRef(null);
-
-  const returnFocus = () => {
-    if (openSearchRef.current) {
-      openSearchRef.current.focus();
-    } else if (openSearchMobileRef.current) {
-      openSearchMobileRef.current.focus();
-    }
-  };
-
-  const handleClose = () => {
-    setModalOpen(false);
-    returnFocus();
-  };
-
-  useEscape(() => {
-    // Only do this if the search modal is open
-    if (modalOpen) {
-      const searchInputModal =
-        document.getElementsByClassName('search-input-modal')[0];
-
-      // Only close the modal with Escape key if the autocomplete dropdown is not open
-      if (searchInputModal.getAttribute('aria-expanded') !== 'true') {
-        setModalOpen(false);
-        returnFocus();
-      }
-    }
-  });
-
   // Use the useDisplay hook to determine whether to display the desktop of mobile header
   const { showDesktop, showMobile } = useDisplay();
+  const { desktopButtonRef, mobileButtonRef } = useContext(SearchModalContext);
 
   return (
     <>
       {showMobile && (
-        <div className={styles.rootMobile} ref={mobileRef}>
+        <div className={styles.rootMobile}>
           <CreateBloks
             blokSection={utilityNav}
             ariaLabel="Utility Menu"
@@ -98,17 +65,16 @@ const GlobalHeader = ({
             </div>
             <FlexBox>
               <OpenSearchModalButton
-                openOpen={modalOpen}
-                setModalOpen={setModalOpen}
-                ref={openSearchMobileRef}
+                id="mastead-search-openmodal-mobile"
+                ref={mobileButtonRef}
               />
               <CreateBloks blokSection={mainNav} ariaLabel="Main Menu" />
             </FlexBox>
           </FlexBox>
         </div>
       )}
       {showDesktop && (
-        <div className={styles.root({ hasHero, isDark })} ref={desktopRef}>
+        <div className={styles.root({ hasHero, isDark })}>
           <FlexBox justifyContent="between" alignItems="start">
             <div className={styles.logoWrapper}>
               <Logo className={styles.logo} />
@@ -122,9 +88,8 @@ const GlobalHeader = ({
                 itemClasses={styles.utilNavItem}
               />
               <OpenSearchModalButton
-                openOpen={modalOpen}
-                setModalOpen={setModalOpen}
-                ref={openSearchRef}
+                id="mastead-search-openmodal-desktop"
+                ref={desktopButtonRef}
               />
             </div>
           </FlexBox>
@@ -136,12 +101,7 @@ const GlobalHeader = ({
           <CreateBloks blokSection={mainNav} ariaLabel="Main Menu" />
         </div>
       )}
-      <SearchModal
-        isOpen={modalOpen}
-        setIsOpen={setModalOpen}
-        searchPageUrl={searchPageUrl}
-        onClose={handleClose}
-      />
+      <SearchModal />
     </>
   );
 };

src/components/identity/masthead.js

@@ -1,28 +1,17 @@
-import React, { useState, useRef } from 'react';
+import React, { useContext } from 'react';
 import SbEditable from 'storyblok-react';
 import { dcnb } from 'cnbuilder';
 import CreateBloks from '../../utilities/createBloks';
 import Logo from './logo';
 import { FlexBox } from '../layout/FlexBox';
-import OpenSearchModalButton from '../search/openSearchModalButton';
-import SearchModal from '../search/searchModal';
+import OpenSearchModalButton from '../search/Modal/OpenSearchModalButton';
+import SearchModal from '../search/Modal/SearchModal';
 import * as styles from './GlobalHeader/GlobalHeader.styles';
-import useEscape from '../../hooks/useEscape';
 import useDisplay from '../../hooks/useDisplay';
 import AccountLinks from '../navigation/accountLinks';
+import SearchModalContext from '../search/Modal/SearchModalContext';
 
-const Masthead = ({
-  blok: { mainNav, utilityNav, searchPageUrl },
-  blok,
-  hasHero,
-  isDark,
-}) => {
-  const [modalOpen, setModalOpen] = useState(false);
-  const desktopRef = useRef(null);
-  const mobileRef = useRef(null);
-  const openSearchRef = useRef(null);
-  const openSearchMobileRef = useRef(null);
-
+const Masthead = ({ blok: { mainNav, utilityNav }, blok, hasHero, isDark }) => {
   let mainNavBgColorXl =
     'xl:su-bg-transparent xl:su-bg-gradient-to-b xl:su-from-masthead-black-top xl:su-to-masthead-black-bottom su-backface-hidden';
   let mainNavBgColorLg =
@@ -33,43 +22,16 @@ const Masthead = ({
     mainNavBgColorLg = 'su-bg-saa-black';
   }
 
-  const returnFocus = () => {
-    if (openSearchRef.current) {
-      openSearchRef.current.focus();
-    } else if (openSearchMobileRef.current) {
-      openSearchMobileRef.current.focus();
-    }
-  };
-
-  const handleClose = () => {
-    setModalOpen(false);
-    returnFocus();
-  };
-
-  useEscape(() => {
-    // Only do this if the search modal is open
-    if (modalOpen) {
-      const searchInputModal =
-        document.getElementsByClassName('search-input-modal')[0];
-
-      // Only close the modal with Escape key if the autocomplete dropdown is not open
-      if (searchInputModal.getAttribute('aria-expanded') !== 'true') {
-        setModalOpen(false);
-        returnFocus();
-      }
-    }
-  });
-
   // Use the useDisplay hook to determine whether to display the desktop of mobile header
   const { showDesktop, showMobile } = useDisplay();
 
+  // Get refs from the SearchModalContext
+  const { desktopButtonRef, mobileButtonRef } = useContext(SearchModalContext);
+
   return (
     <SbEditable content={blok}>
       {showMobile && (
-        <div
-          className="masthead-mobile su-relative su-w-full lg:su-hidden su-bg-cardinal-red-xdark"
-          ref={mobileRef}
-        >
+        <div className="masthead-mobile su-relative su-w-full lg:su-hidden su-bg-cardinal-red-xdark">
           <nav aria-label="Utility Menu" className={styles.utilNavMobile}>
             <ul className={styles.utilNavMenuMobile}>
               <CreateBloks
@@ -89,9 +51,8 @@ const Masthead = ({
             </FlexBox>
             <FlexBox>
               <OpenSearchModalButton
-                openOpen={modalOpen}
-                setModalOpen={setModalOpen}
-                ref={openSearchMobileRef}
+                id="mastead-search-openmodal-mobile"
+                ref={mobileButtonRef}
               />
               <CreateBloks blokSection={mainNav} className="su-shrink-0" />
             </FlexBox>
@@ -102,7 +63,6 @@ const Masthead = ({
         <div
           className={`masthead-desktop su-hidden lg:su-block su-w-full su-z-20
                   ${hasHero ? 'su-absolute' : 'su-relative'}`}
-          ref={desktopRef}
         >
           <FlexBox>
             <FlexBox
@@ -133,9 +93,8 @@ const Masthead = ({
                   </ul>
                 </nav>
                 <OpenSearchModalButton
-                  openOpen={modalOpen}
-                  setModalOpen={setModalOpen}
-                  ref={openSearchRef}
+                  id="mastead-search-openmodal-desktop"
+                  ref={desktopButtonRef}
                 />
               </FlexBox>
               <CreateBloks
@@ -153,12 +112,7 @@ const Masthead = ({
           />
         </div>
       )}
-      <SearchModal
-        isOpen={modalOpen}
-        setIsOpen={setModalOpen}
-        onClose={handleClose}
-        searchPageUrl={searchPageUrl}
-      />
+      <SearchModal />
     </SbEditable>
   );
 };

src/components/page-types/TripFilterPage/TripFilterPage.jsx

@@ -6,7 +6,7 @@ import { GridCell } from '../../layout/GridCell';
 import { Container } from '../../layout/Container';
 import { Heading } from '../../simple/Heading';
 import { Skiplink } from '../../accessibility/Skiplink';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import CreateBloks from '../../../utilities/createBloks';
 import { useTripFilters } from '../../../hooks/useTripFilters';
 import { TripFilterList } from '../../composite/TripFilterList/TripFilterList';
@@ -183,7 +183,7 @@ const TripFilterPage = (props) => {
                   className={dcnb('filtered-trips-list', styles.trips)}
                 >
                   {trips.map((trip) => (
-                    <TripCard key={trip.id} trip={trip} />
+                    <TripCard key={`trip-${trip.id}`} trip={trip} />
                   ))}
                 </Grid>
                 {totalPages > 1 && (

src/components/page-types/TripPage/TripPage.jsx

@@ -5,7 +5,7 @@ import SbEditable from 'storyblok-react';
 import useScrollSpy from 'react-use-scrollspy';
 import { Alert } from '../../composite/Alert/Alert';
 import { luxonDate, luxonToday } from '../../../utilities/dates';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import { TripContent } from '../../../types/TripType';
 import * as styles from './TripPage.styles';
 import Ankle from '../../partials/ankle/ankle';

src/components/page-types/associatesDirectoryPage/associatesDirectoryPage.js

@@ -3,7 +3,7 @@ import SbEditable from 'storyblok-react';
 import { dcnb } from 'cnbuilder';
 import { Container } from '../../layout/Container';
 import { Heading } from '../../simple/Heading';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import hasRichText from '../../../utilities/hasRichText';
 import RichTextRenderer from '../../../utilities/richTextRenderer';
 import CreateBloks from '../../../utilities/createBloks';

src/components/page-types/basicPage.js → src/components/page-types/basicPage.jsx

@@ -3,7 +3,7 @@ import SbEditable from 'storyblok-react';
 import { dcnb } from 'cnbuilder';
 import { Container } from '../layout/Container';
 import { Heading } from '../simple/Heading';
-import Layout from '../partials/layout';
+import Layout from '../partials/Layout';
 import CreateBloks from '../../utilities/createBloks';
 import getNumBloks from '../../utilities/getNumBloks';
 import Ankle from '../partials/ankle/ankle';

src/components/page-types/darkPage.js → src/components/page-types/darkPage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import SbEditable from 'storyblok-react';
 import { Container } from '../layout/Container';
 import { Heading } from '../simple/Heading';
-import Layout from '../partials/layout';
+import Layout from '../partials/Layout';
 import Ankle from '../partials/ankle/ankle';
 import CreateBloks from '../../utilities/createBloks';
 import getNumBloks from '../../utilities/getNumBloks';

src/components/page-types/formPage/formPage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useContext } from 'react';
 import SbEditable from 'storyblok-react';
 import { Container } from '../../layout/Container';
 import { Heading } from '../../simple/Heading';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import CreateBloks from '../../../utilities/createBloks';
 import getNumBloks from '../../../utilities/getNumBloks';
 import Ankle from '../../partials/ankle/ankle';

src/components/page-types/gsbCardPage.js → src/components/page-types/gsbCardPage.jsx

@@ -9,7 +9,7 @@ import GsbLogoColor from '../../images/gsb_logo-color.png';
 import RichTextRenderer from '../../utilities/richTextRenderer';
 import { Grid } from '../layout/Grid';
 import { GridCell } from '../layout/GridCell';
-import Layout from '../partials/layout';
+import Layout from '../partials/Layout';
 import AuthenticatedPage from '../auth/AuthenticatedPage';
 import { Container } from '../layout/Container';
 import { Heading } from '../simple/Heading';

src/components/page-types/lightFormPage/lightFormPage.js

@@ -5,7 +5,7 @@ import { dcnb } from 'cnbuilder';
 import { ClipLoader } from 'react-spinners';
 import { Container } from '../../layout/Container';
 import { Heading } from '../../simple/Heading';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import CreateBloks from '../../../utilities/createBloks';
 import getNumBloks from '../../../utilities/getNumBloks';
 import Ankle from '../../partials/ankle/ankle';

src/components/page-types/membershipFormPage/membershipFormPage.js

@@ -5,7 +5,7 @@ import { Link } from 'gatsby';
 import { useLocation } from '@reach/router';
 import { Container } from '../../layout/Container';
 import { Heading } from '../../simple/Heading';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import { HeroImage } from '../../composite/HeroImage/HeroImage';
 import { Grid } from '../../layout/Grid';
 import AuthenticatedPage from '../../auth/AuthenticatedPage';