Skip to content

Commit

Permalink
Remove Manual keyboard-shortcut handle (#9816)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JavidSumra
JavidSumra authored Jan 9, 2025
1 parent 12e0938 commit a70f26e
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 64 deletions.
7 changes: 7 additions & 0 deletions public/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -1885,13 +1890,15 @@
"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.",
"verify_otp_success": "OTP has been verified successfully.",
"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",
Expand Down
28 changes: 7 additions & 21 deletions src/components/Common/FilePreviewDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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 (
<DialogModal
Expand Down Expand Up @@ -199,7 +191,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
uploadedFiles[index] &&
uploadedFiles[index].created_date && (
<p className="mt-1 text-sm text-gray-600">
Created on{" "}
{t("created_on")}{" "}
{new Date(
uploadedFiles[index].created_date!,
).toLocaleString("en-US", {
Expand Down Expand Up @@ -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)
}
>
<CareIcon icon="l-arrow-left" className="h-4 w-4" />
</Button>
Expand Down Expand Up @@ -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)
}
>
<CareIcon icon="l-arrow-right" className="h-4 w-4" />
</Button>
Expand Down
49 changes: 20 additions & 29 deletions src/components/Patient/PatientIndex.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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 } : {};
Expand All @@ -60,6 +63,8 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
});
}, [facilityId, phoneNumber]);

useKeyboardShortcut(["shift", "p"], handleCreatePatient);

function AddPatientButton({ outline }: { outline?: boolean }) {
return (
<Button
Expand All @@ -68,7 +73,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
onClick={handleCreatePatient}
>
<CareIcon icon="l-plus" className="h-4 w-4" />
Add New Patient
{t("add_new_patient")}
<kbd
className={cn(
"hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex",
Expand All @@ -87,7 +92,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
{
key: "phone_number",
type: "phone" as const,
placeholder: "Search by phone number",
placeholder: t("search_by_phone_number"),
value: phoneNumber,
shortcutKey: "p",
},
Expand Down Expand Up @@ -122,7 +127,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {

const handleVerify = () => {
if (!selectedPatient || !yearOfBirth || yearOfBirth.length !== 4) {
toast.error("Please enter a valid year of birth (YYYY)");
toast.error(t("valid_year_of_birth"));
return;
}

Expand All @@ -141,18 +146,6 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
}
}, [phoneNumber, listPatients]);

useEffect(() => {
function handleKeyPress(event: KeyboardEvent) {
if (event.shiftKey && (event.key === "p" || event.key === "P")) {
event.preventDefault();
handleCreatePatient();
}
}

window.addEventListener("keydown", handleKeyPress);
return () => window.removeEventListener("keydown", handleKeyPress);
}, [handleCreatePatient]);

return (
<div>
<div className="container max-w-5xl mx-auto py-6">
Expand All @@ -162,11 +155,10 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
<div className="space-y-6 mt-6">
<div className="text-center space-y-2">
<h1 className="text-3xl font-bold tracking-tight">
Search Patients
{t("search_patients")}
</h1>
<p className="text-muted-foreground">
Search for existing patients using their phone number or create a
new patient record
{t("search_patient_page_text")}
</p>
</div>

Expand All @@ -190,11 +182,10 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
<div>
<div className="flex flex-col items-center justify-center py-10 text-center">
<h3 className="text-lg font-semibold">
No Patient Records Found
{t("no_patient_record_found")}
</h3>
<p className="text-sm text-muted-foreground mb-6">
No existing records found with this phone number.
Would you like to register a new patient?
{t("no_patient_record_text")}
</p>
<AddPatientButton outline />
</div>
Expand All @@ -205,10 +196,10 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
<TableHeader>
<TableRow>
<TableHead className="w-[300px]">
Patient Name
{t("patient_name")}
</TableHead>
<TableHead>Phone Number</TableHead>
<TableHead>Gender</TableHead>
<TableHead>{t("phone_number")}</TableHead>
<TableHead>{t("gender")}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
Expand Down Expand Up @@ -246,15 +237,15 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
<Dialog open={verificationOpen} onOpenChange={setVerificationOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Verify Patient Identity</DialogTitle>
<DialogTitle>{t("verify_patient_identity")}</DialogTitle>
<DialogDescription>
Please enter the patient's year of birth to verify their identity
{t("patient_birth_year_for_identity")}
</DialogDescription>
</DialogHeader>
<div className="py-4">
<Input
type="text"
placeholder="Year of Birth (YYYY)"
placeholder={`${t("year_of_birth")} (YYYY)`}
value={yearOfBirth}
onChange={(e) => {
const value = e.target.value;
Expand All @@ -269,9 +260,9 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
variant="outline"
onClick={() => setVerificationOpen(false)}
>
Cancel
{t("cancel")}
</Button>
<Button onClick={handleVerify}>Verify</Button>
<Button onClick={handleVerify}>{t("verify")}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
Expand Down
21 changes: 7 additions & 14 deletions src/components/ui/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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";
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit a70f26e

Please sign in to comment.