PEER-219: Add Page title

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/components/blocks/interview/editor.tsx

@@ -16,7 +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 { useAuthedRoute } from '@/stores/auth-store';
 
 import { CompleteDialog } from './room/complete-dialog';
 import { OtherUserCompletingDialog } from './room/other-user-completing-dialog';
@@ -32,7 +32,7 @@ type EditorProps = {
 };
 
 export const Editor = ({ questionId, room, onAIClick, onPartnerClick }: EditorProps) => {
-  const { userId } = useUser();
+  const { userId } = useAuthedRoute();
   const { height } = useWindowSize();
   const [theme, setTheme] = useState<IEditorTheme>('vscodeDark');
   const {

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 { useUser } from '@/stores/auth-store';
+import { useAuthedRoute } from '@/stores/auth-store';
 
 import { ChatLayout } from './chat/chat-layout';
 
@@ -12,7 +12,7 @@ interface PartnerChatProps {
 }
 
 export const PartnerChat: React.FC<PartnerChatProps> = ({ isOpen, onClose, roomId }) => {
-  const { userId } = useUser();
+  const { userId } = useAuthedRoute();
   const { messages, sendMessage, connected, error } = useChat({ roomId });
   const [isLoading, setIsLoading] = useState(false);
 

frontend/src/components/blocks/route-guard.tsx

@@ -9,7 +9,6 @@ import {
   useNavigate,
 } from 'react-router-dom';
 
-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';
@@ -48,7 +47,7 @@ export const RouteGuard = () => {
   return (
     <Suspense fallback={<Loading />}>
       <Await resolve={data.payload}>
-        {({ authedPayload, isAuthedRoute, path }) => {
+        {({ authedPayload, isAuthedRoute, path: _p }) => {
           const [isLoading, setIsLoading] = useState(true);
           useEffect(() => {
             if (authedPayload.isAuthed !== isAuthedRoute) {
@@ -57,10 +56,12 @@ export const RouteGuard = () => {
 
             setIsLoading(false);
           }, [authedPayload]);
-          usePageTitle(path);
           return (
             <AuthStoreProvider
-              value={{ userId: authedPayload.userId ?? '', username: authedPayload.userName ?? '' }}
+              value={{
+                userId: authedPayload.userId ?? '',
+                username: authedPayload.username ?? '',
+              }}
             >
               {isLoading ? <Loading /> : <Outlet />}
             </AuthStoreProvider>

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 { useUser } from '@/stores/auth-store';
+import { useAuthedRoute } 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 } = useUser();
+  const { userId } = useAuthedRoute();
   const [messages, setMessages] = useState<Message[]>([]);
   const [connected, setConnected] = useState(false);
   const [error, setError] = useState<string | null>(null);

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 { useUser } from '@/stores/auth-store';
+import { useAuthedRoute } 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, username } = useUser();
+  const { userId, username } = useAuthedRoute();
   const editorRef = useRef<ReactCodeMirrorRef>(null);
   const [sharedDocRef, setSharedDocRef] = useState<Y.Map<unknown>>();
   const [extensions, setExtensions] = useState<Array<Extension>>(baseExtensions);

frontend/src/lib/hooks/use-page-title.ts

@@ -2,22 +2,15 @@ import { useEffect, useRef } from 'react';
 
 import { getPageTitle } from '@/lib/routes';
 
-export const usePageTitle = (path: string) => {
-  const isDocumentDefined = typeof document !== 'undefined';
-  const originalTitle = useRef(isDocumentDefined ? document.title : null);
-  useEffect(() => {
-    if (!isDocumentDefined) {
-      return;
-    }
+export const usePageTitle = (path: string, customTitle?: string) => {
+  const defaultTitle = useRef(document.title);
+  const title = customTitle ?? getPageTitle(path);
 
-    if (document.title !== path) {
-      document.title = getPageTitle(path);
-    }
+  useEffect(() => {
+    document.title = title;
 
     return () => {
-      if (originalTitle.current) {
-        document.title = originalTitle.current;
-      }
+      document.title = defaultTitle.current;
     };
-  }, []);
+  }, [title]);
 };

frontend/src/lib/routes.ts

@@ -67,5 +67,5 @@ const TITLES: Record<string, string> = {
 
 export const getPageTitle = (path: string) => {
   const title = TITLES[path];
-  return title ?? 'Peerprep';
+  return title;
 };

frontend/src/routes/forgot-password/main.tsx

@@ -1,6 +1,9 @@
+import { usePageTitle } from '@/lib/hooks';
+import { ROUTES } from '@/lib/routes';
 import { ForgotPasswordForm } from '@/routes/forgot-password';
 
 export const ForgotPassword = () => {
+  usePageTitle(ROUTES.FORGOT_PASSWORD);
   return (
     <div className='m-auto flex'>
       <ForgotPasswordForm />

frontend/src/routes/interview/[room]/main.tsx

@@ -9,7 +9,7 @@ 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 { useCrumbs, usePageTitle } from '@/lib/hooks';
 import { questionDetailsQuery } from '@/lib/queries/question-details';
 import { ROUTES } from '@/lib/routes';
 
@@ -29,6 +29,7 @@ export const loader =
 export const InterviewRoom = () => {
   const { questionId, roomId } = useLoaderData() as Awaited<ReturnType<ReturnType<typeof loader>>>;
   const { crumbs } = useCrumbs();
+  usePageTitle(ROUTES.INTERVIEW);
   const { data: details } = useSuspenseQuery(questionDetailsQuery(questionId));
   const questionDetails = useMemo(() => details.question, [details]);
   const [isAIChatOpen, setIsAIChatOpen] = useState(false);

frontend/src/routes/login/main.tsx

@@ -1,8 +1,11 @@
 import { observer } from 'mobx-react';
 
+import { usePageTitle } from '@/lib/hooks';
+import { ROUTES } from '@/lib/routes';
 import { Hero, LoginForm } from '@/routes/login';
 
 export const Login = observer(() => {
+  usePageTitle(ROUTES.LOGIN);
   return (
     <div className='flex w-full py-8'>
       <Hero />