chore/ui: Add CRUD for questions

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

Author: SeeuSim

frontend/src/components/blocks/questions/admin-delete-form.tsx

@@ -0,0 +1,64 @@
+import { TrashIcon } from '@radix-ui/react-icons';
+import { useMutation } from '@tanstack/react-query';
+import { Loader2 } from 'lucide-react';
+import { Dispatch, FC, SetStateAction } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+type AdminDeleteFormProps = {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  questionId: number;
+};
+
+export const AdminDeleteForm: FC<AdminDeleteFormProps> = ({ isOpen, setIsOpen, questionId }) => {
+  const navigate = useNavigate();
+  const {
+    mutate: deleteQuestion,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: async (questionId: number) => {
+      setTimeout(() => {
+        navigate('/');
+      }, 1000);
+    },
+  });
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className='flex'>
+            Are you sure you want to delete question:&nbsp;`<pre>{questionId}</pre>`?
+          </AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogDescription />
+        <AlertDialogFooter className='flex w-full justify-between'>
+          <AlertDialogCancel disabled={isPending || isSuccess}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(event) => {
+              event.preventDefault();
+              deleteQuestion(questionId);
+            }}
+            disabled={isPending || isSuccess}
+            className='flex items-center gap-2'
+          >
+            <span>{isPending ? 'Deleting...' : isSuccess ? 'Deleted Successfully' : 'Delete'}</span>
+            {isPending ? <Loader2 className='size-4 animate-spin' /> : <TrashIcon />}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

frontend/src/components/blocks/questions/admin-edit-form.tsx

@@ -1,7 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Cross2Icon, DotsVerticalIcon, Pencil1Icon, PlusIcon } from '@radix-ui/react-icons';
+import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
 import { useMutation } from '@tanstack/react-query';
-import { type FC,useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { type Dispatch, type FC, type SetStateAction, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Markdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
@@ -19,12 +20,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Form,
   FormControl,
@@ -47,6 +42,8 @@ import { Textarea } from '@/components/ui/textarea';
 import type { IGetQuestionDetailsResponse } from '@/types/question-types';
 
 type AdminEditFormProps = {
+  isFormOpen: boolean;
+  setIsFormOpen: Dispatch<SetStateAction<boolean>>;
   questionDetails: IGetQuestionDetailsResponse['question'];
 };
 
@@ -57,10 +54,19 @@ const formSchema = z.object({
   description: z.string().min(1),
 });
 
-export const AdminEditForm: FC<AdminEditFormProps> = ({ questionDetails }) => {
-  const [isFormOpen, setIsFormOpen] = useState(false);
+export const AdminEditForm: FC<AdminEditFormProps> = ({
+  questionDetails,
+  isFormOpen,
+  setIsFormOpen,
+}) => {
   const [addedTopic, setAddedTopic] = useState('');
-  const { mutate: _sendUpdate, isPending } = useMutation({});
+  const {
+    mutate: sendUpdate,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: async (values: z.infer<typeof formSchema>) => {},
+  });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -72,7 +78,9 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({ questionDetails }) => {
     mode: 'onSubmit',
   });
 
-  const onSubmit = (_formValues: z.infer<typeof formSchema>) => {};
+  const onSubmit = (formValues: z.infer<typeof formSchema>) => {
+    sendUpdate(formValues);
+  };
 
   const addTopic = (topic: string) => {
     const val = new Set(form.getValues('topic').map((v) => v.toLowerCase()));
@@ -85,26 +93,6 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({ questionDetails }) => {
 
   return (
     <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            className='min-h-none ml-auto flex !h-6 items-center gap-2 rounded-lg px-2'
-            size='sm'
-          >
-            <span>Actions</span>
-            <DotsVerticalIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className='border-border'>
-          <DropdownMenuItem
-            onClick={() => setIsFormOpen((isOpen) => !isOpen)}
-            className='flex w-full justify-between gap-2 hover:cursor-pointer'
-          >
-            <span>Edit</span>
-            <Pencil1Icon />
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
       <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
         <DialogContent className='border-border flex h-dvh w-dvw max-w-screen-lg flex-col'>
           <DialogHeader className=''>
@@ -142,10 +130,10 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({ questionDetails }) => {
                             value={field.value}
                             onValueChange={field.onChange}
                           >
-                            <SelectTrigger>
+                            <SelectTrigger className='focus:ring-secondary-foreground/50'>
                               <SelectValue />
                             </SelectTrigger>
-                            <SelectContent>
+                            <SelectContent className='border-secondary-foreground/50'>
                               {(['Easy', 'Medium', 'Hard'] as const).map((value, index) => (
                                 <SelectItem key={index} value={value}>
                                   {value}
@@ -201,7 +189,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({ questionDetails }) => {
                                 className=''
                                 disabled={isPending}
                                 onClick={() => {
-                                  form.setValue('topic', questionDetails.topic);
+                                  form.resetField('topic');
                                 }}
                                 size='sm'
                               >
@@ -297,10 +285,30 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({ questionDetails }) => {
           </DialogDescription>
           <DialogFooter>
             <div className='flex w-full items-center justify-between'>
-              <Button variant='secondary' size='sm'>
+              <Button
+                disabled={isPending || isSuccess}
+                variant='secondary'
+                size='sm'
+                onClick={() => {
+                  form.reset();
+                  setIsFormOpen(false);
+                }}
+              >
                 Cancel
               </Button>
-              <Button size='sm'>Save Changes</Button>
+              <Button
+                disabled={isPending || isSuccess}
+                onClick={() => {
+                  onSubmit(form.getValues());
+                }}
+                size='sm'
+                className='flex gap-2'
+              >
+                <span>
+                  {isPending ? 'Submitting' : isSuccess ? 'Updated! Closing form' : 'Save Changes'}
+                </span>
+                {isPending && <Loader2 className='size-4 animate-spin' />}
+              </Button>
             </div>
           </DialogFooter>
         </DialogContent>

frontend/src/components/blocks/questions/details.tsx

@@ -1,15 +1,25 @@
+import { DotsVerticalIcon, Pencil1Icon, TrashIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
 import Markdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { useAuthedRoute } from '@/stores/auth-store';
 import type { IGetQuestionDetailsResponse } from '@/types/question-types';
 
+import { AdminDeleteForm } from './admin-delete-form';
 import { AdminEditForm } from './admin-edit-form';
 
 export const QuestionDetails = ({
@@ -18,6 +28,8 @@ export const QuestionDetails = ({
   questionDetails: IGetQuestionDetailsResponse['question'];
 }) => {
   const { isAdmin } = useAuthedRoute();
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   return (
     <ScrollArea className='h-full'>
       <CardHeader>
@@ -26,7 +38,45 @@ export const QuestionDetails = ({
             <CardTitle className='text-2xl'>
               {questionDetails.id}.&nbsp;{questionDetails.title}
             </CardTitle>
-            {isAdmin && <AdminEditForm questionDetails={questionDetails} />}
+            {isAdmin && (
+              <>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      className='min-h-none ml-auto flex !h-6 items-center gap-2 rounded-lg px-2'
+                      size='sm'
+                    >
+                      <span>Actions</span>
+                      <DotsVerticalIcon />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className='border-border flex flex-col gap-1'>
+                    <DropdownMenuItem
+                      onClick={() => setIsFormOpen((isOpen) => !isOpen)}
+                      className='flex w-full justify-between gap-2 hover:cursor-pointer'
+                    >
+                      <span>Edit</span>
+                      <Pencil1Icon />
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => setIsDeleteDialogOpen((isOpen) => !isOpen)}
+                      className='flex w-full justify-between gap-2 bg-red-50/20 text-red-600 hover:cursor-pointer focus:bg-red-100 focus:text-red-600 dark:bg-red-950/40 dark:text-red-500  focus:dark:bg-red-900'
+                    >
+                      <span>Delete</span>
+                      <TrashIcon />
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <AdminEditForm {...{ questionDetails, isFormOpen, setIsFormOpen }} />
+                <AdminDeleteForm
+                  {...{
+                    isOpen: isDeleteDialogOpen,
+                    setIsOpen: setIsDeleteDialogOpen,
+                    questionId: Number.parseInt(questionDetails.id!),
+                  }}
+                />
+              </>
+            )}
           </div>
           <div className='flex flex-wrap items-center gap-1'>
             <Badge