diff --git a/package.json b/package.json index d380b6c6..112982f9 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-tabs": "^1.1.12", "@tanstack/react-query": "^5.81.5", + "@tanstack/react-query-devtools": "^5.84.0", "@tanstack/react-router": "1.125.3", "@vercel/analytics": "^1.5.0", "@vercel/speed-insights": "^1.2.0", diff --git a/src/app/providers/RouteProvider.tsx b/src/app/providers/RouteProvider.tsx index a0e6e691..cc7abaef 100644 --- a/src/app/providers/RouteProvider.tsx +++ b/src/app/providers/RouteProvider.tsx @@ -1,16 +1,5 @@ import { RouterProvider as TanStackRouterProvider } from '@tanstack/react-router' -import { useSessionStore } from '@/entities/session' - import { router } from '@/shared/lib' -export const RouterProvider = () => { - const session = useSessionStore() - - return ( - - ) -} +export const RouterProvider = () => diff --git a/src/app/providers/ToastProvider.tsx b/src/app/providers/ToastProvider.tsx index 4e2b29bf..12dfbebc 100644 --- a/src/app/providers/ToastProvider.tsx +++ b/src/app/providers/ToastProvider.tsx @@ -1,23 +1,17 @@ import { Toaster } from 'sonner' -import { useSessionStore } from '@/entities/session' - import { useTabletAndBelowMediaQuery } from '@/shared/lib' export const ToastProvider = () => { - const { - user: { theme } - } = useSessionStore() - const isTabletAndBelow = useTabletAndBelowMediaQuery() + //! ADD Theme return ( ) diff --git a/src/app/routes/__root.tsx b/src/app/routes/__root.tsx index a2c73acf..7cdb985f 100644 --- a/src/app/routes/__root.tsx +++ b/src/app/routes/__root.tsx @@ -1,35 +1,49 @@ -import { createRootRouteWithContext, Outlet } from '@tanstack/react-router' +import type { QueryClient } from '@tanstack/react-query' + +import { ReactQueryDevtools } from '@tanstack/react-query-devtools' +import { + createRootRouteWithContext, + Outlet, + redirect +} from '@tanstack/react-router' import { Analytics } from '@vercel/analytics/react' import { SpeedInsights } from '@vercel/speed-insights/react' -import { sessionService, useSessionStore } from '@/entities/session' +import { sessionService } from '@/entities/session' +import { userQueries } from '@/entities/user' import { attachInternalApiMemoryStorage } from '@/shared/api' type RouterContext = { - session: ReturnType + queryClient: QueryClient } -const RootRoute = () => { - const { tokens, setTokens, logout } = useSessionStore() - - attachInternalApiMemoryStorage({ - accessToken: tokens.accessToken, - refreshToken: tokens.refreshToken, - refreshTokens: sessionService.refreshTokens, - setTokens, - logout - }) - - return ( - <> - - - - - ) -} +const RootRoute = () => ( + <> + + + + + +) export const Route = createRootRouteWithContext()({ + beforeLoad: async ({ context: { queryClient } }) => { + attachInternalApiMemoryStorage({ + refreshTokens: sessionService.refreshTokens, + logout: () => + queryClient.resetQueries({ queryKey: userQueries.current() }) + }) + + try { + const user = await queryClient.fetchQuery(userQueries.me()) + + if (user) throw redirect({ to: '/dashboard' }) + + return { user } + } catch { + return + } + }, component: RootRoute }) diff --git a/src/app/routes/auth/google.callback.tsx b/src/app/routes/auth/google.callback.tsx deleted file mode 100644 index 7625f830..00000000 --- a/src/app/routes/auth/google.callback.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { createFileRoute, redirect } from '@tanstack/react-router' - -import { GoogleAuthLoader } from '@/features/session/google' - -import { SessionContracts } from '@/entities/session' - -export const Route = createFileRoute('/auth/google/callback')({ - component: GoogleAuthLoader, - validateSearch: SessionContracts.GoogleCallbackSearchSchema, - beforeLoad({ search: { code, state } }) { - if (!code || !state) throw redirect({ to: '/' }) - } -}) diff --git a/src/app/routes/auth/layout.tsx b/src/app/routes/auth/layout.tsx index c1b6b009..238c33bf 100644 --- a/src/app/routes/auth/layout.tsx +++ b/src/app/routes/auth/layout.tsx @@ -1,8 +1,12 @@ import { createFileRoute, Outlet, redirect } from '@tanstack/react-router' +import { userQueries } from '@/entities/user' + export const Route = createFileRoute('/auth')({ - beforeLoad: ({ context: { session } }) => { - if (session.isAuthenticated) throw redirect({ to: '/dashboard' }) + beforeLoad: ({ context: { queryClient } }) => { + const isAuthenticated = queryClient.getQueryData(userQueries.current()) + + if (isAuthenticated) throw redirect({ to: '/dashboard' }) }, component: () => (
diff --git a/src/app/routes/dashboard/layout.tsx b/src/app/routes/dashboard/layout.tsx index 598e888e..fdecdd4f 100644 --- a/src/app/routes/dashboard/layout.tsx +++ b/src/app/routes/dashboard/layout.tsx @@ -1,9 +1,13 @@ import { DashboardPage } from '@/pages/dashboard' import { createFileRoute, redirect } from '@tanstack/react-router' +import { userQueries } from '@/entities/user' + export const Route = createFileRoute('/dashboard')({ - beforeLoad: ({ context: { session } }) => { - if (!session.isAuthenticated) throw redirect({ to: '/' }) + beforeLoad: ({ context: { queryClient } }) => { + const isAuthenticated = queryClient.getQueryData(userQueries.current()) + + if (!isAuthenticated) throw redirect({ to: '/' }) }, component: DashboardPage }) diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx index 1ec616f6..07967599 100644 --- a/src/app/routes/index.tsx +++ b/src/app/routes/index.tsx @@ -1,9 +1,13 @@ import { WelcomePage } from '@/pages/welcome' import { createFileRoute, redirect } from '@tanstack/react-router' +import { userQueries } from '@/entities/user' + export const Route = createFileRoute('/')({ - beforeLoad: ({ context: { session } }) => { - if (session.isAuthenticated) throw redirect({ to: '/dashboard' }) + beforeLoad: ({ context: { queryClient } }) => { + const isAuthenticated = queryClient.getQueryData(userQueries.current()) + + if (isAuthenticated) throw redirect({ to: '/dashboard' }) }, component: WelcomePage }) diff --git a/src/entities/board/ui/FormBgImageSelector.tsx b/src/entities/board/ui/FormBgImageSelector.tsx index 40b26baa..05664ed7 100644 --- a/src/entities/board/ui/FormBgImageSelector.tsx +++ b/src/entities/board/ui/FormBgImageSelector.tsx @@ -2,7 +2,7 @@ import type { ControllerRenderProps, FieldValues } from 'react-hook-form' import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group' -import { useSessionStore } from '@/entities/session/@x/board' +import { useMe } from '@/entities/user/@x/board' import { FormControl, FormItem } from '@/shared/ui' @@ -12,9 +12,7 @@ export const FormBgImageSelector = ({ value, onChange }: ControllerRenderProps) => { - const { - user: { theme } - } = useSessionStore() + const { theme } = useMe() return ( diff --git a/src/entities/session/@x/board.ts b/src/entities/session/@x/board.ts deleted file mode 100644 index d4c537f2..00000000 --- a/src/entities/session/@x/board.ts +++ /dev/null @@ -1 +0,0 @@ -export { useSessionStore } from '../model/store' diff --git a/src/entities/session/api/contracts.ts b/src/entities/session/api/contracts.ts index 00920c20..ad274fdc 100644 --- a/src/entities/session/api/contracts.ts +++ b/src/entities/session/api/contracts.ts @@ -12,23 +12,10 @@ export const SignupDtoSchema = v.object({ ...SigninDtoSchema.entries }) -export const InitiateGoogleResponseDtoSchema = v.object({ - redirectUrl: v.pipe(v.string(), v.url()) -}) - -export const GoogleSigninDtoSchema = v.object({ - code: v.pipe(v.string(), v.minLength(1)), - state: v.pipe(v.string(), v.minLength(1)) -}) - -export const RefreshTokenDtoSchema = v.object({ - refreshToken: v.pipe(v.string(), v.minLength(1)) -}) - export const SessionResponseDtoSchema = v.object({ - accessToken: v.string(), - refreshToken: v.string(), user: v.lazy(() => UserDtoSchema) }) -export const TokensDtoSchema = v.omit(SessionResponseDtoSchema, ['user']) +export const GoogleInitiateResponseDtoSchema = v.object({ + redirectUrl: v.pipe(v.string(), v.url()) +}) diff --git a/src/entities/session/api/endpoints.ts b/src/entities/session/api/endpoints.ts index cc5a5d87..ca72bc27 100644 --- a/src/entities/session/api/endpoints.ts +++ b/src/entities/session/api/endpoints.ts @@ -6,7 +6,6 @@ class SessionApiEndpoints { refresh = `${this.baseUrl}/refresh` logout = `${this.baseUrl}/logout` googleInitiate = `${this.baseUrl}/google/initiate` - googleCallback = `${this.baseUrl}/google/callback` } export const sessionApiEndpoints = new SessionApiEndpoints() diff --git a/src/entities/session/api/service.ts b/src/entities/session/api/service.ts index 77e673ac..181b4ba3 100644 --- a/src/entities/session/api/service.ts +++ b/src/entities/session/api/service.ts @@ -1,22 +1,14 @@ -import type { - GoogleSigninDto, - RefreshTokenDto, - SigninDto, - SignupDto -} from './types' +import type { SigninDto, SignupDto } from './types' import { parse } from 'valibot' import { axiosInstance } from '@/shared/api' import { - GoogleSigninDtoSchema, - InitiateGoogleResponseDtoSchema, - RefreshTokenDtoSchema, + GoogleInitiateResponseDtoSchema, SessionResponseDtoSchema, SigninDtoSchema, - SignupDtoSchema, - TokensDtoSchema + SignupDtoSchema } from './contracts' import { sessionApiEndpoints } from './endpoints' @@ -49,37 +41,17 @@ export const sessionService = { }, async initiateGoogleSignin() { - const response = await axiosInstance.get(sessionApiEndpoints.googleInitiate) - - const parsedData = parse(InitiateGoogleResponseDtoSchema, response.data) - - return parsedData - }, - - async signinWithGoogle(data: GoogleSigninDto) { - const googleSigninDto = parse(GoogleSigninDtoSchema, data) - const response = await axiosInstance.post( - sessionApiEndpoints.googleCallback, - googleSigninDto + sessionApiEndpoints.googleInitiate ) - const parsedData = parse(SessionResponseDtoSchema, response.data) + const parsedData = parse(GoogleInitiateResponseDtoSchema, response.data) return parsedData }, - async refreshTokens(data: RefreshTokenDto) { - const refreshTokenDto = parse(RefreshTokenDtoSchema, data) - - const response = await axiosInstance.post( - sessionApiEndpoints.refresh, - refreshTokenDto - ) - - const parsedData = parse(TokensDtoSchema, response.data) - - return parsedData + async refreshTokens() { + await axiosInstance.post(sessionApiEndpoints.refresh) }, async logout() { diff --git a/src/entities/session/api/types.ts b/src/entities/session/api/types.ts index 57c47532..e5a5f354 100644 --- a/src/entities/session/api/types.ts +++ b/src/entities/session/api/types.ts @@ -1,20 +1,14 @@ import type { InferOutput } from 'valibot' import type { - GoogleSigninDtoSchema, - InitiateGoogleResponseDtoSchema, - RefreshTokenDtoSchema, + GoogleInitiateResponseDtoSchema, SessionResponseDtoSchema, SigninDtoSchema, - SignupDtoSchema, - TokensDtoSchema + SignupDtoSchema } from './contracts' export type SessionResponseDto = InferOutput -export type TokensDto = InferOutput export type SigninDto = InferOutput export type SignupDto = InferOutput -export type GoogleSigninDto = InferOutput -export type RefreshTokenDto = InferOutput -export type InitiateGoogleResponseDto = InferOutput< - typeof InitiateGoogleResponseDtoSchema +export type GoogleInitiateResponseDto = InferOutput< + typeof GoogleInitiateResponseDtoSchema > diff --git a/src/entities/session/index.ts b/src/entities/session/index.ts index 074641a5..1a665363 100644 --- a/src/entities/session/index.ts +++ b/src/entities/session/index.ts @@ -1,6 +1,4 @@ -export * as SessionTypes from './model/types' export * as SessionDtoTypes from './api/types' -export * as SessionContracts from './model/contracts' export * as SessionDtoContracts from './api/contracts' export { sessionService } from './api/service' -export { useSessionStore, getSessionStore, sessionActions } from './model/store' +export { sessionApiEndpoints } from './api/endpoints' diff --git a/src/entities/session/model/contracts.ts b/src/entities/session/model/contracts.ts deleted file mode 100644 index 79826a0f..00000000 --- a/src/entities/session/model/contracts.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as v from 'valibot' - -export const GoogleCallbackSearchSchema = v.object({ - code: v.pipe(v.string(), v.minLength(1)), - state: v.pipe(v.string(), v.minLength(1)) -}) diff --git a/src/entities/session/model/store.ts b/src/entities/session/model/store.ts deleted file mode 100644 index a51a8026..00000000 --- a/src/entities/session/model/store.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type { Theme } from '@/shared/config' -import type { SessionResponseDto } from '../api/types' - -import { createStore } from 'stan-js' -import { storage } from 'stan-js/storage' - -import { userService } from '@/entities/user/@x/session' - -import { DEFAULT_THEME } from '@/shared/config' - -export const { - useStore: useSessionStore, - getState: getSessionStore, - actions: sessionActions -} = createStore( - { - user: storage({ - name: '', - email: '', - avatar: '', - theme: DEFAULT_THEME as Theme - }), - tokens: storage({ accessToken: '', refreshToken: '' }), - get isAuthenticated() { - return [this.tokens.accessToken, this.tokens.refreshToken].every(Boolean) - } - }, - ({ actions, reset }) => ({ - authenticate: ({ user, ...tokens }: SessionResponseDto) => { - actions.setUser(user) - actions.setTokens(tokens) - }, - getCurrentUser: async () => { - actions.setUser(await userService.getCurrentUser()) - }, - logout: () => { - reset() - localStorage.clear() - } - }) -) diff --git a/src/entities/session/model/types.ts b/src/entities/session/model/types.ts deleted file mode 100644 index f3a46fdb..00000000 --- a/src/entities/session/model/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { InferOutput } from 'valibot' -import type { GoogleCallbackSearchSchema } from './contracts' - -export type GoogleCallbackSearchSchema = InferOutput< - typeof GoogleCallbackSearchSchema -> diff --git a/src/entities/user/@x/board.ts b/src/entities/user/@x/board.ts new file mode 100644 index 00000000..6ffc88e9 --- /dev/null +++ b/src/entities/user/@x/board.ts @@ -0,0 +1 @@ +export { useMe } from '../model/useMe' diff --git a/src/entities/user/@x/session.ts b/src/entities/user/@x/session.ts index 3fe82778..f2af594d 100644 --- a/src/entities/user/@x/session.ts +++ b/src/entities/user/@x/session.ts @@ -1,2 +1 @@ -export { userService } from '../api/service' export { UserDtoSchema } from '../api/contracts' diff --git a/src/entities/user/api/queries.ts b/src/entities/user/api/queries.ts new file mode 100644 index 00000000..65713352 --- /dev/null +++ b/src/entities/user/api/queries.ts @@ -0,0 +1,14 @@ +import { queryOptions } from '@tanstack/react-query' + +import { userService } from './service' + +export const userQueries = { + current: () => ['user'], + me: () => + queryOptions({ + queryKey: userQueries.current(), + queryFn: userService.getMe, + staleTime: Infinity, + gcTime: Infinity + }) +} diff --git a/src/entities/user/api/service.ts b/src/entities/user/api/service.ts index 3a7e14cf..5f8fa9ff 100644 --- a/src/entities/user/api/service.ts +++ b/src/entities/user/api/service.ts @@ -28,8 +28,10 @@ export const userService = { return parsedData }, - async getCurrentUser() { - const response = await axiosInstance.get(userApiEndpoints.me) + async getMe() { + const response = await axiosInstance.get(userApiEndpoints.me, { + skipAuthRefresh: true + }) const parsedData = parse(UserDtoSchema, response.data) diff --git a/src/entities/user/index.ts b/src/entities/user/index.ts index fe07c4c8..7629721c 100644 --- a/src/entities/user/index.ts +++ b/src/entities/user/index.ts @@ -3,3 +3,5 @@ export * as UserTypes from './model/types' export * as UserDtoContracts from './api/contracts' export * as UserContracts from './model/contracts' export { userService } from './api/service' +export { userQueries } from './api/queries' +export { useMe } from './model/useMe' diff --git a/src/entities/user/model/useMe.ts b/src/entities/user/model/useMe.ts new file mode 100644 index 00000000..13ba3d4e --- /dev/null +++ b/src/entities/user/model/useMe.ts @@ -0,0 +1,9 @@ +import { useSuspenseQuery } from '@tanstack/react-query' + +import { userQueries } from '../api/queries' + +export const useMe = () => { + const { data: user } = useSuspenseQuery(userQueries.me()) + + return user +} diff --git a/src/features/session/google/api/useGoogleSignin.ts b/src/features/session/google/api/useGoogleSignin.ts deleted file mode 100644 index 7036ac11..00000000 --- a/src/features/session/google/api/useGoogleSignin.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useMutation } from '@tanstack/react-query' -import { useNavigate, useSearch } from '@tanstack/react-router' - -import { sessionService, useSessionStore } from '@/entities/session' - -export const useGoogleSignin = () => { - const { code, state } = useSearch({ from: '/auth/google/callback' }) - - const { authenticate } = useSessionStore() - - const navigate = useNavigate() - - return useMutation({ - mutationFn: () => sessionService.signinWithGoogle({ code, state }), - meta: { - errorMessage: - 'An error occurred during sign-in with Google. Please try again shortly.' - }, - onSuccess(data) { - navigate({ to: '/dashboard' }) - authenticate(data) - }, - onError() { - navigate({ to: '/' }) - } - }) -} diff --git a/src/features/session/google/api/useInitiateGoogleSignin.ts b/src/features/session/google/api/useInitiateGoogleSignin.ts index 0d966b81..a0eecbe1 100644 --- a/src/features/session/google/api/useInitiateGoogleSignin.ts +++ b/src/features/session/google/api/useInitiateGoogleSignin.ts @@ -5,6 +5,10 @@ import { sessionService } from '@/entities/session' export const useInitiateGoogleSignin = () => useMutation({ mutationFn: sessionService.initiateGoogleSignin, + meta: { + errorMessage: + 'An error occurred while logging in with Google. Our technical team has been notified. Please try again shortly.' + }, onSuccess({ redirectUrl }) { window.location.href = redirectUrl } diff --git a/src/features/session/google/index.ts b/src/features/session/google/index.ts index b7afe2b1..c7a3d456 100644 --- a/src/features/session/google/index.ts +++ b/src/features/session/google/index.ts @@ -1,2 +1 @@ export { ContinueWithGoogleButton } from './ui/ContinueWithGoogleButton' -export { GoogleAuthLoader } from './ui/GoogleAuthLoader' diff --git a/src/features/session/google/ui/GoogleAuthLoader.tsx b/src/features/session/google/ui/GoogleAuthLoader.tsx deleted file mode 100644 index 82679636..00000000 --- a/src/features/session/google/ui/GoogleAuthLoader.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useEffect } from 'react' - -import { Loader } from '@/shared/ui' - -import { useGoogleSignin } from '../api/useGoogleSignin' - -export const GoogleAuthLoader = () => { - const { mutate, isPending } = useGoogleSignin() - - useEffect(() => { - mutate() - }, [mutate]) - - return
{isPending && }
-} diff --git a/src/features/session/logout/api/useLogoutUser.ts b/src/features/session/logout/api/useLogoutUser.ts index 0f37da05..37fd04bb 100644 --- a/src/features/session/logout/api/useLogoutUser.ts +++ b/src/features/session/logout/api/useLogoutUser.ts @@ -1,10 +1,11 @@ -import { useMutation } from '@tanstack/react-query' +import { useMutation, useQueryClient } from '@tanstack/react-query' import { useNavigate } from '@tanstack/react-router' -import { sessionService, useSessionStore } from '@/entities/session' +import { sessionService } from '@/entities/session' +import { userQueries } from '@/entities/user' export const useLogoutUser = () => { - const { logout } = useSessionStore() + const queryClient = useQueryClient() const navigate = useNavigate() @@ -16,7 +17,7 @@ export const useLogoutUser = () => { }, onSuccess() { navigate({ to: '/' }) - logout() + queryClient.resetQueries({ queryKey: userQueries.current() }) } }) } diff --git a/src/features/session/signin/api/useSigninUser.ts b/src/features/session/signin/api/useSigninUser.ts index 4a21326e..f5921835 100644 --- a/src/features/session/signin/api/useSigninUser.ts +++ b/src/features/session/signin/api/useSigninUser.ts @@ -1,13 +1,14 @@ import type { UseFormReset } from 'react-hook-form' import type { SigninSchema } from '../model/contract' -import { useMutation } from '@tanstack/react-query' +import { useMutation, useQueryClient } from '@tanstack/react-query' import { useNavigate } from '@tanstack/react-router' -import { sessionService, useSessionStore } from '@/entities/session' +import { sessionService } from '@/entities/session' +import { userQueries } from '@/entities/user' export const useSigninUser = (reset: UseFormReset) => { - const { authenticate } = useSessionStore() + const queryClient = useQueryClient() const navigate = useNavigate() @@ -19,10 +20,10 @@ export const useSigninUser = (reset: UseFormReset) => { ? 'The email or password you entered is incorrect. Please try again.' : 'An error occurred during sign-in. Our technical team has been notified. Please try again shortly.' }, - onSuccess(data) { + onSuccess({ user }) { reset() + queryClient.setQueryData(userQueries.current(), user) navigate({ to: '/dashboard' }) - authenticate(data) } }) } diff --git a/src/features/session/signup/api/useSignupUser.ts b/src/features/session/signup/api/useSignupUser.ts index 3e9b9c94..d985d80d 100644 --- a/src/features/session/signup/api/useSignupUser.ts +++ b/src/features/session/signup/api/useSignupUser.ts @@ -1,13 +1,14 @@ import type { UseFormReset } from 'react-hook-form' import type { SignupSchema } from '../model/contract' -import { useMutation } from '@tanstack/react-query' +import { useMutation, useQueryClient } from '@tanstack/react-query' import { useNavigate } from '@tanstack/react-router' -import { sessionService, useSessionStore } from '@/entities/session' +import { sessionService } from '@/entities/session' +import { userQueries } from '@/entities/user' export const useSignupUser = (reset: UseFormReset) => { - const { authenticate } = useSessionStore() + const queryClient = useQueryClient() const navigate = useNavigate() @@ -19,10 +20,10 @@ export const useSignupUser = (reset: UseFormReset) => { ? 'An account with this email address already exists. Please sign in or use a different email.' : 'An error occurred during sign-up. Our technical team has been notified. Please try again shortly.' }, - onSuccess(data) { + onSuccess({ user }) { reset() + queryClient.setQueryData(userQueries.current(), user) navigate({ to: '/dashboard' }) - authenticate(data) } }) } diff --git a/src/features/user/change-theme/api/useChangeTheme.ts b/src/features/user/change-theme/api/useChangeTheme.ts index b0d36be2..aa4b6bf3 100644 --- a/src/features/user/change-theme/api/useChangeTheme.ts +++ b/src/features/user/change-theme/api/useChangeTheme.ts @@ -1,31 +1,36 @@ -import type { Theme } from '@/shared/config' - -import { useMutation } from '@tanstack/react-query' +import { useMutation, useQueryClient } from '@tanstack/react-query' import { parse } from 'valibot' -import { useSessionStore } from '@/entities/session' -import { UserContracts, userService } from '@/entities/user' +import { UserContracts, userQueries, userService } from '@/entities/user' export const useChangeTheme = () => { - const { user: previousUser, setUser } = useSessionStore() + const queryClient = useQueryClient() return useMutation({ mutationFn: userService.editUser, meta: { errorMessage: 'We couldn’t update your theme. Please try again' }, onMutate: async ({ theme }) => { - const previousTheme = previousUser.theme + await queryClient.cancelQueries({ queryKey: userQueries.current() }) + + const previousUser = queryClient.getQueryData(userQueries.current()) + + const parsedPreviousUser = parse(UserContracts.UserSchema, previousUser) - setUser(prev => ({ ...prev, theme: theme! })) + queryClient.setQueryData(userQueries.current(), oldUser => { + if (!oldUser) return oldUser - return { previousTheme } + const parsedOldUser = parse(UserContracts.UserSchema, oldUser) + + return { ...parsedOldUser, theme } + }) + + return { previousUser: parsedPreviousUser } }, - onError: (_, _variables, context) => { - setUser({ ...previousUser, theme: context?.previousTheme as Theme }) + onError(_, __, context) { + queryClient.setQueryData(userQueries.current(), context?.previousUser) }, - onSettled: data => { - const parsedUser = parse(UserContracts.UserSchema, data) - - setUser(parsedUser) + onSettled() { + queryClient.invalidateQueries({ queryKey: userQueries.current() }) } }) } diff --git a/src/features/user/change-theme/lib/useMetaThemeColor.ts b/src/features/user/change-theme/lib/useMetaThemeColor.ts index ef831a0e..45ff0760 100644 --- a/src/features/user/change-theme/lib/useMetaThemeColor.ts +++ b/src/features/user/change-theme/lib/useMetaThemeColor.ts @@ -1,11 +1,9 @@ import { useEffect } from 'react' -import { useSessionStore } from '@/entities/session' +import { useMe } from '@/entities/user' export const useMetaThemeColor = () => { - const { - user: { theme } - } = useSessionStore() + const { theme } = useMe() useEffect(() => { let themeColorMeta = document.querySelector( diff --git a/src/features/user/change-theme/lib/useThemeWithRootSync.ts b/src/features/user/change-theme/lib/useThemeWithRootSync.ts index 4777d90f..114ae822 100644 --- a/src/features/user/change-theme/lib/useThemeWithRootSync.ts +++ b/src/features/user/change-theme/lib/useThemeWithRootSync.ts @@ -1,13 +1,11 @@ import { useEffect } from 'react' -import { useSessionStore } from '@/entities/session' +import { useMe } from '@/entities/user' import { DEFAULT_THEME } from '@/shared/config' export const useThemeWithRootSync = () => { - const { - user: { theme } - } = useSessionStore() + const { theme } = useMe() useEffect(() => { const root = window.document.documentElement diff --git a/src/features/user/edit-profile/api/useEditProfile.ts b/src/features/user/edit-profile/api/useEditProfile.ts index d488428c..24655fa5 100644 --- a/src/features/user/edit-profile/api/useEditProfile.ts +++ b/src/features/user/edit-profile/api/useEditProfile.ts @@ -2,26 +2,22 @@ import type { Dispatch, SetStateAction } from 'react' import { useMutation } from '@tanstack/react-query' -import { useSessionStore } from '@/entities/session' -import { userService } from '@/entities/user' +import { userQueries, userService } from '@/entities/user' export const useEditProfile = ( setIsDialogOpen?: Dispatch> -) => { - const { setUser } = useSessionStore() - - return useMutation({ +) => + useMutation({ mutationFn: userService.editUser, meta: { + invalidates: [[userQueries.current()]], successMessage: 'Your profile has been successfully updated.', errorMessage: e => e?.response?.status === 409 ? 'An account with this email address already exists. Please use a different email.' : 'Failed to update profile. Please try again. If the problem persists, contact support.' }, - onSuccess(data) { + onSuccess() { setIsDialogOpen?.(false) - setUser(data) } }) -} diff --git a/src/features/user/edit-profile/lib/useEditProfileForm.ts b/src/features/user/edit-profile/lib/useEditProfileForm.ts index 5ec181ab..53eae244 100644 --- a/src/features/user/edit-profile/lib/useEditProfileForm.ts +++ b/src/features/user/edit-profile/lib/useEditProfileForm.ts @@ -1,13 +1,11 @@ -import { useSessionStore } from '@/entities/session' +import { useMe } from '@/entities/user' import { useAppForm, useIsFormReadyForSubmit } from '@/shared/lib' import { EditUserSchema } from '../model/contract' export const useEditProfileForm = () => { - const { - user: { name, email } - } = useSessionStore() + const { name, email } = useMe() const form = useAppForm(EditUserSchema, { defaultValues: { name, email, password: '' } diff --git a/src/features/user/edit-profile/ui/EditAvatar.tsx b/src/features/user/edit-profile/ui/EditAvatar.tsx index 78e307c1..baac6947 100644 --- a/src/features/user/edit-profile/ui/EditAvatar.tsx +++ b/src/features/user/edit-profile/ui/EditAvatar.tsx @@ -1,15 +1,13 @@ import { useRef } from 'react' -import { useSessionStore } from '@/entities/session' +import { useMe } from '@/entities/user' import { Icon, Loader } from '@/shared/ui' import { useEditProfile } from '../api/useEditProfile' export const EditAvatar = () => { - const { - user: { avatar } - } = useSessionStore() + const { avatar } = useMe() const ref = useRef(null) diff --git a/src/features/user/edit-profile/ui/EditProfileDialogTrigger.tsx b/src/features/user/edit-profile/ui/EditProfileDialogTrigger.tsx index 7af68293..bcf0ee8e 100644 --- a/src/features/user/edit-profile/ui/EditProfileDialogTrigger.tsx +++ b/src/features/user/edit-profile/ui/EditProfileDialogTrigger.tsx @@ -1,11 +1,9 @@ -import { useSessionStore } from '@/entities/session' +import { useMe } from '@/entities/user' import { Avatar, AvatarFallback, AvatarImage, DialogTrigger } from '@/shared/ui' export const EditProfileDialogTrigger = () => { - const { - user: { name, avatar } - } = useSessionStore() + const { name, avatar } = useMe() return ( { useMetaThemeColor() - useEffect(() => { - sessionActions.getCurrentUser() - }, []) - return (
( Registration Log In diff --git a/src/shared/api/apiMemoryStorage.ts b/src/shared/api/apiMemoryStorage.ts index 58bbe38a..4a28b8c8 100644 --- a/src/shared/api/apiMemoryStorage.ts +++ b/src/shared/api/apiMemoryStorage.ts @@ -1,11 +1,5 @@ -type Tokens = { - accessToken: string - refreshToken: string -} - -type ApiMemoryStorage = Tokens & { - refreshTokens: (data: Pick) => Promise - setTokens: (data: Tokens) => void +type ApiMemoryStorage = { + refreshTokens: () => void logout: () => void } @@ -15,22 +9,10 @@ export const attachInternalApiMemoryStorage = (data: ApiMemoryStorage) => { __internalMemoryStorage = () => data } -export const getApiAccessToken = () => { - const { accessToken } = __internalMemoryStorage() - - return accessToken -} - -export const getRefreshedTokens = () => { - const { refreshTokens, refreshToken } = __internalMemoryStorage() - - return refreshTokens({ refreshToken }) -} - -export const setTokens = (data: Tokens) => { - const { setTokens } = __internalMemoryStorage() +export const refreshTokens = () => { + const { refreshTokens } = __internalMemoryStorage() - return setTokens(data) + return refreshTokens() } export const logUserOut = () => { diff --git a/src/shared/api/instance.ts b/src/shared/api/instance.ts index 5e80b549..8715ac41 100644 --- a/src/shared/api/instance.ts +++ b/src/shared/api/instance.ts @@ -2,25 +2,11 @@ import axios, { AxiosError } from 'axios' import { env } from '../config' import { router } from '../lib' -import { - getApiAccessToken, - getRefreshedTokens, - logUserOut, - setTokens -} from './apiMemoryStorage' +import { logUserOut, refreshTokens } from './apiMemoryStorage' export const axiosInstance = axios.create({ - baseURL: env.VITE_API_BASE_URL -}) - -axiosInstance.interceptors.request.use(config => { - const accessToken = getApiAccessToken() - - if (config?.headers && accessToken) { - config.headers.Authorization = `Bearer ${accessToken}` - } - - return config + baseURL: env.VITE_API_BASE_URL, + withCredentials: true }) axiosInstance.interceptors.response.use( @@ -36,9 +22,7 @@ axiosInstance.interceptors.response.use( originalRequest._retry = true try { - const tokens = await getRefreshedTokens() - - setTokens(tokens) + refreshTokens() return axiosInstance(originalRequest) } catch (e) { diff --git a/src/shared/lib/router/routeTree.gen.ts b/src/shared/lib/router/routeTree.gen.ts index 809914d1..cfbb9bee 100644 --- a/src/shared/lib/router/routeTree.gen.ts +++ b/src/shared/lib/router/routeTree.gen.ts @@ -16,7 +16,6 @@ import { Route as DashboardIndexRouteImport } from './../../../app/routes/dashbo import { Route as DashboardBoardIdRouteImport } from './../../../app/routes/dashboard/$boardId' import { Route as AuthSignupRouteImport } from './../../../app/routes/auth/signup' import { Route as AuthSigninRouteImport } from './../../../app/routes/auth/signin' -import { Route as AuthGoogleCallbackRouteImport } from './../../../app/routes/auth/google.callback' const DashboardLayoutRoute = DashboardLayoutRouteImport.update({ id: '/dashboard', @@ -53,11 +52,6 @@ const AuthSigninRoute = AuthSigninRouteImport.update({ path: '/signin', getParentRoute: () => AuthLayoutRoute, } as any) -const AuthGoogleCallbackRoute = AuthGoogleCallbackRouteImport.update({ - id: '/google/callback', - path: '/google/callback', - getParentRoute: () => AuthLayoutRoute, -} as any) export interface FileRoutesByFullPath { '/': typeof IndexRoute @@ -67,7 +61,6 @@ export interface FileRoutesByFullPath { '/auth/signup': typeof AuthSignupRoute '/dashboard/$boardId': typeof DashboardBoardIdRoute '/dashboard/': typeof DashboardIndexRoute - '/auth/google/callback': typeof AuthGoogleCallbackRoute } export interface FileRoutesByTo { '/': typeof IndexRoute @@ -76,7 +69,6 @@ export interface FileRoutesByTo { '/auth/signup': typeof AuthSignupRoute '/dashboard/$boardId': typeof DashboardBoardIdRoute '/dashboard': typeof DashboardIndexRoute - '/auth/google/callback': typeof AuthGoogleCallbackRoute } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -87,7 +79,6 @@ export interface FileRoutesById { '/auth/signup': typeof AuthSignupRoute '/dashboard/$boardId': typeof DashboardBoardIdRoute '/dashboard/': typeof DashboardIndexRoute - '/auth/google/callback': typeof AuthGoogleCallbackRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath @@ -99,7 +90,6 @@ export interface FileRouteTypes { | '/auth/signup' | '/dashboard/$boardId' | '/dashboard/' - | '/auth/google/callback' fileRoutesByTo: FileRoutesByTo to: | '/' @@ -108,7 +98,6 @@ export interface FileRouteTypes { | '/auth/signup' | '/dashboard/$boardId' | '/dashboard' - | '/auth/google/callback' id: | '__root__' | '/' @@ -118,7 +107,6 @@ export interface FileRouteTypes { | '/auth/signup' | '/dashboard/$boardId' | '/dashboard/' - | '/auth/google/callback' fileRoutesById: FileRoutesById } export interface RootRouteChildren { @@ -178,26 +166,17 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AuthSigninRouteImport parentRoute: typeof AuthLayoutRoute } - '/auth/google/callback': { - id: '/auth/google/callback' - path: '/google/callback' - fullPath: '/auth/google/callback' - preLoaderRoute: typeof AuthGoogleCallbackRouteImport - parentRoute: typeof AuthLayoutRoute - } } } interface AuthLayoutRouteChildren { AuthSigninRoute: typeof AuthSigninRoute AuthSignupRoute: typeof AuthSignupRoute - AuthGoogleCallbackRoute: typeof AuthGoogleCallbackRoute } const AuthLayoutRouteChildren: AuthLayoutRouteChildren = { AuthSigninRoute: AuthSigninRoute, AuthSignupRoute: AuthSignupRoute, - AuthGoogleCallbackRoute: AuthGoogleCallbackRoute, } const AuthLayoutRouteWithChildren = AuthLayoutRoute._addFileChildren( diff --git a/src/shared/lib/router/router.ts b/src/shared/lib/router/router.ts index 22faa1e0..ba4ccf9a 100644 --- a/src/shared/lib/router/router.ts +++ b/src/shared/lib/router/router.ts @@ -1,10 +1,11 @@ import { createRouter } from '@tanstack/react-router' +import { queryClient } from '../query/query-client' import { routeTree } from './routeTree.gen' export const router = createRouter({ routeTree, defaultPreload: 'intent', defaultPendingMinMs: 0, - context: { session: undefined! } + context: { queryClient } }) diff --git a/yarn.lock b/yarn.lock index 751ebb36..9acb410a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1828,6 +1828,18 @@ resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.81.5.tgz#14e0cc778bad8bc11d1cf130709910d8a353bb73" integrity sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q== +"@tanstack/query-devtools@5.84.0": + version "5.84.0" + resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.84.0.tgz#dabed4f4abf405f0e320758ed7bc895a7687d9bb" + integrity sha512-fbF3n+z1rqhvd9EoGp5knHkv3p5B2Zml1yNRjh7sNXklngYI5RVIWUrUjZ1RIcEoscarUb0+bOvIs5x9dwzOXQ== + +"@tanstack/react-query-devtools@^5.84.0": + version "5.84.0" + resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.84.0.tgz#a1c0d1ef40480de46f4f33c9f171ef3f847d87e9" + integrity sha512-7SwgDOm1Waz9wKOwR8WPaN4yo6zq1UBQxGLWy/SJWZOoo2bUVRVlGPvFicuOUwQWv5VDzzNYq4GvTQnX4T3xtw== + dependencies: + "@tanstack/query-devtools" "5.84.0" + "@tanstack/react-query@^5.81.5": version "5.81.5" resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.81.5.tgz#660dba8bb35f24c4cf3617b299a1e3990a3bb49e"