From a70f26e643c4d6d2e98534a1c0f9d03b8ca95032 Mon Sep 17 00:00:00 2001 From: JavidSumra <112365664+JavidSumra@users.noreply.github.com> Date: Thu, 9 Jan 2025 20:21:00 +0530 Subject: [PATCH] Remove Manual keyboard-shortcut handle (#9816) --- public/locale/en.json | 7 +++ src/components/Common/FilePreviewDialog.tsx | 28 +++--------- src/components/Patient/PatientIndex.tsx | 49 +++++++++------------ src/components/ui/sidebar.tsx | 21 +++------ 4 files changed, 41 insertions(+), 64 deletions(-) diff --git a/public/locale/en.json b/public/locale/en.json index eb59daa7444..67ac2188bd8 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -1265,6 +1265,8 @@ "no_notices_for_you": "No notices for you.", "no_observations": "No Observations", "no_ongoing_medications": "No Ongoing Medications", + "no_patient_record_found": "No Patient Records Found", + "no_patient_record_text": "No existing records found with this phone number. Would you like to register a new patient?", "no_patients": "No patients found", "no_patients_found": "No Patients Found", "no_patients_found_phone_number": "No patients found with this phone number. Please create a new patient to proceed with booking appointment.", @@ -1364,6 +1366,7 @@ "patient__social-profile": "Social Profile", "patient__volunteer-contact": "Volunteer Contact", "patient_address": "Patient Address", + "patient_birth_year_for_identity": "Please enter the patient's year of birth to verify their identity", "patient_body": "Patient Body", "patient_category": "Patient Category", "patient_consultation__admission": "Date of admission", @@ -1629,6 +1632,7 @@ "search_icd11_placeholder": "Search for ICD-11 Diagnoses", "search_investigation_placeholder": "Search Investigation & Groups", "search_medication": "Search Medication", + "search_patient_page_text": "Search for existing patients using their phone number or create a new patient record", "search_patients": "Search Patients", "search_resource": "Search Resource", "search_user": "Search User", @@ -1876,6 +1880,7 @@ "vaccinated": "Vaccinated", "vaccine_name": "Vaccine name", "valid_otp_found": "Valid OTP found, Navigating to Appointments", + "valid_year_of_birth": "Please enter a valid year of birth (YYYY)", "vehicle_preference": "Vehicle preference", "vendor_name": "Vendor Name", "ventilator_interface": "Respiratory Support Type", @@ -1885,6 +1890,7 @@ "ventilator_oxygen_modality": "Oxygen Modality", "ventilator_oxygen_modality_oxygen_rate": "Oxygen Flow Rate", "ventilator_spo2": "SpO₂", + "verify": "Verify", "verify_and_link": "Verify and Link", "verify_otp": "Verify OTP", "verify_otp_error": "Failed to verify OTP. Please try again later.", @@ -1892,6 +1898,7 @@ "verify_otp_success_login": "OTP has been verified successfully. Logging in.", "verify_patient": "Verify Patient", "verify_patient_identifier": "Please verify the patient identifier", + "verify_patient_identity": "Verify Patient Identity", "verify_using": "Verify Using", "video_call": "Video Call", "video_conference_link": "Video Conference Link", diff --git a/src/components/Common/FilePreviewDialog.tsx b/src/components/Common/FilePreviewDialog.tsx index 4d6709d427d..d9eb4db62b3 100644 --- a/src/components/Common/FilePreviewDialog.tsx +++ b/src/components/Common/FilePreviewDialog.tsx @@ -11,6 +11,7 @@ import { useState, } from "react"; import { useTranslation } from "react-i18next"; +import useKeyboardShortcut from "use-keyboard-shortcut"; import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; @@ -152,20 +153,11 @@ const FilePreviewDialog = (props: FilePreviewProps) => { : `rotate-${normalizedRotation}`; } - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if (!show) return; - if (e.key === "ArrowLeft" && index > 0) { - handleNext(index - 1); - } - if (e.key === "ArrowRight" && index < (uploadedFiles?.length || 0) - 1) { - handleNext(index + 1); - } - }; - - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [show, index, uploadedFiles]); + useKeyboardShortcut(["ArrowLeft"], () => index > 0 && handleNext(index - 1)); + useKeyboardShortcut( + ["ArrowRight"], + () => index < (uploadedFiles?.length || 0) - 1 && handleNext(index + 1), + ); return ( { uploadedFiles[index] && uploadedFiles[index].created_date && (

- Created on{" "} + {t("created_on")}{" "} {new Date( uploadedFiles[index].created_date!, ).toLocaleString("en-US", { @@ -235,9 +227,6 @@ const FilePreviewDialog = (props: FilePreviewProps) => { onClick={() => handleNext(index - 1)} disabled={index <= 0} aria-label="Previous file" - onKeyDown={(e) => - e.key === "ArrowLeft" && handleNext(index - 1) - } > @@ -288,9 +277,6 @@ const FilePreviewDialog = (props: FilePreviewProps) => { onClick={() => handleNext(index + 1)} disabled={index >= uploadedFiles.length - 1} aria-label="Next file" - onKeyDown={(e) => - e.key === "ArrowRight" && handleNext(index + 1) - } > diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx index 64b3480f925..ba416025b33 100644 --- a/src/components/Patient/PatientIndex.tsx +++ b/src/components/Patient/PatientIndex.tsx @@ -1,7 +1,9 @@ import { useMutation } from "@tanstack/react-query"; import { navigate } from "raviger"; import { useCallback, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import { toast } from "sonner"; +import useKeyboardShortcut from "use-keyboard-shortcut"; import { cn } from "@/lib/utils"; @@ -51,6 +53,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) { results: [], count: 0, }); + const { t } = useTranslation(); const handleCreatePatient = useCallback(() => { const queryParams = phoneNumber ? { phone_number: phoneNumber } : {}; @@ -60,6 +63,8 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) { }); }, [facilityId, phoneNumber]); + useKeyboardShortcut(["shift", "p"], handleCreatePatient); + function AddPatientButton({ outline }: { outline?: boolean }) { return ( - + diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx index b6ad223fbed..c3d5eb952ea 100644 --- a/src/components/ui/sidebar.tsx +++ b/src/components/ui/sidebar.tsx @@ -2,6 +2,7 @@ import { Slot } from "@radix-ui/react-slot"; import { VariantProps, cva } from "class-variance-authority"; import { PanelLeftClose, PanelRightClose } from "lucide-react"; import * as React from "react"; +import useKeyboardShortcut from "use-keyboard-shortcut"; import { cn } from "@/lib/utils"; @@ -19,6 +20,8 @@ import { import { useIsMobile } from "@/hooks/use-mobile"; +import { isAppleDevice } from "@/Utils/utils"; + const SIDEBAR_COOKIE_NAME = "sidebar:state"; const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const SIDEBAR_WIDTH = "16rem"; @@ -97,20 +100,10 @@ const SidebarProvider = React.forwardRef< }, [isMobile, setOpen, setOpenMobile]); // Adds a keyboard shortcut to toggle the sidebar. - React.useEffect(() => { - const handleKeyDown = (event: KeyboardEvent) => { - if ( - event.key === SIDEBAR_KEYBOARD_SHORTCUT && - (event.metaKey || event.ctrlKey) - ) { - event.preventDefault(); - toggleSidebar(); - } - }; - - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [toggleSidebar]); + useKeyboardShortcut( + [isAppleDevice ? "Meta" : "Control", SIDEBAR_KEYBOARD_SHORTCUT], + toggleSidebar, + ); // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes.