Replaced useDispatch with useQuery and request in ExternalResult (src…

…/Components/ExternalResult/** ) (#6402) * replaced dispatch with useQuery in ResultList * replaced useDispatch with useQuery in listfilter * replaced useDispatch with reqeust in ExternalResultUpload * fixed filtering * fix ResultList * rm clg * make code readable * fix build * removed useEffect and useState from ResultList.tsx * Apply changes from code review --------- Co-authored-by: rithviknishad <[email protected]>
ohcnetwork · Oct 17, 2023 · c776524 · c776524
1 parent dd16bfa
commit c776524
Show file tree

Hide file tree

Showing 9 changed files with 340 additions and 280 deletions.
diff --git a/src/Components/ExternalResult/ExternalResultUpload.tsx b/src/Components/ExternalResult/ExternalResultUpload.tsx
@@ -2,21 +2,21 @@ import _ from "lodash";
 import { navigate } from "raviger";
 import { lazy, useState } from "react";
 import CSVReader from "react-csv-reader";
-import { useDispatch } from "react-redux";
 import useConfig from "../../Common/hooks/useConfig";
-import { externalResultUploadCsv } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 const PageTitle = lazy(() => import("../Common/PageTitle"));
 import { useTranslation } from "react-i18next";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import useAppHistory from "../../Common/hooks/useAppHistory";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import { IExternalResult } from "./models";
 
 export default function ExternalResultUpload() {
   const { sample_format_external_result_import } = useConfig();
-  const dispatch: any = useDispatch();
   // for disabling save button once clicked
   const [loading, setLoading] = useState(false);
-  const [csvData, setCsvData] = useState(new Array<any>());
+  const [csvData, setCsvData] = useState(new Array<IExternalResult>());
   const [errors, setErrors] = useState<any>([]);
   const handleForce = (data: any) => {
     setCsvData(data);
@@ -32,26 +32,35 @@ export default function ExternalResultUpload() {
       header.toLowerCase().replace(/\W/g, "_"),
   };
 
-  const handleSubmit = (e: any) => {
+  const handleSubmit = async (e: any) => {
     e.preventDefault();
     setLoading(true);
     const valid = true;
-    if (csvData.length !== 0) {
-      const data = {
-        sample_tests: csvData,
-      };
 
+    if (csvData.length !== 0) {
       if (valid) {
         setErrors([]);
-        dispatch(externalResultUploadCsv(data)).then((resp: any) => {
-          if (resp && resp.status === 202) {
+
+        try {
+          const { res, data } = await request(routes.externalResultUploadCsv, {
+            body: {
+              sample_tests: csvData,
+            },
+          });
+
+          if (res && res.status === 202) {
             setLoading(false);
             navigate("/external_results");
           } else {
-            setErrors(resp.data.map((err: any) => Object.entries(err)));
+            if (data) {
+              setErrors(data.map((err: any) => Object.entries(err)));
+            }
             setLoading(false);
           }
-        });
+        } catch (error) {
+          console.error("An error occurred:", error);
+          setLoading(false);
+        }
       } else {
         setLoading(false);
       }

diff --git a/src/Components/ExternalResult/ListFilter.tsx b/src/Components/ExternalResult/ListFilter.tsx
@@ -1,6 +1,4 @@
-import { useEffect, useState } from "react";
-import { getAllLocalBodyByDistrict } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
+import { useState } from "react";
 import useMergeState from "../../Common/hooks/useMergeState";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
@@ -11,6 +9,9 @@ import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
 import dayjs from "dayjs";
 import { dateQueryString } from "../../Utils/utils";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import Loading from "../Common/Loading";
 
 const clearFilterState = {
   created_date_before: "",
@@ -29,10 +30,8 @@ export default function ListFilter(props: any) {
   const { filter, onChange, closeFilter, dataList } = props;
   const [wardList, setWardList] = useState<any[]>([]);
   const [lsgList, setLsgList] = useState<any[]>([]);
-
   const [wards, setWards] = useState<any[]>([]);
   const [selectedLsgs, setSelectedLsgs] = useState<any[]>([]);
-  const dispatch: any = useDispatch();
   const authUser = useAuthUser();
   const [filterState, setFilterState] = useMergeState({
     created_date_before: filter.created_date_before || null,
@@ -45,6 +44,57 @@ export default function ListFilter(props: any) {
   });
   const { t } = useTranslation();
 
+  const { loading } = useQuery(routes.getAllLocalBodyByDistrict, {
+    pathParams: { id: String(authUser.district) },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        let allWards: any[] = [];
+        let allLsgs: any[] = [];
+        if (res && data) {
+          data.forEach((local: any) => {
+            allLsgs = [...allLsgs, { id: local.id, name: local.name }];
+            if (local.wards) {
+              local.wards.forEach((ward: any) => {
+                allWards = [
+                  ...allWards,
+                  {
+                    id: ward.id,
+                    name: ward.number + ": " + ward.name,
+                    panchayath: local.name,
+                    number: ward.number,
+                    local_body_id: local.id,
+                  },
+                ];
+              });
+            }
+          });
+        }
+
+        sortByName(allWards);
+        sortByName(allLsgs);
+        setWardList(allWards || []);
+        setLsgList(allLsgs || []);
+        const filteredWard = filter?.wards?.split(",").map(Number);
+        const selectedWards: any =
+          filteredWard && allWards
+            ? allWards.filter(({ id }: { id: number }) => {
+                return filteredWard.includes(id);
+              })
+            : [];
+        setWards(selectedWards);
+
+        const filteredLsgs = filter?.local_bodies?.split(",").map(Number);
+        const selectedLsgs: any =
+          filteredLsgs && allLsgs
+            ? allLsgs.filter(({ id }: { id: number }) => {
+                return filteredLsgs.includes(id);
+              })
+            : [];
+        setSelectedLsgs(selectedLsgs);
+      }
+    },
+  });
+
   const handleDateRangeChange = (
     startDateId: string,
     endDateId: string,
@@ -118,59 +168,10 @@ export default function ListFilter(props: any) {
     });
   };
 
-  useEffect(() => {
-    async function getWardList() {
-      const id = authUser.district;
-      const res = await dispatch(getAllLocalBodyByDistrict({ id }));
-      let allWards: any[] = [];
-      let allLsgs: any[] = [];
-      res?.data?.forEach((local: any) => {
-        allLsgs = [...allLsgs, { id: local.id, name: local.name }];
-        if (local.wards) {
-          local.wards.forEach((ward: any) => {
-            allWards = [
-              ...allWards,
-              {
-                id: ward.id,
-                name: ward.number + ": " + ward.name,
-                panchayath: local.name,
-                number: ward.number,
-                local_body_id: local.id,
-              },
-            ];
-          });
-        }
-      });
-      sortByName(allWards);
-      sortByName(allLsgs);
-      setWardList(allWards || []);
-      setLsgList(allLsgs || []);
-      const filteredWard = filter?.wards?.split(",").map(Number);
-      const selectedWards: any =
-        filteredWard && allWards
-          ? allWards.filter(({ id }: { id: number }) => {
-              return filteredWard.includes(id);
-            })
-          : [];
-      setWards(selectedWards);
-
-      const filteredLsgs = filter?.local_bodies?.split(",").map(Number);
-      const selectedLsgs: any =
-        filteredLsgs && allLsgs
-          ? allLsgs.filter(({ id }: { id: number }) => {
-              return filteredLsgs.includes(id);
-            })
-          : [];
-      setSelectedLsgs(selectedLsgs);
-    }
-    getWardList();
-  }, []);
-
   const filterWards = () => {
     const selectedLsgIds: any = selectedLsgs.map((e) => {
       return e.id;
     });
-
     const selectedwards: any =
       selectedLsgIds.length === 0
         ? wardList
@@ -183,13 +184,15 @@ export default function ListFilter(props: any) {
 
   const handleChange = (event: any) => {
     const { name, value } = event.target;
-
     const filterData: any = { ...filterState };
     filterData[name] = value;
-
     setFilterState(filterData);
   };
 
+  if (loading) {
+    <Loading />;
+  }
+
   return (
     <FiltersSlideover
       advancedFilter={props}