create utility function

ohcnetwork · Dec 16, 2024 · 6fb52c2 · 6fb52c2
1 parent da298f2
commit 6fb52c2
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 19 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -1041,6 +1041,7 @@
   "not_specified": "Not Specified",
   "notes": "Notes",
   "notes_placeholder": "Type your Notes",
+  "nothing_to_copy": "Nothing To Copy here!",
   "notice_board": "Notice Board",
   "notification_cancelled": "Notification cancelled",
   "notification_permission_denied": "Notification permission denied",
@@ -1139,6 +1140,7 @@
   "personal_information_note_self": "View or update your personal information",
   "personal_information_note_view": "View user's personal information",
   "phone": "Phone",
+  "phone_copy_failed": "Phone Number Copy Failed",
   "phone_no": "Phone no.",
   "phone_number": "Phone Number",
   "phone_number_at_current_facility": "Phone Number of Contact person at current Facility",

diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
@@ -1,8 +1,11 @@
+import { useState } from "react";
+
 import { PatientModel } from "@/components/Patient/models";
 
 import { AREACODES, IN_LANDLINE_AREA_CODES } from "@/common/constants";
 import phoneCodesJson from "@/common/static/countryPhoneAndFlags.json";
 
+import * as Notification from "@/Utils/Notifications";
 import dayjs from "@/Utils/dayjs";
 
 interface ApacheParams {
@@ -561,3 +564,30 @@ export function omitBy<T extends Record<string, unknown>>(
     Object.entries(obj).filter(([_, value]) => !predicate(value)),
   ) as Partial<T>;
 }
+
+export const useClipboard = () => {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async (
+    text: string,
+    successMsg: string,
+    errorMsg: string,
+    iconResetDuration = 2500,
+  ) => {
+    if (!text) {
+      Notification.Error({ msg: "Nothing To Copy" });
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      Notification.Success({ msg: successMsg });
+      setTimeout(() => setCopied(false), iconResetDuration);
+    } catch (err) {
+      Notification.Error({ msg: errorMsg });
+    }
+  };
+
+  return { copied, copyToClipboard };
+};
diff --git a/src/components/Facility/DoctorVideoSlideover.tsx b/src/components/Facility/DoctorVideoSlideover.tsx
@@ -13,7 +13,6 @@ import useAuthUser from "@/hooks/useAuthUser";
 
 import { triggerGoal } from "@/Integrations/Plausible";
 import { PLUGIN_Component } from "@/PluginEngine";
-import * as Notification from "@/Utils/Notifications";
 import { Warn } from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
@@ -22,6 +21,7 @@ import {
   formatName,
   isUserOnline,
   relativeTime,
+  useClipboard,
 } from "@/Utils/utils";
 
 const UserGroups = {
@@ -241,23 +241,7 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
   }
 
   const { t } = useTranslation();
-  const [copied, setCopied] = useState(false);
-  const handleCopy = async (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-  ) => {
-    e.stopPropagation();
-    await navigator.clipboard.writeText(user?.alt_phone_number || "");
-
-    Notification.Success({
-      msg: t("phone_number_copied"),
-    });
-
-    setCopied(true);
-
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
-  };
+  const { copied, copyToClipboard } = useClipboard();
 
   return (
     <div
@@ -315,7 +299,12 @@ function UserListItem({ user }: { user: UserAnnotatedWithGroup }) {
                 role="button"
                 href="#"
                 onClick={(e) => {
-                  handleCopy(e);
+                  e.stopPropagation();
+                  copyToClipboard(
+                    user?.alt_phone_number || "",
+                    t("phone_number_copied"),
+                    t("phone_copy_failed"),
+                  );
                 }}
               >
                 <span className="tooltip" id="copy-phoneicon">