things

Author: kashyap-harshit

package.json

@@ -41,6 +41,7 @@
     "shadcn-ui": "^0.9.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "use-debounce": "^10.0.4",
     "zod": "^3.23.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,20 +1,18 @@
 import { TeamsFromSearch, type Team, type TeamResponse } from "@/data/schema";
-import { TeamResponseSchema } from "@/data/schema";
+import { type MainSearch, MainTeamSearchResponse} from "@/data/schema";
+
 import axios from "./axiosConfig";
 
+
 export const fetchTeamDetails = async ({ uuid }: { uuid: string}) => {
   try {
-    const response1 = await axios.get<TeamResponse>(
+    const response = await axios.get<MainSearch>(
       `admin/teams/${uuid}`
     );
-    // const response2 = await axios.get(`/admin/teams/leader/${uuid}`)
-    const response3 = await axios.get<TeamsFromSearch>(`/admin/members/${uuid}`)
-    console.log(response1.data.data.team )
-    console.log(response3.data.data.team )
-    return{
-        team: response1.data.data.team,
-        members: response3.data.data.team
-    }
+
+    const parsedResponse = MainTeamSearchResponse.parse(response.data)
+    console.log(parsedResponse)
+    return parsedResponse.data
   } catch (err) {
     console.log(err);
     throw err;

src/api/fetchTeamDetails.ts

@@ -5,15 +5,24 @@ import axios from "./axiosConfig";
 export const fetchTeams = async ({
   limit,
   cursorId, 
+  name
 }: {
   limit: number;
   cursorId?: string; 
+  name?:string;
 }) => {
   try {
 
-    const url = cursorId
-      ? `admin/teams?limit=${limit}&cursor=${cursorId}`
-      : `admin/teams?limit=${limit}`;
+    const params = new URLSearchParams({ limit: String(limit) });
+
+    if (name) {
+      params.append("name", name);
+    } else if (cursorId) {
+      params.append("cursor", cursorId);
+    }
+
+    const url = `admin/teams?${params.toString()}`;
+
 
     const response = await axios.get<TeamsResponse>(url);
 

src/api/fetchTeams.ts

@@ -92,7 +92,7 @@ export default function RootLayout({
 
   function Sidebar() {
     const navigation = [
-      { name: "Dashboard", href: "/dashboard", icon: HomeIcon },
+      // { name: "Dashboard", href: "/dashboard", icon: HomeIcon },
       { name: "Users", href: "/users", icon: UsersIcon },
       { name: "Teams", href: "/teams", icon: GroupIcon },
       {name: "Search Team", href: "/team_search", icon: Search}

src/app/layout.tsx

@@ -11,7 +11,7 @@ export default function HomePage() {
   useEffect(()=>{
     router.push("/users")
 
-  }, [])
+  })
   return (
     <>
       <main className=" flex min-h-screen flex-col items-center justify-center p-8">

src/app/page.tsx

@@ -64,13 +64,13 @@ export default function TeamSearch() {
   //   data: teamList,
   //   isLoading,
   //   isError,
-  // } = useQuery<TeamResponse>({
+  // } = useQuery({
   //   queryKey: ["theTeams", uuid],
   //   queryFn: () => fetchTeamDetails({ uuid }),
-  //   enabled: !!uuid, // Ensures API call only happens when UUID is entered
+  //   enabled: !!uuid,
   // });
 
-  return (
+  return (<></>
     // <div className={`${!teamList? "h-[70vh]": "h-auto"} w-[100%] mx-auto p-4 border rounded-md shadow-lg bg-black text-white`}>
     //   Input field for UUID
     //   <div className="flex flex-col items-center mb-4">
@@ -115,6 +115,6 @@ export default function TeamSearch() {
     //     </div>
     //   )}
     // </div>
-    <></>
+
   );
 }

src/app/team_search/page.tsx

@@ -11,28 +11,40 @@ import { type Team } from "@/data/schema";
 import { fetchTeams } from "@/api/fetchTeams";
 import { useState } from "react";
 import { TeamModal } from "@/components/table/team-modal";
+import { useDebounce } from "use-debounce";
 
 export default function Teams() {
   const [cursorHistory, setCursorHistory] = useState<string[]>([]);
-  const [currentCursor, setCurrentCursor] = useState<string | undefined>(undefined);  
+  const [currentCursor, setCurrentCursor] = useState<string | undefined>(
+    undefined,
+  );
+  const [pageLimit, setPageLimit] = useState<number>(10);
+  const [theName, setTheName] = useState<string>("");
+  // const queryClient = useQueryClient();
   const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const [nameDebounce] = useDebounce(theName, 1000);
   const [open, setOpen] = useState(false);
 
   const queryClient = useQueryClient();
 
   const {
-      data: teamList,
-      isLoading,
-      isError,
+    data: teamList,
+    isLoading,
+    isError,
   } = useQuery({
-    queryKey: ["users", currentCursor],
-      queryFn: () => fetchTeams({limit: 1, cursorId: currentCursor}),
-      // placeholderData: (previousData) => previousData,
+    queryKey: ["teams", currentCursor, nameDebounce],
+    queryFn: () =>
+      fetchTeams({
+        limit: pageLimit,
+        cursorId: currentCursor,
+        name: nameDebounce,
+      }),
+    // placeholderData: (previousData) => previousData,
   });
 
   const handleNextPage = () => {
     if (teamList?.nextCursor) {
-      console.log("yes cursor available")
+      console.log("yes cursor available");
       setCursorHistory((prev) => [...prev, currentCursor ?? ""]); // Store current cursor
       setCurrentCursor(teamList.nextCursor); // Move to the next page
     }
@@ -51,33 +63,43 @@ export default function Teams() {
   //   queryClient.invalidateQueries({queryKey: ["teams"]});
   // }
 
-  if (isLoading) {
-    <>loading...</>;
-  }
-  if (isError) {
-    <>skill issue</>;
-  }
   const handleRowClick = (team: Team) => {
     setSelectedTeam(team);
     setOpen(true);
   };
 
-
   const handleModalClose = () => {
     setOpen(false);
   };
   return (
     <>
       <div className="p-4">
         <div className="mb-4"></div>
+        <div className="mb-4 flex flex-col items-center">
+          <input
+            className="bg-gray w-[50%] rounded-md border p-2 text-white"
+            placeholder="Enter Name..."
+            value={theName}
+            onChange={(e) => setTheName(e.target.value)}
+            type="text"
+          />
+        </div>
         {/* <DataTableUsers users={oosers} columns={userCol} /> */}
-        {selectedTeam && <TeamModal open = {open} onClose = {handleModalClose} team = {selectedTeam}/>}
+        {selectedTeam && (
+          <TeamModal
+            open={open}
+            onClose={handleModalClose}
+            team={selectedTeam}
+          />
+        )}
         <DataTable<Team, string>
-            columns={teamCol}
-            data={teamList?.teams ?? []}
-            handleNextPage={handleNextPage}
-            handlePrevPage={handlePrevPage}
-            onRowClick={handleRowClick}
+          setPageLimit={setPageLimit}
+          pageLimit={pageLimit}
+          columns={teamCol}
+          data={teamList?.teams ?? []}
+          handleNextPage={handleNextPage}
+          handlePrevPage={handlePrevPage}
+          onRowClick={handleRowClick}
         />
       </div>
     </>