Add refresh on edit/add question

Author: jehousoh

backend/question/src/routes/questionRoutes.ts

@@ -51,7 +51,7 @@ router.post(
 
 // Retrieve all questions
 router.post("/all", async (req: Request, res: Response) => {
-  const pagination = parseInt(req.body.pagination as string, 10) || 1; // Default page is 1
+  let pagination = parseInt(req.body.pagination as string, 10) || 1; // Default page is 1
   const page_size = parseInt(req.body.page_size as string, 10) || 10; // Default limit is 10
   const skip = (pagination - 1) * page_size; // Calculate how many documents to skip
   try {
@@ -72,11 +72,13 @@ router.post("/all", async (req: Request, res: Response) => {
       .exec();
 
     const total = await Question.countDocuments().exec();
+    const totalPages = Math.ceil(total / page_size);
+    if (totalPages < pagination) pagination = 1;
 
     return res.json({
       questions,
       currentPage: pagination,
-      totalPages: Math.ceil(total / page_size),
+      totalPages: totalPages,
       totalQuestions: total,
     });
   } catch (error) {

backend/question/src/tests/app.spec.ts

@@ -247,8 +247,8 @@ describe("Test Question API", () => {
 // Test /api/all
 describe("Test Get All", () => {
   // Get all with questions
-  test("GET /api/all - should retrieve all questions", async () => {
-    const res = await request.get("/api/all").send();
+  test("POST /api/all - should retrieve all questions", async () => {
+    const res = await request.post("/api/all").send();
     const sampleQuestion = res.body.questions[0];
     expect(res.statusCode).toBe(200);
     expect(Array.isArray(res.body.questions)).toBe(true);

frontend/src/app/(auth)/leetcode-dashboard/AddQuestionDialog.tsx

@@ -24,9 +24,13 @@ import { topicsList } from "@/utils/constants";
 
 interface AddQuestionDialogProps {
   handleClose: () => void;
+  setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const AddQuestionDialog = ({ handleClose }: AddQuestionDialogProps) => {
+const AddQuestionDialog = ({
+  handleClose,
+  setRefreshKey,
+}: AddQuestionDialogProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const formSchema = z.object({
@@ -78,6 +82,7 @@ const AddQuestionDialog = ({ handleClose }: AddQuestionDialogProps) => {
         });
       })
       .finally(() => {
+        setRefreshKey((prev) => prev + 1);
         setIsSubmitting(false);
         handleClose();
       });

frontend/src/app/(auth)/leetcode-dashboard/EditQuestionDialog.tsx

@@ -29,6 +29,7 @@ import { topicsList } from "@/utils/constants";
 interface EditQuestionDialogProp {
   handleClose: () => void;
   questionId: string;
+  setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
 }
 
 interface EditQuestionValues {
@@ -48,6 +49,7 @@ const initialValues: EditQuestionValues = {
 const EditQuestionDialog = ({
   questionId,
   handleClose,
+  setRefreshKey,
 }: EditQuestionDialogProp) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [leetcodeData, setLeetcodeData] =
@@ -111,6 +113,7 @@ const EditQuestionDialog = ({
         });
       })
       .finally(() => {
+        setRefreshKey((prev) => prev + 1);
         handleClose();
         setIsSubmitting(false);
       });

frontend/src/app/(auth)/leetcode-dashboard/LeetcodeDashboard.tsx

@@ -26,6 +26,7 @@ const LeetcodeDashboardHeader = () => {
 
 const LeetcodeDashboard = () => {
   const [modalIsOpen, setIsOpen] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0); // State to trigger re-fetch
 
   function openModal() {
     setIsOpen(true);
@@ -72,11 +73,17 @@ const LeetcodeDashboard = () => {
             variants={modalAnimation}
             transition={{ duration: 0.3 }}
           >
-            <AddQuestionDialog handleClose={closeModal} />
+            <AddQuestionDialog
+              handleClose={closeModal}
+              setRefreshKey={setRefreshKey}
+            />
           </motion.div>
         </Modal>
       </div>
-      <LeetcodeDashboardTable />
+      <LeetcodeDashboardTable
+        refreshKey={refreshKey}
+        setRefreshKey={setRefreshKey}
+      />
     </Container>
   );
 };

frontend/src/app/(auth)/leetcode-dashboard/LeetcodeDashboardTable.tsx

@@ -44,12 +44,19 @@ const Cell = ({
   return <div className={cn("text-center", className)}>{children}</div>;
 };
 
-export function LeetcodeDashboardTable() {
+interface LeetcodeDashboardTableProps {
+  refreshKey: number;
+  setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export function LeetcodeDashboardTable({
+  refreshKey,
+  setRefreshKey,
+}: LeetcodeDashboardTableProps) {
   const [data, setData] = useState<QuestionMinified[]>([]);
   const [editingQuestionId, setEditingQuestionId] = React.useState<
     string | null
   >(null);
-  const [refreshKey, setRefreshKey] = useState(0); // State to trigger re-fetch
 
   function handleDelete(questionId: string) {
     Swal.fire({
@@ -64,6 +71,10 @@ export function LeetcodeDashboardTable() {
           await deleteSingleLeetcodeQuestion(questionId);
           Swal.fire("Question deleted successfully!", "", "success");
 
+          setPagination({
+            pageIndex: 0,
+            pageSize: 10,
+          });
           // Trigger data refresh
           setRefreshKey((prev) => prev + 1);
         } catch (error) {
@@ -157,6 +168,7 @@ export function LeetcodeDashboardTable() {
                 <EditQuestionDialog
                   questionId={questionId}
                   handleClose={closeModal}
+                  setRefreshKey={setRefreshKey}
                 />
               </motion.div>
             </Modal>

frontend/src/types/find-match.tsx

@@ -1,9 +1,9 @@
 // eslint-disable no-invalid-page-export
 
 export enum QuestionDifficulty {
-  EASY = "easy",
-  MEDIUM = "medium",
-  HARD = "hard",
+  EASY = "Easy",
+  MEDIUM = "Medium",
+  HARD = "Hard",
 }
 
 export enum QuestionLanguages {