removed extra setstates

src/Components/Assets/AssetManage.tsx

@@ -45,16 +45,13 @@ const checkAuthority = (type: string, cutoff: string) => {
 const AssetManage = (props: AssetManageProps) => {
   const { t } = useTranslation();
   const { assetId, facilityId } = props;
-  const [asset, setAsset] = useState<AssetData>();
   const [isPrintMode, setIsPrintMode] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [offset, setOffset] = useState(0);
   const [totalCount, setTotalCount] = useState(0);
-  const [transactions, setTransactions] = useState<AssetTransaction[]>([]);
   const [transactionDetails, setTransactionDetails] = useState<
     ReactElement | ReactElement[]
   >();
-  const [services, setServices] = useState<AssetService[]>([]);
   const [servicesDetails, setServiceDetails] = useState<
     ReactElement | ReactElement[]
   >();
@@ -66,52 +63,47 @@ const AssetManage = (props: AssetManageProps) => {
   >();
   const [transactionFilter, setTransactionFilter] = useState<any>({});
 
-  const { data: assetData, loading } = useQuery(routes.getAsset, {
+  const { data: asset, loading } = useQuery(routes.getAsset, {
     pathParams: {
       external_id: assetId,
     },
-    onResponse: ({ res, data }) => {
-      if (res?.status === 200 && data) {
-        setAsset(data);
-      }
-    },
   });
 
-  const { refetch } = useQuery(routes.listAssetTransaction, {
-    prefetch: false,
-    ...transactionFilter,
-    query: {
-      limit,
-      offset,
-    },
-    onResponse: ({ res, data }) => {
-      if (res?.status === 200 && data) {
-        setTransactions(data.results);
-        setTotalCount(data.count);
-      }
-    },
-  });
+  const { data: transactions, refetch } = useQuery(
+    routes.listAssetTransaction,
+    {
+      prefetch: false,
+      ...transactionFilter,
+      query: {
+        limit,
+        offset,
+      },
+      onResponse: ({ res, data }) => {
+        if (res?.status === 200 && data) {
+          setTotalCount(data.count);
+        }
+      },
+    }
+  );
 
-  const { refetch: serviceRefetch } = useQuery(routes.listAssetService, {
-    pathParams: {
-      asset_external_id: assetId,
-    },
-    onResponse: ({ res, data }) => {
-      if (res?.status === 200 && data) {
-        setServices(data.results);
-      }
-    },
-  });
+  const { data: services, refetch: serviceRefetch } = useQuery(
+    routes.listAssetService,
+    {
+      pathParams: {
+        asset_external_id: assetId,
+      },
+    }
+  );
 
   useEffect(() => {
-    if (assetData) {
-      const transactionFilter = assetData.qr_code_id
-        ? { qr_code_id: assetData.qr_code_id }
+    if (asset) {
+      const transactionFilter = asset.qr_code_id
+        ? { qr_code_id: asset.qr_code_id }
         : { external_id: assetId };
       setTransactionFilter(transactionFilter);
       refetch();
     }
-  }, [assetData, assetId, refetch]);
+  }, [asset, assetId, refetch]);
 
   const handlePagination = (page: number, limit: number) => {
     const offset = (page - 1) * limit;
@@ -144,7 +136,7 @@ const AssetManage = (props: AssetManageProps) => {
   const populateTableRows = (txns: AssetTransaction[]) => {
     if (txns.length > 0) {
       setTransactionDetails(
-        transactions.map((transaction: AssetTransaction) => (
+        transactions?.results.map((transaction: AssetTransaction) => (
           <tr key={`transaction_id_${transaction.id}`}>
             <td className="whitespace-nowrap px-6 py-4 text-left text-sm leading-5 text-gray-500">
               <span className="font-medium text-gray-900">
@@ -187,7 +179,7 @@ const AssetManage = (props: AssetManageProps) => {
   const populateServiceTableRows = (txns: AssetService[]) => {
     if (txns.length > 0) {
       setServiceDetails(
-        services.map((service: AssetService) => (
+        services?.results.map((service: AssetService) => (
           <tr key={`service_id_${service.id}`}>
             <td className="whitespace-nowrap px-6 py-4 text-center text-sm leading-5 text-gray-500">
               <span className="font-medium text-gray-900">
@@ -262,11 +254,11 @@ const AssetManage = (props: AssetManageProps) => {
   };
 
   useEffect(() => {
-    populateTableRows(transactions);
+    if (transactions) populateTableRows(transactions.results);
   }, [transactions]);
 
   useEffect(() => {
-    populateServiceTableRows(services);
+    if (services) populateServiceTableRows(services?.results);
   }, [services]);
 
   if (loading) return <Loading />;

src/Components/Assets/AssetTypes.tsx

@@ -133,16 +133,18 @@ export interface AssetTransaction {
 }
 
 export interface AssetBedModel {
-  id?: string;
-  asset_object?: AssetData;
-  bed_object?: BedModel;
-  created_date?: string;
-  modified_date?: string;
-  meta?: Record<string, any>;
+  id: string;
+  asset_object: AssetData;
+  bed_object: BedModel;
+  created_date: string;
+  modified_date: string;
+  meta: Record<string, any>;
   asset?: string;
   bed?: string;
 }
 
+export type AssetBedBody = Partial<AssetBedModel>;
+
 export interface AssetServiceEdit {
   id: string;
   asset_service: AssetService;

src/Components/Assets/configure/MonitorConfigure.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { BedSelect } from "../../Common/BedSelect";
 import { BedModel } from "../../Facility/models";
 import { AssetData } from "../AssetTypes";
@@ -7,6 +7,7 @@ import { Submit } from "../../Common/components/ButtonV2";
 import { FieldLabel } from "../../Form/FormFields/FormField";
 import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
+import useQuery from "../../../Utils/request/useQuery";
 
 const saveLink = async (assetId: string, bedId: string) => {
   await request(routes.createAssetBed, {
@@ -35,35 +36,23 @@ const update_Link = async (
 export default function MonitorConfigure({ asset }: { asset: AssetData }) {
   const [bed, setBed] = useState<BedModel>({});
   const [updateLink, setUpdateLink] = useState<boolean>(false);
-  const [assetBed, setAssetBed] = useState<any>();
-
-  const getAssetBeds = async (id: string) => {
-    // const assetBeds = await dispatch(listAssetBeds({ asset: id }));
-    const { data } = await request(routes.listAssetBeds, {
-      query: { asset: id },
-    });
-    if (data && data.results?.length > 0) {
-      setUpdateLink(true);
-      setAssetBed(data.results[0]);
-      setBed(data.results[0].bed_object);
-    } else {
-      setUpdateLink(false);
-    }
-  };
-
-  useEffect(() => {
-    if (asset.id) {
-      getAssetBeds(asset.id);
-    }
-  }, [asset]);
+  const { data: assetBed } = useQuery(routes.listAssetBeds, {
+    query: { asset: asset.id },
+  });
+  if (assetBed && assetBed.results?.length > 0) {
+    setUpdateLink(true);
+    setBed(assetBed.results[0].bed_object);
+  } else {
+    setUpdateLink(false);
+  }
 
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
         if (updateLink) {
           update_Link(
-            assetBed?.id as string,
+            assetBed?.results[0].id as string,
             asset.id as string,
             bed as BedModel
           );

src/Redux/api.tsx

@@ -1,5 +1,6 @@
 import { IConfig } from "../Common/hooks/useConfig";
 import {
+  AssetBedBody,
   AssetBedModel,
   AssetData,
   AssetLocationObject,
@@ -242,7 +243,7 @@ const routes = {
     path: "/api/v1/assetbed/",
     method: "POST",
     TRes: Type<AssetData>(),
-    TBody: Type<AssetBedModel>(),
+    TBody: Type<AssetBedBody>(),
   },
   getAssetBed: {
     path: "/api/v1/assetbed/{external_id}/",
@@ -256,7 +257,7 @@ const routes = {
     path: "/api/v1/assetbed/{external_id}/",
     method: "PATCH",
     TRes: Type<AssetBedModel>(),
-    TBody: Type<AssetBedModel>(),
+    TBody: Type<AssetBedBody>(),
   },
   deleteAssetBed: {
     path: "/api/v1/assetbed/{external_id}/",