created mock tanstack table for leaderboard

Author: abhitrueprogrammer

package.json

@@ -42,6 +42,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.4.0",
     "shadcn-ui": "^0.9.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",

pnpm-lock.yaml

@@ -3,43 +3,48 @@ import axios from "./axiosConfig";
 import { z } from "zod";
 
 const scoreSchema = z.object({
-   id: z.string(),
-   team_id: z.string(),
-   design: z.number(),
-   implementation: z.number(),
-   presentation: z.number(),
-   innovation: z.number(),
-   teamwork: z.number(),
-   comment: z.string(),
-   round: z.number(),
+  id: z.string(),
+  team_id: z.string(),
+  design: z.number(),
+  implementation: z.number(),
+  presentation: z.number(),
+  innovation: z.number(),
+  teamwork: z.number(),
+  comment: z.string(),
+  round: z.number(),
 });
 
 const scoresResponseSchema = z.object({
   message: z.string(),
-  data: z.object({
-    scores: z.array(scoreSchema)
-  }).optional()
+  data: z
+    .object({
+      scores: z.array(scoreSchema),
+    })
+    .optional(),
 });
 
 const createUpdateResponseSchema = z.object({
   message: z.string(),
-  data: z.object({
-    message: z.string()
-  }).optional()
+  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>;
 
-interface CreateScoreRequest extends Omit<z.infer<typeof scoreSchema>, 'id'> {
+interface CreateScoreRequest extends Omit<z.infer<typeof scoreSchema>, "id"> {
   team_id: string;
 }
 
-interface UpdateScoreRequest extends Partial<Omit<CreateScoreRequest, 'team_id'>> {
+interface UpdateScoreRequest
+  extends Partial<Omit<CreateScoreRequest, "team_id">> {
   scoreId: string;
   team_id?: string;
 }
@@ -59,31 +64,27 @@ export const fetchScores = async (teamId: string): Promise<ScoreResponse[]> => {
     const parsedResponse = scoresResponseSchema.parse(response.data);
     return parsedResponse.data?.scores ?? [];
   } catch (err) {
-    const error=err as AxiosError
+    const error = err as AxiosError;
     if (error.status === 404) {
       return [];
     }
-    throw new Error(error.message || 'Failed to fetch scores');
+    throw new Error(error.message || "Failed to fetch scores");
   }
 };
 
 export const createScore = async (data: CreateScoreRequest) => {
   try {
-    const response = await axios.post(
-      'panel/createscore',
-      data,
-      {
-        withCredentials: true,
-      }
-    );
+    const response = await axios.post("panel/createscore", data, {
+      withCredentials: true,
+    });
     const parsedResponse = createUpdateResponseSchema.parse(response.data);
     return parsedResponse;
   } catch (err) {
-    const error=err as AxiosError
+    const error = err as AxiosError;
     if (error.message) {
       throw new Error(error.message);
     }
-    throw new Error('Failed to create score');
+    throw new Error("Failed to create score");
   }
 };
 
@@ -92,12 +93,12 @@ export const deleteScore = async (scoreId: string) => {
     const response = await axios.delete(`panel/deletescore/${scoreId}`, {
       withCredentials: true,
     });
-    
+
     const parsedResponse = deleteResponseSchema.parse(response.data);
     return parsedResponse;
   } catch (err) {
-    const error=err as AxiosError
-    throw new Error(error.message || 'Failed to delete score');
+    const error = err as AxiosError;
+    throw new Error(error.message || "Failed to delete score");
   }
 };
 
@@ -108,15 +109,15 @@ export const updateScore = async (data: UpdateScoreRequest) => {
       data,
       {
         withCredentials: true,
-      }
+      },
     );
     const parsedResponse = createUpdateResponseSchema.parse(response.data);
     return parsedResponse;
   } catch (err) {
-    const error=err as AxiosError
+    const error = err as AxiosError;
     if (error.message) {
       throw new Error(error.message);
     }
-    throw new Error('Failed to update score');
+    throw new Error("Failed to update score");
   }
-};
+};

src/api/fetchScores.ts

@@ -0,0 +1,65 @@
+import { type UserResponse } from "@/data/schema";
+import { usersResponseSchema } from "@/data/schema";
+import axios from "./axiosConfig";
+import { z } from "zod";
+export const leaderboardSchema = z.object({
+  ID: z.string(),
+  team_id: z.string(),
+  team_name: z.string(),
+  design: z.number(),
+  implementation: z.number(),
+  presentation: z.number(),
+  innovation: z.number(),
+  teamwork: z.number(),
+  comment: z.string(),
+  total_score: z.number(),
+});
+
+export type Leaderboard = z.infer<typeof leaderboardSchema>;
+
+export const leaderBoardResponseSchema = z.object({
+  status: z.string(),
+  message: z.string(),
+  data: z.object({
+    message: z.string().optional(),
+    users: z.array(leaderboardSchema).nullable(),
+  }),
+});
+export type LeaderboardResponse = z.infer<typeof leaderBoardResponseSchema>;
+
+export const fetchLeaderboard = async ({
+  limit,
+  cursorId,
+  name,
+}: {
+  limit: number;
+  cursorId?: string;
+  name?: string;
+}) => {
+  try {
+    const params = new URLSearchParams({ limit: String(limit) });
+
+    if (name) {
+      params.append("name", name);
+    } else if (cursorId) {
+      params.append("cursor", cursorId);
+    }
+
+    const url = `admin/users?${params.toString()}`;
+
+    const response = await axios.get<LeaderboardResponse>(url);
+
+    const parsedResponse = leaderBoardResponseSchema.parse(response.data);
+    const users = parsedResponse.data.users;
+    console.log(users);
+    const nextCursor = users != null ? users[users.length - 1]?.ID : null;
+
+    return {
+      users,
+      nextCursor,
+    };
+  } catch (err) {
+    console.log(err);
+    throw err;
+  }
+};

src/api/leaderboard.ts

@@ -0,0 +1,83 @@
+"use client";
+import {columns} from "@/components/columns/LeaderBoardCol";
+import { DataTable } from "@/components/table/data-table";
+import { fetchLeaderboard, Leaderboard, LeaderboardResponse } from "@/api/leaderboard";
+import loading from "@/assets/images/loading.gif";
+import { Button } from "@/components/ui/button";
+import { type User } from "@/data/schema";
+import { useQuery } from "@tanstack/react-query";
+import Image from "next/image";
+import { useState } from "react";
+import { useDebounce } from "use-debounce";
+
+export default function LeaderBoard() {
+  const [cursorHistory, setCursorHistory] = useState<string[]>([]);
+  const [currentCursor, setCurrentCursor] = useState<string | undefined>(
+    undefined,
+  );
+  const [pageLimit, setPageLimit] = useState<number>(10);
+  const [theName, setTheName] = useState<string>("");
+  // const queryClient = useQueryClient();
+  const [nameDebounce] = useDebounce(theName, 1000);
+  const {
+    data: userList,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["leaderboard", currentCursor, nameDebounce, pageLimit],
+    queryFn: () =>
+      fetchLeaderboard({
+        limit: pageLimit,
+        cursorId: currentCursor,
+        name: nameDebounce,
+      }),
+    placeholderData: (previousData) => previousData,
+    // enabled: !!debouncedSearch,
+  });
+
+  const handleNextPage = () => {
+    if (userList?.nextCursor) {
+      console.log("yes cursor available");
+      setCursorHistory((prev) => [...prev, currentCursor ?? ""]); // Store current cursor
+      setCurrentCursor(userList.nextCursor); // Move to the next page
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (cursorHistory.length > 0) {
+      const prevCursor = cursorHistory[cursorHistory.length - 1]; // Get last cursor
+      setCursorHistory((prev) => prev.slice(0, -1)); // Remove last cursor from history
+      setCurrentCursor(prevCursor ?? undefined); // Move to previous page
+    }
+  };
+
+  return (
+    <div className="p-4">
+      {isError && <div className="text-red-500">Error fetching team data</div>}
+
+      {isLoading && (
+        <div className="flex justify-center">
+          <Image
+            className="w-[50%]"
+            src={loading}
+            width={100}
+            height={100}
+            alt="Loading..."
+          />
+        </div>
+      )}
+
+      <div className="w-full overflow-hidden">
+        <DataTable<Leaderboard, string>
+          setPageLimit={setPageLimit}
+          pageLimit={pageLimit}
+          columns={columns}
+          data={userList?.users ?? []}
+          // data={oosers}
+          handleNextPage={handleNextPage}
+          handlePrevPage={handlePrevPage}
+        />
+      </div>
+    </div>
+  );
+}

src/app/leaderboard/page.tsx

@@ -1,10 +1,8 @@
 "use client";
 import { DataTable } from "@/components/table/data-table";
-import columns from "@/components/columns";
 import teamCol from "@/components/columns/TeamCol";
 // import { useEffect, useMemo, useState } from "react";
 // import { user } from "@/store/interfaces";
-import tooms from "@/components/dumTeams.json";
 // import useToast from "@/lib/toast";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { type Team } from "@/data/schema";

src/app/teams/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { leaderboardSchema } from "@/api/leaderboard";
+import { ColumnDef } from "@tanstack/react-table";
+import { z } from "zod";
+
+export const columns: ColumnDef<z.infer<typeof leaderboardSchema>>[] = [
+  {
+    accessorKey: "team_id",
+    header: "Year",
+  },
+  {
+    accessorKey: "team_name",
+    header: "Team Name",
+  },
+  {
+    accessorKey: "scores",
+    header: "Scores",
+    cell: ({ row }) => <ViewScores row={row} />,
+  },
+];

src/components/columns/LeaderBoardCol.tsx

@@ -44,7 +44,7 @@ export const usersResponseSchema = z.object({
 
 
 
-
+  
 export const teamSchema = z.object({
   ID: z.string().nullable(),
   Name: z.string().nullable(),