Added conditional link handling based on whether device is Android or…

… not.
ohcnetwork · Jan 22, 2025 · c0109a7 · c0109a7
1 parent dfd83e9
commit c0109a7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -1099,7 +1099,6 @@
   "getting_location": "Getting Location...",
   "go_back": "Go Back",
   "goal": "Our goal is to continuously improve the quality and accessibility of public healthcare services using digital tools.",
-  "google_maps": "Google Maps",
   "granted_on": "Granted On",
   "has_allergies": "Has Allergies",
   "has_domestic_healthcare_support": "Has domestic healthcare support?",
@@ -1963,6 +1962,7 @@
   "show_all_notifications": "Show All",
   "show_all_slots": "Show all slots",
   "show_default_presets": "Show Default Presets",
+  "show_on_maps": "Show On Maps",
   "show_patient_presets": "Show Patient Presets",
   "show_unread_notifications": "Show Unread",
   "showing_all_appointments": "Showing all appointments",

diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
@@ -93,6 +93,16 @@ function _isAppleDevice() {
  */
 export const isAppleDevice = _isAppleDevice();
 
+/**
+ * Referred from: https://stackoverflow.com/questions/6031412/detect-android-phone-via-javascript-jquery
+ * @returns `true` if device is Android, else `false`
+ */
+function _isAndroidDevice(): boolean {
+  return /android/i.test(navigator.userAgent);
+}
+
+export const isAndroidDevice = _isAndroidDevice();
+
 /**
  * Conditionally concatenate classes. An alternate replacement for `clsx`.
  *

diff --git a/src/components/Facility/FacilityHome.tsx b/src/components/Facility/FacilityHome.tsx
@@ -1,5 +1,5 @@
 import careConfig from "@careConfig";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Hospital,
   MapPin,
@@ -38,6 +38,7 @@ import request from "@/Utils/request/request";
 import uploadFile from "@/Utils/request/uploadFile";
 import { getAuthorizationHeader } from "@/Utils/request/utils";
 import { sleep } from "@/Utils/utils";
+import { isAndroidDevice } from "@/Utils/utils";
 import EditFacilitySheet from "@/pages/Organization/components/EditFacilitySheet";
 import { FacilityData } from "@/types/facility/facility";
 import type {
@@ -94,6 +95,7 @@ const renderGeoOrganizations = (geoOrg: Organization) => {
 };
 
 export const FacilityHome = ({ facilityId }: Props) => {
+  console.log(navigator.platform);
   const { t } = useTranslation();
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [editCoverImage, setEditCoverImage] = useState(false);
@@ -121,6 +123,29 @@ export const FacilityHome = ({ facilityId }: Props) => {
       },
     });
   };
+  const getMapsLink = (latitude: number, longitude: number) => {
+    return isAndroidDevice ? (
+      <a
+        className="text-sm text-primary flex items-center gap-1 w-max"
+        href={`geo:0,0?q=${latitude},${longitude}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {t("show_on_maps")}
+        <SquareArrowOutUpRight className="h-3 w-3" />
+      </a>
+    ) : (
+      <a
+        className="text-sm text-primary flex items-center gap-1 w-max"
+        href={`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {t("show_on_maps")}
+        <SquareArrowOutUpRight className="h-3 w-3" />
+      </a>
+    );
+  };
 
   const handleCoverImageUpload = async (file: File, onError: () => void) => {
     const formData = new FormData();
@@ -308,17 +333,12 @@ export const FacilityHome = ({ facilityId }: Props) => {
                             )}
                           </div>
                         )}
-                        {facilityData?.latitude && facilityData?.longitude && (
-                          <a
-                            className="text-sm text-primary flex items-center gap-1 w-max"
-                            href={`https://www.google.com/maps/search/?api=1&query=${facilityData.latitude},${facilityData.longitude}`}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {t("google_maps")}
-                            <SquareArrowOutUpRight className="h-3 w-3" />
-                          </a>
-                        )}
+                        {facilityData.latitude &&
+                          facilityData.longitude &&
+                          getMapsLink(
+                            facilityData.latitude,
+                            facilityData.longitude,
+                          )}
                       </div>
                     </div>