From ed863cd3a48517bb0b11ed31d9e5003fa58e05a2 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Tue, 30 Jan 2024 11:42:02 +0100 Subject: [PATCH 1/3] wip: create exp points slice --- .../ExperiencePointsFilters/index.tsx | 2 +- src/redux/experiencePoints/actionCreator.ts | 36 +-------- .../experiencePointsSlice.tsx | 80 +++++++++++++++++++ src/redux/reducer.tsx | 2 +- 4 files changed, 84 insertions(+), 36 deletions(-) create mode 100644 src/redux/experiencePoints/experiencePointsSlice.tsx 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/redux/experiencePoints/actionCreator.ts b/src/redux/experiencePoints/actionCreator.ts index ff1b40362..86d49e3b6 100644 --- a/src/redux/experiencePoints/actionCreator.ts +++ b/src/redux/experiencePoints/actionCreator.ts @@ -1,4 +1,3 @@ -import { SelectType } from "@appquality/appquality-design-system"; import { ThunkAction } from "redux-thunk"; export const updateExperiencePointsPagination = @@ -33,7 +32,7 @@ export const updateExperiencePointsSortingOptions = payload: { order: order, orderBy: orderBy }, }); }; - +/* export const setSelectedCampaign = ( campaign: SelectType.Option @@ -49,35 +48,4 @@ export const 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..467d861e7 --- /dev/null +++ b/src/redux/experiencePoints/experiencePointsSlice.tsx @@ -0,0 +1,80 @@ +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; + } */ + }, +}); + +export default experiencePointsSlice.reducer; +export const { + setSelectedDate, + setSelectedCampaign, + setSelectedActivity, + setDates, + updateExpListQuery, + updateExpList, + setSearch, + setActivities, + setCampaigns, + setIsLoading, +} = experiencePointsSlice.actions; 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, From 22c9ccd3f8f7d4f61fdee472f602fb0725eb48d9 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Tue, 30 Jan 2024 12:28:55 +0100 Subject: [PATCH 2/3] refactor: exp points rtk slice and removed unnecessary code --- .../ExperiencePointsTable/index.tsx | 2 +- src/pages/ExperiencePoints/columns.ts | 16 +++- src/redux/experiencePoints/actionCreator.ts | 51 ------------ .../experiencePointsSlice.tsx | 9 ++- src/redux/experiencePoints/reducer.ts | 80 ------------------- 5 files changed, 21 insertions(+), 137 deletions(-) delete mode 100644 src/redux/experiencePoints/actionCreator.ts delete mode 100644 src/redux/experiencePoints/reducer.ts 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/redux/experiencePoints/actionCreator.ts b/src/redux/experiencePoints/actionCreator.ts deleted file mode 100644 index 86d49e3b6..000000000 --- a/src/redux/experiencePoints/actionCreator.ts +++ /dev/null @@ -1,51 +0,0 @@ -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, - }); - }; -*/ diff --git a/src/redux/experiencePoints/experiencePointsSlice.tsx b/src/redux/experiencePoints/experiencePointsSlice.tsx index 467d861e7..f505264fd 100644 --- a/src/redux/experiencePoints/experiencePointsSlice.tsx +++ b/src/redux/experiencePoints/experiencePointsSlice.tsx @@ -58,10 +58,13 @@ export const experiencePointsSlice = createSlice({ setCampaigns: (state, action) => { state.campaigns = action.payload; }, - /* updateExperiencePointsSortingOptions: (state, action) => { + updateExperiencePointsSortingOptions: (state, action) => { state.expList.orderBy = action.payload.orderBy; state.expList.order = action.payload.order; - } */ + }, + updateExperiencePointsPagination: (state, action) => { + state.expList.start = action.payload; + }, }, }); @@ -77,4 +80,6 @@ export const { 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; - } -}; From 91d552bc0b851bdee97cd1be261b3abf741ced82 Mon Sep 17 00:00:00 2001 From: Kariamos Date: Thu, 22 Feb 2024 12:04:15 +0100 Subject: [PATCH 3/3] wip: created context Co-authored-by: Iacopo Leardini --- src/pages/ExperiencePoints/context.tsx | 59 ++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/pages/ExperiencePoints/context.tsx 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. +};