d7/interview: Add list of interviews for back navigation

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

Author: SeeuSim

backend/collaboration/src/controller/get-rooms-controller.ts

@@ -0,0 +1,31 @@
+import type { Request, Response } from 'express';
+import { StatusCodes } from 'http-status-codes';
+
+import { getRoomsService } from '@/service/get/rooms-get-service';
+
+type QueryParams = {
+  userId: string;
+  offset?: number;
+  limit?: number;
+};
+
+export async function getRoomsController(
+  req: Request<unknown, unknown, unknown, Partial<QueryParams>>,
+  res: Response
+) {
+  const { userId, ...rest } = req.query;
+
+  if (!userId) {
+    return res.status(StatusCodes.UNPROCESSABLE_ENTITY).json('Malformed Request');
+  }
+
+  const response = await getRoomsService({ userId, ...rest });
+
+  if (response.data) {
+    return res.status(response.code).json(response.data);
+  }
+
+  return res
+    .status(response.code)
+    .json({ error: response.error || { message: 'An error occurred' } });
+}

backend/collaboration/src/routes/room.ts

@@ -1,11 +1,13 @@
 import express from 'express';
 
 import { getCollabRoom } from '@/controller/collab-controller';
+import { getRoomsController } from '@/controller/get-rooms-controller';
 import { authCheck } from '@/controller/room-auth-controller';
 
 const router = express.Router();
 
 router.get('/', getCollabRoom);
+router.get('/rooms', getRoomsController);
 router.get('/auth', authCheck);
 
 export default router;

backend/collaboration/src/service/get/rooms-get-service.ts

@@ -0,0 +1,44 @@
+import { desc, eq, type InferSelectModel, or } from 'drizzle-orm';
+import { StatusCodes } from 'http-status-codes';
+
+import { db, rooms } from '@/lib/db';
+import { logger } from '@/lib/utils';
+import type { IServiceResponse } from '@/types';
+
+import type { IGetRoomsPayload } from './types';
+
+export const getRoomsService = async (
+  params: IGetRoomsPayload
+): Promise<IServiceResponse<Array<InferSelectModel<typeof rooms>>>> => {
+  const { offset, limit: rawLimit, userId } = params;
+  const limit = rawLimit && rawLimit > 0 ? rawLimit : 10;
+  let query = db
+    .select()
+    .from(rooms)
+    .where(or(eq(rooms.userId1, userId), eq(rooms.userId2, userId)))
+    .limit(limit)
+    .$dynamic();
+
+  if (offset) {
+    query = query.offset(offset * limit);
+  }
+
+  query = query.orderBy(desc(rooms.createdAt));
+
+  try {
+    const result = await query;
+    return {
+      code: StatusCodes.OK,
+      data: result,
+    };
+  } catch (error) {
+    const { name, message, stack, cause } = error as Error;
+    logger.error(`An error occurred: ` + JSON.stringify({ name, message, stack, cause }));
+    return {
+      code: StatusCodes.INTERNAL_SERVER_ERROR,
+      error: {
+        message,
+      },
+    };
+  }
+};

backend/collaboration/src/service/get/types.ts

@@ -14,3 +14,9 @@ export type IGetAuthRoomPayload = {
   roomId: string;
   userId: string;
 };
+
+export type IGetRoomsPayload = {
+  userId: string;
+  offset?: number;
+  limit?: number;
+};

frontend/src/components/blocks/nav-bar.tsx

@@ -26,6 +26,9 @@ const NavBar = observer(() => {
             <Button variant='ghost' asChild>
               <Link to={ROUTES.QUESTIONS}>Questions</Link>
             </Button>
+            <Button variant='ghost' asChild>
+              <Link to={ROUTES.INTERVIEWS}>Interviews</Link>
+            </Button>
           </>
         )}
         <div className='ml-auto flex items-center gap-4 md:ml-auto md:gap-2 lg:gap-4'>

frontend/src/lib/router.tsx

@@ -5,6 +5,7 @@ import { RootLayout } from '@/components/blocks/root-layout';
 import { loader as routeGuardLoader, RouteGuard } from '@/components/blocks/route-guard';
 import { ForgotPassword } from '@/routes/forgot-password';
 import { HomePage } from '@/routes/home';
+import { InterviewsPage } from '@/routes/interview';
 import { InterviewRoomContainer, loader as interviewRoomLoader } from '@/routes/interview/[room]';
 import { Login } from '@/routes/login';
 import { loader as topicsLoader } from '@/routes/match/logic';
@@ -44,6 +45,10 @@ export const router = createBrowserRouter([
                 loader: questionDetailsLoader(queryClient),
                 element: <QuestionDetailsPage />,
               },
+              {
+                path: ROUTES.INTERVIEWS,
+                element: <InterviewsPage />,
+              },
               {
                 path: ROUTES.INTERVIEW,
                 loader: interviewRoomLoader,

frontend/src/lib/routes.ts

@@ -8,6 +8,7 @@ export const ROUTES = {
   QUESTION_DETAILS: '/questions/:questionId',
 
   MATCH: '/match',
+  INTERVIEWS: '/interviews',
   INTERVIEW: '/interview/:roomId',
 };
 
@@ -30,6 +31,12 @@ const TOP_LEVEL_AUTHED_ROUTES = {
       title: 'Interview',
     },
   ],
+  [ROUTES.INTERVIEWS]: [
+    {
+      path: ROUTES.INTERVIEWS,
+      title: 'Interviews',
+    },
+  ],
 };
 
 export type BreadCrumb = {

frontend/src/routes/interview/index.ts

@@ -0,0 +1 @@
+export * from './main';

frontend/src/routes/interview/main.tsx

@@ -0,0 +1,43 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useEffect, useMemo } from 'react';
+
+import { WithNavBanner } from '@/components/blocks/authed';
+import { useCrumbs } from '@/lib/hooks';
+import { getRooms } from '@/services/collab-service';
+import { useAuthedRoute } from '@/stores/auth-store';
+import { IInterviewRoom } from '@/types/collab-types';
+
+export const InterviewsPage = () => {
+  const { userId } = useAuthedRoute();
+  const { crumbs } = useCrumbs();
+  const { data, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery<
+    Array<IInterviewRoom>
+  >({
+    queryKey: ['interviews', userId],
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }) => getRooms(userId, pageParam as number),
+    getNextPageParam: (_lastPage, pages) => {
+      if (_lastPage.length === 0) {
+        return undefined;
+      }
+
+      return pages.length;
+    },
+  });
+
+  useEffect(() => {
+    if (!isFetchingNextPage && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
+
+  const _rooms = useMemo(() => {
+    return data ? data.pages.flatMap((page) => page) : [];
+  }, [data]);
+
+  return (
+    <WithNavBanner crumbs={crumbs}>
+      <div />
+    </WithNavBanner>
+  );
+};

frontend/src/services/collab-service.ts

@@ -1,7 +1,10 @@
+import { IInterviewRoom } from '@/types/collab-types';
+
 import { collabApiGetClient } from './api-clients';
 
 const COLLAB_SERVICE_ROUTES = {
   CHECK_ROOM_AUTH: '/room/auth',
+  GET_ROOMS: '/room/rooms',
 };
 
 export const checkRoomAuthorization = (roomId: string, userId: string) => {
@@ -13,8 +16,25 @@ export const checkRoomAuthorization = (roomId: string, userId: string) => {
     .then((response) => {
       return { isAuthed: response.status < 400, questionId: response.data?.questionId };
     })
-    .catch((err) => {
-      console.log(err);
+    .catch((_err) => {
       return { isAuthed: false, questionId: undefined };
     });
 };
+
+export const getRooms = (userId: string, offset?: number, limit?: number) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('userId', userId);
+
+  if (offset) {
+    searchParams.set('offset', String(offset));
+  }
+
+  if (limit) {
+    searchParams.set('limit', String(limit));
+  }
+
+  return collabApiGetClient
+    .get(`${COLLAB_SERVICE_ROUTES.GET_ROOMS}?${searchParams.toString()}`)
+    .then((response) => response.data as Array<IInterviewRoom>)
+    .catch((_err) => []);
+};