Redux toolkit experience points refactor

src/pages/ExperiencePoints/ExperiencePointsFilters/index.tsx

@@ -12,7 +12,7 @@ import {
   setSelectedActivity,
   setSelectedCampaign,
   setSelectedDate,
-} from "src/redux/experiencePoints/actionCreator";
+} from "src/redux/experiencePoints/experiencePointsSlice";
 import { mapActivityName } from "src/redux/experiencePoints/utils";
 import { useAppDispatch } from "src/redux/provider";
 import { useGetUsersMeExperienceQuery } from "src/services/tryberApi";

src/pages/ExperiencePoints/ExperiencePointsTable/index.tsx

@@ -5,7 +5,7 @@ import {
 } from "@appquality/appquality-design-system";
 import { useTranslation } from "react-i18next";
 import { shallowEqual, useSelector } from "react-redux";
-import { updateExperiencePointsPagination } from "src/redux/experiencePoints/actionCreator";
+import { updateExperiencePointsPagination } from "src/redux/experiencePoints/experiencePointsSlice";
 import { useAppDispatch } from "src/store";
 import { useExperiencePointsColumns } from "../columns";
 import { useResetPaginationOnFilterChange } from "./useResetPaginationOnFilterChange";

src/pages/ExperiencePoints/columns.ts

@@ -1,7 +1,7 @@
 import { Column } from "@appquality/appquality-design-system/dist/stories/table/_types";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch } from "src/store";
-import { updateExperiencePointsSortingOptions } from "../../redux/experiencePoints/actionCreator";
+import { updateExperiencePointsSortingOptions } from "../../redux/experiencePoints/experiencePointsSlice";
 
 export const useExperiencePointsColumns = (): Column[] => {
   const { t } = useTranslation("translation");
@@ -13,7 +13,12 @@ export const useExperiencePointsColumns = (): Column[] => {
       key: "amount",
       isSortable: true,
       onSort: (newOrder) =>
-        dispatch(updateExperiencePointsSortingOptions(newOrder, "amount")),
+        dispatch(
+          updateExperiencePointsSortingOptions({
+            order: newOrder,
+            orderBy: "amount",
+          })
+        ),
       role: "cta",
       hideIndex: true,
     },
@@ -23,7 +28,12 @@ export const useExperiencePointsColumns = (): Column[] => {
       key: "date",
       isSortable: true,
       onSort: (newOrder) =>
-        dispatch(updateExperiencePointsSortingOptions(newOrder, "date")),
+        dispatch(
+          updateExperiencePointsSortingOptions({
+            order: newOrder,
+            orderBy: "date",
+          })
+        ),
       role: "overline",
       hideIndex: true,
     },

src/pages/ExperiencePoints/context.tsx

@@ -0,0 +1,59 @@
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+interface ExpPointsContextInterface {
+  order: "ASC" | "DESC";
+  orderBy: string;
+  setOrder: Dispatch<SetStateAction<"ASC" | "DESC">>;
+  setOrderBy: Dispatch<SetStateAction<string>>;
+}
+
+export const ExpPointsContext = createContext({
+  order: "ASC" as "ASC" | "DESC",
+  orderBy: "date" as string,
+  setOrder: (order: "ASC" | "DESC") => {},
+  setOrderBy: (orderBy: string) => {},
+});
+
+export const ExpPointsProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [order, setOrder] = useState<"ASC" | "DESC">("DESC");
+  const [orderBy, setOrderBy] = useState<string>("date");
+
+  const expPointsContextValue = useMemo(
+    () => ({
+      order,
+      orderBy,
+      setOrder: (order: "ASC" | "DESC") => {
+        setOrder(order);
+      },
+      setOrderBy: (orderBy: string) => {
+        setOrderBy(orderBy);
+      },
+    }),
+    [order, orderBy, setOrder, setOrderBy]
+  );
+
+  return (
+    <ExpPointsContext.Provider value={expPointsContextValue}>
+      {children}
+    </ExpPointsContext.Provider>
+  );
+};
+
+export const useExpPointsContext = () => {
+  const context = useContext(ExpPointsContext);
+
+  if (!context) throw new Error("Provider not found");
+
+  return context; // Now we can use the context in the component, SAFELY.
+};

src/redux/experiencePoints/experiencePointsSlice.tsx

@@ -0,0 +1,85 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const initialState: ExperiencePointsState = {
+  expList: {
+    start: 0,
+    limit: 25,
+    size: 0,
+    total: 0,
+    order: "DESC",
+    orderBy: "date",
+    sum: 0,
+    results: [],
+  },
+  campaigns: [],
+  activities: [],
+  dates: [],
+  isLoading: true,
+};
+
+export const experiencePointsSlice = createSlice({
+  name: "experiencePoints",
+  initialState,
+  reducers: {
+    setSelectedDate: (state, action) => {
+      state.selectedDate = action.payload;
+    },
+    setSelectedCampaign: (state, action) => {
+      state.selectedCampaign = action.payload;
+    },
+    setSelectedActivity: (state, action) => {
+      state.selectedActivity = action.payload;
+    },
+    setDates: (state, action) => {
+      state.dates = action.payload;
+    },
+    setSearch: (state, action) => {
+      state.search = action.payload;
+    },
+    updateExpListQuery: (state, action) => {
+      state.expList = {
+        ...state.expList,
+        ...action.payload,
+      };
+    },
+    updateExpList: (state, action) => {
+      state.expList = {
+        ...state.expList,
+        ...action.payload,
+      };
+      state.isLoading = false;
+    },
+    setIsLoading: (state, action) => {
+      state.isLoading = action.payload;
+    },
+    setActivities: (state, action) => {
+      state.activities = action.payload;
+    },
+    setCampaigns: (state, action) => {
+      state.campaigns = action.payload;
+    },
+    updateExperiencePointsSortingOptions: (state, action) => {
+      state.expList.orderBy = action.payload.orderBy;
+      state.expList.order = action.payload.order;
+    },
+    updateExperiencePointsPagination: (state, action) => {
+      state.expList.start = action.payload;
+    },
+  },
+});
+
+export default experiencePointsSlice.reducer;
+export const {
+  setSelectedDate,
+  setSelectedCampaign,
+  setSelectedActivity,
+  setDates,
+  updateExpListQuery,
+  updateExpList,
+  setSearch,
+  setActivities,
+  setCampaigns,
+  setIsLoading,
+  updateExperiencePointsSortingOptions,
+  updateExperiencePointsPagination,
+} = experiencePointsSlice.actions;

src/redux/reducer.tsx

@@ -8,7 +8,7 @@ import addResidenceAddressModal from "./addResidenceAddressModal/reducer";
 import wallet from "./wallet/reducer";
 import ranking from "./ranking/reducer";
 import myBugs from "./myBugs/reducer";
-import experiencePoints from "./experiencePoints/reducer";
+import experiencePoints from "./experiencePoints/experiencePointsSlice";
 
 const reducers = {
   menu,