migrating redux to ts

src/contexts/signed-out/nutrition-tracker/nutrition-tracker.types.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from "react";
+
+// nutrition tracker types
+
+export interface NutritionTrackedDayContextType {
+  nutritionTrackedDays: NutritionTrackedDay[];
+  formInputMicronutrients: FormInputMicronutrient[];
+  selectedNutritionTrackedDay: SelectedNutritionTrackedDay;
+  filterConditions: FilterConditions;
+  nutritionTrackedDaysView: NutritionTrackedDaysView;
+  scheduledNutritionTrackedDaysView: ScheduledNutritionTrackedDaysView;
+
+  addDayTracked: (trackedDayInfo: NutritionTrackedDay) => void;
+  updateDayTracked: (updatedTrackedDayInfo: NutritionTrackedDay) => void;
+  getDayTracked: (trackedDay: string | Date) => void;
+
+  selectedScheduledNutritionTrackedDay: (trackedDay: string | Date) => void;
+
+  dayTrackedSearchResult: NutritionTrackedDay;
+
+  addFormInputMicronutrients: () => void;
+  updateFormInputMicronutrients: (micronutrient: Micronutrient, micronutrientIndex: number) => void;
+  deleteFormInputMicronutrients: (micronutrientIndex: number) => void;
+
+  addDayTrackedFromPrediction: (predictionNutritionInfo: PredictionNutritionInfo) => void;
+
+  nutritionTrackedDaysSummary: NutritionTrackedDaysSummary;
+
+  filterDayTracked: (filterConditions: FilterConditions) => void;
+  removeDayTracked: (trackedDay: string | Date) => void;
+  clearDayTrackedFilter: () => void;
+}
+
+export interface NutritionTrackedDayProviderProps {
+  children: ReactNode
+}
+
+export type NutritionTrackedDay = {
+  dateTracked: string;
+  calories: number;
+  macronutrients: Macronutrient[];
+  micronutrients: Micronutrient[];
+}
+
+export type Macronutrient = {
+  carbohydrates: number;
+  protein: number;
+  fat: number;
+}
+
+export type Micronutrient = {
+  name: string;
+  amount: number;
+  unit: string;
+}
+
+export type FormInputMicronutrient = {
+  name: string;
+  amount: number;
+  unit: string;
+}
+
+export type SelectedNutritionTrackedDay = string | Date | null;
+
+export type FilterConditions = {
+  filterStartDate?: string;
+  filterEndDate?: string;
+}
+
+export type NutritionTrackedDaysView = NutritionTrackedDay[];
+
+export type ScheduledNutritionTrackedDaysView = NutritionTrackedDay
+
+export type DayTrackedSearchResult = NutritionTrackedDay;
+
+export type NutritionTrackedDaysSummary = {
+  averageDailyCaloriesConsumption: number;
+  averageDailyCarbohydratesConsumption: number;
+  averageDailyProteinConsumption: number;
+  averageDailyFatConsumption: number;
+}
+
+export type PredictionNutritionInfo = {
+  dateTracked: string | Date;
+  calories: number;
+  macronutrients: Macronutrient[];
+  micronutrients: Micronutrient[];
+}

src/store/middleware/logger.js → src/store/middleware/logger.ts

@@ -1,6 +1,9 @@
 // redux middlewares
 
-export const loggerMiddleware = (store) => (next) => (action) => {
+import { Middleware } from "redux"
+import { RootState } from "../store"
+
+export const loggerMiddleware: Middleware<{}, RootState> = (store) => (next) => (action: any) => {
   if (!action.type) {
     return next(action)
   }

src/store/shared/user/user.action.ts

@@ -0,0 +1,68 @@
+import { User } from "firebase/auth";
+import { AdditionalInformation, UserData } from "../../../utils/firebase/firebase.utils";
+import { Action, ActionWithPayload, createAction, withMatcher } from "../../../utils/reducer/reducer.utils";
+import { USER_ACTION_TYPES } from "./user.types"
+
+export type CheckUserSession = Action<USER_ACTION_TYPES.CHECK_USER_SESSION>
+export type SetCurrentUser = ActionWithPayload<USER_ACTION_TYPES.SET_CURRENT_USER, UserData>
+export type GoogleSignInStart = Action<USER_ACTION_TYPES.GOOGLE_SIGN_IN_START>
+export type EmailSignInStart = ActionWithPayload<USER_ACTION_TYPES.EMAIL_SIGN_IN_START, { email: string, password: string }>
+export type SignInSuccess = ActionWithPayload<USER_ACTION_TYPES.SIGN_IN_SUCCESS, UserData>
+export type SignInFailed = ActionWithPayload<USER_ACTION_TYPES.SIGN_IN_FAILED, Error>
+export type SignUpStart = ActionWithPayload<USER_ACTION_TYPES.SIGN_UP_START, { email: string, password: string, displayName: string }>
+export type SignUpSuccess = ActionWithPayload<USER_ACTION_TYPES.SIGN_UP_SUCCESS, { user: User, additionalDetails: AdditionalInformation }>
+export type SignUpFailed = ActionWithPayload<USER_ACTION_TYPES.SIGN_UP_FAILED, Error>
+export type SignOutStart = Action<USER_ACTION_TYPES.SIGN_OUT_START>
+export type SignOutSuccess = Action<USER_ACTION_TYPES.SIGN_OUT_SUCCESS>
+export type SignOutFailed = ActionWithPayload<USER_ACTION_TYPES.SIGN_OUT_FAILED, Error>
+
+export const setCurrentUser = withMatcher((user: UserData): SetCurrentUser => createAction(USER_ACTION_TYPES.SET_CURRENT_USER, user))
+
+export const checkUserSession = withMatcher((): CheckUserSession => createAction(USER_ACTION_TYPES.CHECK_USER_SESSION))
+
+export const googleSignInStart = withMatcher((): GoogleSignInStart => createAction(USER_ACTION_TYPES.GOOGLE_SIGN_IN_START))
+
+export const emailSignInStart = withMatcher((email: string, password: string): EmailSignInStart => createAction(USER_ACTION_TYPES.EMAIL_SIGN_IN_START, { email, password }))
+
+export const signInSuccess = withMatcher((user: UserData): SignInSuccess => createAction(USER_ACTION_TYPES.SIGN_IN_SUCCESS, user))
+
+export const signInFailed = withMatcher((error: Error): SignInFailed => createAction(USER_ACTION_TYPES.SIGN_IN_FAILED, error))
+
+export const signUpStart = withMatcher((email: string, password: string, displayName: string): SignUpStart => createAction(USER_ACTION_TYPES.SIGN_UP_START, { email, password, displayName }))
+
+export const signUpSuccess = withMatcher((user: User, additionalDetails: AdditionalInformation): SignUpSuccess => createAction(USER_ACTION_TYPES.SIGN_UP_SUCCESS, { user, additionalDetails }))
+
+export const signUpFailed = withMatcher((error: Error): SignUpFailed => createAction(USER_ACTION_TYPES.SIGN_UP_FAILED, error))
+
+export const signOutStart = withMatcher((): SignOutStart => createAction(USER_ACTION_TYPES.SIGN_OUT_START))
+
+export const signOutSuccess = withMatcher((): SignOutSuccess => createAction(USER_ACTION_TYPES.SIGN_OUT_SUCCESS))
+
+export const signOutFailed = withMatcher((error: Error): SignOutFailed => createAction(USER_ACTION_TYPES.SIGN_OUT_FAILED, error))
+
+// import { createAction } from "../../../utils/reducer/reducer.utils";
+// import { USER_ACTION_TYPES } from "./user.types"
+
+// export const setCurrentUser = (user) => createAction(USER_ACTION_TYPES.SET_CURRENT_USER, user)
+
+// export const checkUserSession = () => createAction(USER_ACTION_TYPES.CHECK_USER_SESSION)
+
+// export const googleSignInStart = () => createAction(USER_ACTION_TYPES.GOOGLE_SIGN_IN_START)
+
+// export const emailSignInStart = (email, password) => createAction(USER_ACTION_TYPES.EMAIL_SIGN_IN_START, { email, password })
+
+// export const signInSuccess = (user) => createAction(USER_ACTION_TYPES.SIGN_IN_SUCCESS, user)
+
+// export const signInFailed = (error) => createAction(USER_ACTION_TYPES.SIGN_IN_FAILED, error)
+
+// export const signUpStart = (email, password, displayName) => createAction(USER_ACTION_TYPES.SIGN_UP_START, { email, password, displayName })
+
+// export const signUpSuccess = (user, additionalDetails) => createAction(USER_ACTION_TYPES.SIGN_UP_SUCCESS, { user, additionalDetails })
+
+// export const signUpFailed = (error) => createAction(USER_ACTION_TYPES.SIGN_UP_FAILED, error)
+
+// export const signOutStart = () => createAction(USER_ACTION_TYPES.SIGN_OUT_START)
+
+// export const signOutSuccess = () => createAction(USER_ACTION_TYPES.SIGN_OUT_SUCCESS)
+
+// export const signOutFailed = (error) => createAction(USER_ACTION_TYPES.SIGN_OUT_FAILED)

src/store/shared/user/user.reducer.toolkit.ts

@@ -0,0 +1,42 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { UserState } from "./user.reducer";
+
+const INITIAL_STATE: UserState = {
+  currentUser: null,
+  isLoading: false,
+  error: null
+}
+
+export const userSlice = createSlice({
+  name: "user",
+  initialState: INITIAL_STATE,
+  reducers: {
+    setCurrentUser(state, action) {
+      state.currentUser = action.payload
+    }
+  }
+})
+
+export const { setCurrentUser } = userSlice.actions
+
+export const userReducer = userSlice.reducer
+
+// import { createSlice } from "@reduxjs/toolkit";
+
+// const INITIAL_STATE = {
+//   currentUser: null
+// }
+
+// export const userSlice = createSlice({
+//   name: "user",
+//   initialState: INITIAL_STATE,
+//   reducers: {
+//     setCurrentUser(state, action) {
+//       state.currentUser = action.payload
+//     }
+//   }
+// })
+
+// export const { setCurrentUser } = userSlice.actions
+
+// export const userReducer = userSlice.reducer