add decks slice

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')

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

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
+    },
+  },
+})

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)