wip

.prettierrc.cjs

@@ -1,4 +1,5 @@
 module.exports = {
     ...require('@it-incubator/prettier-config'),
+    tabWidth: 4,
     //override settings here
 }

src/components/auth/recover-password/recover-password.tsx

@@ -1,7 +1,7 @@
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 
-import { Button, Card, ControlledTextField, Typography } from '../../ui'
+import { Button, Card, ControlledTextField, Typography } from '@/components'
 import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'

src/pages/deck-page/deck-page.tsx

@@ -6,26 +6,26 @@ import { Pagination } from '@/components/ui/pagination'
 import { useGetDeckByIdQuery, useGetDeckCardsQuery } from '@/services'
 
 export const DeckPage = () => {
-  const { deckId } = useParams()
-  const [currentPage, setCurrentPage] = useState(1)
-  const { data: deckData } = useGetDeckByIdQuery({ id: deckId || '' })
-  const { data: cardsData } = useGetDeckCardsQuery({ id: deckId || '' })
+    const { deckId } = useParams()
+    const [currentPage, setCurrentPage] = useState(1)
+    const { data: deckData } = useGetDeckByIdQuery({ id: deckId || '' })
+    const { data: cardsData } = useGetDeckCardsQuery({ id: deckId || '' })
 
-  const learnLink = `/decks/${deckId}/learn`
+    const learnLink = `/decks/${deckId}/learn`
 
-  return (
-    <div>
-      <Typography variant={'large'}>{deckData?.name}</Typography>
-      <Button as={Link} to={learnLink}>
-        Learn
-      </Button>
-      <TextField placeholder={'Search cards'} search />
-      <CardsTable cards={cardsData?.items} />
-      <Pagination
-        count={cardsData?.pagination?.totalPages || 1}
-        onChange={setCurrentPage}
-        page={currentPage}
-      />
-    </div>
-  )
+    return (
+        <div>
+            <Typography variant={'large'}>{deckData?.name}</Typography>
+            <Button as={Link} to={learnLink}>
+                Learn
+            </Button>
+            <TextField placeholder={'Search cards'} search />
+            <CardsTable cards={cardsData?.items} />
+            <Pagination
+                count={cardsData?.pagination?.totalPages || 1}
+                onChange={setCurrentPage}
+                page={currentPage}
+            />
+        </div>
+    )
 }

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

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

src/services/decks/decks.service.ts

@@ -6,19 +6,31 @@ import {
   GetDecksArgs,
   UpdateDeckArgs,
 } from './decks.types'
-
 import { baseApi } from '@/services'
 
 const decksService = baseApi.injectEndpoints({
   endpoints: builder => ({
-    getDecks: builder.query<DecksResponse, GetDecksArgs | void>({
-      query: args => {
-        return {
-          url: `v1/decks`,
-          params: args ?? undefined,
-        }
+    createDeck: builder.mutation<DeckResponse, CreateDeckArgs>({
+      invalidatesTags: ['Decks'],
+      onQueryStarted: async (_, { dispatch, getCacheEntry, getState, queryFulfilled }) => {
+        const data = getCacheEntry()
+        const state = getState()
+
+        decksService.util.re
+        await queryFulfilled
       },
-      providesTags: ['Decks'],
+      query: body => ({
+        body,
+        method: 'POST',
+        url: `v1/decks`,
+      }),
+    }),
+    deleteDeck: builder.mutation<void, { id: string }>({
+      invalidatesTags: ['Decks'],
+      query: ({ id }) => ({
+        method: 'DELETE',
+        url: `v1/decks/${id}`,
+      }),
     }),
     getDeckById: builder.query<DeckResponse, { id: string }>({
       query: ({ id }) => `v1/decks/${id}`,
@@ -26,37 +38,31 @@ const decksService = baseApi.injectEndpoints({
     getDeckCards: builder.query<CardsResponse, { id: string }>({
       query: ({ id }) => `v1/decks/${id}/cards`,
     }),
-    createDeck: builder.mutation<DeckResponse, CreateDeckArgs>({
-      query: body => ({
-        url: `v1/decks`,
-        method: 'POST',
-        body,
-      }),
-      invalidatesTags: ['Decks'],
-    }),
-    deleteDeck: builder.mutation<void, { id: string }>({
-      query: ({ id }) => ({
-        url: `v1/decks/${id}`,
-        method: 'DELETE',
-      }),
-      invalidatesTags: ['Decks'],
+    getDecks: builder.query<DecksResponse, GetDecksArgs | void>({
+      providesTags: ['Decks'],
+      query: args => {
+        return {
+          params: args ?? undefined,
+          url: `v1/decks`,
+        }
+      },
     }),
     updateDeck: builder.mutation<DeckResponse, UpdateDeckArgs>({
-      query: ({ id, ...body }) => ({
-        url: `v1/decks/${id}`,
-        method: 'PATCH',
-        body,
-      }),
       invalidatesTags: ['Decks'],
+      query: ({ id, ...body }) => ({
+        body,
+        method: 'PATCH',
+        url: `v1/decks/${id}`,
+      }),
     }),
   }),
 })
 
 export const {
-  useGetDecksQuery,
-  useGetDeckByIdQuery,
-  useGetDeckCardsQuery,
   useCreateDeckMutation,
   useDeleteDeckMutation,
+  useGetDeckByIdQuery,
+  useGetDeckCardsQuery,
+  useGetDecksQuery,
   useUpdateDeckMutation,
 } = decksService