Fix IQA admin table view a bit

iqasport · Sep 23, 2023 · e6721f4 · e6721f4
1 parent 438dd39
commit e6721f4
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 53 deletions.
diff --git a/src/frontend/app/components/tables/NgbTable/NgbTable.tsx b/src/frontend/app/components/tables/NgbTable/NgbTable.tsx
@@ -1,94 +1,80 @@
 import { capitalize } from "lodash";
 import React, { useEffect, useState } from "react";
-import { shallowEqual, useDispatch, useSelector } from "react-redux";
-
-import { AnnotatedNgb } from "../../../apis/nationalGoverningBody";
-import { getNationalGoverningBodies } from "../../../modules/nationalGoverningBody/nationalGoverningBodies";
-import { RootState } from "../../../rootReducer";
 
 import NgbEditModal from "../../modals/NgbEditModal";
 import Table, { CellConfig } from "../Table/Table";
 import ActionDropdown from "./ActionDropdown";
-import { AppDispatch } from "../../../store";
 import { useNavigate } from "../../../utils/navigationUtils";
+import { NgbViewModel, useGetNgbsQuery } from "../../../store/serviceApi";
 
 const HEADER_CELLS = [
   "name",
   "region",
   "membership status",
   "player count",
-  "team count",
-  "referee count",
+  // "team count",
+  // "referee count",
   "actions",
 ];
 
 const NgbTable = () => {
   const [activeEdit, setActiveEdit] = useState<string>(null);
-  const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
-  const { isLoading, nationalGoverningBodies } = useSelector(
-    (state: RootState) => state.nationalGoverningBodies,
-    shallowEqual
-  );
 
-  useEffect(() => {
-    if (!nationalGoverningBodies.length) {
-      //dispatch(getNationalGoverningBodies()); TODO skipping for now
-    }
-  }, [nationalGoverningBodies]);
+  var { data: nationalGoverningBodies, isLoading } = useGetNgbsQuery({skipPaging: true})
 
   const handleRowClick = (id: string) => navigate(`/national_governing_bodies/${id}`);
   const handleEditClick = (id: string) => setActiveEdit(id);
   const handleEditClose = () => setActiveEdit(null);
 
   const renderEmpty = () => <h2>No National Governing Bodies found</h2>;
 
-  const rowConfig: CellConfig<AnnotatedNgb>[] = [
+  const rowConfig: CellConfig<NgbViewModel>[] = [
     {
-      cellRenderer: (item: AnnotatedNgb) => {
-        return item?.attributes.name;
+      cellRenderer: (item: NgbViewModel) => {
+        return item.name;
       },
       dataKey: "name",
     },
     {
-      cellRenderer: (item: AnnotatedNgb) => {
-        return item?.attributes?.region
+      cellRenderer: (item: NgbViewModel) => {
+        return item.region
           ?.split("_")
           .map((word) => capitalize(word))
           .join(" ");
       },
       dataKey: "region",
     },
     {
-      cellRenderer: (item: AnnotatedNgb) => {
-        return item?.attributes?.membershipStatus
+      cellRenderer: (item: NgbViewModel) => {
+        return item.membershipStatus
           ?.split("_")
           .map((word) => capitalize(word))
           .join(" ");
       },
       dataKey: "membershipStatus",
     },
     {
-      cellRenderer: (item: AnnotatedNgb) => {
-        return item?.attributes.playerCount.toString();
+      cellRenderer: (item: NgbViewModel) => {
+        return item.playerCount.toString();
       },
       dataKey: "playerCount",
     },
+    // {
+    //   cellRenderer: (item: NgbViewModel) => {
+    //     return item.teamCount.toString();
+    //   },
+    //   dataKey: "teamCount",
+    // },
+    // {
+    //   cellRenderer: (item: NgbViewModel) => {
+    //     return item?.refereeCount.toString();
+    //   },
+    //   dataKey: "refereeCount",
+    // },
     {
-      cellRenderer: (item: AnnotatedNgb) => {
-        return item?.teamCount.toString();
-      },
-      dataKey: "teamCount",
-    },
-    {
-      cellRenderer: (item: AnnotatedNgb) => {
-        return item?.refereeCount.toString();
-      },
-      dataKey: "refereeCount",
-    },
-    {
-      cellRenderer: (item: AnnotatedNgb) => {
-        return <ActionDropdown ngbId={item.id} onEditClick={handleEditClick} />;
+      cellRenderer: (item: NgbViewModel) => {
+        return <ActionDropdown ngbId={item.countryCode} onEditClick={handleEditClick} />;
       },
       customStyle: "text-right",
       dataKey: "actions",
@@ -98,14 +84,14 @@ const NgbTable = () => {
   return (
     <>
       <Table
-        items={nationalGoverningBodies}
+        items={nationalGoverningBodies?.items}
         rowConfig={rowConfig}
         headerCells={HEADER_CELLS}
         isHeightRestricted={false}
         isLoading={isLoading}
         emptyRenderer={renderEmpty}
         onRowClick={handleRowClick}
-        getId={ngb => ngb.id}
+        getId={ngb => ngb.countryCode}
       />
       {activeEdit ? (
         <NgbEditModal

diff --git a/src/frontend/app/components/tables/RefereeTable/RefereeTable.tsx b/src/frontend/app/components/tables/RefereeTable/RefereeTable.tsx
@@ -4,7 +4,7 @@ import { getVersion } from "../../../utils/certUtils";
 import FilterToolbar from "../../FilterToolbar";
 import Table, { CellConfig } from "../Table/Table";
 import { useNavigate } from "../../../utils/navigationUtils";
-import { RefereeViewModel, useGetNgbRefereesQuery } from "../../../store/serviceApi";
+import { RefereeViewModel, useGetNgbRefereesQuery, useGetRefereesQuery } from "../../../store/serviceApi";
 
 const HEADER_CELLS = ["name", "highest certification", "associated teams", "secondary NGB"];
 const ADMIN_HEADER_CELLS = ["name", "highest certification", "associated teams", "associated NGBs"];
@@ -44,7 +44,6 @@ const findHighestCert = (referee: RefereeViewModel): string => {
 type NewRefereeTableProps = {
   ngbId?: string;
   isHeightRestricted?: boolean;
-  refereeCount: number;
 };
 
 const NewRefereeTable = (props: NewRefereeTableProps) => {
@@ -53,7 +52,10 @@ const NewRefereeTable = (props: NewRefereeTableProps) => {
   const [filter, setFilter] = useState<string | undefined>(undefined);
   const [page, setPage] = useState(1);
 
-  const { data: referees, isLoading } = useGetNgbRefereesQuery({ngb: ngbId, filter, page, pageSize: 25})
+  const { data: referees, isLoading } =
+    ngbId === undefined
+      ? useGetRefereesQuery({filter, page, pageSize: 25})
+      : useGetNgbRefereesQuery({ngb: ngbId, filter, page, pageSize: 25})
 
   const headerCells = ngbId ? HEADER_CELLS : ADMIN_HEADER_CELLS;
 

diff --git a/src/frontend/app/components/tables/TeamTable/TeamTable.tsx b/src/frontend/app/components/tables/TeamTable/TeamTable.tsx
@@ -16,7 +16,6 @@ enum ModalType {
 
 interface TeamTableProps {
   ngbId: string;
-  teamCount: number;
 }
 
 const TeamTable = (props: TeamTableProps) => {

diff --git a/src/frontend/app/pages/Admin/Admin.tsx b/src/frontend/app/pages/Admin/Admin.tsx
@@ -52,7 +52,7 @@ const Admin = () => {
       case SelectedTab.Ngbs:
         return <NgbTable />;
       case SelectedTab.Referees:
-        return <NewRefereeTable refereeCount={30 /*TODO*/} isHeightRestricted={false} />;
+        return <NewRefereeTable isHeightRestricted={false} />;
       case SelectedTab.Tests:
         return <TestsTable />;
     }

diff --git a/src/frontend/app/pages/NgbProfile/NgbProfile.tsx b/src/frontend/app/pages/NgbProfile/NgbProfile.tsx
@@ -82,7 +82,7 @@ const NgbProfile = () => {
           />
           <div className="flex flex-col w-full md:w-4/5 md:pl-8">
             <StatsViewer stats={[ngb.currentStats, ...ngb.historicalStats]} />
-            <NgbTables ngbId={ngbId} refereeCount={ngb.currentStats.totalRefereesCount} teamCount={ngb.currentStats.totalTeamsCount} />
+            <NgbTables ngbId={ngbId} />
           </div>
         </div>
       </>

diff --git a/src/frontend/app/pages/NgbProfile/NgbTables.tsx b/src/frontend/app/pages/NgbProfile/NgbTables.tsx
@@ -11,8 +11,6 @@ enum SelectedTable {
 
 interface NgbTablesProps {
   ngbId: string;
-  refereeCount: number;
-  teamCount: number;
 }
 
 const NgbTables = (props: NgbTablesProps) => {
@@ -46,8 +44,8 @@ const NgbTables = (props: NgbTablesProps) => {
           Teams
         </button>
       </div>
-      {isRefereesActive && <NewRefereeTable ngbId={ngbId} refereeCount={props.refereeCount} isHeightRestricted={true} />}
-      {isTeamsActive && <TeamTable ngbId={ngbId} teamCount={props.teamCount} />}
+      {isRefereesActive && <NewRefereeTable ngbId={ngbId} isHeightRestricted={true} />}
+      {isTeamsActive && <TeamTable ngbId={ngbId} />}
     </div>
   );
 };