mirror of
https://github.com/ershisan99/flashcards-example-project.git
synced 2025-12-18 12:33:22 +00:00
add update/delete/edit/add deck functionality
This commit is contained in:
@@ -29,6 +29,7 @@ export const DeckDialog = ({
|
||||
})
|
||||
const onSubmit = handleSubmit(data => {
|
||||
onConfirm(data)
|
||||
dialogProps.onOpenChange?.(false)
|
||||
reset()
|
||||
})
|
||||
const handleCancel = () => {
|
||||
|
||||
5
src/components/decks/decks-table.module.scss
Normal file
5
src/components/decks/decks-table.module.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.iconsContainer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -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 (
|
||||
<Table>
|
||||
<TableHeader columns={columns} />
|
||||
@@ -53,7 +62,23 @@ export const DecksTable = ({ decks }: Props) => {
|
||||
<TableCell>{deck.cardsCount}</TableCell>
|
||||
<TableCell>{formatDate(deck.updated)}</TableCell>
|
||||
<TableCell>{deck.author.name}</TableCell>
|
||||
<TableCell>...</TableCell>
|
||||
<TableCell>
|
||||
<div className={s.iconsContainer}>
|
||||
<Button variant={'icon'} as={Link} to={`/decks/${deck.id}/learn`}>
|
||||
<PlayCircleOutline />
|
||||
</Button>
|
||||
{deck.author.id === currentUserId && (
|
||||
<>
|
||||
<Button variant={'icon'} onClick={handleEditClick(deck.id)}>
|
||||
<Edit2Outline />
|
||||
</Button>
|
||||
<Button variant={'icon'} onClick={handleDeleteClick(deck.id)}>
|
||||
<TrashOutline />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
||||
Reference in New Issue
Block a user