migrated from useDispatch to useQuery

src/Components/Facility/ConsultationClaims.tsx

@@ -1,15 +1,14 @@
 import * as Notification from "../../Utils/Notifications";
 
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 
 import ClaimCard from "../HCX/ClaimCard";
 import CreateClaimCard from "../HCX/CreateClaimCard";
-import { HCXActions } from "../../Redux/actions";
-import { HCXClaimModel } from "../HCX/models";
 import PageTitle from "../Common/PageTitle";
 import { navigate } from "raviger";
-import { useDispatch } from "react-redux";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 interface Props {
   facilityId: string;
@@ -22,40 +21,36 @@ export default function ConsultationClaims({
   consultationId,
   patientId,
 }: Props) {
-  const dispatch = useDispatch<any>();
-  const [claims, setClaims] = useState<HCXClaimModel[]>();
   const [isCreateLoading, setIsCreateLoading] = useState(false);
 
-  const fetchClaims = useCallback(async () => {
-    const res = await dispatch(
-      HCXActions.claims.list({
+  const { data: claimsResult, refetch: refetchClaims } = useQuery(
+    routes.listHCXClaims,
+    {
+      query: {
         ordering: "-modified_date",
         consultation: consultationId,
-      }),
-    );
-
-    if (res.data && res.data.results) {
-      setClaims(res.data.results);
-      if (isCreateLoading)
-        Notification.Success({ msg: "Fetched Claim Approval Results" });
-    } else {
-      if (isCreateLoading)
-        Notification.Success({ msg: "Error Fetched Claim Approval Results" });
-    }
-    setIsCreateLoading(false);
-  }, [dispatch, consultationId]);
-
-  useEffect(() => {
-    fetchClaims();
-  }, [fetchClaims]);
+      },
+      onResponse: (res) => {
+        if (res.data && res.data.results) {
+          if (isCreateLoading)
+            Notification.Success({ msg: "Fetched Claim Approval Results" });
+        } else {
+          if (isCreateLoading)
+            Notification.Error({
+              msg: "Error Fetching Claim Approval Results",
+            });
+        }
+      },
+    },
+  );
 
   useMessageListener((data) => {
     if (
       data.type === "MESSAGE" &&
       (data.from === "claim/on_submit" || data.from === "preauth/on_submit") &&
       data.message === "success"
     ) {
-      fetchClaims();
+      refetchClaims();
     }
   });
 
@@ -83,7 +78,7 @@ export default function ConsultationClaims({
         </div>
 
         <div className="mx-auto flex w-full max-w-3xl flex-col gap-8">
-          {claims?.map((claim) => (
+          {claimsResult?.results.map((claim) => (
             <div className="rounded-lg bg-white p-8">
               <ClaimCard claim={claim} />
             </div>

src/Components/HCX/ClaimCard.tsx

@@ -25,10 +25,8 @@ export default function ClaimCard({ claim }: IProps) {
     }
   }, [cardContainerRef]);
 
-  console.log(containerDimensions);
-
   return showMessages ? (
-    <div style={{ ...containerDimensions }} className="px-6 lg:px-8 relative">
+    <div style={{ ...containerDimensions }} className="relative px-6 lg:px-8">
       <ClaimCardCommunication claim={claim} setShowMessages={setShowMessages} />
     </div>
   ) : (

src/Components/HCX/ClaimCardCommunication.tsx

@@ -1,13 +1,14 @@
 import { HCXClaimModel, HCXCommunicationModel } from "./models";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { HCXActions } from "../../Redux/actions";
 import SendCommunicationModal from "./SendCommunicationModal";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { classNames } from "../../Utils/utils";
-import { useDispatch } from "react-redux";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
+import request from "../../Utils/request/request";
 
 interface IProps {
   claim: HCXClaimModel;
@@ -25,56 +26,55 @@ export default function ClaimCardCommunication({
   claim,
   setShowMessages,
 }: IProps) {
-  const dispatch = useDispatch<any>();
-  const [messages, setMessages] = useState<IMessage[]>([]);
   const [responses, setResponses] = useState<IMessage[]>([]);
   const [inputText, setInputText] = useState("");
   const [createdCommunication, setCreatedCommunication] =
     useState<HCXCommunicationModel>();
   const bottomRef = useRef<HTMLDivElement>(null);
 
-  const fetchCommunications = useCallback(async () => {
-    const response = await dispatch(
-      HCXActions.communications.list({
+  const { data: communicationsResult, refetch: refetchCommunications } =
+    useQuery(routes.listHCXCommunications, {
+      query: {
         claim: claim.id,
         ordering: "created_date",
-      }),
-    );
+      },
+    });
 
-    if (response.status === 200 && response.data) {
-      response.data.results?.forEach(
-        (communication: HCXCommunicationModel, i: number) => {
-          communication.content?.forEach((content) =>
-            setMessages((prev) => [
-              ...prev,
-              { ...content, user: communication.created_by, index: i },
-            ]),
-          );
-        },
-      );
-    }
-  }, [claim.id, dispatch]);
+  const messages = useMemo(() => {
+    return (
+      (communicationsResult?.results
+        ?.flatMap((communication, i) => {
+          return communication.content?.map((content) => ({
+            ...content,
+            user: communication.created_by,
+            index: i,
+          }));
+        })
+        .filter(Boolean) as IMessage[]) ?? []
+    );
+  }, [communicationsResult]);
 
   const handleSubmit = async () => {
-    const response = await dispatch(
-      HCXActions.communications.create({
+    if (!claim.id) return;
+
+    const { res, data } = await request(routes.createHCXCommunication, {
+      body: {
         claim: claim.id,
         content: responses.map((response) => ({
           type: response.type as string,
           data: response.data as string,
         })),
-      }),
-    );
+      },
+    });
 
-    console.log(response, response.status);
-    if (response.status === 201) {
-      setCreatedCommunication(response.data); //TODO: check if this is correct
+    if (res?.status === 201) {
+      setCreatedCommunication(data);
     }
   };
 
   useEffect(() => {
-    fetchCommunications();
-  }, [fetchCommunications, createdCommunication]);
+    refetchCommunications();
+  }, [refetchCommunications, createdCommunication]);
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -101,7 +101,7 @@ export default function ClaimCardCommunication({
       </div>
 
       <div className="my-3 h-full w-full overflow-y-auto">
-        {messages.map((message) => (
+        {messages?.map((message) => (
           <div
             className={classNames(
               "mb-4 flex",

src/Components/HCX/CreateClaimCard.tsx

@@ -37,8 +37,6 @@ export default function CreateClaimCard({
   const [createdClaim, setCreatedClaim] = useState<HCXClaimModel>();
   const [use_, setUse_] = useState(use);
 
-  console.log(items);
-
   useEffect(() => {
     async function autoFill() {
       const latestApprovedPreAuthsRes = await dispatch(

src/Components/HCX/SendCommunicationModal.tsx

@@ -3,11 +3,11 @@ import * as Notification from "../../Utils/Notifications";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import DialogModal from "../Common/Dialog";
 import { FileUpload } from "../Patient/FileUpload";
-import { HCXActions } from "../../Redux/actions";
 import { HCXCommunicationModel } from "./models";
 import { Submit } from "../Common/components/ButtonV2";
-import { useDispatch } from "react-redux";
 import { useState } from "react";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
 
 interface Props {
   communication: HCXCommunicationModel;
@@ -19,14 +19,18 @@ export default function SendCommunicationModal({
   communication,
   ...props
 }: Props) {
-  const dispatch = useDispatch<any>();
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSubmit = async () => {
     setIsLoading(true);
 
-    const res = await dispatch(HCXActions.sendCommunication(communication.id!));
-    if (res.data) {
+    const { res } = await request(routes.hcxSendCommunication, {
+      body: {
+        communication: communication.id,
+      },
+    });
+
+    if (res?.ok) {
       Notification.Success({ msg: "Message Sent" });
       props.onClose();
     }
@@ -50,7 +54,7 @@ export default function SendCommunicationModal({
       <div className="p-4 pt-8">
         <FileUpload
           type="COMMUNICATION"
-          communicationId={communication.id!}
+          communicationId={communication.id}
           hideBack
           unspecified
         />

src/Components/Patient/FileUpload.tsx

@@ -101,9 +101,9 @@ export const LinearProgressWithLabel = (props: any) => {
 
 interface FileUploadProps {
   type: string;
-  patientId?: any;
-  facilityId?: any;
-  consultationId?: any;
+  patientId?: string;
+  facilityId?: string;
+  consultationId?: string;
   consentId?: string;
   hideBack: boolean;
   audio?: boolean;
@@ -257,12 +257,12 @@ export const FileUpload = (props: FileUploadProps) => {
   }, []);
 
   const { data: patient } = useQuery(routes.getPatient, {
-    pathParams: { id: patientId },
+    pathParams: { id: patientId! },
     prefetch: !!patientId,
   });
 
   const { data: consultation } = useQuery(routes.getConsultation, {
-    pathParams: { id: consultationId },
+    pathParams: { id: consultationId! },
     prefetch: !!consultationId,
   });
 
@@ -560,7 +560,7 @@ export const FileUpload = (props: FileUploadProps) => {
       pathParams: {
         id,
         fileType,
-        associatingId: getAssociatedId(),
+        associatingId: getAssociatedId()!,
       },
     });
 
@@ -583,7 +583,7 @@ export const FileUpload = (props: FileUploadProps) => {
       pathParams: {
         id,
         fileType: type,
-        associatingId: getAssociatedId(),
+        associatingId: getAssociatedId()!,
       },
     });
 
@@ -1046,7 +1046,7 @@ export const FileUpload = (props: FileUploadProps) => {
       pathParams: {
         id: data.id,
         fileType: type,
-        associatingId: getAssociatedId(),
+        associatingId: getAssociatedId()!,
       },
     });
   };
@@ -1065,7 +1065,7 @@ export const FileUpload = (props: FileUploadProps) => {
         original_name: name ?? "",
         file_type: type,
         name: filename,
-        associating_id: getAssociatedId(),
+        associating_id: getAssociatedId()!,
         file_category: category,
         mime_type: f?.type ?? "",
       },
@@ -1150,7 +1150,7 @@ export const FileUpload = (props: FileUploadProps) => {
         original_name: name,
         file_type: type,
         name: filename,
-        associating_id: getAssociatedId(),
+        associating_id: getAssociatedId()!,
         file_category: category,
         mime_type: audioBlob?.type ?? "",
       },
@@ -1495,8 +1495,8 @@ export const FileUpload = (props: FileUploadProps) => {
           hideBack={hideBack}
           breadcrumbs={false}
           crumbsReplacements={{
-            [facilityId]: { name: patient?.facility_object?.name },
-            [patientId]: { name: patient?.name },
+            [facilityId!]: { name: patient?.facility_object?.name },
+            [patientId!]: { name: patient?.name },
           }}
           backUrl={
             type === "CONSULTATION"