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