From e841a1c2cc56c673114985550dc4df3e9a006a2d Mon Sep 17 00:00:00 2001 From: Aslam H Date: Mon, 9 Sep 2024 19:25:01 +0700 Subject: [PATCH] fix(link): delete link should disabled all key outside confirm --- web/components/routes/link/LinkRoute.tsx | 9 ++++- web/components/routes/link/bottom-bar.tsx | 23 +++---------- .../routes/link/hooks/use-link-actions.ts | 30 +++++++++++++++++ web/components/routes/link/list.tsx | 33 +++++++------------ 4 files changed, 54 insertions(+), 41 deletions(-) create mode 100644 web/components/routes/link/hooks/use-link-actions.ts diff --git a/web/components/routes/link/LinkRoute.tsx b/web/components/routes/link/LinkRoute.tsx index 31a74a0a..a3a645d7 100644 --- a/web/components/routes/link/LinkRoute.tsx +++ b/web/components/routes/link/LinkRoute.tsx @@ -5,16 +5,19 @@ 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 { useAtom } from "jotai" +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(() => { @@ -32,6 +35,10 @@ export function LinkRoute(): React.ReactElement { } }, [isCommandPaletteOpen, handleCommandPaletteClose]) + useEffect(() => { + setDisableEnterKey(isDeleteConfirmShown || isCommandPaletteOpen) + }, [isDeleteConfirmShown, isCommandPaletteOpen]) + return (
diff --git a/web/components/routes/link/bottom-bar.tsx b/web/components/routes/link/bottom-bar.tsx index 151815b9..aaae2665 100644 --- a/web/components/routes/link/bottom-bar.tsx +++ b/web/components/routes/link/bottom-bar.tsx @@ -13,7 +13,7 @@ import { useAccount, useCoState } from "@/lib/providers/jazz-provider" import { PersonalLink } from "@/lib/schema" import { ID } from "jazz-tools" import { globalLinkFormExceptionRefsAtom } from "./partials/form/link-form" -import { toast } from "sonner" +import { useLinkActions } from "./hooks/use-link-actions" interface ToolbarButtonProps extends React.ComponentPropsWithoutRef { icon: keyof typeof icons @@ -66,6 +66,7 @@ export const LinkBottomBar: React.FC = () => { const plusBtnRef = useRef(null) const plusMoreBtnRef = useRef(null) + const { deleteLink } = useLinkActions() const confirm = useConfirm() useEffect(() => { @@ -107,24 +108,8 @@ export const LinkBottomBar: React.FC = () => { }) if (result) { - if (!me?.root.personalLinks) return - - const index = me.root.personalLinks.findIndex(item => item?.id === personalLink.id) - if (index === -1) { - console.error("Delete operation fail", { index, personalLink }) - return - } - - toast.success("Link deleted.", { - position: "bottom-right", - description: ( - - {personalLink.title} has been deleted. - - ) - }) - - me.root.personalLinks.splice(index, 1) + if (!me) return + deleteLink(me, personalLink) setEditId(null) } } diff --git a/web/components/routes/link/hooks/use-link-actions.ts b/web/components/routes/link/hooks/use-link-actions.ts new file mode 100644 index 00000000..98fb4428 --- /dev/null +++ b/web/components/routes/link/hooks/use-link-actions.ts @@ -0,0 +1,30 @@ +import * as React from "react" +import { toast } from "sonner" +import { LaAccount, PersonalLink } from "@/lib/schema" + +export const useLinkActions = () => { + const deleteLink = React.useCallback((me: LaAccount, link: PersonalLink) => { + if (!me.root?.personalLinks) return + + try { + const index = me.root.personalLinks.findIndex(item => item?.id === link.id) + if (index === -1) { + console.error("Delete operation fail", { index, link }) + return + } + + toast.success("Link deleted.", { + position: "bottom-right", + description: `${link.title} has been deleted.` + }) + + me.root.personalLinks.splice(index, 1) + } catch (error) { + toast.error("Failed to delete link") + } + }, []) + + return { + deleteLink + } +} diff --git a/web/components/routes/link/list.tsx b/web/components/routes/link/list.tsx index 63e6a38f..f7cefd82 100644 --- a/web/components/routes/link/list.tsx +++ b/web/components/routes/link/list.tsx @@ -22,7 +22,8 @@ import { useQueryState } from "nuqs" import { learningStateAtom } from "./header" import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette" import { useConfirm } from "@omit/react-confirm-dialog" -import { toast } from "sonner" +import { useLinkActions } from "./hooks/use-link-actions" +import { isDeleteConfirmShownAtom } from "./LinkRoute" interface LinkListProps { activeItemIndex: number | null @@ -32,9 +33,12 @@ interface LinkListProps { const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex, disableEnterKey }) => { const [isCommandPalettePpen] = useAtom(commandPaletteOpenAtom) + const [, setIsDeleteConfirmShown] = useAtom(isDeleteConfirmShownAtom) const [editId, setEditId] = useQueryState("editId") const [activeLearningState] = useAtom(learningStateAtom) const [draggingId, setDraggingId] = React.useState(null) + + const { deleteLink } = useLinkActions() const confirm = useConfirm() const { me } = useAccount({ @@ -83,10 +87,9 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex event => (event.metaKey || event.ctrlKey) && event.key === "Backspace", async () => { if (activeItemIndex !== null) { + setIsDeleteConfirmShown(true) const activeLink = sortedLinks[activeItemIndex] if (activeLink) { - console.log("Delete link", activeLink.toJSON()) - const result = await confirm({ title: `Delete "${activeLink.title}"?`, description: "This action cannot be undone.", @@ -102,25 +105,12 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex }) if (result) { - if (!me?.root.personalLinks) return + if (!me) return + deleteLink(me, activeLink) - const index = me.root.personalLinks.findIndex(item => item?.id === activeLink.id) - if (index === -1) { - console.error("Delete operation fail", { index, activeLink }) - return - } - - toast.success("Link deleted.", { - position: "bottom-right", - description: ( - - {activeLink.title} has been deleted. - - ) - }) - - me.root.personalLinks.splice(index, 1) - setEditId(null) + setIsDeleteConfirmShown(false) + } else { + setIsDeleteConfirmShown(false) } } } @@ -177,6 +167,7 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex return newIndex }) } else if (e.key === "Enter" && !disableEnterKey) { + console.log("Enter key pressed") e.preventDefault() if (activeItemIndex !== null) { const activeLink = sortedLinks[activeItemIndex]