diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 231c412..f0824cd 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -1,4 +1,5 @@
module.exports = {
...require('@it-incubator/prettier-config'),
+ tabWidth: 4,
//override settings here
}
\ No newline at end of file
diff --git a/src/components/auth/recover-password/recover-password.tsx b/src/components/auth/recover-password/recover-password.tsx
index c0655dd..3914118 100644
--- a/src/components/auth/recover-password/recover-password.tsx
+++ b/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'
diff --git a/src/pages/deck-page/deck-page.tsx b/src/pages/deck-page/deck-page.tsx
index 54e8add..c63a25a 100644
--- a/src/pages/deck-page/deck-page.tsx
+++ b/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 (
-
-
{deckData?.name}
-
-
-
-
-
- )
+ return (
+
+
{deckData?.name}
+
+
+
+
+
+ )
}
diff --git a/src/pages/decks-page/decks-page.tsx b/src/pages/decks-page/decks-page.tsx
index 74f18b9..cc15680 100644
--- a/src/pages/decks-page/decks-page.tsx
+++ b/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)
- const [deckToEditId, setDeckToEditId] = useState(null)
+ const [showCreateModal, setShowCreateModal] = useState(false)
+ const [deckToDeleteId, setDeckToDeleteId] = useState(null)
+ const [deckToEditId, setDeckToEditId] = useState(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 loading...
- }
+ if (!decks) {
+ return loading...
+ }
- return (
-
- setDeckToDeleteId(null)}
- onConfirm={() => {
- deleteDeck({ id: deckToDeleteId ?? '' })
- setDeckToDeleteId(null)
- }}
- onOpenChange={() => setDeckToDeleteId(null)}
- open={showConfirmDeleteModal}
- />
- {
- if (!deckToEditId) {
- return
- }
+ return (
+
+ setDeckToDeleteId(null)}
+ onConfirm={() => {
+ deleteDeck({ id: deckToDeleteId ?? '' })
+ setDeckToDeleteId(null)
+ }}
+ onOpenChange={() => setDeckToDeleteId(null)}
+ open={showConfirmDeleteModal}
+ />
+ {
+ if (!deckToEditId) {
+ return
+ }
- updateDeck({ id: deckToEditId, ...data })
- }}
- onOpenChange={() => setDeckToEditId(null)}
- open={showEditModal}
- />
-
-
- Decks
-
- setShowCreateModal(false)}
- onConfirm={createDeck}
- onOpenChange={setShowCreateModal}
- open={showCreateModal}
- />
-
-
-
- setCurrentTab(value as Tab)} value={currentTab}>
-
- My decks
- All decks
-
-
-
-
-
-
-
-
-
- )
+ updateDeck({ id: deckToEditId, ...data })
+ }}
+ onOpenChange={() => setDeckToEditId(null)}
+ open={showEditModal}
+ />
+
+
+ Decks
+
+ setShowCreateModal(false)}
+ onConfirm={createDeck}
+ onOpenChange={setShowCreateModal}
+ open={showCreateModal}
+ />
+
+
+
+ setCurrentTab(value as Tab)} value={currentTab}>
+
+ My decks
+ All decks
+
+
+
+
+
+
+
+
+
+ )
}
diff --git a/src/services/decks/decks.service.ts b/src/services/decks/decks.service.ts
index e58f7ea..cc8baa8 100644
--- a/src/services/decks/decks.service.ts
+++ b/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({
- query: args => {
- return {
- url: `v1/decks`,
- params: args ?? undefined,
- }
+ createDeck: builder.mutation({
+ 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({
+ invalidatesTags: ['Decks'],
+ query: ({ id }) => ({
+ method: 'DELETE',
+ url: `v1/decks/${id}`,
+ }),
}),
getDeckById: builder.query({
query: ({ id }) => `v1/decks/${id}`,
@@ -26,37 +38,31 @@ const decksService = baseApi.injectEndpoints({
getDeckCards: builder.query({
query: ({ id }) => `v1/decks/${id}/cards`,
}),
- createDeck: builder.mutation({
- query: body => ({
- url: `v1/decks`,
- method: 'POST',
- body,
- }),
- invalidatesTags: ['Decks'],
- }),
- deleteDeck: builder.mutation({
- query: ({ id }) => ({
- url: `v1/decks/${id}`,
- method: 'DELETE',
- }),
- invalidatesTags: ['Decks'],
+ getDecks: builder.query({
+ providesTags: ['Decks'],
+ query: args => {
+ return {
+ params: args ?? undefined,
+ url: `v1/decks`,
+ }
+ },
}),
updateDeck: builder.mutation({
- 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