add update/delete/edit/add deck functionality

src/pages/decks-page/decks-page.tsx

@@ -3,10 +3,18 @@ import { useState } from 'react'
 import s from './decks-page.module.scss'
 
 import { Button, Page, Slider, TextField, Typography } from '@/components'
+import { DeckDialog } from '@/components/decks/deck-dialog'
 import { DecksTable } from '@/components/decks/decks-table'
+import { DeleteDeckDialog } from '@/components/decks/delete-deck-dialog'
 import { Pagination } from '@/components/ui/pagination'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Tab, useGetDecksQuery } from '@/services/decks'
+import {
+  Tab,
+  useCreateDeckMutation,
+  useDeleteDeckMutation,
+  useGetDecksQuery,
+  useUpdateDeckMutation,
+} from '@/services/decks'
 import {
   selectDecksCurrentPage,
   selectDecksCurrentTab,
@@ -15,9 +23,15 @@ import {
   selectDecksSearch,
 } from '@/services/decks/decks.selectors.ts'
 import { decksSlice } from '@/services/decks/decks.slice.ts'
-import { useAppDispatch, useAppSelector } from '@/services/store.ts'
+import { useAppDispatch, useAppSelector } from '@/services/store'
 
 export const DecksPage = () => {
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [deckToDeleteId, setDeckToDeleteId] = useState<string | null>(null)
+  const [deckToEditId, setDeckToEditId] = useState<string | null>(null)
+
+  const showEditModal = !!deckToEditId
+
   const dispatch = useAppDispatch()
   const currentPage = useAppSelector(selectDecksCurrentPage)
   const minCards = useAppSelector(selectDecksMinCards)
@@ -30,14 +44,19 @@ export const DecksPage = () => {
   const setSearch = (search: string) => dispatch(decksSlice.actions.setSearch(search))
   const setCurrentTab = (tab: Tab) => dispatch(decksSlice.actions.setCurrentTab(tab))
 
+  const resetFilters = () => {
+    dispatch(decksSlice.actions.resetFilters())
+    setRangeValue([0, decks?.maxCardsCount || undefined])
+  }
+
   const [rangeValue, setRangeValue] = useState([minCards, maxCards])
 
   const handleSliderCommitted = (value: number[]) => {
     setMinCards(value[0])
     setMaxCards(value[1])
   }
-
-  const authorId = currentTab === 'my' ? 'f2be95b9-4d07-4751-a775-bd612fc9553a' : undefined
+  const currentUserId = 'f2be95b9-4d07-4751-a775-bd612fc9553a'
+  const authorId = currentTab === 'my' ? currentUserId : undefined
 
   const { data: decks } = useGetDecksQuery({
     currentPage,
@@ -47,14 +66,51 @@ export const DecksPage = () => {
     authorId,
   })
 
+  const showConfirmDeleteModal = !!deckToDeleteId
+  const deckToDeleteName = decks?.items?.find(deck => deck.id === deckToDeleteId)?.name
+
+  const deckToEdit = decks?.items?.find(deck => deck.id === deckToEditId)
+
+  const [createDeck] = useCreateDeckMutation()
+  const [deleteDeck] = useDeleteDeckMutation()
+  const [updateDeck] = useUpdateDeckMutation()
+  const openCreateModal = () => setShowCreateModal(true)
+
   if (!decks) return <div>loading...</div>
 
   return (
     <Page>
+      <DeleteDeckDialog
+        open={showConfirmDeleteModal}
+        onOpenChange={() => setDeckToDeleteId(null)}
+        deckName={deckToDeleteName ?? 'Selected deck'}
+        onCancel={() => setDeckToDeleteId(null)}
+        onConfirm={() => {
+          deleteDeck({ id: deckToDeleteId ?? '' })
+          setDeckToDeleteId(null)
+        }}
+      />
+      <DeckDialog
+        open={showEditModal}
+        onOpenChange={() => setDeckToEditId(null)}
+        onConfirm={data => {
+          if (!deckToEditId) return
+
+          updateDeck({ id: deckToEditId, ...data })
+        }}
+        defaultValues={deckToEdit}
+        key={deckToEditId}
+      />
       <div className={s.root}>
         <div className={s.header}>
           <Typography variant="large">Decks</Typography>
-          <Button>Add new deck</Button>
+          <Button onClick={openCreateModal}>Add new deck</Button>
+          <DeckDialog
+            open={showCreateModal}
+            onOpenChange={setShowCreateModal}
+            onConfirm={createDeck}
+            onCancel={() => setShowCreateModal(false)}
+          />
         </div>
         <div className={s.filters}>
           <TextField placeholder="Search" search value={search} onValueChange={setSearch} />
@@ -71,9 +127,16 @@ export const DecksPage = () => {
             min={0}
             max={decks?.maxCardsCount || 0}
           />
-          <Button variant={'secondary'}>Clear filters</Button>
+          <Button variant={'secondary'} onClick={resetFilters}>
+            Clear filters
+          </Button>
         </div>
-        <DecksTable decks={decks?.items} />
+        <DecksTable
+          decks={decks?.items}
+          onDeleteClick={setDeckToDeleteId}
+          onEditClick={setDeckToEditId}
+          currentUserId={currentUserId}
+        />
         <Pagination
           count={decks?.pagination?.totalPages || 1}
           page={currentPage}