[Questions] Initialize Questions Repository Frontend (#13)

**Description**
This PR initializes the frontend for the Question Repository page,
enabling CRUD operations for questions. The page includes a table
displaying all questions, with the ability to view, edit, delete, and
create new questions via modals. Each question's title, difficulty, and
categories are displayed, with navigation to a detailed view for each
question.

**Changes**
- Implemented Question Repository page displaying a table of questions.
- Each row displays the question title, difficulty (via
`DifficultyBadge`), and categories.
  - Clicking the question title navigates to the question detail page.
  
- Added modals for:
  - Creating new questions (`CreateModal`).
  - Editing existing questions with pre-filled data from (`EditModal`).
  - Deleting questions with a confirmation modal (`DeleteModal`).

- Implemented API integration:
- Fetched question data using `fetchQuestions` and individual question
details using `fetchQuestionById`.
- Integrated `createQuestion`, `updateQuestion`, and `deleteQuestion`
mutations.
- Added optimistic updates by invalidating queries after mutations using
React Query's `useMutation`.

**Future Enhancements**
- Implement pagination for the Question Repository table.
- Add search and filter functionality to find questions based on
difficulty, category, or title.
- Add Toast for success/error of CRUD operations.

---------

Co-authored-by: firwer <[email protected]>
Co-authored-by: javinchua <[email protected]>

Author: 3 people

project/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": false
+}

project/apps/api-gateway/src/questions/questions.controller.ts

@@ -7,15 +7,15 @@ import {
   Inject,
   Body,
   Post,
-  UseGuards,
+  // UseGuards,
   Put,
   Delete,
   Query,
   UsePipes,
   BadRequestException,
 } from '@nestjs/common';
 import { ClientProxy } from '@nestjs/microservices';
-import { AuthGuard } from 'src/auth/auth.guard';
+// import { AuthGuard } from 'src/auth/auth.guard';
 import {
   CreateQuestionDto,
   createQuestionSchema,
@@ -27,7 +27,7 @@ import {
 import { ZodValidationPipe } from '@repo/pipes/zod-validation-pipe.pipe';
 
 @Controller('questions')
-@UseGuards(AuthGuard) // Can comment out if we dw auth for now
+// @UseGuards(AuthGuard) // comment out if we dw auth for now
 export class QuestionsController {
   constructor(
     @Inject('QUESTIONS_SERVICE')

project/apps/web/app/auth/SignInForm.tsx

@@ -16,6 +16,7 @@ import { signIn } from "@/lib/api/auth";
 import { useZodForm } from "@/lib/form";
 import { useLoginState } from "@/contexts/LoginStateContext";
 import { useToast } from "@/hooks/use-toast";
+import { QUERY_KEYS } from "@/constants/queryKeys";
 
 export function SignInForm() {
   const form = useZodForm({ schema: signInSchema });
@@ -27,7 +28,7 @@ export function SignInForm() {
     mutationFn: signIn,
     onSuccess: async () => {
       setHasLoginStateFlag();
-      await queryClient.invalidateQueries({ queryKey: ["me"] });
+      await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.Me] });
     },
     onError(error) {
       toast({

project/apps/web/app/auth/SignUpForm.tsx

@@ -15,6 +15,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { signUp } from "@/lib/api/auth";
 import { useZodForm } from "@/lib/form";
 import { useLoginState } from "@/contexts/LoginStateContext";
+import { QUERY_KEYS } from "@/constants/queryKeys";
 import { useToast } from "@/hooks/use-toast";
 
 export function SignUpForm() {
@@ -26,7 +27,7 @@ export function SignUpForm() {
     mutationFn: signUp,
     onSuccess: async () => {
       setHasLoginStateFlag();
-      await queryClient.invalidateQueries({ queryKey: ["me"] });
+      await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.Me] });
     },
     onError: (error) => {
       toast({

project/apps/web/app/auth/page.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/card";
 import { SignInForm } from "./SignInForm";
 import { SignUpForm } from "./SignUpForm";
-import { PublicPageWrapper } from "@/components/AuthWrappers/PublicPageWrapper";
+import { PublicPageWrapper } from "@/components/auth-wrappers/PublicPageWrapper";
 import { LANDING } from "@/lib/routes";
 
 export default function AuthPage() {

project/apps/web/app/globals.css

@@ -2,6 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-roboto), sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-inter), sans-serif;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -31,6 +46,9 @@
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
 
+    --green: 120 100% 25%;
+    --green-foreground: 0 0% 100%;
+
     --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;

project/apps/web/app/layout.tsx

@@ -1,18 +1,31 @@
+import { Inter, Roboto } from "next/font/google";
 import ReactQueryProvider from "@/components/ReactQueryProvider";
 import Suspense from "@/components/Suspense";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LoginStateProvider } from "@/contexts/LoginStateContext";
-import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
 
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  display: "swap",
+});
+
+const roboto = Roboto({
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body>
+    <html lang="en" className={inter.className}>
+      <body className={roboto.className}>
         <LoginStateProvider>
           <Suspense fallback={<Skeleton className="w-screen h-screen" />}>
             <ReactQueryProvider>{children}</ReactQueryProvider>

project/apps/web/app/page.tsx

@@ -1,5 +1,19 @@
 "use client";
 
-export default function Home() {
-  return <div>Landing Page</div>;
-}
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+const Dashboard = () => {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex flex-col items-center">
+        <div className="font-bold">Dashboard Page</div>
+        <Link href="/questions" passHref>
+          <Button className="mt-4">Go to Questions Repository</Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

project/apps/web/app/question/[id]/components/DeleteModal.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface DeleteModalProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onDelete: () => void;
+  questionTitle: string;
+}
+
+export default function DeleteModal({
+  open,
+  setOpen,
+  onDelete,
+  questionTitle,
+}: DeleteModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Question</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          <div>
+            Are you sure you want to delete the question "{questionTitle}"?
+          </div>
+          <div>This action cannot be undone.</div>
+        </DialogDescription>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onDelete}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}