added i18n

ohcnetwork · Oct 10, 2024 · 77605d7 · 77605d7
1 parent bd79851
commit 77605d7
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 51 deletions.
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
@@ -25,6 +25,7 @@ import useAuthUser from "../../Common/hooks/useAuthUser";
 import useBreakpoints from "../../Common/hooks/useBreakpoints";
 import useFullscreen from "../../Common/hooks/useFullscreen";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   children?: React.ReactNode;
@@ -43,6 +44,7 @@ interface Props {
 }
 
 export default function CameraFeed(props: Props) {
+  const { t } = useTranslation();
   const playerRef = useRef<HTMLVideoElement | null>(null);
   const playerWrapperRef = useRef<HTMLDivElement>(null);
   const [streamUrl, setStreamUrl] = useState<string>("");
@@ -74,14 +76,14 @@ export default function CameraFeed(props: Props) {
       setCameraUser(errorData.camera_user);
     } else {
       Notification.Error({
-        msg: "An error occurred while locking the camera",
+        msg: t("camera_locking_error"),
       });
     }
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const unlockCamera = useCallback(async () => {
     await props.operate({ type: "unlock_camera" });
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     lockCamera();
@@ -277,7 +279,7 @@ export default function CameraFeed(props: Props) {
                 )}
               >
                 <FeedNetworkSignal
-                  playerRef={playerRef as any}
+                  playerRef={playerRef}
                   playedOn={playedOn}
                   status={playerStatus}
                   onReset={resetStream}
@@ -318,7 +320,7 @@ export default function CameraFeed(props: Props) {
                   {cameraUser.username !== user.username && (
                     <MenuItem>
                       <div className="mt-3 flex w-full flex-col items-center justify-between">
-                        <p>Need access to move camera?</p>
+                        <p>{t("need_camera_access")}</p>
                         <ButtonV2
                           size="small"
                           variant="primary"
@@ -337,12 +339,12 @@ export default function CameraFeed(props: Props) {
                               setCameraUser(successData.result.camera_user);
                             } else {
                               Notification.Error({
-                                msg: "An error occurred while requesting access",
+                                msg: t("request_camera_access_error"),
                               });
                             }
                           }}
                         >
-                          Request Access
+                          {t("request_access")}
                         </ButtonV2>
                       </div>
                     </MenuItem>

diff --git a/src/Components/CameraFeed/NoFeedAvailable.tsx b/src/Components/CameraFeed/NoFeedAvailable.tsx
@@ -1,20 +1,21 @@
+import { useTranslation } from "react-i18next";
 import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
-
+import { classNames } from "../../Utils/utils";
 import { AssetData } from "../Assets/AssetTypes";
 import ButtonV2 from "../Common/components/ButtonV2";
-import { classNames } from "../../Utils/utils";
 
 interface Props {
   className?: string;
   icon: IconName;
   message: string;
   streamUrl: string;
-  onResetClick?: () => void;
-  asset?: AssetData;
-  customActions?: React.ReactNode;
+  onResetClick: () => void;
+  asset: AssetData;
 }
 
 export default function NoFeedAvailable(props: Props) {
+  const { t } = useTranslation();
+
   const redactedURL = props.streamUrl
     // Replace all uuids in the URL with "ID_REDACTED"
     .replace(/[a-f\d]{8}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{12}/gi, "***")
@@ -34,31 +35,26 @@ export default function NoFeedAvailable(props: Props) {
         {redactedURL}
       </span>
       <div className="mt-4 flex items-center gap-2">
-        {props.onResetClick && (
-          <ButtonV2
-            variant="secondary"
-            className="bg-black text-white hover:bg-white/30"
-            border
-            size="small"
-            onClick={props.onResetClick}
-          >
-            <CareIcon icon="l-redo" className="text-base" />
-            Retry
-          </ButtonV2>
-        )}
-        {props.asset && (
-          <ButtonV2
-            variant="secondary"
-            className="bg-black text-white hover:bg-white/30"
-            border
-            size="small"
-            href={`/facility/${props.asset.location_object.facility?.id}/assets/${props.asset.id}/configure`}
-          >
-            <CareIcon icon="l-cog" className="text-base" />
-            Configure
-          </ButtonV2>
-        )}
-        {props.customActions}
+        <ButtonV2
+          variant="secondary"
+          className="bg-black text-white hover:bg-white/30"
+          border
+          size="small"
+          onClick={props.onResetClick}
+        >
+          <CareIcon icon="l-redo" className="text-base" />
+          {t("retry")}
+        </ButtonV2>
+        <ButtonV2
+          variant="secondary"
+          className="bg-black text-white hover:bg-white/30"
+          border
+          size="small"
+          href={`/facility/${props.asset.location_object.facility?.id}/assets/${props.asset.id}/configure`}
+        >
+          <CareIcon icon="l-cog" className="text-base" />
+          {t("configure")}
+        </ButtonV2>
       </div>
     </div>
   );

diff --git a/src/Components/CameraFeed/PrivacyToggle.tsx b/src/Components/CameraFeed/PrivacyToggle.tsx
@@ -4,6 +4,7 @@ import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 interface PrivacyToggleProps {
   consultationBedId: string;
@@ -56,6 +57,8 @@ export function TogglePrivacyButton({
   onChange: updatePrivacyChange,
   iconOnly = false,
 }: TogglePrivacyButtonProps) {
+  const { t } = useTranslation();
+
   return (
     <ButtonV2
       size="small"
@@ -65,8 +68,8 @@ export function TogglePrivacyButton({
         !iconOnly
           ? undefined
           : isPrivacyEnabled
-            ? "Privacy is enabled. Click to disable privacy"
-            : "Privacy is disabled. Click to enable privacy"
+            ? t("privacy_enabled_tooltip")
+            : t("privacy_disabled_tooltip")
       }
       tooltipClassName="left-0 top-full translate-y-2 text-xs"
       className="mr-2"
@@ -88,7 +91,7 @@ export function TogglePrivacyButton({
     >
       {!iconOnly && (
         <span className="text-xs font-bold">
-          {isPrivacyEnabled ? "Disable Privacy" : "Enable Privacy"}
+          {isPrivacyEnabled ? t("disable_privacy") : t("enable_privacy")}
         </span>
       )}
       <CareIcon

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
@@ -42,7 +42,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
     useState(false);
   const [isUpdatingPreset, setIsUpdatingPreset] = useState(false);
   const [hasMoved, setHasMoved] = useState(false);
-  const divRef = useRef<any>();
+  const divRef = useRef<HTMLDivElement | null>(null);
 
   const suggestOptimalExperience = useBreakpoints({ default: true, sm: false });
 
@@ -56,7 +56,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
         ),
       });
     }
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const { key, operate } = useOperateCamera(asset?.id ?? "", true);
 
@@ -130,7 +130,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
     if (divRef.current) {
       divRef.current.scrollIntoView({ behavior: "smooth" });
     }
-  }, [!!bed, loading, !!asset, divRef.current]);
+  }, [!!bed, loading, !!asset, divRef.current]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (preset?.id) {
@@ -149,7 +149,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
   }
 
   if (!bed || !asset) {
-    return <span>No bed/asset linked allocated</span>;
+    return <span>{t("no_bed_or_asset_linked")}</span>;
   }
 
   const cannotSaveToPreset = !hasMoved || !preset?.id;
@@ -158,7 +158,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
     return (
       <div className="flex h-[50vh] w-full flex-col items-center justify-center gap-4 rounded-lg border-4 border-dashed border-secondary-400">
         <span className="text-center text-xl font-bold text-secondary-700">
-          The camera feed is currently disabled due to privacy settings.
+          {t("camera_feed_disabled_due_to_privacy")}
         </span>
         <TogglePrivacyButton
           value={isPrivacyEnabled}
@@ -172,8 +172,8 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
   return (
     <StillWatching>
       <ConfirmDialog
-        title="Update Preset"
-        description="Are you sure you want to update this preset to the current location?"
+        title={t("update_preset")}
+        description={t("update_preset_confirmation")}
         action="Confirm"
         show={showPresetSaveConfirmation}
         onClose={() => setShowPresetSaveConfirmation(false)}
@@ -269,8 +269,8 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
                     shadow={!cannotSaveToPreset}
                     tooltip={
                       !cannotSaveToPreset
-                        ? "Save current position to selected preset"
-                        : "Change camera position to update preset"
+                        ? t("save_current_position_to_preset")
+                        : t("change_camera_position_and_update_preset")
                     }
                     tooltipClassName="translate-x-3 translate-y-8 text-xs"
                     className="ml-1"
@@ -281,7 +281,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
                 )}
               </>
             ) : (
-              <span>loading presets...</span>
+              <span>{t("loading_preset") + "..."}</span>
             )}
           </div>
         </CameraFeed>

diff --git a/src/Locale/en.json b/src/Locale/en.json
@@ -1022,5 +1022,21 @@
   "date_of_result": "Covid confirmation date",
   "is_vaccinated": "Whether vaccinated",
   "consultation_not_filed": "You have not filed any consultation for this patient yet.",
-  "consultation_not_filed_description": "Please file a consultation for this patient to continue."
+  "consultation_not_filed_description": "Please file a consultation for this patient to continue.",
+  "camera_locking_error": "An error occurred while locking the camera",
+  "need_camera_access": "Need access to move camera?",
+  "request_camera_access_error": "An error occurred while requesting access",
+  "request_access": "Request Access",
+  "enable_privacy": "Enable Privacy",
+  "disable_privacy": "Disable Privacy",
+  "privacy_enabled_tooltip": "Privacy is enabled. Click to disable privacy",
+  "privacy_disabled_tooltip": "Privacy is disabled. Click to enable privacy",
+  "no_bed_or_asset_linked": "No bed/asset linked allocated",
+  "camera_feed_disabled_due_to_privacy": "The camera feed is currently disabled due to privacy settings.",
+  "update_preset": "Update Preset",
+  "update_preset_confirmation": "Are you sure you want to update this preset to the current location?",
+  "save_current_position_to_preset": "Save current position to selected preset",
+  "change_camera_position_and_update_preset": "Change camera position to update preset",
+  "loading_preset": "Loading Preset",
+  "retry": "Retry"
 }