Replace redux-thunk with redux-observable - fix

src/actions/calendar.actions.ts

@@ -1,6 +1,10 @@
 import { MonthDTO } from '../api/dtos';
 import { CALENDAR_CONSTANTS } from './constants';
 
+export const loadMonthAction = () => ({
+  type: CALENDAR_CONSTANTS.LOAD_MONTH
+});
+
 export const monthChangedAction = (year: number, month: number) => ({
   type: CALENDAR_CONSTANTS.MONTH_CHANGED,
   payload: {year, month}

src/actions/constants.ts

@@ -5,6 +5,7 @@ export const AUTHENTICATION_CONSTANTS = {
 };
 
 export const CALENDAR_CONSTANTS = {
+  LOAD_MONTH: 'LOAD_MONTH',
   MONTH_LOADED: 'MONTH_LOADED',
   MONTH_CHANGED: 'MONTH_CHANGED'
 };

src/actions/workLog.actions.ts

@@ -2,9 +2,8 @@ import { REGISTRATION_CONSTANTS, WORK_LOG_CONSTANTS } from './constants';
 import { BulkEditDTO, ReportingWorkLogDTO } from '../api/dtos';
 import { ParsedWorkLog } from '../workLogExpressionParser/ParsedWorkLog';
 
-export const loadWorkLogsAction = (year: number, month: number) => ({
-  type: WORK_LOG_CONSTANTS.LOAD_WORK_LOGS,
-  payload: {year, month}
+export const loadWorkLogsAction = () => ({
+  type: WORK_LOG_CONSTANTS.LOAD_WORK_LOGS
 });
 
 export const workLogLoadedAction = entries => ({

src/components/adminPage/AdminPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { OpenTrappState } from '../../redux/root.reducer';
 import { Grid } from '@material-ui/core';
@@ -20,11 +20,10 @@ export const AdminPage = () => {
   const users = useSelector((state: OpenTrappState) => state.admin?.authorizedUsers);
   const username = useSelector((state: OpenTrappState) => state.authentication?.user?.name);
   const dispatch = useDispatch();
-  const stableDispatch = useCallback(dispatch, []);
   useEffect(() => {
-    stableDispatch(loadServiceAccountsAction());
-    stableDispatch(loadAuthorizedUsersAction());
-  }, [stableDispatch]);
+    dispatch(loadServiceAccountsAction());
+    dispatch(loadAuthorizedUsersAction());
+  }, [dispatch]);
   const onOpenServiceAccountDialog = () => setServiceAccountDialogOpen(true);
 
   const onCloseServiceAccountDialog = (name?: string) => {
@@ -41,7 +40,7 @@ export const AdminPage = () => {
           <Grid item lg={10} md={11} xs={11}>
             <div className='admin-page__header'>
               <div>Service accounts</div>
-              <CreateButton onClick={onOpenServiceAccountDialog} data-create-service-account-button/>
+              <Button variant='contained' color='primary' size='small' onClick={onOpenServiceAccountDialog}>Create</Button>
             </div>
             <Paper className='admin-page__content'>
               {
@@ -67,7 +66,3 @@ export const AdminPage = () => {
 const LoadingPlaceholder = ({children}) => (
     <div className='admin-page__placeholder'>{children}</div>
 );
-
-const CreateButton = ({onClick}: { onClick: VoidFunction }) => (
-    <Button variant='contained' color='primary' size='small' onClick={onClick}>Create</Button>
-);

src/components/registrationPage/RegistrationPage.desktop.tsx

@@ -5,7 +5,7 @@ import Divider from "@material-ui/core/Divider";
 import { WorkLogInput } from "./workLogInput/WorkLogInput";
 import { useDispatch, useSelector } from 'react-redux';
 import { OpenTrappState } from '../../redux/root.reducer';
-import { monthChangedAction } from '../../actions/calendar.actions';
+import { loadMonthAction, monthChangedAction } from '../../actions/calendar.actions';
 import { AuthorizedUser } from '../../api/dtos';
 import { loadTagsAction, saveWorkLogAction, workLogChangedAction } from '../../actions/workLog.actions';
 import { isEmpty } from 'lodash';
@@ -43,10 +43,10 @@ export const RegistrationPageDesktop = () => {
   });
   const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(monthChangedAction(selectedMonth.year, selectedMonth.month));
+    dispatch(loadMonthAction());
     dispatch(loadTagsAction());
     dispatch(loadPresetsAction());
-  }, []);
+  }, [dispatch]);
   const onMonthChange = (month: Month) => dispatch(monthChangedAction(month.year, month.month));
   const onDaysSelected = (days: string[]) => dispatch(workLogChangedAction(workLog.withDays(days)));
   const onWorkLogInputChange = (workLog: ParsedWorkLog) => dispatch(workLogChangedAction(workLog));

src/components/registrationPage/RegistrationPage.mobile.tsx

@@ -22,7 +22,6 @@ import { Chip } from '@material-ui/core';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import './RegistrationPage.mobile.scss';
-import { selectedMonthSelector } from '../../selectors/selectors';
 
 const forSelectedDay = (state: OpenTrappState) => workLog => workLog.day === state.registration.workLog.days[0];
 
@@ -31,7 +30,6 @@ const forCurrentUser = (state: OpenTrappState) => workLog => workLog.employee ==
 export const RegistrationPageMobile = () => {
   const [selectedPreset, setSelectedPreset] = useState(undefined as Preset);
   const [customWorkLogDialogOpen, setCustomWorkLogDialogOpen] = useState(false);
-  const selectedMonth = useSelector(selectedMonthSelector);
   const presets = useSelector((state: OpenTrappState) => state.registration.presets);
   const tags = useSelector((state: OpenTrappState) => state.workLog.tags);
   const workLogs = useSelector((state: OpenTrappState) => state.workLog.workLogs.filter(forSelectedDay(state)).filter(forCurrentUser(state)));
@@ -41,10 +39,10 @@ export const RegistrationPageMobile = () => {
   })
   const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(loadWorkLogsAction(selectedMonth.year, selectedMonth.month));
+    dispatch(loadWorkLogsAction());
     dispatch(loadTagsAction(6));
     dispatch(loadPresetsAction());
-  }, []);
+  }, [dispatch]);
 
   const selectedDay =  workLog.days[0];
 

src/components/reportingPage/ReportingPage.desktop.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { OpenTrappState } from '../../redux/root.reducer';
 import { Grid } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
-import { monthChangedAction } from '../../actions/calendar.actions';
+import { loadMonthAction, monthChangedAction } from '../../actions/calendar.actions';
 import { bulkEditAction, loadTagsAction, removeWorkLogAction, updateWorkLogAction } from '../../actions/workLog.actions';
 import './ReportingPage.desktop.scss';
 import { EditedWorkLog, ReportingWorkLog } from './reporting.model';
@@ -92,9 +92,9 @@ export const ReportingPageDesktop = () => {
   const selectedMonth = useSelector(selectedMonthSelector);
   const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(monthChangedAction(selectedMonth.year, selectedMonth.month));
+    dispatch(loadMonthAction());
     dispatch(loadTagsAction());
-  }, []);
+  }, [dispatch]);
 
   const selection = {
     tags: selectedTags ? selectedTags : userTags,

src/components/reportingPage/ReportingPage.mobile.spec.tsx

@@ -129,8 +129,7 @@ describe('Reporting page - mobile', () => {
           </MemoryRouter>
         </Provider>
     );
-    await waitFor(() => {
-    });
+    await waitFor(() => {});
 
     expect(queryAllByTestId('day-card')).toHaveLength(2);
     expect(queryAllByTestId('day-card-day')[0]).toHaveTextContent('2019/02/04');

src/components/reportingPage/ReportingPage.mobile.tsx

@@ -5,7 +5,7 @@ import { OpenTrappState } from '../../redux/root.reducer';
 import { DayCard } from './dayCard/DayCard';
 import { List } from '@material-ui/core';
 import ListItem from '@material-ui/core/ListItem';
-import { monthChangedAction } from '../../actions/calendar.actions';
+import { loadMonthAction, monthChangedAction } from '../../actions/calendar.actions';
 import { MonthSelector } from './monthSelector/MonthSelector';
 import { Month } from '../../utils/Month';
 import { History, Location } from 'history';
@@ -26,8 +26,8 @@ const ReportingPageMobileComponent = ({history}: Props) => {
   );
   const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(monthChangedAction(selectedMonth.year, selectedMonth.month))
-  }, []);
+    dispatch(loadMonthAction());
+  }, [dispatch]);
 
   const groupedWorkLogs = groupBy(workLogs, w => w.day);
   const workLogsByDay = days

src/epics/monthEpic.ts

@@ -1,16 +1,21 @@
 import { ActionsObservable, ofType, StateObservable } from 'redux-observable';
 import { CALENDAR_CONSTANTS } from '../actions/constants';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import { catchError, map, switchMap, withLatestFrom } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { OpenTrappState } from '../redux/root.reducer';
-import { MonthChangedAction, monthLoadedAction } from '../actions/calendar.actions';
+import { monthLoadedAction } from '../actions/calendar.actions';
 import { OpenTrappAPI } from '../api/OpenTrappAPI';
 import { errorNotificationAction } from '../actions/notifications.actions';
+import { isNil } from 'lodash';
+import { selectedMonthSelector } from '../selectors/selectors';
+import { Action } from 'redux';
 
-export const loadMonthEpic = (action$: ActionsObservable<MonthChangedAction>, state$: StateObservable<OpenTrappState>, { openTrappApi }: {openTrappApi: OpenTrappAPI}) =>
+export const loadMonthEpic = (action$: ActionsObservable<Action>, state$: StateObservable<OpenTrappState>, { openTrappApi }: {openTrappApi: OpenTrappAPI}) =>
     action$.pipe(
-        ofType(CALENDAR_CONSTANTS.MONTH_CHANGED),
-        map(a => a.payload),
+        ofType(CALENDAR_CONSTANTS.MONTH_CHANGED, CALENDAR_CONSTANTS.LOAD_MONTH),
+        map((a: any) => a.payload as { year: number, month: number }),
+        withLatestFrom(state$.pipe(map(selectedMonthSelector))),
+        map(([actionMonth, stateMonth]) => isNil(actionMonth) ? stateMonth : actionMonth),
         switchMap(({year, month}) => openTrappApi.calendarMonth(year, month)),
         map(m => monthLoadedAction(m)),
         catchError(err => {

src/epics/workLogEpics.ts

@@ -19,7 +19,7 @@ import { BulkEditDTO } from '../api/dtos';
 
 export const loadWorkLogsEpic = (action$: ActionsObservable<Action>, state$: StateObservable<OpenTrappState>, {openTrappApi}: { openTrappApi: OpenTrappAPI }) =>
     action$.pipe(
-        ofType(CALENDAR_CONSTANTS.MONTH_CHANGED, WORK_LOG_CONSTANTS.LOAD_WORK_LOGS, REGISTRATION_CONSTANTS.WORK_LOG_SAVED, WORK_LOG_CONSTANTS.BULK_EDIT_DONE),
+        ofType(CALENDAR_CONSTANTS.MONTH_CHANGED, WORK_LOG_CONSTANTS.LOAD_WORK_LOGS, CALENDAR_CONSTANTS.LOAD_MONTH, REGISTRATION_CONSTANTS.WORK_LOG_SAVED, WORK_LOG_CONSTANTS.BULK_EDIT_DONE),
         map((a: any) => a.payload as { year: number, month: number }),
         withLatestFrom(state$.pipe(map(s => s.calendar.selectedMonth))),
         map(([actionMonth, stateMonth]) => isNil(actionMonth) ? stateMonth : actionMonth),