From cbc5671b0eac9ce5ddb05d5ea89ba22cb9353ab3 Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Sat, 8 Apr 2023 02:46:42 -0400 Subject: [PATCH] Fix login glitch where user session wouldn't load properly into context --- components/Login/LoginForm.tsx | 8 ++++++-- contexts/userContext.ts | 2 ++ hooks/useUser.ts | 3 ++- package-lock.json | 12 ++++++------ pages/_app.tsx | 4 ++-- pages/user/current.tsx | 4 ++-- 6 files changed, 20 insertions(+), 13 deletions(-) diff --git a/components/Login/LoginForm.tsx b/components/Login/LoginForm.tsx index cefc2e6..c10508b 100644 --- a/components/Login/LoginForm.tsx +++ b/components/Login/LoginForm.tsx @@ -2,9 +2,10 @@ import sendLoginUserRequest from '@/requests/sendLoginUserRequest'; import LoginValidationSchema from '@/services/User/schema/LoginValidationSchema'; import { zodResolver } from '@hookform/resolvers/zod'; import { useRouter } from 'next/router'; -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { useForm, SubmitHandler } from 'react-hook-form'; import { z } from 'zod'; +import UserContext from '@/contexts/userContext'; import ErrorAlert from '../ui/alerts/ErrorAlert'; import FormError from '../ui/forms/FormError'; import FormInfo from '../ui/forms/FormInfo'; @@ -28,10 +29,13 @@ const LoginForm = () => { const [responseError, setResponseError] = useState(''); + const { mutate } = useContext(UserContext); + const onSubmit: SubmitHandler = async (data) => { try { await sendLoginUserRequest(data); - router.push(`/user/current`); + await mutate!(); + await router.push(`/user/current`); } catch (error) { if (error instanceof Error) { setResponseError(error.message); diff --git a/contexts/userContext.ts b/contexts/userContext.ts index 96fc3d4..4cdd555 100644 --- a/contexts/userContext.ts +++ b/contexts/userContext.ts @@ -1,11 +1,13 @@ import GetUserSchema from '@/services/User/schema/GetUserSchema'; import { createContext } from 'react'; +import { KeyedMutator } from 'swr'; import { z } from 'zod'; const UserContext = createContext<{ user?: z.infer; error?: unknown; isLoading: boolean; + mutate?: KeyedMutator>; }>({ isLoading: true }); export default UserContext; diff --git a/hooks/useUser.ts b/hooks/useUser.ts index b4891ef..10a5359 100644 --- a/hooks/useUser.ts +++ b/hooks/useUser.ts @@ -16,6 +16,7 @@ const useUser = () => { data: user, error, isLoading, + mutate, } = useSWR('/api/users/current', async (url) => { if (!document.cookie.includes('token')) { throw new Error('No token cookie found'); @@ -43,7 +44,7 @@ const useUser = () => { return parsedPayload.data; }); - return { user, isLoading, error: error as unknown }; + return { user, isLoading, error: error as unknown, mutate }; }; export default useUser; diff --git a/package-lock.json b/package-lock.json index 8d970dd..4137c48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9963,9 +9963,9 @@ } }, "node_modules/vm2": { - "version": "3.9.14", - "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.14.tgz", - "integrity": "sha512-HgvPHYHeQy8+QhzlFryvSteA4uQLBCOub02mgqdR+0bN/akRZ48TGB1v0aCv7ksyc0HXx16AZtMHKS38alc6TA==", + "version": "3.9.15", + "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.15.tgz", + "integrity": "sha512-XqNqknHGw2avJo13gbIwLNZUumvrSHc9mLqoadFZTpo3KaNEJoe1I0lqTFhRXmXD7WkLyG01aaraXdXT0pa4ag==", "optional": true, "dependencies": { "acorn": "^8.7.0", @@ -17122,9 +17122,9 @@ } }, "vm2": { - "version": "3.9.14", - "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.14.tgz", - "integrity": "sha512-HgvPHYHeQy8+QhzlFryvSteA4uQLBCOub02mgqdR+0bN/akRZ48TGB1v0aCv7ksyc0HXx16AZtMHKS38alc6TA==", + "version": "3.9.15", + "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.15.tgz", + "integrity": "sha512-XqNqknHGw2avJo13gbIwLNZUumvrSHc9mLqoadFZTpo3KaNEJoe1I0lqTFhRXmXD7WkLyG01aaraXdXT0pa4ag==", "optional": true, "requires": { "acorn": "^8.7.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 0eddb71..aa90eb6 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -10,7 +10,7 @@ const spaceGrotesk = Space_Grotesk({ }); export default function App({ Component, pageProps }: AppProps) { - const { user, isLoading, error } = useUser(); + const { user, isLoading, error, mutate } = useUser(); return ( <> @@ -21,7 +21,7 @@ export default function App({ Component, pageProps }: AppProps) { } `} - + diff --git a/pages/user/current.tsx b/pages/user/current.tsx index 90c92ae..0acf079 100644 --- a/pages/user/current.tsx +++ b/pages/user/current.tsx @@ -11,9 +11,9 @@ const ProtectedPage: NextPage = () => { const currentTime = new Date().getHours(); - const isMorning = currentTime > 5 && currentTime < 12; + const isMorning = currentTime > 4 && currentTime < 12; const isAfternoon = currentTime > 12 && currentTime < 18; - const isEvening = currentTime > 18 && currentTime < 24; + const isEvening = currentTime > 18 && currentTime < 24 || currentTime <4 return (