average ratings (#617)

Author: RWEMAREMY

src/components/InvitationTable.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo } from "react";
+import React, { useMemo } from 'react';
 import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
   useReactTable,
-} from "@tanstack/react-table";
-import Pagination from "../components/InvitationDataPagination";
+} from '@tanstack/react-table';
+import Pagination from '../components/InvitationDataPagination';
 import SkeletonTable from '../Skeletons/SkeletonTable';
 
 interface Column {
@@ -19,7 +19,10 @@ interface TableProps {
   data: any[];
   loading: boolean;
   rowCount: number;
-  onPaginationChange: (pagination: { pageIndex: number; pageSize: number }) => void;
+  onPaginationChange: (pagination: {
+    pageIndex: number;
+    pageSize: number;
+  }) => void;
   pagination: { pageSize: number; pageIndex: number };
 }
 
@@ -42,22 +45,29 @@ function InvitationTable({
       cols.map((column) => {
         if (typeof column.accessor === 'string') {
           return columnHelper.accessor(column.accessor, {
-            header: typeof column.header === 'string' ? column.header : column.header(),
+            header:
+              typeof column.header === 'string'
+                ? column.header
+                : column.header(),
             cell: column.cell,
           });
-        } else if (typeof column.accessor === 'function') {
+        }
+        if (typeof column.accessor === 'function') {
           return columnHelper.accessor((row) => column.accessor(row), {
-            header: typeof column.header === 'string' ? column.header : column.header(),
-            cell: column.cell,
-          });
-        } else {
-          return columnHelper.display({
-            header: typeof column.header === 'string' ? column.header : column.header(),
+            header:
+              typeof column.header === 'string'
+                ? column.header
+                : column.header(),
             cell: column.cell,
           });
         }
+        return columnHelper.display({
+          header:
+            typeof column.header === 'string' ? column.header : column.header(),
+          cell: column.cell,
+        });
       }),
-    [cols]
+    [cols],
   );
 
   const tableLib = useReactTable({
@@ -83,11 +93,11 @@ function InvitationTable({
               {tableLib.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
                   {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      className="thead"
-                    >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    <th key={header.id} className="thead">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                     </th>
                   ))}
                 </tr>
@@ -116,18 +126,21 @@ function InvitationTable({
                   }`}
                 >
                   {row.getVisibleCells().map((cell) => (
-                    <td
-                      key={cell.id}
-                      className="data-cell "
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    <td key={cell.id} className="data-cell ">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
                     </td>
                   ))}
                 </tr>
               ))}
               {!loading && data.length === 0 && (
                 <tr>
-                  <td colSpan={tableColumns.length || 100} className="text-center p-4">
+                  <td
+                    colSpan={tableColumns.length || 100}
+                    className="text-center p-4"
+                  >
                     <div className="flex flex-col items-center justify-center space-y-4">
                       <p className="text-gray-600 dark:text-gray-400 text-lg font-medium">
                         No records available

src/components/NotFoundPage.tsx

@@ -1,19 +1,21 @@
-
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const NotFound=() => {
+function NotFound() {
   return (
     <div className="flex items-center justify-center h-screen bg-gray-100">
       <div className="text-center">
         <h1 className="text-4xl font-bold text-red-600">404</h1>
         <p className="text-lg text-gray-700 mt-4">Page not found</p>
-        <Link to="/" className="mt-6 inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+        <Link
+          to="/"
+          className="mt-6 inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
           Go Back Home
         </Link>
       </div>
     </div>
   );
-};
+}
 
 export default NotFound;

src/containers/admin-dashBoard/TeamTraineeModal.tsx

@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import { Team } from './Teams';
 import ModalDataTable from '../../components/ModalDataTable';
 import { GET_TEAM_TRAINEE_QUERY } from '../../queries/manageStudent.queries';
+import { TRAINEE_RATING } from '../../queries/ratings.queries';
 import ButtonLoading from '../../components/ButtonLoading';
 
 const organizationToken = localStorage.getItem('orgToken');
@@ -23,6 +24,7 @@ export default function TeamTraineeModal({
   const { t } = useTranslation();
 
   const [traineeData, setTraineeData] = useState<any[]>([]);
+
   const columns = [
     { Header: t('name'), accessor: 'name' },
     { Header: t('email'), accessor: 'email' },
@@ -41,13 +43,20 @@ export default function TeamTraineeModal({
       },
     },
   );
-
   if (traineeData && traineeData.length > 0) {
     traineeData?.map((data: any, index: number): any => {
       datum[index] = {};
       datum[index].name = data.profile.name;
       datum[index].email = data.email;
-      datum[index].rating = '2';
+      datum[index].rating =
+        data.ratings.length > 0
+          ? (
+              data.ratings.reduce(
+                (acc: number, rating: any) => acc + parseFloat(rating.average),
+                0,
+              ) / data.ratings.length
+            ).toFixed(2)
+          : '0';
       datum[index].cohort = data.team?.cohort.name;
       datum[index].program = data.team?.cohort.program.name;
       return datum;

src/queries/manageStudent.queries.tsx

@@ -15,7 +15,7 @@ export const GET_ALL_USERS_QUERY = gql`
       id
       email
       role
-      profile{
+      profile {
         firstName
         lastName
       }
@@ -214,6 +214,9 @@ export const GET_TEAM_TRAINEE_QUERY = gql`
         reason
         status
       }
+      ratings {
+        average
+      }
       profile {
         firstName
         lastName