fix(#402): set selectedDate to today at launch

Clm-Roig · Jul 14, 2022 · c2f5bcf · c2f5bcf
1 parent ab3f467
commit c2f5bcf
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/cypress/e2e/trackers/selectedDate.cy.ts b/cypress/e2e/trackers/selectedDate.cy.ts
@@ -14,13 +14,16 @@ context('Trackers', () => {
   });
 
   describe('selected date', () => {
-    it('has an input with today date', () => {
+    it('has an input with today date, even after going 2 days before and reloading the page', () => {
       const today = new Date();
       const todayMonth = `${today.getMonth() + 1}`.padStart(2, '0');
-      cy.get('input').should(
-        'have.value',
-        `${today.getDate()}`.padStart(2, '0') + '/' + todayMonth + '/' + today.getFullYear()
-      );
+      const todayString =
+        `${today.getDate()}`.padStart(2, '0') + '/' + todayMonth + '/' + today.getFullYear();
+      cy.get('input').should('have.value', todayString);
+      cy.get('[data-testid="ChevronLeftIcon"]').click();
+      cy.get('[data-testid="ChevronLeftIcon"]').click();
+      cy.reload();
+      cy.get('input').should('have.value', todayString);
     });
     it('has tomorrow selector disabled', () => {
       cy.get('[data-testid="ChevronRightIcon"]').parent().should('be.disabled');

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -11,14 +11,15 @@ import { LocalizationProvider, frFR } from '@mui/x-date-pickers';
 import { AdapterDateFns as DateAdapter } from '@mui/x-date-pickers/AdapterDateFns';
 import frLocale from 'date-fns/locale/fr';
 import { SnackbarKey, SnackbarProvider } from 'notistack';
-import { createRef, useMemo, useState } from 'react';
+import { createRef, useEffect, useMemo, useState } from 'react';
 
 import { DRAWER_MENU_WIDTH } from '../config/Constants';
 import { components, getPalette, typography } from '../config/CustomTheme';
 import { useAppDispatch, useAppSelector } from '../hooks/redux';
 import ThemeMode from '../models/ThemeMode';
 import { selectThemeMode } from '../store/theme/theme.selectors';
 import { toggleThemeMode } from '../store/theme/themeSlice';
+import { setSelectedDate } from '../store/trackers/trackersSlice';
 import AppBar from './AppBar';
 import DrawerMenu from './DrawerMenu';
 import Router from './Router';
@@ -54,6 +55,10 @@ function App() {
     notistackRef.current?.closeSnackbar(key);
   };
 
+  useEffect(() => {
+    dispatch(setSelectedDate(new Date().toString()));
+  }, []);
+
   const toggleDrawerMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };

diff --git a/src/app/CustomPersistGate.tsx b/src/app/CustomPersistGate.tsx
@@ -2,10 +2,9 @@ import { FC, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { PersistGate } from 'redux-persist/integration/react';
 
-import { useAppDispatch, useAppSelector } from '../hooks/redux';
+import { useAppSelector } from '../hooks/redux';
 import { persistor } from '../store/store';
 import { selectAllTrackers } from '../store/trackers/trackers.selectors';
-import { setSelectedDate } from '../store/trackers/trackersSlice';
 import isATracker from '../utils/isATracker';
 import FullScreenLoading from './FullScreenLoading';
 
@@ -18,7 +17,6 @@ const CustomPersistGate: FC<Props> = ({ children }) => {
   const location = useLocation();
   const { trackers } = useAppSelector(selectAllTrackers);
   const navigate = useNavigate();
-  const dispatch = useAppDispatch();
 
   useEffect(() => {
     if (trackers.length > 0) {
@@ -29,7 +27,6 @@ const CustomPersistGate: FC<Props> = ({ children }) => {
   useEffect(() => {
     // Redirect only if the user is on the homepage (first app loading for example)
     if (trackersReadyToBeChecked && location.pathname === '/') {
-      dispatch(setSelectedDate(new Date().toString()));
       // Check trackers
       for (const tracker of trackers) {
         const data = isATracker(tracker);