PEER-219: Refactor localstorage userId

SeeuSim · SeeuSim · commit e88094f879c2 · 2024-11-03T07:44:32.000+08:00
Signed-off-by: SeeuSim &lt;seeusimong@gmail.com&gt;
diff --git a/backend/user/src/controllers/auth-check/index.ts b/backend/user/src/controllers/auth-check/index.ts
@@ -1,6 +1,8 @@
+import { eq } from 'drizzle-orm';
 import { StatusCodes } from 'http-status-codes';
 
 import { COOKIE_NAME, decodeCookie, isCookieValid } from '@/lib/cookies';
+import { db, users } from '@/lib/db';
 import { logger } from '@/lib/utils';
 import { IRouteHandler } from '@/types';
 
@@ -13,9 +15,16 @@ export const checkIsAuthed: IRouteHandler = async (req, res) => {
     logger.info(
       '[/auth-check/check-is-authed]: Expires At ' + new Date(expireTimeInMillis).toLocaleString()
     );
+    const user = await db
+      .select({ name: users.username })
+      .from(users)
+      .where(eq(users.id, decoded.id))
+      .limit(1);
     return res.status(StatusCodes.OK).json({
       message: 'OK',
       expiresAt: expireTimeInMillis,
+      userId: decoded.id,
+      username: user.length > 0 ? user[0].name : undefined,
     });
   }
 
diff --git a/frontend/src/components/blocks/interview/editor.tsx b/frontend/src/components/blocks/interview/editor.tsx
@@ -16,6 +16,7 @@ import {
 import { Skeleton } from '@/components/ui/skeleton';
 import { getTheme, type IEditorTheme, languages, themeOptions } from '@/lib/editor/extensions';
 import { useCollab } from '@/lib/hooks/use-collab';
+import { useUser } from '@/stores/auth-store';
 
 import { CompleteDialog } from './room/complete-dialog';
 import { OtherUserCompletingDialog } from './room/other-user-completing-dialog';
@@ -31,10 +32,10 @@ type EditorProps = {
 };
 
 export const Editor = ({ questionId, room, onAIClick, onPartnerClick }: EditorProps) => {
+  const { userId } = useUser();
   const { height } = useWindowSize();
   const [theme, setTheme] = useState<IEditorTheme>('vscodeDark');
   const {
-    userId,
     editorRef,
     extensions,
     language,
diff --git a/frontend/src/components/blocks/interview/partner-chat.tsx b/frontend/src/components/blocks/interview/partner-chat.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { useChat } from '@/lib/hooks/use-chat';
-import { getUserId } from '@/services/user-service';
+import { useUser } from '@/stores/auth-store';
 
 import { ChatLayout } from './chat/chat-layout';
 
@@ -12,6 +12,7 @@ interface PartnerChatProps {
 }
 
 export const PartnerChat: React.FC<PartnerChatProps> = ({ isOpen, onClose, roomId }) => {
+  const { userId } = useUser();
   const { messages, sendMessage, connected, error } = useChat({ roomId });
   const [isLoading, setIsLoading] = useState(false);
 
@@ -27,7 +28,7 @@ export const PartnerChat: React.FC<PartnerChatProps> = ({ isOpen, onClose, roomI
       onClose={onClose}
       messages={messages.map((msg) => ({
         text: msg.message,
-        isUser: msg.senderId === getUserId(),
+        isUser: msg.senderId === userId,
         timestamp: new Date(msg.createdAt),
       }))}
       onSend={handleSend}
diff --git a/frontend/src/components/blocks/route-guard.tsx b/frontend/src/components/blocks/route-guard.tsx
@@ -12,6 +12,7 @@ import {
 import { usePageTitle } from '@/lib/hooks/use-page-title';
 import { ROUTES, UNAUTHED_ROUTES } from '@/lib/routes';
 import { checkIsAuthed } from '@/services/user-service';
+import { AuthStoreProvider } from '@/stores/auth-store';
 
 import { Loading } from './loading';
 
@@ -55,9 +56,15 @@ export const RouteGuard = () => {
             }
 
             setIsLoading(false);
-          }, []);
+          }, [authedPayload]);
           usePageTitle(path);
-          return isLoading ? <Loading /> : <Outlet />;
+          return (
+            <AuthStoreProvider
+              value={{ userId: authedPayload.userId ?? '', username: authedPayload.userName ?? '' }}
+            >
+              {isLoading ? <Loading /> : <Outlet />}
+            </AuthStoreProvider>
+          );
         }}
       </Await>
     </Suspense>
diff --git a/frontend/src/lib/hooks/use-chat.ts b/frontend/src/lib/hooks/use-chat.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { io, Socket } from 'socket.io-client';
 
 import { CHAT_SOCKET } from '@/services/api-clients';
-import { getUserId } from '@/services/user-service';
+import { useUser } from '@/stores/auth-store';
 import { Message } from '@/types/chat-types';
 
 const WS_EVENT = {
@@ -24,7 +24,7 @@ interface UseChatProps {
 }
 
 export const useChat = ({ roomId }: UseChatProps) => {
-  const [userId] = useState(getUserId());
+  const { userId } = useUser();
   const [messages, setMessages] = useState<Message[]>([]);
   const [connected, setConnected] = useState(false);
   const [error, setError] = useState<string | null>(null);
diff --git a/frontend/src/lib/hooks/use-collab.ts b/frontend/src/lib/hooks/use-collab.ts
@@ -8,7 +8,7 @@ import * as Y from 'yjs';
 
 import { extensions as baseExtensions, getLanguage } from '@/lib/editor/extensions';
 import { COLLAB_WS } from '@/services/api-clients';
-import { getUserId } from '@/services/user-service';
+import { useUser } from '@/stores/auth-store';
 import type { IYjsUserState } from '@/types/collab-types';
 
 // credit: https://github.com/yjs/y-websocket
@@ -29,7 +29,7 @@ const getRandomColor = () => {
 
 // TODO: Test if collab logic works
 export const useCollab = (roomId: string) => {
-  const [userId] = useState(getUserId());
+  const { userId, username } = useUser();
   const editorRef = useRef<ReactCodeMirrorRef>(null);
   const [sharedDocRef, setSharedDocRef] = useState<Y.Map<unknown>>();
   const [extensions, setExtensions] = useState<Array<Extension>>(baseExtensions);
@@ -95,8 +95,8 @@ export const useCollab = (roomId: string) => {
       const { color, light } = getRandomColor();
       // TODO: Get user name, ID
       const userState: IYjsUserState['user'] = {
-        name: `Anon`,
-        userId: userId ?? 'null',
+        name: username,
+        userId,
         color,
         colorLight: light,
       };
@@ -150,7 +150,6 @@ export const useCollab = (roomId: string) => {
     setCode,
     members,
     isLoading,
-    userId,
     isCompleting,
     setIsCompleting,
     cursorPosition,
diff --git a/frontend/src/routes/interview/[room]/main.tsx b/frontend/src/routes/interview/[room]/main.tsx
@@ -8,6 +8,7 @@ import { Editor } from '@/components/blocks/interview/editor';
 import { PartnerChat } from '@/components/blocks/interview/partner-chat';
 import { QuestionDetails } from '@/components/blocks/questions/details';
 import { Card } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useCrumbs } from '@/lib/hooks';
 import { questionDetailsQuery } from '@/lib/queries/question-details';
 import { ROUTES } from '@/lib/routes';
@@ -50,8 +51,18 @@ export const InterviewRoom = () => {
       <WithNavBanner crumbs={crumbs}>
         <div className='flex flex-1 overflow-hidden'>
           <Card className='border-border m-4 flex w-[500px] overflow-hidden p-4 md:w-2/5'>
-            <QuestionDetails {...{ questionDetails }} />
+            <Tabs defaultValue='details'>
+              <TabsList className=''>
+                <TabsTrigger value='details'>Question Details</TabsTrigger>
+                <TabsTrigger value='attempts'>Past Attempts</TabsTrigger>
+              </TabsList>
+              <TabsContent value='details' className='flex h-full'>
+                <QuestionDetails {...{ questionDetails }} />
+              </TabsContent>
+              <TabsContent value='attempts' className='flex h-full' />
+            </Tabs>
           </Card>
+
           <div className='flex w-full'>
             <Editor
               questionId={questionId}
diff --git a/frontend/src/routes/match/logic.ts b/frontend/src/routes/match/logic.ts
@@ -7,7 +7,7 @@ import { z } from 'zod';
 
 import { requestMatch } from '@/services/match-service';
 import { fetchDifficulties, fetchTopics } from '@/services/question-service';
-import { getUserId } from '@/services/user-service';
+import { useUser } from '@/stores/auth-store';
 
 export interface MatchFormData {
   selectedTopics: string[];
@@ -44,8 +44,7 @@ const formSchema = z.object({
 export type IRequestMatchFormSchema = z.infer<typeof formSchema>;
 
 export const useRequestMatchForm = () => {
-  // TODO: Set on RouteGuard is-authed request and then query Context API
-  const userId = getUserId() as string;
+  const { userId } = useUser();
 
   const [socketPort, setSocketPort] = useState('');
 
diff --git a/frontend/src/routes/match/waiting-room/waiting.tsx b/frontend/src/routes/match/waiting-room/waiting.tsx
@@ -8,7 +8,7 @@ import { ROUTES } from '@/lib/routes';
 import { MATCHING_EVENT, WS_EVENT } from '@/lib/ws';
 import { MATCHING_SOCKET } from '@/services/api-clients';
 import { cancelMatch } from '@/services/match-service';
-import { getUserId } from '@/services/user-service';
+import { useUser } from '@/stores/auth-store';
 import { useMatchRequest } from '@/stores/match-request-store';
 
 import { UI_STATUS } from './constants';
@@ -25,6 +25,7 @@ type IWaitingRoomUIState = {
 };
 
 export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) => {
+  const { userId } = useUser();
   const navigate = useNavigate();
   const { values } = useMatchRequest();
   const [{ connected, canCancel, uiState }, setUIState] = useState<IWaitingRoomUIState>({
@@ -33,7 +34,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
     uiState: UI_STATUS.WAITING_STATUS,
   });
   const { mutate: sendCancelRequest, isPending: isCancelling } = useMutation({
-    mutationFn: cancelMatch,
+    mutationFn: () => cancelMatch(userId),
     onSuccess: () => {
       // TODO: Add toaster notif or cancel success UI
       setIsModalOpen(false);
@@ -100,7 +101,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
 
     socket.emit(WS_EVENT.START_QUEUING, {
       roomId: socketPort,
-      userId: getUserId(),
+      userId,
       topic: values?.selectedTopics,
       difficulty: values?.difficulty,
     });
diff --git a/frontend/src/services/match-service.ts b/frontend/src/services/match-service.ts
@@ -1,7 +1,6 @@
 import { IRequestMatchResponse } from '@/types/match-types';
 
 import { matchApiClient } from './api-clients';
-import { getUserId } from './user-service';
 
 const MATCHING_SERVICE_ROUTES = {
   REQUEST_MATCH: '/match/request',
@@ -33,6 +32,6 @@ export const requestMatch = (
     });
 };
 
-export const cancelMatch = () => {
-  return matchApiClient.post(MATCHING_SERVICE_ROUTES.CANCEL_MATCH, { userId: getUserId() });
+export const cancelMatch = (userId: string) => {
+  return matchApiClient.post(MATCHING_SERVICE_ROUTES.CANCEL_MATCH, { userId });
 };
diff --git a/frontend/src/services/user-service.ts b/frontend/src/services/user-service.ts
@@ -42,6 +42,8 @@ export const checkIsAuthed = (param?: { signal: AbortSignal }) => {
         return {
           isAuthed: true,
           expiresAt: response.data ? new Date(response.data.expiresAt) : new Date(),
+          userId: response.data ? response.data.userId : undefined,
+          username: response.data ? response.data.userName : undefined,
         };
       }
 
@@ -50,7 +52,3 @@ export const checkIsAuthed = (param?: { signal: AbortSignal }) => {
       };
     });
 };
-
-export const getUserId = () => {
-  return localStorage.getItem('cachedUserID');
-};
diff --git a/frontend/src/stores/auth-store.ts b/frontend/src/stores/auth-store.ts
@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+const AuthStore = createContext<{ userId: string; username: string }>({ userId: '', username: '' });
+
+export const AuthStoreProvider = AuthStore.Provider;
+
+export const useUser = () => {
+  const { userId, username } = useContext(AuthStore);
+  return {
+    userId,
+    username,
+  };
+};
