Merge pull request #170 from tahmid-saj/dev-ts-redux

migrating reducers to ts
tahmid-saj · Oct 3, 2024 · f8fd925 · f8fd925
2 parents ddb963b + 0a8ab03
commit f8fd925
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 127 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
+    "@types/redux-logger": "^3.0.13",
     "ag-grid-react": "^31.3.1",
     "apexcharts": "^3.44.0",
     "dayjs": "^1.11.11",
@@ -48,6 +49,7 @@
     "rsuite": "^5.64.1",
     "sass": "^1.66.1",
     "styled-components": "^6.1.11",
+    "typed-redux-saga": "^1.5.0",
     "typescript": "^5.6.2",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/store/middleware/logger.ts b/src/store/middleware/logger.ts
@@ -1,8 +1,8 @@
-// redux middlewares
-
 import { Middleware } from "redux"
 import { RootState } from "../store"
 
+// redux middlewares
+
 export const loggerMiddleware: Middleware<{}, RootState> = (store) => (next) => (action: any) => {
   if (!action.type) {
     return next(action)

diff --git a/src/store/root-reducer.toolkit.ts b/src/store/root-reducer.toolkit.ts
@@ -1,10 +1,10 @@
-import { combineReducers } from "@reduxjs/toolkit";
+// import { combineReducers } from "@reduxjs/toolkit";
 
-import { userReducer } from "./shared/user/user.reducer.toolkit";
-import { nutritionTrackerReducer } from "./signed-out/nutrition-tracker/nutrition-tracker.reducer.toolkit";
+// import { userReducer } from "./shared/user/user.reducer.toolkit";
+// import { nutritionTrackerReducer } from "./signed-out/nutrition-tracker/nutrition-tracker.reducer.toolkit";
 
-export const rootReducer = combineReducers({
-  user: userReducer,
+// export const rootReducer = combineReducers({
+//   user: userReducer,
 
-  nutritionTracker: nutritionTrackerReducer
-})
+//   nutritionTracker: nutritionTrackerReducer
+// })
diff --git a/src/store/signed-out/nutrition-tracker/nutrition-tracker.reducer.toolkit.ts b/src/store/signed-out/nutrition-tracker/nutrition-tracker.reducer.toolkit.ts
@@ -1,42 +1,42 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { NutritionTrackerState } from "./nutrition-tracker.reducer"
+// import { createSlice } from "@reduxjs/toolkit";
+// import { NutritionTrackerState } from "./nutrition-tracker.reducer"
 
-export const NUTRITION_TRACKER_INITIAL_STATE: NutritionTrackerState = {
-  nutritionTrackedDays: [],
-  formInputMicronutrients: [],
-  filterConditions: null,
-  nutritionTrackedDaysView: [],
-  dayTrackedSearchResult: undefined,
-  nutritionTrackedDaysSummary: {}
-}
+// export const NUTRITION_TRACKER_INITIAL_STATE: NutritionTrackerState = {
+//   nutritionTrackedDays: [],
+//   formInputMicronutrients: [],
+//   filterConditions: null,
+//   nutritionTrackedDaysView: [],
+//   dayTrackedSearchResult: undefined,
+//   nutritionTrackedDaysSummary: {}
+// }
 
-export const nutritionTrackerSlice = createSlice({
-  name: "nutritionTracker",
-  initialState: NUTRITION_TRACKER_INITIAL_STATE,
-  reducers: {
-    setNutritionTrackedDays(state, action) {
-      state.nutritionTrackedDays = action.payload
-    },
-    setFormInputMicronutrients(state, action) {
-      state.formInputMicronutrients = action.payload
-    },
-    setFilterConditions(state, action) {
-      state.filterConditions = action.payload
-    },
-    setNutritionTrackedDaysView(state, action) {
-      state.nutritionTrackedDaysView = action.payload
-    },
-    setDayTrackedSearchResult(state, action) {
-      state.dayTrackedSearchResult = action.payload
-    },
-    setNutritionTrackedDaysSummary(state, action) {
-      state.nutritionTrackedDaysSummary = action.payload
-    }
-  }
-})
+// export const nutritionTrackerSlice = createSlice({
+//   name: "nutritionTracker",
+//   initialState: NUTRITION_TRACKER_INITIAL_STATE,
+//   reducers: {
+//     setNutritionTrackedDays(state, action) {
+//       state.nutritionTrackedDays = action.payload
+//     },
+//     setFormInputMicronutrients(state, action) {
+//       state.formInputMicronutrients = action.payload
+//     },
+//     setFilterConditions(state, action) {
+//       state.filterConditions = action.payload
+//     },
+//     setNutritionTrackedDaysView(state, action) {
+//       state.nutritionTrackedDaysView = action.payload
+//     },
+//     setDayTrackedSearchResult(state, action) {
+//       state.dayTrackedSearchResult = action.payload
+//     },
+//     setNutritionTrackedDaysSummary(state, action) {
+//       state.nutritionTrackedDaysSummary = action.payload
+//     }
+//   }
+// })
 
-export const { setNutritionTrackedDays, setFormInputMicronutrients, setFilterConditions,
-  setNutritionTrackedDaysView, setDayTrackedSearchResult, setNutritionTrackedDaysSummary
-} = nutritionTrackerSlice.actions
+// export const { setNutritionTrackedDays, setFormInputMicronutrients, setFilterConditions,
+//   setNutritionTrackedDaysView, setDayTrackedSearchResult, setNutritionTrackedDaysSummary
+// } = nutritionTrackerSlice.actions
 
-export const nutritionTrackerReducer = nutritionTrackerSlice.reducer
+// export const nutritionTrackerReducer = nutritionTrackerSlice.reducer
diff --git a/src/store/signed-out/nutrition-tracker/nutrition-tracker.reducer.ts b/src/store/signed-out/nutrition-tracker/nutrition-tracker.reducer.ts
@@ -1,4 +1,3 @@
-import { PayloadAction } from "@reduxjs/toolkit";
 import { DayTrackedSearchResult, FilterConditions, FormInputMicronutrient, 
   NutritionTrackedDay, NutritionTrackedDaysSummary, NutritionTrackedDaysView, 
   ScheduledNutritionTrackedDaysView, SelectedNutritionTrackedDay } 
@@ -7,6 +6,8 @@ import { addDayTracked, addDayTrackedFromPrediction, addFormInputMicronutrients,
   deleteFormInputMicronutrients, filterDayTracked, getDayTracked, removeDayTracked, selectScheduledNutritionTrackedDay, 
   setFormInputMicronutrients, setNutritionTrackedDaysSummary, setNutritionTrackedDaysView, 
   setScheduledNutritionTrackedDaysView, updateDayTracked, updateFormInputMicronutrients } from "./nutrition-tracker.action";
+import { AnyAction } from "redux";
+import { ActionCreatorWithPayload } from "@reduxjs/toolkit"; // Import from Redux Toolkit for type safety
 
 export type NutritionTrackerState = {
   readonly nutritionTrackedDays: NutritionTrackedDay[] | null | undefined;
@@ -36,112 +37,70 @@ export const NUTRITION_TRACKER_INITIAL_STATE: NutritionTrackerState = {
 
 export const nutritionTrackerReducer = (
   state = NUTRITION_TRACKER_INITIAL_STATE, 
-  action: PayloadAction<any>
+  action: AnyAction
 ): NutritionTrackerState => {
-  if (addDayTracked.match(action) || updateDayTracked.match(action) 
-    || removeDayTracked.match(action) || addDayTrackedFromPrediction.match(action)) {
+  const isPayloadAction = (a: AnyAction): a is { payload: any } => 'payload' in a;
+
+  if ((addDayTracked.match(action) || updateDayTracked.match(action) 
+    || removeDayTracked.match(action) || addDayTrackedFromPrediction.match(action))
+    && isPayloadAction(action)) {
     return {
       ...state,
       nutritionTrackedDays: action.payload
     };
   }
 
-  if (addFormInputMicronutrients.match(action) || updateFormInputMicronutrients.match(action)
-    || deleteFormInputMicronutrients.match(action) || setFormInputMicronutrients.match(action)) {
+  if ((addFormInputMicronutrients.match(action) || updateFormInputMicronutrients.match(action)
+    || deleteFormInputMicronutrients.match(action) || setFormInputMicronutrients.match(action))
+    && isPayloadAction(action)) {
     return {
       ...state,
       formInputMicronutrients: action.payload
     };
   }
 
-  if (filterDayTracked.match(action) || clearDayTrackedFilter.match(action)) {
+  if ((filterDayTracked.match(action) || clearDayTrackedFilter.match(action))
+    && isPayloadAction(action)) {
     return {
       ...state,
       filterConditions: action.payload
     };
   }
 
-  if (selectScheduledNutritionTrackedDay.match(action)) {
+  if (selectScheduledNutritionTrackedDay.match(action) && isPayloadAction(action)) {
     return {
       ...state,
       selectedNutritionTrackedDay: action.payload
     };
   }
 
-  if (setScheduledNutritionTrackedDaysView.match(action)) {
+  if (setScheduledNutritionTrackedDaysView.match(action) && isPayloadAction(action)) {
     return {
       ...state,
       scheduledNutritionTrackedDaysView: action.payload
     };
   }
 
-  if (setNutritionTrackedDaysView.match(action)) {
+  if (setNutritionTrackedDaysView.match(action) && isPayloadAction(action)) {
     return {
       ...state,
       nutritionTrackedDaysView: action.payload
     };
   }
 
-  if (getDayTracked.match(action)) {
+  if (getDayTracked.match(action) && isPayloadAction(action)) {
     return {
       ...state,
       dayTrackedSearchResult: action.payload
     };
   }
 
-  if (setNutritionTrackedDaysSummary.match(action)) {
+  if (setNutritionTrackedDaysSummary.match(action) && isPayloadAction(action)) {
     return {
       ...state,
       nutritionTrackedDaysSummary: action.payload
     };
   }
 
   return state;
-
-  // const { type, payload } = action
-
-  // switch(type) {
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_NUTRITION_TRACKED_DAYS:
-  //     return {
-  //       ...state,
-  //       nutritionTrackedDays: payload
-  //     }
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_FORM_INPUT_MICRONUTRIENTS:
-  //     return {
-  //       ...state,
-  //       formInputMicronutrients: payload
-  //     }
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_FILTER_CONDITIONS:
-  //     return {
-  //       ...state,
-  //       filterConditions: payload
-  //     }
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_SELECTED_NUTRITION_TRACKED_DAY:
-  //     return {
-  //       ...state,
-  //       selectedNutritionTrackedDay: payload
-  //     }
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_SCHEDULED_NUTRITION_TRACKED_DAYS_VIEW:
-  //     return {
-  //       ...state,
-  //       scheduledNutritionTrackedDaysView: payload
-  //     }
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_NUTRITION_TRACKED_DAYS_VIEW:
-  //     return {
-  //       ...state,
-  //       nutritionTrackedDaysView: payload
-  //     }
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_DAY_TRACKED_SEARCH_RESULT:
-  //     return {
-  //       ...state,
-  //       dayTrackedSearchResult: payload
-  //     }
-  //   case NUTRITION_TRACKER_ACTION_TYPES.SET_NUTRITION_TRACKED_DAYS_SUMMARY:
-  //     return {
-  //       ...state,
-  //       nutritionTrackedDaysSummary: payload
-  //     }
-  //   default:
-  //     return state
-  // }
-}
+}
diff --git a/src/store/store.ts b/src/store/store.ts
@@ -1,4 +1,4 @@
-import { compose, createStore, applyMiddleware } from "redux"
+import { compose, createStore, applyMiddleware, Middleware } from "redux"
 import logger from "redux-logger"
 import { persistStore, persistReducer } from "redux-persist"
 import storage from "redux-persist/lib/storage"
@@ -25,7 +25,7 @@ const middlewares = [
   process.env.NODE_ENV !== "production" && logger,
   // thunk,
   sagaMiddleware
-].filter(Boolean)
+].filter((middleware): middleware is Middleware => Boolean(middlewares))
 
 const composeEnhancer = (
   process.env.NODE_ENV !== "production" && window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__