Add/Edit/Delete scores

Author: JKSANJAY27

src/api/fetchScores.ts

@@ -9,34 +9,41 @@ const scoreSchema = z.object({
    presentation: z.number(),
    innovation: z.number(),
    teamwork: z.number(),
-    comment: z.string(),
-    round: z.number(),
+   comment: z.string(),
+   round: z.number(),
 });
+
 const scoresResponseSchema = z.object({
-  status: z.string(),
   message: z.string(),
- data: z.object({
-    message: z.string(),
-    scores: z.array(scoreSchema).optional(),
-  }),
+  data: z.object({
+    scores: z.array(scoreSchema)
+  }).optional()
 });
+
 const createUpdateResponseSchema = z.object({
-  status: z.string(),
   message: z.string(),
+  data: z.object({
+    message: z.string()
+  }).optional()
 });
 
 const deleteResponseSchema = z.object({
   status: z.string(),
-    message: z.string()
+  message: z.string()
 });
 
+type ScoreResponse = z.infer<typeof scoreSchema>;
 
-type ScoreResponse = z.infer<typeof scoreSchema>
-interface CreateScoreRequest extends Omit<z.infer<typeof scoreSchema>, 'id'>{
-    team_id: string;
+interface CreateScoreRequest extends Omit<z.infer<typeof scoreSchema>, 'id'> {
+  team_id: string;
 }
 
-export const fetchScores = async (teamId: string) => {
+interface UpdateScoreRequest extends Partial<Omit<CreateScoreRequest, 'team_id'>> {
+  scoreId: string;
+  team_id?: string;
+}
+
+export const fetchScores = async (teamId: string): Promise<ScoreResponse[]> => {
   try {
     const response = await axios.get<{
       status: string;
@@ -48,111 +55,63 @@ export const fetchScores = async (teamId: string) => {
     }>(`panel/getscore/${teamId}`, {
       withCredentials: true,
     });
-      const parsedResponse = scoresResponseSchema.parse(response.data);
-      return parsedResponse.data?.scores ?? [];
-  } catch (err:any) {
-    if (err.response.status === 404) {
-          return [];
-      }
-    throw err;
+    const parsedResponse = scoresResponseSchema.parse(response.data);
+    return parsedResponse.data?.scores ?? [];
+  } catch (err: any) {
+    if (err.response?.status === 404) {
+      return [];
+    }
+    throw new Error(err.response?.data?.message || 'Failed to fetch scores');
   }
 };
-const createResponseSchema = z.object({
-  status: z.string(),
-  message: z.string(),
-});
 
-export const createScore = async ({
-    team_id,
-   design,
-    implementation,
-   presentation,
-    innovation,
-   teamwork,
-   comment,
-   round,
-}: CreateScoreRequest) => {
+export const createScore = async (data: CreateScoreRequest) => {
   try {
-     const response = await axios.post(
-      `panel/createscore`,
+    const response = await axios.post(
+      'panel/createscore',
+      data,
       {
-        design,
-        implementation,
-        presentation,
-        innovation,
-        teamwork,
-        comment,
-        team_id,
-        round,
-      },
-        {
-          withCredentials: true,
-       }
+        withCredentials: true,
+      }
     );
-    const parsedResponse = createResponseSchema.parse(response.data);
+    const parsedResponse = createUpdateResponseSchema.parse(response.data);
     return parsedResponse;
-  } catch (err) {
-    console.error(err);
-    throw err;
+  } catch (error: any) {
+    if (error.response?.data?.message) {
+      throw new Error(error.response.data.message);
+    }
+    throw new Error('Failed to create score');
   }
 };
 
 export const deleteScore = async (scoreId: string) => {
   try {
-    const response = await axios.delete(`panel/deletescore/${scoreId}`,{
-          withCredentials: true,
-        });
-        
-        const parsedResponse = deleteResponseSchema.parse(response.data);
-        return parsedResponse;
-  } catch (err) {
-    console.error(err);
-    throw err;
+    const response = await axios.delete(`panel/deletescore/${scoreId}`, {
+      withCredentials: true,
+    });
+    
+    const parsedResponse = deleteResponseSchema.parse(response.data);
+    return parsedResponse;
+  } catch (err: any) {
+    throw new Error(err.response?.data?.message || 'Failed to delete score');
   }
 };
 
-export const updateScore = async ({
-    scoreId,
-    design,
-    implementation,
-   presentation,
-    innovation,
-   teamwork,
-   comment,
-   round,
-   team_id
-}: {
-    scoreId:string,
-    design:number,
-    implementation:number,
-   presentation:number,
-    innovation:number,
-   teamwork:number,
-   comment:string,
-     round:number,
-     team_id:string
-}) => {
+export const updateScore = async (data: UpdateScoreRequest) => {
   try {
-    const response = await axios.put(`panel/updatescore/${scoreId}`,
-      {
-           design,
-          implementation,
-            presentation,
-            innovation,
-          teamwork,
-          comment,
-            round,
-            team_id
-       },
+    const response = await axios.put(
+      `panel/updatescore/${data.scoreId}`,
+      data,
       {
         withCredentials: true,
       }
     );
-
     const parsedResponse = createUpdateResponseSchema.parse(response.data);
-        return parsedResponse;
-  } catch (err) {
-    console.error(err);
-    throw err;
+    return parsedResponse;
+  } catch (error: any) {
+    if (error.response?.data?.message) {
+      throw new Error(error.response.data.message);
+    }
+    throw new Error('Failed to update score');
   }
 };

src/app/team/[id]/page.tsx

@@ -7,7 +7,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import useToast from "@/lib/toast";
 import {  useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { createScore, deleteScore, fetchScores, updateScore } from "@/api/fetchScores";
@@ -43,10 +43,11 @@ function ScoreSection({ teamId }: { teamId: string }) {
   const queryClient = useQueryClient();
   const { create } = useToast();
 
-  const { data: scores = [], isLoading: scoresLoading, isError: scoresError } = useQuery({
+  const { data: scores = [], isLoading: scoresLoading, isError: scoresError, refetch } = useQuery({
     queryKey: ["scores", teamId],
     queryFn: () => fetchScores(teamId ?? ""),
     enabled: !!teamId,
+    staleTime: 0,
   });
 
   const createScoreMutation = useMutation({
@@ -60,12 +61,15 @@ function ScoreSection({ teamId }: { teamId: string }) {
       comment: string;
       round: number;
     }) => createScore({ team_id: teamId, design, implementation, presentation, innovation, teamwork, comment, round }),
-    onError: (err: ApiError) => {
-      create(`Error creating score: ${err?.message ?? "unknown error"}`, "error");
+    onError: (err: any) => {
+      const errorMessage = err.response?.data?.message || err.message || "Unknown error occurred";
+      create(errorMessage, "error");
     },
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["scores", teamId] });
+    onSuccess: async() => {
+      create("Score created successfully!", "success");
+      await refetch();
       resetForm();
+      setEditMode(false);
     },
   });
 
@@ -111,16 +115,31 @@ function ScoreSection({ teamId }: { teamId: string }) {
       round,
       team_id: teamId || ''
     }),
-    onError: (err: ApiError) => {
-      create(`Error updating score: ${err?.message ?? "unknown error"}`, "error");
+    onError: (err: any) => {
+      const errorMessage = err.response?.data?.message || err.message || "Unknown error occurred";
+      create(errorMessage, "error");
     },
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["scores", teamId] });
-      setEditMode(false);
+    onSuccess: async() => {
+      create("Score updated successfully!", "success");
+      await refetch();
       resetForm();
+      setEditMode(false);
     },
   });
 
+  useEffect(() => {
+    if (createScoreMutation.isSuccess || updateScoreMutation.isSuccess) {
+      resetForm();
+      setEditMode(false);
+    }
+  }, [createScoreMutation.isSuccess, updateScoreMutation.isSuccess]);
+  
+  useEffect(() => {
+    if (teamId) {
+      refetch();
+    }
+  }, [teamId, refetch]);
+
   const resetForm = () => {
     setDesign(0);
     setImplementation(0);
@@ -191,7 +210,7 @@ function ScoreSection({ teamId }: { teamId: string }) {
   if (scoresLoading) return <div>Loading scores...</div>;
   if (scoresError) return <div>Error loading scores</div>;
 
-  const showForm = !scores || scores.length === 0 || editMode;
+  const showForm = scores.length===0 || editMode
 
   return (
     <div className="mt-8">