Merge pull request #49 from MobilityData/fix/login-state-persist

fix: login -> close tab -> open new tab -> logout [error]: Redux store data not available

Author: Alessandro100

.github/lighthouserc.js

@@ -9,7 +9,7 @@ module.exports = {
         `${previewBaseUrl}/feeds`,
         `${previewBaseUrl}/feeds/gtfs/mdb-2126`,
         `${previewBaseUrl}/feeds/gtfs_rt/mdb-2585`,
-        `${previewBaseUrl}/gbfs/gbfs-flamingo_porirua`
+        `${previewBaseUrl}/feeds/gbfs/gbfs-flamingo_porirua`
       ],
       numberOfRuns: 1, // 1 to speed up the CI process but can be increased for more reliable results
       settings: {

src/app/[locale]/[...slug]/page.tsx

@@ -5,15 +5,12 @@
 import { type ReactNode, use, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { PersistGate } from 'redux-persist/integration/react';
-import { persistStore } from 'redux-persist';
-import { store } from '../../store/store';
+import { persistor } from '../../store/store';
 import { useAppDispatch } from '../../hooks';
 import { resetProfileErrors } from '../../store/profile-reducer';
 
 const App = dynamic(async () => await import('../../App'), { ssr: false });
 
-const persistor = persistStore(store);
-
 interface PageProps {
   params: Promise<{
     locale: string;

src/app/components/Header.tsx

@@ -218,7 +218,7 @@ export default function DrawerAppBar(): React.ReactElement {
                     : '/assets/MOBILTYDATA_logo_purple_M.png'
                 }
                 alt='MobilityData logo'
-                width={45}
+                width={45 * 1.05} // aspect ratio of the logo is slightly off, adjust width to prevent layout shift between themes
                 height={45}
                 priority
                 fetchPriority='high'

src/app/components/HeaderMobileDrawer.tsx

@@ -26,6 +26,7 @@ import { mobileNavElementStyle } from './Header.style';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useRemoteConfig } from '../context/RemoteConfigProvider';
 import { useTranslations } from 'next-intl';
+import Image from 'next/image';
 
 const websiteTile = 'MobilityDatabase';
 
@@ -55,37 +56,18 @@ export default function DrawerContent({
           router.push('/');
         }}
       >
-        {theme.palette.mode === 'light' ? (
-          <picture style={{ display: 'flex' }}>
-            <source
-              src='/assets/MOBILTYDATA_logo_light_blue_M.png'
-              type='image/png'
-              height={40}
-              width={40}
-            />
-            <img
-              alt='MobilityData logo'
-              src='/assets/MOBILTYDATA_logo_light_blue_M.png'
-              height={40}
-              width={40}
-            />
-          </picture>
-        ) : (
-          <picture style={{ display: 'flex' }}>
-            <source
-              src='/assets/MOBILTYDATA_logo_purple_M.png'
-              type='image/png'
-              height={40}
-              width={40}
-            />
-            <img
-              alt='MobilityData logo'
-              src='/assets/MOBILTYDATA_logo_purple_M.png'
-              height={40}
-              width={40}
-            />
-          </picture>
-        )}
+        <Image
+          src={
+            theme.palette.mode === 'light'
+              ? '/assets/MOBILTYDATA_logo_light_blue_M.png'
+              : '/assets/MOBILTYDATA_logo_purple_M.png'
+          }
+          alt='MobilityData logo'
+          width={40 * 1.05} // aspect ratio of the logo is slightly off, adjust width to prevent layout shift between themes
+          height={40}
+          priority
+          fetchPriority='high'
+        />
 
         <Typography
           component={'h2'}

src/app/store/store.ts

@@ -1,5 +1,6 @@
 import {
   persistReducer,
+  persistStore,
   FLUSH,
   REHYDRATE,
   PAUSE,
@@ -83,6 +84,11 @@ if (typeof window !== 'undefined' && (window as any).Cypress) {
 
 sagaMiddleware.run(rootSaga);
 
+// Create the persistor at the store level so rehydration and
+// state-persistence happen on every page load, not just on the
+// legacy catch-all route.
+export const persistor = persistStore(store);
+
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 export type AppThunk<ReturnType = void> = ThunkAction<