From 575b14c9b4d13cf4420ffc57c5cfc7f57af567d4 Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Sun, 8 Oct 2023 12:58:55 +0200
Subject: [PATCH] add decks slice

---
 src/pages/decks-page/decks-page.tsx   |  7 ++++-
 src/services/decks/decks.selectors.ts | 13 +++++++++
 src/services/decks/decks.slice.ts     | 42 +++++++++++++++++++++++++++
 src/services/store.ts                 |  8 +++++
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/services/decks/decks.selectors.ts
 create mode 100644 src/services/decks/decks.slice.ts

diff --git a/src/pages/decks-page/decks-page.tsx b/src/pages/decks-page/decks-page.tsx
index 0297837..7ac4624 100644
--- a/src/pages/decks-page/decks-page.tsx
+++ b/src/pages/decks-page/decks-page.tsx
@@ -7,9 +7,14 @@ import { DecksTable } from '@/components/decks/decks-table.tsx'
 import { Pagination } from '@/components/ui/pagination'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useGetDecksQuery } from '@/services/decks'
+import { selectDecksCurrentPage } from '@/services/decks/decks.selectors.ts'
+import { decksSlice } from '@/services/decks/decks.slice.ts'
+import { useAppDispatch, useAppSelector } from '@/services/store.ts'
 
 export const DecksPage = () => {
-  const [currentPage, setCurrentPage] = useState(1)
+  const dispatch = useAppDispatch()
+  const currentPage = useAppSelector(selectDecksCurrentPage)
+  const setCurrentPage = (page: number) => dispatch(decksSlice.actions.setCurrentPage(page))
 
   const { data: decks } = useGetDecksQuery()
   const [activeTab, setActiveTab] = useState('my')
diff --git a/src/services/decks/decks.selectors.ts b/src/services/decks/decks.selectors.ts
new file mode 100644
index 0000000..2a14de6
--- /dev/null
+++ b/src/services/decks/decks.selectors.ts
@@ -0,0 +1,13 @@
+import { RootState } from '@/services/store.ts'
+
+export const selectDecksCurrentPage = (state: RootState) => state.decks.currentPage
+
+export const selectDecksPerPage = (state: RootState) => state.decks.perPage
+
+export const selectDecksSearch = (state: RootState) => state.decks.search
+
+export const selectDecksAuthorId = (state: RootState) => state.decks.authorId
+
+export const selectDecksMinCards = (state: RootState) => state.decks.minCards
+
+export const selectDecksMaxCards = (state: RootState) => state.decks.maxCards
diff --git a/src/services/decks/decks.slice.ts b/src/services/decks/decks.slice.ts
new file mode 100644
index 0000000..a6129b1
--- /dev/null
+++ b/src/services/decks/decks.slice.ts
@@ -0,0 +1,42 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export const decksSlice = createSlice({
+  name: 'decks',
+  initialState: {
+    currentPage: 1,
+    perPage: 10,
+    search: '',
+    authorId: '',
+    minCards: 0,
+    maxCards: null as number | null,
+  },
+  reducers: {
+    setCurrentPage: (state, action: PayloadAction<number>) => {
+      state.currentPage = action.payload
+    },
+    setPerPage: (state, action: PayloadAction<number>) => {
+      state.perPage = action.payload
+    },
+    setSearch: (state, action: PayloadAction<string>) => {
+      state.search = action.payload
+    },
+    setAuthorId: (state, action: PayloadAction<string>) => {
+      state.authorId = action.payload
+    },
+    setMinCards: (state, action: PayloadAction<number>) => {
+      state.minCards = action.payload
+    },
+    setMaxCards: (state, action: PayloadAction<number>) => {
+      state.maxCards = action.payload
+    },
+    resetFilters: state => {
+      state.search = ''
+      state.authorId = ''
+      state.minCards = 0
+      state.maxCards = null
+    },
+    resetCurrentPage: state => {
+      state.currentPage = 1
+    },
+  },
+})
diff --git a/src/services/store.ts b/src/services/store.ts
index 8470fd9..6ac8bf2 100644
--- a/src/services/store.ts
+++ b/src/services/store.ts
@@ -1,11 +1,15 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { setupListeners } from '@reduxjs/toolkit/query/react'
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
 
 import { baseApi } from './base-api'
 
+import { decksSlice } from '@/services/decks/decks.slice.ts'
+
 export const store = configureStore({
   reducer: {
     [baseApi.reducerPath]: baseApi.reducer,
+    [decksSlice.name]: decksSlice.reducer,
   },
   middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware),
 })
@@ -13,4 +17,8 @@ export const store = configureStore({
 export type AppDispatch = typeof store.dispatch
 export type RootState = ReturnType<typeof store.getState>
 
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+
 setupListeners(store.dispatch)