feat: determining whose deck, add sorting cards by (#110)

src/entities/deck/cardsTable/cardsHeader/cardsHeader.module.scss

@@ -1,8 +1,12 @@
 .nowrap {
  white-space: nowrap;
+
+ div {
+ cursor: pointer;
+ }
 }
 
-.update {
+.th {
  display: flex;
  gap: 4px;
  align-items: center;
@@ -14,6 +18,10 @@
  }
 }
 
+.arrowNone {
+ display: none;
+}
+
 .rotate90 {
  transform: rotate(90deg);
 }
@@ -30,9 +38,6 @@
  width: 25%;
 }
 
-.grade {
-}
-
 .empty {
  flex-grow: 0;
 }

src/entities/deck/cardsTable/cardsHeader/cardsHeader.tsx

@@ -6,27 +6,65 @@ import { clsx } from 'clsx'
 
 import s from './cardsHeader.module.scss'
 
-export const CardsHeader = () => {
- const [orderBy, setOrderBy] = useState('asc')
- const handleOrderByToggle = () => {
- setOrderBy(prev => (prev === 'asc' ? 'desc' : 'asc'))
- }
+type Props = {
+ changeOrder: (value: string) => void
+}
+
+type SortOrder = 'asc' | 'desc'
+type SortColumn = 'answer' | 'grade' | 'question' | 'updated'
 
- const arrowClass = clsx({
-  [s.arrow]: true,
- [s.rotate90]: orderBy === 'asc',
- [s.rotate270]: orderBy === 'desc',
+export const CardsHeader = ({ changeOrder }: Props) => {
+ const [sortConfig, setSortConfig] = useState<{ key: SortColumn; order: SortOrder }>({
+ key: 'answer',
+ order: 'asc',
  })
 
+ const handleSort = (key: SortColumn) => {
+ let order: SortOrder = 'asc'
+
+ if (sortConfig.key === key && sortConfig.order === 'asc') {
+ order = 'desc'
+ }
+
+ setSortConfig({ key, order })
+ changeOrder(`${key}-${order}`)
+ }
+
+ const getArrowClass = (key: SortColumn) =>
+ clsx({
+ [s.arrowClass]: sortConfig.key === key,
+ [s.arrowNone]: sortConfig.key !== key,
+ [s.rotate90]: sortConfig.key === key && sortConfig.order === 'asc',
+ [s.rotate270]: sortConfig.key === key && sortConfig.order === 'desc',
+ })
+
  return (
  <Table.THead>
  <Table.TRow className={s.nowrap}>
- <Table.Th className={s.question}>Question</Table.Th>
- <Table.Th className={s.answer}>Answer</Table.Th>
- <Table.Th className={s.update}>
- Last Updated <ArrowIosForward className={arrowClass} onClick={handleOrderByToggle} />
+ <Table.Th className={s.question} onClick={() => handleSort('question')}>
+ <div className={s.th}>
+ Question
+ <ArrowIosForward className={getArrowClass('question')} />
+ </div>
+ </Table.Th>
+ <Table.Th className={s.answer} onClick={() => handleSort('answer')}>
+ <div className={s.th}>
+ Answer
+ <ArrowIosForward className={getArrowClass('answer')} />
+ </div>
+ </Table.Th>
+ <Table.Th onClick={() => handleSort('updated')}>
+ <div className={s.th}>
+ Last Updated
+ <ArrowIosForward className={getArrowClass('updated')} />
+ </div>
+ </Table.Th>
+ <Table.Th onClick={() => handleSort('grade')}>
+ <div className={s.th}>
+ Grade
+ <ArrowIosForward className={getArrowClass('grade')} />
+ </div>
  </Table.Th>
- <Table.Th className={s.grade}>Grade</Table.Th>
  <Table.Th className={s.empty}></Table.Th>
  </Table.TRow>
  </Table.THead>

src/entities/deck/cardsTable/cardsTable.tsx

@@ -6,13 +6,14 @@ import s from './cardsTable.module.scss'
 
 type CardsTableProps = {
  cards: Card[] | undefined
+ changeOrder: (value: string) => void
  isOwner: boolean
 }
 
-export const CardsTable = ({ cards, isOwner }: CardsTableProps) => {
+export const CardsTable = ({ cards, changeOrder, isOwner }: CardsTableProps) => {
  return (
  <Table.TRoot className={s.table}>
- <CardsHeader />
+ <CardsHeader changeOrder={changeOrder} />
  <Table.TBody>
  {cards?.map(card => <CardRow {...card} isOwner={isOwner} key={card.id} />)}
  </Table.TBody>

src/pages/deck/deckPage.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react'
 import { useParams, useSearchParams } from 'react-router-dom'
 
 import { AddCardModal, CardsTable, DeckHeader } from '@/entities'
+import { useMeQuery } from '@/services/auth/auth.service'
 import { useGetCardsQuery } from '@/services/cards/cards.service'
 import { useGetDeckByIdQuery } from '@/services/decks/decks.service'
 import { Button, Page, Pagination, TextField, Typography } from '@/shared'
@@ -12,6 +13,7 @@ import s from './deckPage.module.scss'
 const defaultNumberPage = 1
 
 export const DeckPage = () => {
+ const { data: me } = useMeQuery()
  const { deckId } = useParams<{ deckId: string }>()
 
  const [searchParams, setSearchParams] = useSearchParams()
@@ -43,12 +45,15 @@ export const DeckPage = () => {
  isLoading: isDeckLoading,
  } = useGetDeckByIdQuery({ id: deckId ?? '' })
 
+ const [order, setOrder] = useState('')
+ const changeOrder = (value: string) => setOrder(value)
+
  const { cards, error, pagination } = useGetCardsQuery(
  {
  currentPage: currentPage,
  id: deckId ?? '',
  itemsPerPage: pageSize,
- orderBy: 'updated-desc',
+ orderBy: order || null,
  question: debounceText,
  },
  {
@@ -68,7 +73,7 @@ export const DeckPage = () => {
  return <div>{`Error: ${error || deckError || 'not found deckId'}`}</div>
  }
 
- const isOwner = deckData?.userId === deckData?.userId //some logic
+ const isOwner = me?.id === deckData?.userId
  const cardsLength = cards?.length ?? 0
 
  if (isDeckLoading) {
@@ -95,7 +100,7 @@ export const DeckPage = () => {
  variant={'search'}
  />
 
- <CardsTable cards={cards} isOwner={isOwner} />
+ <CardsTable cards={cards} changeOrder={changeOrder} isOwner={isOwner} />
  </>
  ) : (
  <>

src/services/cards/cards.types.ts

@@ -33,7 +33,7 @@ export interface GetCardsArgs {
  currentPage?: number
  id: string
  itemsPerPage?: number
- orderBy?: string | undefined
+ orderBy?: null | string
  question?: string
 }