chore/ui: Add CRUD for questions

SeeuSim · SeeuSim · commit bcd659472b67 · 2024-11-08T00:47:50.000+08:00
Signed-off-by: SeeuSim &lt;seeusimong@gmail.com&gt;
diff --git a/frontend/src/components/blocks/questions/admin-delete-form.tsx b/frontend/src/components/blocks/questions/admin-delete-form.tsx
@@ -14,6 +14,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { adminDeleteQuestion } from '@/services/question-service';
 
 type AdminDeleteFormProps = {
   isOpen: boolean;
@@ -28,7 +29,8 @@ export const AdminDeleteForm: FC<AdminDeleteFormProps> = ({ isOpen, setIsOpen, q
     isPending,
     isSuccess,
   } = useMutation({
-    mutationFn: async (questionId: number) => {
+    mutationFn: (questionId: number) => adminDeleteQuestion(questionId),
+    onSuccess: () => {
       setTimeout(() => {
         navigate('/');
       }, 1000);
diff --git a/frontend/src/components/blocks/questions/admin-edit-form.tsx b/frontend/src/components/blocks/questions/admin-edit-form.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 import { type Dispatch, type FC, type SetStateAction, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -39,54 +39,82 @@ import {
 } from '@/components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
+import { adminAddQuestion, adminUpdateQuestion } from '@/services/question-service';
+import { useAuthedRoute } from '@/stores/auth-store';
 import type { IGetQuestionDetailsResponse } from '@/types/question-types';
 
 type AdminEditFormProps = {
   isFormOpen: boolean;
   setIsFormOpen: Dispatch<SetStateAction<boolean>>;
   questionDetails: IGetQuestionDetailsResponse['question'];
+  mode?: 'create' | 'update';
 };
 
 const formSchema = z.object({
   title: z.string().min(1),
   difficulty: z.enum(['Easy', 'Medium', 'Hard']),
-  topic: z.string().min(1).array().min(1),
+  topics: z.string().min(1).array().min(1),
   description: z.string().min(1),
 });
 
 export const AdminEditForm: FC<AdminEditFormProps> = ({
   questionDetails,
   isFormOpen,
   setIsFormOpen,
+  mode = 'update',
 }) => {
+  const { userId } = useAuthedRoute();
   const [addedTopic, setAddedTopic] = useState('');
-  const {
-    mutate: sendUpdate,
-    isPending,
-    isSuccess,
-  } = useMutation({
-    mutationFn: async (values: z.infer<typeof formSchema>) => {},
-  });
-
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       ...questionDetails,
+      topics: questionDetails.topic,
       description: questionDetails.description,
       difficulty: questionDetails.difficulty as z.infer<typeof formSchema>['difficulty'],
     },
     mode: 'onSubmit',
   });
 
+  const queryClient = useQueryClient();
+  const {
+    mutate: sendUpdate,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (values: z.infer<typeof formSchema>) => {
+      return mode === 'update'
+        ? adminUpdateQuestion({ ...values, questionId: Number.parseInt(questionDetails.id!) })
+        : adminAddQuestion(values);
+    },
+    onSuccess: () => {
+      form.reset();
+
+      if (mode === 'update') {
+        queryClient.refetchQueries({
+          queryKey: ['qn', 'details', Number.parseInt(questionDetails.id!)],
+        });
+      } else {
+        queryClient.refetchQueries({
+          queryKey: ['questions', userId],
+        });
+      }
+
+      setTimeout(() => {
+        setIsFormOpen(false);
+      }, 500);
+    },
+  });
+
   const onSubmit = (formValues: z.infer<typeof formSchema>) => {
     sendUpdate(formValues);
   };
 
   const addTopic = (topic: string) => {
-    const val = new Set(form.getValues('topic').map((v) => v.toLowerCase()));
+    const val = new Set(form.getValues('topics').map((v) => v.toLowerCase()));
     val.add(topic.toLowerCase());
     form.setValue(
-      'topic',
+      'topics',
       Array.from(val).map((v) => v.replace(/^[a-z]/, (c) => c.toUpperCase()))
     );
   };
@@ -96,7 +124,9 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
       <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
         <DialogContent className='border-border flex h-dvh w-dvw max-w-screen-lg flex-col'>
           <DialogHeader className=''>
-            <DialogTitle className='text-primary'>Edit Question Details</DialogTitle>
+            <DialogTitle className='text-primary'>
+              {mode === 'update' ? 'Edit Question Details' : 'Add a question'}
+            </DialogTitle>
           </DialogHeader>
           <DialogDescription className='h-full'>
             <Form {...form}>
@@ -148,7 +178,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
                   />
                   <FormField
                     control={form.control}
-                    name='topic'
+                    name='topics'
                     render={({ field }) => (
                       <FormItem className='flex flex-col gap-1 sm:col-span-2'>
                         <div className='flex items-end gap-2'>
@@ -189,7 +219,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
                                 className=''
                                 disabled={isPending}
                                 onClick={() => {
-                                  form.resetField('topic');
+                                  form.resetField('topics');
                                 }}
                                 size='sm'
                               >
@@ -211,7 +241,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
                                       }
 
                                       form.setValue(
-                                        'topic',
+                                        'topics',
                                         field.value.filter((_value, idx) => idx !== index)
                                       );
                                     }}
@@ -257,7 +287,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
                             <Markdown
                               rehypePlugins={[rehypeKatex]}
                               remarkPlugins={[remarkMath, remarkGfm]}
-                              className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground leading-normal'
+                              className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground prose-pre:bg-secondary prose-pre:text-secondary-foreground leading-normal'
                               components={{
                                 code: ({ children, className, ...rest }) => {
                                   return (
diff --git a/frontend/src/components/blocks/questions/details.tsx b/frontend/src/components/blocks/questions/details.tsx
@@ -99,15 +99,15 @@ export const QuestionDetails = ({
         <Markdown
           rehypePlugins={[rehypeKatex]}
           remarkPlugins={[remarkMath, remarkGfm]}
-          className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground leading-normal'
+          className='prose prose-neutral text-card-foreground prose-strong:text-card-foreground prose-pre:bg-secondary prose-pre:text-secondary-foreground leading-normal'
           components={{
             code: ({ children, className, ...rest }) => {
               // const isCodeBlock = /language-(\w+)/.exec(className || '');
 
               return (
                 <code
                   {...rest}
-                  className='bg-secondary text-secondary-foreground rounded px-1.5 py-1 font-mono'
+                  className='dark:bg-secondary dark:text-secondary-foreground rounded px-1.5 py-1 font-mono'
                 >
                   {children}
                 </code>
diff --git a/frontend/src/routes/questions/question-table.tsx b/frontend/src/routes/questions/question-table.tsx
@@ -3,6 +3,7 @@ import {
   ArrowRightIcon,
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
+  PlusIcon,
 } from '@radix-ui/react-icons';
 import {
   ColumnDef,
@@ -15,6 +16,7 @@ import {
 } from '@tanstack/react-table';
 import { useState } from 'react';
 
+import { AdminEditForm } from '@/components/blocks/questions/admin-edit-form';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Pagination, PaginationContent, PaginationItem } from '@/components/ui/pagination';
@@ -33,6 +35,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { useAuthedRoute } from '@/stores/auth-store';
 
 interface QuestionTableProps<TData, TValue> {
   columns: Array<ColumnDef<TData, TValue>>;
@@ -45,6 +48,8 @@ export function QuestionTable<TData, TValue>({
   data,
   isError,
 }: QuestionTableProps<TData, TValue>) {
+  const { isAdmin } = useAuthedRoute();
+  const [isAdminAddFormOpen, setIsAdminAddFormOpen] = useState(false);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: 12,
@@ -106,6 +111,30 @@ export function QuestionTable<TData, TValue>({
           onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
           className='max-w-sm'
         />
+        {isAdmin && (
+          <>
+            <Button
+              onClick={() => setIsAdminAddFormOpen((open) => !open)}
+              className='ml-12 flex gap-2'
+              variant='outline'
+              size='sm'
+            >
+              <span>Add Question</span>
+              <PlusIcon />
+            </Button>
+            <AdminEditForm
+              mode='create'
+              isFormOpen={isAdminAddFormOpen}
+              setIsFormOpen={setIsAdminAddFormOpen}
+              questionDetails={{
+                title: '',
+                topic: [],
+                description: '',
+                difficulty: '',
+              }}
+            />
+          </>
+        )}
       </div>
       <div className='border-border rounded-md border'>
         <Table>
diff --git a/frontend/src/services/question-service.ts b/frontend/src/services/question-service.ts
@@ -18,6 +18,14 @@ const QUESTION_SERVICE_ROUTES = {
   GET_DIFFICULTIES: '/questions/difficulties',
   POST_ADD_ATTEMPT: '/questions/newAttempt',
   POST_GET_ATTEMPTS: '/questions/attempts',
+
+  // Question CRUD
+  /* POST */
+  ADD_QUESTION: '/questions/create',
+  /* PUT */
+  UPDATE_QUESTION: '/questions/<questionId>',
+  /* DELETE */
+  DELETE_QUESTION: '/questions/<questionId>',
 };
 
 export const getQuestionDetails = (questionId: number): Promise<IGetQuestionDetailsResponse> => {
@@ -83,3 +91,33 @@ export const getQuestionAttempts = (
     .post(QUESTION_SERVICE_ROUTES.POST_GET_ATTEMPTS, { ...params, limit: 10 })
     .then((res) => res.data as IPostGetQuestionAttemptsResponse);
 };
+
+export const adminAddQuestion = (values: {
+  title: string;
+  difficulty: string;
+  description: string;
+  topics: Array<string>;
+}) => {
+  return questionApiClient
+    .post(QUESTION_SERVICE_ROUTES.ADD_QUESTION, values)
+    .then((res) => res.data as { message?: string });
+};
+
+export const adminUpdateQuestion = (values: {
+  questionId: number;
+  title: string;
+  difficulty: string;
+  description: string;
+  topics: Array<string>;
+}) => {
+  const { questionId, ...rest } = values;
+  return questionApiClient
+    .put(QUESTION_SERVICE_ROUTES.UPDATE_QUESTION.replace(/<questionId>/, String(questionId)), rest)
+    .then((res) => res.data as { message?: string });
+};
+
+export const adminDeleteQuestion = (questionId: number) => {
+  return questionApiClient
+    .delete(QUESTION_SERVICE_ROUTES.DELETE_QUESTION.replace(/<questionId>/, String(questionId)))
+    .then((res) => res.data as { message?: string });
+};
