Removed unncessary edit query in the Excalidraw editor page and other i18n conversions

Author: NikhilA8606

public/locale/en.json

@@ -983,8 +983,10 @@
   "error_fetching_user_details": "Error while fetching user details: ",
   "error_fetching_users_data": "Failed to load user data. Please try again later.",
   "error_generating_discharge_summary": "Error generating discharge summary",
+  "error_in_createUpload": "Error in createUpload",
   "error_loading_questionnaire_response": "Error loading questionnaire response",
   "error_updating_encounter": "Error to Updating Encounter",
+  "error_uploading_file": "Error uploading file",
   "error_verifying_otp": "Error while verifying OTP, Please request a new OTP",
   "error_while_deleting_record": "Error while deleting record",
   "escape": "Escape",
@@ -1665,6 +1667,7 @@
   "please_check_your_messages": "Please check your messages",
   "please_confirm_password": "Please confirm your new password.",
   "please_enter_a_name": "Please enter a name!",
+  "please_enter_a_name_for_the_drawing.": "Please enter a name for the drawing.",
   "please_enter_a_reason_for_the_shift": "Please enter a reason for the shift.",
   "please_enter_a_valid_reason": "Please enter a valid reason!",
   "please_enter_confirm_password": "Please confirm your new password",

src/Routers/routes/ConsultationRoutes.tsx

@@ -9,7 +9,9 @@ import { AppRoutes } from "@/Routers/AppRouter";
 import { EncounterShow } from "@/pages/Encounters/EncounterShow";
 import { PrintPrescription } from "@/pages/Encounters/PrintPrescription";
 
-const ExcalidrawPage = lazy(() => import("@/components/Files/ExcalidrawPage"));
+const ExcalidrawEditor = lazy(
+  () => import("@/components/Files/ExcalidrawEditor"),
+);
 const ExcalidrawView = lazy(() => import("@/components/Files/ExcalidrawView"));
 
 const consultationRoutes: AppRoutes = {
@@ -37,7 +39,7 @@ const consultationRoutes: AppRoutes = {
     encounterId,
   }) => (
     <Suspense fallback={<Loading />}>
-      <ExcalidrawPage associatingId={encounterId} fileType="encounter" />
+      <ExcalidrawEditor associatingId={encounterId} fileType="encounter" />
     </Suspense>
   ),
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/drawings/:drawingId":

src/Routers/routes/PatientRoutes.tsx

@@ -13,7 +13,9 @@ import { AppRoutes } from "@/Routers/AppRouter";
 import { EncounterList } from "@/pages/Encounters/EncounterList";
 import VerifyPatient from "@/pages/Patients/VerifyPatient";
 
-const ExcalidrawPage = lazy(() => import("@/components/Files/ExcalidrawPage"));
+const ExcalidrawEditor = lazy(
+  () => import("@/components/Files/ExcalidrawEditor"),
+);
 const ExcalidrawView = lazy(() => import("@/components/Files/ExcalidrawView"));
 
 const PatientRoutes: AppRoutes = {
@@ -53,7 +55,7 @@ const PatientRoutes: AppRoutes = {
   "/facility/:facilityId/patient/:id/drawings": ({ id }) => {
     return (
       <Suspense fallback={<Loading />}>
-        <ExcalidrawPage associatingId={id} fileType="patient" />
+        <ExcalidrawEditor associatingId={id} fileType="patient" />
       </Suspense>
     );
   },

src/components/Files/ExcalidrawPage.tsx renamed to src/components/Files/ExcalidrawEditor.tsx

@@ -1,6 +1,6 @@
 import { Excalidraw } from "@excalidraw/excalidraw";
 import { type ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { t } from "i18next";
 import { navigate } from "raviger";
 import { useEffect, useState } from "react";
@@ -18,50 +18,24 @@ import { CreateFileResponse } from "@/components/Patient/models";
 
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
-import query from "@/Utils/request/query";
 
 type Props = {
   associatingId: string;
   fileType: string;
-  drawingId?: string;
 };
 
-export default function ExcalidrawPage({
-  associatingId,
-  drawingId,
-  fileType,
-}: Props) {
+export default function ExcalidrawEditor({ associatingId, fileType }: Props) {
   const [elements, setElements] = useState<readonly ExcalidrawElement[] | null>(
-    drawingId ? null : [],
+    [],
   );
   const [name, setName] = useState("");
-  const [id, setId] = useState(drawingId);
+  const [id, setId] = useState("");
   const [isDirty, setIsDirty] = useState(false);
 
-  const { data, isLoading } = useQuery({
-    queryKey: ["file", id],
-    queryFn: query(routes.retrieveUpload, {
-      pathParams: { id: id || "" },
-    }),
-    enabled: !!id,
-  });
-
   useEffect(() => {
     setIsDirty(!!elements?.length);
   }, [elements?.length]);
 
-  useEffect(() => {
-    if (!data) {
-      return;
-    }
-    setName(data.name!);
-    const fetchData = async () => {
-      const response = await fetch(data.read_signed_url!);
-      const json = await response.json();
-      setElements(json.elements);
-    };
-    fetchData();
-  }, [data]);
   const { mutateAsync: markUploadComplete, error: markUploadCompleteError } =
     useMutation({
       mutationFn: mutate(routes.markUploadCompleted, {
@@ -78,24 +52,24 @@ export default function ExcalidrawPage({
 
   const handleSave = async () => {
     if (!name.trim()) {
-      toast.error("Please enter a name for the drawing.");
+      toast.error(t("please_enter_a_name_for_the_drawing"));
       return;
     }
 
     const obj = {
       type: "excalidraw",
       version: "2",
-      source: "https://care.ohc.network.com",
+      source: window.location.origin,
       elements: elements,
       appState: {},
       files: {},
     };
 
     try {
       const file = new File([JSON.stringify(obj)], `${name}.excalidraw`, {
-        type: "text/plain",
+        type: "application/vnd.excalidraw",
       });
-      let signedUrl = data?.read_signed_url || "";
+      let signedUrl = "";
       let response: CreateFileResponse | null = null;
       if (!id) {
         response = await createUpload({
@@ -118,7 +92,7 @@ export default function ExcalidrawPage({
       });
 
       if (!upload.ok) {
-        toast.error("Error uploading file");
+        toast.error(t("error_uploading_file"));
 
         return;
       }
@@ -131,12 +105,12 @@ export default function ExcalidrawPage({
         toast.success(t("file_success__upload_complete"));
         navigate(`drawings/${response!.id}`);
       }
-    } catch (error) {
-      console.error("Error in Step 1 (createUpload):", error);
+    } catch {
+      toast.error(t("error_in_createUpload"));
     }
   };
 
-  if (isLoading || elements === null) {
+  if (elements === null) {
     return <Loading />;
   }
 
@@ -151,7 +125,7 @@ export default function ExcalidrawPage({
             <Input
               type="text"
               value={name}
-              placeholder="Enter the File Name"
+              placeholder={t("enter_the_file_name")}
               onChange={(e) => setName(e.target.value)}
             />
           </div>
@@ -175,7 +149,7 @@ export default function ExcalidrawPage({
           initialData={{
             appState: { theme: "light" },
           }}
-          onChange={debounce(async (elements) => {
+          onChange={debounce((elements) => {
             setElements(elements);
           }, 100)}
         />