diff --git a/src/components/decks/deck-dialog/deck-dialog.tsx b/src/components/decks/deck-dialog/deck-dialog.tsx
index e9b3897..e529f47 100644
--- a/src/components/decks/deck-dialog/deck-dialog.tsx
+++ b/src/components/decks/deck-dialog/deck-dialog.tsx
@@ -29,6 +29,7 @@ export const DeckDialog = ({
})
const onSubmit = handleSubmit(data => {
onConfirm(data)
+ dialogProps.onOpenChange?.(false)
reset()
})
const handleCancel = () => {
diff --git a/src/components/decks/decks-table.module.scss b/src/components/decks/decks-table.module.scss
new file mode 100644
index 0000000..64afbbd
--- /dev/null
+++ b/src/components/decks/decks-table.module.scss
@@ -0,0 +1,5 @@
+.iconsContainer {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
diff --git a/src/components/decks/decks-table.tsx b/src/components/decks/decks-table.tsx
index cc14eb6..c29e1ac 100644
--- a/src/components/decks/decks-table.tsx
+++ b/src/components/decks/decks-table.tsx
@@ -1,6 +1,10 @@
import { Link } from 'react-router-dom'
+import s from './decks-table.module.scss'
+
+import { Edit2Outline, PlayCircleOutline, TrashOutline } from '@/assets'
import {
+ Button,
Column,
Table,
TableBody,
@@ -11,7 +15,6 @@ import {
} from '@/components'
import { Deck } from '@/services/decks'
import { formatDate } from '@/utils'
-
const columns: Column[] = [
{
key: 'name',
@@ -37,8 +40,14 @@ const columns: Column[] = [
type Props = {
decks: Deck[] | undefined
+ onDeleteClick: (id: string) => void
+ currentUserId: string
+ onEditClick: (id: string) => void
}
-export const DecksTable = ({ decks }: Props) => {
+export const DecksTable = ({ decks, onEditClick, onDeleteClick, currentUserId }: Props) => {
+ const handleEditClick = (id: string) => () => onEditClick(id)
+ const handleDeleteClick = (id: string) => () => onDeleteClick(id)
+
return (
@@ -53,7 +62,23 @@ export const DecksTable = ({ decks }: Props) => {
{deck.cardsCount}
{formatDate(deck.updated)}
{deck.author.name}
- ...
+
+
+
+ {deck.author.id === currentUserId && (
+ <>
+
+
+ >
+ )}
+
+
))}
diff --git a/src/pages/decks-page/decks-page.tsx b/src/pages/decks-page/decks-page.tsx
index bc4192e..b4ec4ed 100644
--- a/src/pages/decks-page/decks-page.tsx
+++ b/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(null)
+ const [deckToEditId, setDeckToEditId] = useState(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 loading...
return (
+ setDeckToDeleteId(null)}
+ deckName={deckToDeleteName ?? 'Selected deck'}
+ onCancel={() => setDeckToDeleteId(null)}
+ onConfirm={() => {
+ deleteDeck({ id: deckToDeleteId ?? '' })
+ setDeckToDeleteId(null)
+ }}
+ />
+ setDeckToEditId(null)}
+ onConfirm={data => {
+ if (!deckToEditId) return
+
+ updateDeck({ id: deckToEditId, ...data })
+ }}
+ defaultValues={deckToEdit}
+ key={deckToEditId}
+ />
Decks
-
+
+ setShowCreateModal(false)}
+ />
@@ -71,9 +127,16 @@ export const DecksPage = () => {
min={0}
max={decks?.maxCardsCount || 0}
/>
-
+
-
+
& { id: Deck['id'] }
+
export type Tab = 'all' | 'my'