Merge branch 'main' into issue-86-Invoke_Question_RESTful_API_from_ba…

…ckend

client/src/components/ui/Question/data-grid.tsx

@@ -113,7 +113,7 @@ export function Datagrid({
                 <span>Difficulty</span>
                 <span
                   className="ml-2 cursor-pointer"
-                  onClick={() => sortByColumn("difficulty")}
+                  onClick={() => sortByColumn("diff_level")}
                 >
                   <svg
                     width="10"
@@ -139,10 +139,10 @@ export function Datagrid({
             >
               <TableCell className="w-1/4">{item.name || "\u00A0"}</TableCell>
               <TableCell className="w-1/4">
-                {item.category || "\u00A0"}
+                {item.category ? item.category.join(", ") : "\u00A0"}
               </TableCell>
               <TableCell className="w-1/4">
-                {item.difficulty || "\u00A0"}
+                {item.diff_level || "\u00A0"}
               </TableCell>
               <TableCell className="flex justify-evenly py-4">
                 {item.name ? (

client/src/components/ui/Test/competition-data-grid.tsx

@@ -12,8 +12,8 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
-import { Competition } from "@/types/competition";
 import { DatagridProps, sortData } from "@/types/data-grid";
+import { Competition, QuizStatus } from "@/types/quiz";
 
 /**
  * Renders a paginated data grid for displaying competition information.
@@ -122,13 +122,13 @@ export function CompetitionDataGrid({
             >
               <TableCell className="w-1/2">{item.name}</TableCell>
               <TableCell className="w-1/4">
-                {item.competition_time ? (
+                {item.open_time_date ? (
                   <>
                     <div className="text-nowrap">
-                      {new Date(item.competition_time).toLocaleDateString()}
+                      {new Date(item.open_time_date).toLocaleDateString()}
                     </div>
                     <div className="text-nowrap">
-                      {new Date(item.competition_time).toLocaleTimeString()}
+                      {new Date(item.open_time_date).toLocaleTimeString()}
                     </div>
                   </>
                 ) : null}
@@ -142,7 +142,7 @@ export function CompetitionDataGrid({
                 >
                   <Button className="me-2">View</Button>
                   <Button className="me-2">
-                    {item.status === "Published" ? (
+                    {item.status === QuizStatus.Finished ? (
                       <a href="/withdraw">Withdraw</a>
                     ) : (
                       <a href="/publish">Publish</a>

client/src/components/ui/Test/practice-data-grid.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 import { DatagridProps } from "@/types/data-grid";
-import { Practice } from "@/types/practice";
+import { AdminQuiz, QuizStatus } from "@/types/quiz";
 
 /**
  * Renders a paginated data grid for displaying practice data.
@@ -39,9 +39,9 @@ export function PracticeDataGrid({
   datacontext,
   onDataChange,
   changePage,
-}: DatagridProps<Practice>) {
+}: DatagridProps<AdminQuiz>) {
   const [currentPage, setCurrentPage] = useState(1);
-  const [paddedData, setPaddedData] = useState<Practice[]>([]);
+  const [paddedData, setPaddedData] = useState<AdminQuiz[]>([]);
   const itemsPerPage = 5;
   const totalPages = Math.ceil(datacontext.length / itemsPerPage);
 
@@ -58,7 +58,7 @@ export function PracticeDataGrid({
 
     const updatedPaddedData = [...currentData];
     while (updatedPaddedData.length < itemsPerPage) {
-      updatedPaddedData.push({} as Practice);
+      updatedPaddedData.push({} as AdminQuiz);
     }
 
     setPaddedData(updatedPaddedData);
@@ -99,7 +99,7 @@ export function PracticeDataGrid({
                 >
                   <Button className="me-2">View</Button>
                   <Button className="me-2">
-                    {item.status === "Published" ? (
+                    {item.status === QuizStatus.Finished ? (
                       <a href="/withdraw">Withdraw</a>
                     ) : (
                       <a href="/publish">Publish</a>

client/src/components/ui/Test/question-block-manager.tsx

@@ -176,8 +176,8 @@ const SortableBlock: React.FC<SortableBlockProps> = ({
     isPending,
     isError,
   } = useFetchData<Question[]>({
-    queryKey: ["question.list"],
-    endpoint: "/question/list",
+    queryKey: ["questions.question-bank"],
+    endpoint: "/questions/question-bank/",
   });
 
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -251,7 +251,7 @@ const SortableBlock: React.FC<SortableBlockProps> = ({
           />
           {searchTerm && !isForceClose && (
             <div className="absolute z-10 mt-1 max-h-64 w-full overflow-y-auto rounded-md border border-gray-300 bg-white shadow-md">
-              {isPending || isError || searchResults.length < 1 ? (
+              {isPending || isError || searchResults?.length < 1 ? (
                 <div className="p-2 text-center text-gray-500">
                   {isPending
                     ? "Loading..."

client/src/components/ui/Users/school-data-grid.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 import { DatagridProps } from "@/types/data-grid";
-import { School } from "@/types/school";
+import { School } from "@/types/user";
 
 /**
  * Renders a paginated data grid for displaying school information.
@@ -84,13 +84,13 @@ export function SchoolDataGrid({
               <TableCell className="w-1/4">{item.id}</TableCell>
               <TableCell className="w-1/4">{item.name}</TableCell>
               <TableCell className="w-1/4">
-                {item.time_created ? (
+                {item.created_at ? (
                   <>
                     <div className="text-nowrap">
-                      {new Date(item.time_created).toLocaleDateString()}
+                      {new Date(item.created_at).toLocaleDateString()}
                     </div>
                     <div className="text-nowrap">
-                      {new Date(item.time_created).toLocaleTimeString()}
+                      {new Date(item.created_at).toLocaleTimeString()}
                     </div>
                   </>
                 ) : null}

client/src/components/ui/Users/school-data-table-form.tsx

@@ -20,7 +20,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
-import { createSchoolSchema } from "@/types/school";
+import { createSchoolSchema } from "@/types/user";
 
 type School = z.infer<typeof createSchoolSchema>;
 

client/src/components/ui/Users/select-school.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/select";
 import { useFetchData } from "@/hooks/use-fetch-data";
 import { cn } from "@/lib/utils";
-import { School } from "@/types/school";
+import { School } from "@/types/user";
 
 type Props = {
   selectedId: number | undefined;
@@ -47,8 +47,8 @@ export function SelectSchool({ selectedId, onChange, className }: Props) {
     isPending,
     isError,
   } = useFetchData<School[]>({
-    queryKey: ["users.school.list"],
-    endpoint: "/users/school",
+    queryKey: ["users.schools"],
+    endpoint: "/users/schools/",
   });
 
   const onValueChange = (value: string) => {

client/src/components/ui/Users/team-data-grid.tsx

@@ -86,7 +86,7 @@ export function TeamDataGrid({
             >
               <TableCell className="w-1/4">{item.id}</TableCell>
               <TableCell className="w-1/4">{item.name}</TableCell>
-              <TableCell className="w-1/4">{item.school}</TableCell>
+              <TableCell className="w-1/4">{item.school?.name}</TableCell>
               <TableCell className="w-1/4">{item.description}</TableCell>
               <TableCell className="w-1/4">
                 {item.time_created ? (

client/src/pages/api/question/list.ts

@@ -12,51 +12,51 @@
 
 import { NextApiRequest, NextApiResponse } from "next";
 
-import { Question } from "@/types/question";
+import { Category, Question } from "@/types/question";
 
 // Mock data representing question entries
-const mockQuestions: Question[] = [
+const mockQuestions: Partial<Question>[] = [
   {
     id: 1,
     name: "Question01_2024",
-    category: "Geometry Questions",
-    difficulty: "Difficult",
+    category: [{ genre: "Geometry Questions" }] as Category[],
+    diff_level: 1,
   },
   {
     id: 2,
     name: "Question02_2024",
-    category: "Algebra Questions",
-    difficulty: "Difficult",
+    category: [{ genre: "Algebra Questions" }] as Category[],
+    diff_level: 3,
   },
   {
     id: 3,
     name: "Question03_2024",
-    category: "Arithmetic Questions",
-    difficulty: "Easy",
+    category: [{ genre: "Arithmetic Questions" }] as Category[],
+    diff_level: 1,
   },
   {
     id: 4,
     name: "Question04_2024",
-    category: "Statistics Questions",
-    difficulty: "Medium",
+    category: [{ genre: "Statistics Questions" }] as Category[],
+    diff_level: 2,
   },
   {
     id: 5,
     name: "Question05_2024",
-    category: "Calculus Questions",
-    difficulty: "Difficult",
+    category: [{ genre: "Calculus Questions" }] as Category[],
+    diff_level: 3,
   },
   {
     id: 6,
     name: "Question06_2024",
-    category: "Calculus Questions",
-    difficulty: "Difficult",
+    category: [{ genre: "Calculus Questions" }] as Category[],
+    diff_level: 3,
   },
   {
     id: 7,
     name: "Question07_2024",
-    category: "Calculus Questions",
-    difficulty: "Easy",
+    category: [{ genre: "Calculus Questions" }] as Category[],
+    diff_level: 1,
   },
 ];
 
@@ -74,5 +74,5 @@ export default function handler(
   _req: NextApiRequest,
   res: NextApiResponse<Question[]>,
 ): void {
-  res.status(200).json(mockQuestions);
+  res.status(200).json(mockQuestions as Question[]);
 }

client/src/pages/api/test/practices.ts

@@ -12,32 +12,32 @@
 import { NextApiRequest, NextApiResponse } from "next";
 
 // Mock data representing practice entries
-import { Practice } from "@/types/practice";
+import { AdminQuiz } from "@/types/quiz";
 
-const mockPractices: Partial<Practice>[] = [
+const mockPractices: Partial<AdminQuiz>[] = [
   {
     name: "Practice01_2024",
-    status: "Published",
+    status: 0,
   },
   {
     name: "Practice02_2024",
-    status: "Unpublished",
+    status: 1,
   },
   {
     name: "Practice03_2024",
-    status: "Unpublished",
+    status: 2,
   },
   {
     name: "Practice04_2024",
-    status: "Published",
+    status: 3,
   },
   {
     name: "Practice05_2024",
-    status: "Published",
+    status: 1,
   },
   {
     name: "Practice06_2024",
-    status: "Unpublished",
+    status: 3,
   },
 ];
 
@@ -53,7 +53,7 @@ const mockPractices: Partial<Practice>[] = [
  */
 export default function handler(
   _req: NextApiRequest,
-  res: NextApiResponse<Practice[]>,
+  res: NextApiResponse<AdminQuiz[]>,
 ): void {
-  res.status(200).json(mockPractices as Practice[]);
+  res.status(200).json(mockPractices as AdminQuiz[]);
 }

client/src/pages/api/users/school.ts

@@ -12,7 +12,7 @@
 
 import { NextApiRequest, NextApiResponse } from "next";
 
-import { School } from "@/types/school";
+import { School } from "@/types/user";
 
 /**
  * Mock data representing school entries.
@@ -25,17 +25,17 @@ for (let i = 0; i < 11; i++) {
     {
       id: i * 3 + 1,
       name: `School Alpha ${i + 1}`,
-      time_created: new Date(`2025-01-01T12:00:00Z`),
+      created_at: new Date(`2025-01-01T12:00:00Z`),
     },
     {
       id: i * 3 + 2,
       name: `School Beta ${i + 1}`,
-      time_created: new Date(`2025-01-01T13:00:00Z`),
+      created_at: new Date(`2025-01-01T13:00:00Z`),
     },
     {
       id: i * 3 + 3,
       name: `School Gamma ${i + 1}`,
-      time_created: new Date(`2025-01-01T14:00:00Z`),
+      created_at: new Date(`2025-01-01T14:00:00Z`),
     },
   );
 }

client/src/pages/api/users/team.ts

@@ -13,6 +13,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 
 import { Team } from "@/types/team";
+import { School } from "@/types/user";
 
 /**
  * Mock data representing team entries.
@@ -25,21 +26,21 @@ for (let i = 0; i < 9; i++) {
     {
       id: i * 3 + 1,
       name: `Team Alpha ${i + 1}`,
-      school: "Greenfield High",
+      school: { name: "Greenfield High" } as School,
       description: `A description for Team Alpha ${i + 1}.`,
       time_created: new Date(`2025-01-01T12:00:00Z`),
     },
     {
       id: i * 3 + 2,
       name: `Team Beta ${i + 1}`,
-      school: "Westwood Academy",
+      school: { name: "Westwood Academy" } as School,
       description: `A description for Team Beta ${i + 1}.`,
       time_created: new Date(`2025-01-01T13:00:00Z`),
     },
     {
       id: i * 3 + 3,
       name: `Team Gamma ${i + 1}`,
-      school: "Northside School",
+      school: { name: "Northside School" } as School,
       description: `A description for Team Gamma ${i + 1}.`,
       time_created: new Date(`2025-01-01T14:00:00Z`),
     },

client/src/pages/question/index.tsx

@@ -16,7 +16,7 @@ export default function Index() {
     isError: isQuestionError,
     error: QuestionError,
   } = useFetchData<Question[]>({
-    queryKey: ["question.list"],
+    queryKey: ["questions.question-bank"],
     endpoint: "/questions/question-bank/",
   });
 

client/src/pages/test/competition/index.tsx

@@ -6,7 +6,7 @@ import { WaitingLoader } from "@/components/ui/loading";
 import { SearchInput } from "@/components/ui/search";
 import { CompetitionDataGrid } from "@/components/ui/Test/competition-data-grid";
 import { useFetchData } from "@/hooks/use-fetch-data";
-import { Competition } from "@/types/competition";
+import { Competition } from "@/types/quiz";
 
 export default function Index() {
   const {
@@ -15,8 +15,8 @@ export default function Index() {
     isError: isCompetitionError,
     error: competitionError,
   } = useFetchData<Competition[]>({
-    queryKey: ["competition.list"],
-    endpoint: "/test/competitions",
+    queryKey: ["quiz.competition"],
+    endpoint: "/quiz/competition/",
   });
 
   const [page, setPage] = useState<number>(1);