Merge pull request #17 from AkshataKatwal16/admin

Issue : feat:#PS-1291 integrate mycohort ap and fetch centers

src/pages/faciliator.tsx

@@ -1,16 +1,17 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import KaTableComponent from "../components/KaTableComponent";
 import { DataType } from "ka-table/enums";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { userList } from "../services/userList";
-import { useState, useEffect } from "react";
+import { userList} from "../services/userList";
+import {  getCohortList } from "../services/getCohortList";
 import UserComponent from "@/components/UserComponent";
 import { useTranslation } from "next-i18next";
 
 import Pagination from "@mui/material/Pagination";
 
 import { SelectChangeEvent } from "@mui/material/Select";
 import PageSizeSelector from "@/components/PageSelector";
+
 type UserDetails = {
   userId: any;
   username: any;
@@ -20,6 +21,15 @@ type UserDetails = {
   centers?: any;
   Programs?: any;
 };
+
+interface Cohort {
+  cohortId: string;
+  name: string;
+  parentId: string | null;
+  type: string;
+  customField: any[];
+}
+
 const columns = [
   // {
   //   key: "userId",
@@ -47,52 +57,42 @@ const columns = [
     dataType: DataType.String,
   },
 ];
-const Faciliators: React.FC = () => {
+
+const Facilitators: React.FC = () => {
   const [selectedState, setSelectedState] = useState("All states");
   const [selectedDistrict, setSelectedDistrict] = useState("All Districts");
   const [selectedBlock, setSelectedBlock] = useState("All Blocks");
   const [selectedSort, setSelectedSort] = useState("Sort");
   const [pageOffset, setPageOffset] = useState(0);
   const [pageLimit, setPageLimit] = useState(10);
-
   const [data, setData] = useState<UserDetails[]>([]);
+  const [cohortsFetched, setCohortsFetched] = useState(false);
   const { t } = useTranslation();
   const [pageSize, setPageSize] = React.useState<string | number>("");
-  const [open, setOpen] = React.useState(false);
+  const [sortBy, setSortBy] = useState(["createdAt", "asc"]);
+  const [pageCount, setPageCount] = useState(1);
 
   const handleChange = (event: SelectChangeEvent<typeof pageSize>) => {
     setPageSize(event.target.value);
     setPageLimit(Number(event.target.value));
   };
 
-  const handleClose = () => {
-    setOpen(false);
+
+  const handlePaginationChange = (event: React.ChangeEvent<unknown>, value: number) => {
+    setPageOffset(value - 1);
   };
 
-  const handleOpen = () => {
-    setOpen(true);
-  };
   const PagesSelector = () => (
-    <>
-      <Pagination
-        color="primary"
-        count={100}
-        page={pageOffset + 1}
-        onChange={handlePaginationChange}
-      />
-    </>
+    <Pagination
+      color="primary"
+      count={pageCount}
+      page={pageOffset + 1}
+      onChange={handlePaginationChange}
+    />
   );
-  const handlePaginationChange = (
-    event: React.ChangeEvent<unknown>,
-    value: number
-  ) => {
-    setPageOffset(value - 1);
-  };
 
-  const PageSizeSelectorFunction = ({}) => (
-    <>
-      <PageSizeSelector handleChange={handleChange} pageSize={pageSize} />
-    </>
+  const PageSizeSelectorFunction = () => (
+    <PageSizeSelector handleChange={handleChange} pageSize={pageSize} />
   );
 
   const handleStateChange = (event: SelectChangeEvent) => {
@@ -106,47 +106,61 @@ const Faciliators: React.FC = () => {
   const handleBlockChange = (event: SelectChangeEvent) => {
     setSelectedBlock(event.target.value as string);
   };
+
   const handleSortChange = async (event: SelectChangeEvent) => {
     //console.log(event.target.value)
-    try {
-      const limit = pageLimit;
-      const offset = pageOffset;
-      let sort;
+
+     // let sort;
       if (event.target.value === "Z-A") {
-        sort = ["name", "desc"];
+         setSortBy(["name", "desc"]);
       } else if (event.target.value === "A-Z") {
-        sort = ["name", "asc"];
+        setSortBy(["name", "asc"]);
       } else {
-        sort = ["createdAt", "asc"];
+        setSortBy(["createdAt", "asc"]);
       }
-      const filters = { role: "Teacher" };
-      const resp = await userList({ limit, filters, sort, offset });
-      const result = resp?.getUserDetails;
-
-      setData(result[0]);
-    } catch (error) {
-      console.error("Error fetching user list:", error);
-    }
+
     setSelectedSort(event.target.value as string);
   };
   useEffect(() => {
     const fetchUserList = async () => {
       try {
         const limit = pageLimit;
-        // const page = 0;
-        const offset = pageOffset;
-        // const sort = ["createdAt", "asc"];
+        const offset = pageOffset*limit;
         const filters = { role: "Teacher" };
-        const resp = await userList({ limit, filters, offset });
+        const sort=sortBy
+        const resp = await userList({ limit, filters, sort, offset });
         const result = resp?.getUserDetails;
+       // console.log(resp?.totalCount)
+        setPageCount(Math.ceil(resp?.totalCount/pageLimit));
 
-        setData(result[0]);
+        setData(result);
+        setCohortsFetched(false);
       } catch (error) {
         console.error("Error fetching user list:", error);
       }
     };
     fetchUserList();
-  }, [pageOffset, pageLimit]);
+  }, [pageOffset, pageLimit, sortBy]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (data.length === 0 || cohortsFetched) return;
+      const newData = await Promise.all(data.map(async (user) => {
+        const response = await getCohortList(user.userId);
+        const cohortNames = response?.result?.cohortData?.map((cohort: Cohort) => cohort.name);
+
+        return {
+          ...user,
+          centers: cohortNames,
+        };
+      }));
+
+      setData(newData);
+      setCohortsFetched(true);
+    };
+
+    fetchData();
+  }, [data, cohortsFetched]);
 
   const userProps = {
     userType: t("SIDEBAR.FACILITATORS"),
@@ -160,6 +174,7 @@ const Faciliators: React.FC = () => {
     handleBlockChange: handleBlockChange,
     handleSortChange: handleSortChange,
   };
+
   return (
     <UserComponent {...userProps}>
       <div>
@@ -184,4 +199,4 @@ export async function getStaticProps({ locale }: any) {
   };
 }
 
-export default Faciliators;
+export default Facilitators;