From ce9d06057e3060326894abe65e68f9b131017a49 Mon Sep 17 00:00:00 2001 From: safronman Date: Thu, 13 Jun 2024 14:14:16 +0300 Subject: [PATCH] 1 - init project --- src/main.tsx | 8 +--- src/services/auth/auth.service.ts | 4 +- src/services/base-api.ts | 9 ---- src/services/base-query-with-reauth.ts | 47 -------------------- src/services/decks/decks.service.ts | 59 ++------------------------ src/services/flashcardsApi.ts | 14 ++++++ src/services/index.ts | 2 +- src/services/store.ts | 12 ++---- 8 files changed, 24 insertions(+), 131 deletions(-) delete mode 100644 src/services/base-api.ts delete mode 100644 src/services/base-query-with-reauth.ts create mode 100644 src/services/flashcardsApi.ts diff --git a/src/main.tsx b/src/main.tsx index f27e98f..3738b69 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,3 @@ -import { StrictMode } from 'react' - import { createRoot } from 'react-dom/client' import './styles/index.scss' @@ -8,8 +6,4 @@ import '@fontsource/roboto/700.css' import { App } from './App' -createRoot(document.getElementById('root')!).render( - - - -) +createRoot(document.getElementById('root')!).render() diff --git a/src/services/auth/auth.service.ts b/src/services/auth/auth.service.ts index da53d40..f0226e5 100644 --- a/src/services/auth/auth.service.ts +++ b/src/services/auth/auth.service.ts @@ -1,7 +1,7 @@ -import { baseApi } from '..' +import { flashcardsApi } from '..' import { LoginArgs, User } from './auth.types' -export const authService = baseApi.injectEndpoints({ +export const authService = flashcardsApi.injectEndpoints({ endpoints: builder => ({ login: builder.mutation({ invalidatesTags: ['Me'], diff --git a/src/services/base-api.ts b/src/services/base-api.ts deleted file mode 100644 index b78e007..0000000 --- a/src/services/base-api.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { baseQueryWithReauth } from '@/services/base-query-with-reauth' -import { createApi } from '@reduxjs/toolkit/query/react' - -export const baseApi = createApi({ - baseQuery: baseQueryWithReauth, - endpoints: () => ({}), - reducerPath: 'baseApi', - tagTypes: ['Decks', 'Me'], -}) diff --git a/src/services/base-query-with-reauth.ts b/src/services/base-query-with-reauth.ts deleted file mode 100644 index 2fa97fb..0000000 --- a/src/services/base-query-with-reauth.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { - BaseQueryFn, - FetchArgs, - FetchBaseQueryError, - fetchBaseQuery, -} from '@reduxjs/toolkit/query/react' -import { Mutex } from 'async-mutex' - -const mutex = new Mutex() - -const baseQuery = fetchBaseQuery({ - baseUrl: 'https://api.flashcards.andrii.es', - credentials: 'include', -}) - -export const baseQueryWithReauth: BaseQueryFn< - FetchArgs | string, - unknown, - FetchBaseQueryError -> = async (args, api, extraOptions) => { - await mutex.waitForUnlock() - let result = await baseQuery(args, api, extraOptions) - - if (result.error && result.error.status === 401) { - if (!mutex.isLocked()) { - const release = await mutex.acquire() - // try to get a new token - const refreshResult = await baseQuery( - { method: 'POST', url: '/v1/auth/refresh-token' }, - api, - extraOptions - ) - - if (refreshResult.meta?.response?.status === 204) { - // retry the initial query - result = await baseQuery(args, api, extraOptions) - } - release() - } else { - // wait until the mutex is available without locking it - await mutex.waitForUnlock() - result = await baseQuery(args, api, extraOptions) - } - } - - return result -} diff --git a/src/services/decks/decks.service.ts b/src/services/decks/decks.service.ts index 43184ec..c014266 100644 --- a/src/services/decks/decks.service.ts +++ b/src/services/decks/decks.service.ts @@ -5,32 +5,15 @@ import { DecksResponse, GetDecksArgs, UpdateDeckArgs, - baseApi, } from '@/services' -import { RootState } from '@/services/store' import { getValuable } from '@/utils' -const decksService = baseApi.injectEndpoints({ +import { flashcardsApi } from '../flashcardsApi' + +const decksService = flashcardsApi.injectEndpoints({ endpoints: builder => ({ createDeck: builder.mutation({ invalidatesTags: ['Decks'], - async onQueryStarted(_, { dispatch, getState, queryFulfilled }) { - const res = await queryFulfilled - - for (const { endpointName, originalArgs } of decksService.util.selectInvalidatedBy( - getState(), - [{ type: 'Decks' }] - )) { - if (endpointName !== 'getDecks') { - continue - } - dispatch( - decksService.util.updateQueryData(endpointName, originalArgs, draft => { - draft.items.unshift(res.data) - }) - ) - } - }, query: body => ({ body, method: 'POST', @@ -61,42 +44,6 @@ const decksService = baseApi.injectEndpoints({ }), updateDeck: builder.mutation({ invalidatesTags: ['Decks'], - async onQueryStarted({ id, ...patch }, { dispatch, getState, queryFulfilled }) { - const state = getState() as RootState - - const minCardsCount = state.decks.minCards - const search = state.decks.search - const currentPage = state.decks.currentPage - const maxCardsCount = state.decks.maxCards - const authorId = state.decks.authorId - - const patchResult = dispatch( - decksService.util.updateQueryData( - 'getDecks', - { - authorId, - currentPage, - maxCardsCount, - minCardsCount, - name: search, - }, - draft => { - const deck = draft.items.find(deck => deck.id === id) - - if (!deck) { - return - } - Object.assign(deck, patch) - } - ) - ) - - try { - await queryFulfilled - } catch { - patchResult.undo() - } - }, query: ({ id, ...body }) => ({ body, method: 'PATCH', diff --git a/src/services/flashcardsApi.ts b/src/services/flashcardsApi.ts new file mode 100644 index 0000000..f6dc786 --- /dev/null +++ b/src/services/flashcardsApi.ts @@ -0,0 +1,14 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' + +export const flashcardsApi = createApi({ + baseQuery: fetchBaseQuery({ + baseUrl: 'https://api.flashcards.andrii.es', + credentials: 'include', + prepareHeaders: headers => { + headers.append('x-auth-skip', 'true') + }, + }), + endpoints: () => ({}), + reducerPath: 'flashcardsApi', + tagTypes: ['Decks', 'Me'], +}) diff --git a/src/services/index.ts b/src/services/index.ts index a857025..5a2fbf9 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -1,2 +1,2 @@ -export * from './base-api' export * from './decks' +export { flashcardsApi } from './flashcardsApi' diff --git a/src/services/store.ts b/src/services/store.ts index 7e3e2ef..98f62b0 100644 --- a/src/services/store.ts +++ b/src/services/store.ts @@ -1,24 +1,18 @@ -import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux' - import { decksSlice } from '@/services/decks/decks.slice' import { configureStore } from '@reduxjs/toolkit' import { setupListeners } from '@reduxjs/toolkit/query/react' -import { baseApi } from './base-api' +import { flashcardsApi } from './flashcardsApi' export const store = configureStore({ - middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware), + middleware: getDefaultMiddleware => getDefaultMiddleware().concat(flashcardsApi.middleware), reducer: { - [baseApi.reducerPath]: baseApi.reducer, [decksSlice.name]: decksSlice.reducer, + [flashcardsApi.reducerPath]: flashcardsApi.reducer, }, }) export type AppDispatch = typeof store.dispatch export type RootState = ReturnType -// Use throughout your app instead of plain `useDispatch` and `useSelector` -export const useAppDispatch: () => AppDispatch = useDispatch -export const useAppSelector: TypedUseSelectorHook = useSelector - setupListeners(store.dispatch)