[LIBSEARCH-61] Investigate ways to overcome late loading of profile data

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

@@ -6,15 +6,15 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 
 const SearchHeader = () => {
-  const isAuthenticated = useSelector((state) => {
-    return state.profile.status === 'Logged in';
+  const { status } = useSelector((state) => {
+    return state.profile || {};
   });
 
   return (
     <m-website-header name='Search' variant='dark' to='/everything'>
       <nav aria-label='utility'>
         <Anchor href='https://account.lib.umich.edu/'>Account</Anchor>
-        <Authentication logout={isAuthenticated} />
+        {status && <Authentication logout={status === 'Logged in'} />}
         <ChooseAffiliation />
       </nav>
     </m-website-header>

src/modules/datastores/components/FlintAlerts/index.js

@@ -2,7 +2,7 @@ import { Alert, Anchor } from '../../../reusable';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-const FlintAlerts = ({ datastore, profile }) => {
+const FlintAlerts = ({ datastore, institutions = [] }) => {
   const [dismiss, setDismiss] = useState([]);
   const handleDismissClick = () => {
     setDismiss((previousDismiss) => {
@@ -16,7 +16,7 @@ const FlintAlerts = ({ datastore, profile }) => {
     website: (<>We noticed you are affiliated with U-M Flint. For the best results use the <Anchor href='https://libguides.umflint.edu/library'>Thompson Library website</Anchor>.</>)
   };
 
-  if (!Object.keys(messages).includes(datastore) || !profile.institutions?.includes('Flint') || dismiss.includes(datastore)) {
+  if (!Object.keys(messages).includes(datastore) || !institutions.includes('Flint') || dismiss.includes(datastore)) {
     return null;
   }
 
@@ -37,7 +37,7 @@ const FlintAlerts = ({ datastore, profile }) => {
 
 FlintAlerts.propTypes = {
   datastore: PropTypes.string,
-  profile: PropTypes.object
+  institutions: PropTypes.array
 };
 
 export default FlintAlerts;

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

@@ -50,8 +50,8 @@ const actions = [
 
 const ActionsList = (props) => {
   const [alert, setAlert] = useState(null);
-  const profile = useSelector((state) => {
-    return state.profile;
+  const { email, status, text } = useSelector((state) => {
+    return state.profile || {};
   });
 
   return (
@@ -85,19 +85,19 @@ const ActionsList = (props) => {
             })}
           </ul>
           {props.active?.action === 'email' && (
-            <AuthenticationRequired profile={profile}>
+            <AuthenticationRequired status={status}>
               <EmailAction
                 action={props.active}
-                emailAddress={profile?.email || ''}
+                emailAddress={email || ''}
                 {...props}
               />
             </AuthenticationRequired>
           )}
           {props.active?.action === 'text' && (
-            <AuthenticationRequired profile={profile}>
+            <AuthenticationRequired status={status}>
               <TextAction
                 action={props.active}
-                phoneNumber={profile?.text || ''}
+                phoneNumber={text || ''}
                 {...props}
               />
             </AuthenticationRequired>

src/modules/pages/components/DatastorePage/index.js

@@ -37,8 +37,8 @@ const DatastorePage = () => {
   const institution = useSelector((state) => {
     return state.institution;
   });
-  const profile = useSelector((state) => {
-    return state.profile;
+  const { institutions } = useSelector((state) => {
+    return state.profile || {};
   });
   const search = useSelector((state) => {
     return state.search;
@@ -94,7 +94,7 @@ const DatastorePage = () => {
             <>
               <SearchBox />
               <DatastoreNavigation {...{ activeFilters, datastores, institution, search }} />
-              <FlintAlerts datastore={activeDatastore.uid} profile={profile} />
+              <FlintAlerts datastore={activeDatastore.uid} institutions={institutions} />
               <Routes>
                 <Route
                   path='record/:recordUid/get-this/:barcode'
@@ -106,7 +106,7 @@ const DatastorePage = () => {
                 />
                 <Route
                   path='list'
-                  element={<List {...{ activeDatastore, institution, list, profile }} />}
+                  element={<List {...{ activeDatastore, institution, list }} />}
                 />
                 <Route
                   index

src/modules/pride/setup.js

@@ -538,17 +538,16 @@ const initializePride = () => {
   Pride.init({
     failure: () => {
       renderPrideFailedToLoad();
-      // Console.log('Pride failed to load.');
     },
-    success: () => {
-      setupSearches();
-      setupAdvancedSearch();
-      setupDefaultInstitution();
-      setupDefaultAffiliation();
-      setupBrowse();
+    success: async () => {
+      await setupSearches();
+      await setupAdvancedSearch();
+      await setupDefaultInstitution();
+      await setupDefaultAffiliation();
+      await setupBrowse();
+      await prejudice.initialize();
+      await setupProfile();
       renderApp();
-      prejudice.initialize();
-      setupProfile();
     }
   });
 };

src/modules/profile/components/AuthenticationRequired/index.js

@@ -2,12 +2,12 @@ import Authentication from '../Authentication';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const AuthenticationRequired = ({ children, profile }) => {
+const AuthenticationRequired = ({ children, status }) => {
   if (!children) {
     return null;
   }
 
-  if (profile?.status === 'Logged in') {
+  if (status === 'Logged in') {
     return children;
   }
 
@@ -23,7 +23,7 @@ AuthenticationRequired.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
   ]),
-  profile: PropTypes.object
+  status: PropTypes.string
 };
 
 export default AuthenticationRequired;