From 0f195196e0d0b7b512a0a41be6422fd01949aa5f Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 9 Oct 2024 13:18:31 +0530
Subject: [PATCH] removed badges and added hub facilities list in facility
 details

---
 src/Components/Facility/FacilityBlock.tsx |  2 +-
 src/Components/Facility/FacilityCard.tsx  | 63 +----------------------
 src/Components/Facility/FacilityHome.tsx  | 27 ++++++++--
 src/Components/Facility/models.tsx        |  2 -
 src/Redux/api.tsx                         |  6 +++
 5 files changed, 30 insertions(+), 70 deletions(-)

diff --git a/src/Components/Facility/FacilityBlock.tsx b/src/Components/Facility/FacilityBlock.tsx
index c6cc092a320..4da6eb3d3e4 100644
--- a/src/Components/Facility/FacilityBlock.tsx
+++ b/src/Components/Facility/FacilityBlock.tsx
@@ -7,7 +7,7 @@ export default function FacilityBlock(props: {
   facility: FacilityModel;
   redirect?: boolean;
 }) {
-  const { facility, redirect } = props;
+  const { facility, redirect = true } = props;
 
   const Element = (props: { children: ReactNode; className?: string }) =>
     redirect ? (
diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index 93a76d3d5e5..c4e0437c313 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -1,10 +1,7 @@
 import { useState } from "react";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
-import {
-  FACILITY_FEATURE_TYPES,
-  SPOKE_RELATION_TYPES,
-} from "../../Common/constants";
+import { FACILITY_FEATURE_TYPES } from "../../Common/constants";
 import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
 import * as Notification from "../../Utils/Notifications.js";
 import Chip from "../../CAREUI/display/Chip";
@@ -135,64 +132,6 @@ export const FacilityCard = (props: {
                         hideBorder
                         size="small"
                       />
-                      {SPOKE_RELATION_TYPES.map((srt) => ({
-                        ...srt,
-                        spokes: facility.hubs?.filter(
-                          (hub) => hub.relationship === srt.value,
-                        ),
-                      }))
-                        .filter((srt) => srt.spokes?.length)
-                        .map((srt) => (
-                          <div className="tooltip">
-                            <Chip
-                              hideBorder
-                              text={
-                                (srt.text !== "Regular" ? srt.text + " " : "") +
-                                "Spoke"
-                              }
-                              size="small"
-                              className="bg-sky-100 text-sky-900"
-                            />
-                            <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs font-normal">
-                              Linked with{" "}
-                              {srt.spokes
-                                ?.map(
-                                  (relationship) =>
-                                    relationship.hub_object.name,
-                                )
-                                .join(", ")}
-                            </span>
-                          </div>
-                        ))}
-                      {SPOKE_RELATION_TYPES.map((srt) => ({
-                        ...srt,
-                        spokes: facility.spokes?.filter(
-                          (hub) => hub.relationship === srt.value,
-                        ),
-                      }))
-                        .filter((srt) => srt.spokes?.length)
-                        .map((srt) => (
-                          <div className="tooltip">
-                            <Chip
-                              hideBorder
-                              text={
-                                (srt.text !== "Regular" ? srt.text + " " : "") +
-                                "Hub"
-                              }
-                              size="small"
-                              className="bg-purple-100 text-indigo-900"
-                            />
-                            <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs font-normal">
-                              Linked with{" "}
-                              {srt.spokes
-                                ?.map(
-                                  (relationship) =>
-                                    relationship.spoke_object.name,
-                                )
-                                .join(", ")}
-                            </span>
-                          </div>
-                        ))}
                       {facility.features?.map(
                         (feature: number) =>
                           FACILITY_FEATURE_TYPES.some(
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index b569db602e0..a8262dc2f6d 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -74,6 +74,20 @@ export const FacilityHome = ({ facilityId }: Props) => {
     },
   });
 
+  const spokesQuery = useQuery(routes.getFacilitySpokes, {
+    pathParams: {
+      id: facilityId,
+    },
+    silent: true,
+  });
+
+  const hubsQuery = useQuery(routes.getFacilityHubs, {
+    pathParams: {
+      id: facilityId,
+    },
+    silent: true,
+  });
+
   const handleDeleteClose = () => {
     setOpenDeleteDialog(false);
   };
@@ -276,14 +290,14 @@ export const FacilityHome = ({ facilityId }: Props) => {
                           />
                         </div>
                       </div>
-                      {!!facilityData?.spokes?.length && (
+                      {!!spokesQuery.data?.results?.length && (
                         <div className="mt-4 flex items-center gap-3">
                           <div id="spokes-view">
                             <h1 className="text-base font-semibold text-[#B9B9B9]">
                               {t("spokes")}
                             </h1>
                             <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
-                              {facilityData.spokes.map((spoke) => (
+                              {spokesQuery.data.results.map((spoke) => (
                                 <FacilityBlock facility={spoke.spoke_object} />
                               ))}
                             </div>
@@ -291,15 +305,18 @@ export const FacilityHome = ({ facilityId }: Props) => {
                         </div>
                       )}
 
-                      {!!facilityData?.hubs?.length && (
+                      {!!hubsQuery.data?.results?.length && (
                         <div className="mt-4 flex items-center gap-3">
                           <div id="hubs-view">
                             <h1 className="text-base font-semibold text-[#B9B9B9]">
                               {t("hubs")}
                             </h1>
                             <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
-                              {facilityData.hubs.map((hub) => (
-                                <FacilityBlock facility={hub.hub_object} />
+                              {hubsQuery.data.results.map((hub) => (
+                                <FacilityBlock
+                                  facility={hub.hub_object}
+                                  redirect={false}
+                                />
                               ))}
                             </div>
                           </div>
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index 06f287474b9..af8bcf9bfd3 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -87,8 +87,6 @@ export interface FacilityModel {
   kasp_empanelled?: boolean;
   patient_count?: number;
   bed_count?: number;
-  hubs?: FacilitySpokeModel[];
-  spokes?: FacilitySpokeModel[];
 }
 
 export enum SpokeRelationship {
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index 4775674084e..e2816ec5553 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -387,6 +387,12 @@ const routes = {
     TBody: Type<Partial<FacilityModel>>(),
   },
 
+  getFacilityHubs: {
+    path: "/api/v1/facility/{id}/hubs",
+    method: "GET",
+    TRes: Type<PaginatedResponse<FacilitySpokeModel>>(),
+  },
+
   getFacilitySpokes: {
     path: "/api/v1/facility/{id}/spokes/",
     method: "GET",