Fix: Asset tab facility and location badges are malfunctioning (#6474)

* fix filter badge not removing * refactor useQuery * Update src/Components/Assets/AssetsList.tsx Co-authored-by: Rithvik Nishad <[email protected]> * fix useEffect * remove extra useQuery * remove dedicated states * Update src/Components/Assets/AssetsList.tsx --------- Co-authored-by: Rithvik Nishad <[email protected]>
ohcnetwork · Oct 26, 2023 · 2cf1348 · 2cf1348
1 parent 85bfdb6
commit 2cf1348
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 35 deletions.
diff --git a/src/Components/Assets/AssetFilter.tsx b/src/Components/Assets/AssetFilter.tsx
@@ -3,7 +3,7 @@ import { navigate, useQueryParams } from "raviger";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "../Facility/models";
 import { LocationSelect } from "../Common/LocationSelect";
-import { AssetClass, AssetLocationObject } from "./AssetTypes";
+import { AssetClass } from "./AssetTypes";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
@@ -15,24 +15,12 @@ import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import { DateRange } from "../Common/DateRangeInputV2";
 import { dateQueryString } from "../../Utils/utils";
 
-const initialLocation = {
-  id: "",
-  name: "",
-  description: "",
-  facility: {
-    id: "",
-    name: "",
-  },
-};
-
 const getDate = (value: any) =>
   value && dayjs(value).isValid() && dayjs(value).toDate();
 
 function AssetFilter(props: any) {
   const { filter, onChange, closeFilter } = props;
   const [facility, setFacility] = useState<FacilityModel>({ name: "" });
-  const [location, setLocation] =
-    useState<AssetLocationObject>(initialLocation);
   const [asset_type, setAssetType] = useState<string>(
     filter.asset_type ? filter.asset_type : ""
   );
@@ -58,28 +46,14 @@ function AssetFilter(props: any) {
     prefetch: !!facilityId,
   });
 
-  useQuery(routes.getFacilityAssetLocation, {
-    pathParams: {
-      facilityId: String(facilityId),
-      locationId: String(locationId),
-    },
-    onResponse: ({ res, data }) => {
-      if (res?.status === 200 && data) {
-        setLocation(data);
-      }
-    },
-    prefetch: !!(facilityId && locationId),
-  });
-
   useEffect(() => {
     setFacilityId(facility?.id ? `${facility?.id}` : "");
     setLocationId(
       facility?.id === qParams.facility ? qParams.location ?? "" : ""
     );
-  }, [facility, location]);
+  }, [facility.id, qParams.facility, qParams.location]);
 
   const clearFilter = useCallback(() => {
-    setLocation(initialLocation);
     setFacility({ name: "" });
     setAssetType("");
     setAssetStatus("");
@@ -98,7 +72,7 @@ function AssetFilter(props: any) {
       asset_type: asset_type ?? "",
       asset_class: asset_class ?? "",
       status: asset_status ?? "",
-      location: locationId,
+      location: locationId ?? "",
       warranty_amc_end_of_validity_before: dateQueryString(
         warrantyExpiry.before
       ),

diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
@@ -46,7 +46,6 @@ const AssetsList = () => {
   const [facility, setFacility] = useState<FacilityModel>();
   const [asset_type, setAssetType] = useState<string>();
   const [status, setStatus] = useState<string>();
-  const [facilityName, setFacilityName] = useState<string>();
   const [asset_class, setAssetClass] = useState<string>();
   const [importAssetModalOpen, setImportAssetModalOpen] = useState(false);
   const assetsExist = assets.length > 0 && Object.keys(assets[0]).length > 0;
@@ -76,13 +75,12 @@ const AssetsList = () => {
     },
   });
 
-  useQuery(routes.getAnyFacility, {
+  const { data: facilityObject } = useQuery(routes.getAnyFacility, {
     pathParams: { id: qParams.facility },
     onResponse: ({ res, data }) => {
       if (res?.status === 200 && data) {
         setFacility(data);
         setSelectedFacility(data);
-        setFacilityName(data.name);
       }
     },
     prefetch: !!qParams.facility,
@@ -100,7 +98,7 @@ const AssetsList = () => {
     setAssetClass(qParams.asset_class);
   }, [qParams.asset_class]);
 
-  const { data: location } = useQuery(routes.getFacilityAssetLocation, {
+  const { data: locationObject } = useQuery(routes.getFacilityAssetLocation, {
     pathParams: {
       facility_external_id: String(qParams.facility),
       external_id: String(qParams.location),
@@ -365,12 +363,20 @@ const AssetsList = () => {
         <>
           <FilterBadges
             badges={({ badge, value }) => [
-              value("Facility", "facility", facilityName ?? ""),
+              value(
+                "Facility",
+                "facility",
+                qParams.facility && facilityObject?.name
+              ),
               badge("Name/Serial No./QR ID", "search"),
               value("Asset Type", "asset_type", asset_type ?? ""),
               value("Asset Class", "asset_class", asset_class ?? ""),
               value("Status", "status", status?.replace(/_/g, " ") ?? ""),
-              value("Location", "location", location?.name ?? ""),
+              value(
+                "Location",
+                "location",
+                qParams.location && locationObject?.name
+              ),
               value(
                 "Warranty AMC End Of Validity Before",
                 "warranty_amc_end_of_validity_before",