diff --git a/web/components/routes/link/LinkRoute.tsx b/web/components/routes/link/LinkRoute.tsx index a3a645d7..e5bde331 100644 --- a/web/components/routes/link/LinkRoute.tsx +++ b/web/components/routes/link/LinkRoute.tsx @@ -1,43 +1,53 @@ "use client" -import React, { useEffect, useState, useCallback } from "react" +import React, { useEffect, useState, useCallback, useRef } from "react" import { LinkHeader } from "@/components/routes/link/header" import { LinkList } from "@/components/routes/link/list" import { LinkManage } from "@/components/routes/link/manage" import { useQueryState } from "nuqs" import { atom, useAtom } from "jotai" -import { linkEditIdAtom } from "@/store/link" import { LinkBottomBar } from "./bottom-bar" import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette" export const isDeleteConfirmShownAtom = atom(false) export function LinkRoute(): React.ReactElement { - const [, setEditId] = useAtom(linkEditIdAtom) const [nuqsEditId] = useQueryState("editId") const [activeItemIndex, setActiveItemIndex] = useState(null) const [isCommandPaletteOpen] = useAtom(commandPaletteOpenAtom) const [isDeleteConfirmShown] = useAtom(isDeleteConfirmShownAtom) const [disableEnterKey, setDisableEnterKey] = useState(false) - - useEffect(() => { - setEditId(nuqsEditId) - }, [nuqsEditId, setEditId]) + const timeoutRef = useRef(null) const handleCommandPaletteClose = useCallback(() => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + setDisableEnterKey(true) - setTimeout(() => setDisableEnterKey(false), 100) + timeoutRef.current = setTimeout(() => { + setDisableEnterKey(false) + timeoutRef.current = null + }, 100) }, []) useEffect(() => { - if (!isCommandPaletteOpen) { + if (isDeleteConfirmShown || isCommandPaletteOpen) { + setDisableEnterKey(true) + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + timeoutRef.current = null + } + } else if (!isCommandPaletteOpen) { handleCommandPaletteClose() } - }, [isCommandPaletteOpen, handleCommandPaletteClose]) - useEffect(() => { - setDisableEnterKey(isDeleteConfirmShown || isCommandPaletteOpen) - }, [isDeleteConfirmShown, isCommandPaletteOpen]) + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + } + }, [isDeleteConfirmShown, isCommandPaletteOpen, handleCommandPaletteClose]) return (
diff --git a/web/components/routes/link/list.tsx b/web/components/routes/link/list.tsx index ac68e6bc..f15a9ca6 100644 --- a/web/components/routes/link/list.tsx +++ b/web/components/routes/link/list.tsx @@ -167,6 +167,7 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex return newIndex }) } else if (e.key === "Enter" && !disableEnterKey) { + console.log("Enter key pressed", { activeItemIndex, sortedLinks, disableEnterKey }) e.preventDefault() if (activeItemIndex !== null) { const activeLink = sortedLinks[activeItemIndex] diff --git a/web/components/routes/link/partials/link-item.tsx b/web/components/routes/link/partials/link-item.tsx index e79f5d7e..43b53127 100644 --- a/web/components/routes/link/partials/link-item.tsx +++ b/web/components/routes/link/partials/link-item.tsx @@ -48,16 +48,6 @@ export const LinkItem: React.FC = ({ [transform, transition, isDragging] ) - const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - e.preventDefault() - setEditId(personalLink.id) - } - }, - [setEditId, personalLink.id] - ) - const handleSuccess = useCallback(() => setEditId(null), [setEditId]) const handleOnClose = useCallback(() => setEditId(null), [setEditId]) const handleRowDoubleClick = useCallback(() => setEditId(personalLink.id), [setEditId, personalLink.id]) @@ -89,7 +79,6 @@ export const LinkItem: React.FC = ({ tabIndex={0} onFocus={() => setActiveItemIndex(index)} onBlur={() => setActiveItemIndex(null)} - onKeyDown={handleKeyDown} className={cn( "relative cursor-default outline-none", "grid grid-cols-[auto_1fr_auto] items-center gap-x-2 py-2 max-lg:px-4 sm:px-5 sm:py-2",