diff --git a/src/pages/ExperiencePoints/ExperiencePointsFilters/index.tsx b/src/pages/ExperiencePoints/ExperiencePointsFilters/index.tsx index 70587ffb0..198c1f77e 100644 --- a/src/pages/ExperiencePoints/ExperiencePointsFilters/index.tsx +++ b/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"; diff --git a/src/pages/ExperiencePoints/ExperiencePointsTable/index.tsx b/src/pages/ExperiencePoints/ExperiencePointsTable/index.tsx index 75d258ab9..fe4a06742 100644 --- a/src/pages/ExperiencePoints/ExperiencePointsTable/index.tsx +++ b/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"; diff --git a/src/pages/ExperiencePoints/columns.ts b/src/pages/ExperiencePoints/columns.ts index 382e88237..651dfc032 100644 --- a/src/pages/ExperiencePoints/columns.ts +++ b/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, }, diff --git a/src/pages/ExperiencePoints/context.tsx b/src/pages/ExperiencePoints/context.tsx new file mode 100644 index 000000000..06df3c52a --- /dev/null +++ b/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>; + setOrderBy: Dispatch>; +} + +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("date"); + + const expPointsContextValue = useMemo( + () => ({ + order, + orderBy, + setOrder: (order: "ASC" | "DESC") => { + setOrder(order); + }, + setOrderBy: (orderBy: string) => { + setOrderBy(orderBy); + }, + }), + [order, orderBy, setOrder, setOrderBy] + ); + + return ( + + {children} + + ); +}; + +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. +}; diff --git a/src/redux/experiencePoints/actionCreator.ts b/src/redux/experiencePoints/actionCreator.ts deleted file mode 100644 index ff1b40362..000000000 --- a/src/redux/experiencePoints/actionCreator.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { SelectType } from "@appquality/appquality-design-system"; -import { ThunkAction } from "redux-thunk"; - -export const updateExperiencePointsPagination = - ( - newStart: number - ): ThunkAction< - Promise, - GeneralState, - unknown, - ExperiencePointsActions - > => - async (dispatch) => { - dispatch({ - type: "experiencePoints/updateExpListQuery", - payload: { start: newStart }, - }); - }; - -export const updateExperiencePointsSortingOptions = - ( - order: ExperiencePointsState["expList"]["order"], - orderBy: ExperiencePointsState["expList"]["orderBy"] - ): ThunkAction< - Promise, - GeneralState, - unknown, - ExperiencePointsActions - > => - async (dispatch) => { - dispatch({ - type: "experiencePoints/updateExpListQuery", - payload: { order: order, orderBy: orderBy }, - }); - }; - -export const setSelectedCampaign = - ( - campaign: SelectType.Option - ): ThunkAction< - Promise, - GeneralState, - unknown, - ExperiencePointsActions - > => - async (dispatch) => { - dispatch({ - type: "experiencePoints/setSelectedCampaign", - payload: campaign, - }); - }; - -export const setSelectedActivity = - ( - activity: SelectType.Option - ): ThunkAction< - Promise, - GeneralState, - unknown, - ExperiencePointsActions - > => - async (dispatch) => { - dispatch({ - type: "experiencePoints/setSelectedActivity", - payload: activity, - }); - }; - -export const setSelectedDate = - ( - date: SelectType.Option - ): ThunkAction< - Promise, - GeneralState, - unknown, - ExperiencePointsActions - > => - async (dispatch) => { - dispatch({ - type: "experiencePoints/setSelectedDate", - payload: date, - }); - }; diff --git a/src/redux/experiencePoints/experiencePointsSlice.tsx b/src/redux/experiencePoints/experiencePointsSlice.tsx new file mode 100644 index 000000000..f505264fd --- /dev/null +++ b/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; diff --git a/src/redux/experiencePoints/reducer.ts b/src/redux/experiencePoints/reducer.ts deleted file mode 100644 index e3647351d..000000000 --- a/src/redux/experiencePoints/reducer.ts +++ /dev/null @@ -1,80 +0,0 @@ -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 default (state = initialState, action: ExperiencePointsActions) => { - switch (action.type) { - case "experiencePoints/updateExpListQuery": - return { - ...state, - expList: { - ...state.expList, - ...action.payload, - }, - }; - case "experiencePoints/updateExpList": - return { - ...state, - expList: { - ...state.expList, - ...action.payload, - }, - isLoading: false, - }; - case "experiencePoints/setCampaigns": - return { - ...state, - campaigns: action.payload, - }; - case "experiencePoints/setActivities": - return { - ...state, - activities: action.payload, - }; - case "experiencePoints/setDates": - return { - ...state, - dates: action.payload, - }; - case "experiencePoints/setSelectedCampaign": - return { - ...state, - selectedCampaign: action.payload, - }; - case "experiencePoints/setSelectedActivity": - return { - ...state, - selectedActivity: action.payload, - }; - case "experiencePoints/setSelectedDate": - return { - ...state, - selectedDate: action.payload, - }; - case "experiencePoints/setSearch": - return { - ...state, - search: action.payload, - }; - case "experiencePoints/setIsLoading": - return { - ...state, - isLoading: action.payload, - }; - default: - return state; - } -}; diff --git a/src/redux/reducer.tsx b/src/redux/reducer.tsx index 25d3fb865..f0a590c96 100644 --- a/src/redux/reducer.tsx +++ b/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,