yoginth.com / hey
Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
fork atom

refactor: use useHotkeys in LightBox component (#5895)

authored by yoginth.com and committed by

GitHub 3eceb85f a79a0000

+9 -23
+9 -23
apps/web/src/components/Shared/UI/LightBox.tsx
··· 1 1 import { Dialog, DialogPanel } from "@headlessui/react"; 2 2 import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/solid"; 3 3 import { memo, useEffect, useMemo, useState } from "react"; 4 + import { useHotkeys } from "react-hotkeys-hook"; 4 5 import { Spinner } from "@/components/Shared/UI"; 5 6 import cn from "@/helpers/cn"; 6 7 ··· 32 33 } 33 34 }, [show, initialIndex]); 34 35 35 - useEffect(() => { 36 - if (!show) return; 37 - 38 - const handleKeyDown = (e: KeyboardEvent) => { 39 - if (e.key === "Escape") { 40 - onClose(); 41 - } else if (e.key === "ArrowRight") { 42 - setCurrentIndex((prev) => Math.min(prev + 1, images.length - 1)); 43 - setIsLoading(true); 44 - } else if (e.key === "ArrowLeft") { 45 - setCurrentIndex((prev) => Math.max(prev - 1, 0)); 46 - setIsLoading(true); 47 - } 48 - }; 49 - 50 - window.addEventListener("keydown", handleKeyDown); 51 - return () => window.removeEventListener("keydown", handleKeyDown); 52 - }, [show, onClose, images.length]); 53 - 54 - const goToNext = () => { 36 + const handleNext = () => { 55 37 setCurrentIndex((prev) => { 56 38 const next = Math.min(prev + 1, images.length - 1); 57 39 if (next !== prev) setIsLoading(true); ··· 59 41 }); 60 42 }; 61 43 62 - const goToPrevious = () => { 44 + const handlePrevious = () => { 63 45 setCurrentIndex((prev) => { 64 46 const prevIndex = Math.max(prev - 1, 0); 65 47 if (prevIndex !== prev) setIsLoading(true); ··· 67 49 }); 68 50 }; 69 51 52 + useHotkeys("escape", onClose, { enabled: show }); 53 + useHotkeys("arrowright", handleNext, { enabled: show }); 54 + useHotkeys("arrowleft", handlePrevious, { enabled: show }); 55 + 70 56 return ( 71 57 <Dialog className="relative z-50" onClose={onClose} open={show}> 72 58 <div ··· 88 74 { "cursor-not-allowed opacity-50": currentIndex === 0 } 89 75 )} 90 76 disabled={currentIndex === 0} 91 - onClick={goToPrevious} 77 + onClick={handlePrevious} 92 78 type="button" 93 79 > 94 80 <ArrowLeftIcon className="size-6" /> ··· 102 88 } 103 89 )} 104 90 disabled={currentIndex === images.length - 1} 105 - onClick={goToNext} 91 + onClick={handleNext} 106 92 type="button" 107 93 > 108 94 <ArrowRightIcon className="size-6" />