fix: update notes smoothly

1 files changed, 165 insertions, 148 deletions

diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx
index 442b956..228a780 100644
--- a/components/contextmenu.tsx
+++ b/components/contextmenu.tsx
@@ -1,106 +1,120 @@
 import React, { useRef } from 'react'
 import {
-    Box,
-    Menu,
-    MenuItem,
-    MenuList,
-    MenuGroup,
-    MenuItemOption,
-    MenuOptionGroup,
-    Heading,
-    MenuDivider,
-    Modal,
-    ModalOverlay,
-    ModalContent,
-    ModalHeader,
-    ModalFooter,
-    ModalBody,
-    ModalCloseButton,
-    useDisclosure,
-    Button,
-    PopoverTrigger,
-    PopoverContent,
-    Popover,
-    Flex,
-    PopoverBody,
-    PopoverCloseButton,
-    PopoverArrow,
-    PopoverHeader,
-    PopoverFooter,
-    Portal,
-    Text,
-    VStack,
+  Box,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuGroup,
+  MenuItemOption,
+  MenuOptionGroup,
+  Heading,
+  MenuDivider,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+  PopoverTrigger,
+  PopoverContent,
+  Popover,
+  Flex,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverArrow,
+  PopoverHeader,
+  PopoverFooter,
+  Portal,
+  Text,
+  VStack,
 } from '@chakra-ui/react'
 import {
-    DeleteIcon,
-    EditIcon,
-    CopyIcon,
-    AddIcon,
-    ViewIcon,
-    ExternalLinkIcon,
-    ChevronRightIcon,
-    PlusSquareIcon,
+  DeleteIcon,
+  EditIcon,
+  CopyIcon,
+  AddIcon,
+  ViewIcon,
+  ExternalLinkIcon,
+  ChevronRightIcon,
+  PlusSquareIcon,
 } from '@chakra-ui/icons'
 
 import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
 
 export default interface ContextMenuProps {
-    background: Boolean
-    node?: OrgRoamNode
-    nodeType?: string
-    coordinates: number[]
-    handleLocal: (node: OrgRoamNode, add: string) => void
-    openNodeInEmacs: (node: OrgRoamNode) => void
-    menuClose: () => void
-    scope: { nodeIds: string[] }
-    deleteNodeInEmacs: (node: OrgRoamNode) => void
+  background: Boolean
+  node?: OrgRoamNode
+  nodeType?: string
+  coordinates: number[]
+  handleLocal: (node: OrgRoamNode, add: string) => void
+  openNodeInEmacs: (node: OrgRoamNode) => void
+  menuClose: () => void
+  scope: { nodeIds: string[] }
+  deleteNodeInEmacs: (node: OrgRoamNode) => void
 }
 
 export const ContextMenu = (props: ContextMenuProps) => {
-    const { background, node, nodeType, coordinates, handleLocal, menuClose, scope, openNodeInEmacs, deleteNodeInEmacs } = props
-    const { isOpen, onOpen, onClose } = useDisclosure()
-    const copyRef = useRef<any>()
-    return (
-        <>
-            <Box
-                position="absolute"
-                zIndex="overlay"
-                left={coordinates[0] + 10}
-                top={coordinates[1] - 10}
-                padding={5}
-            >
-                <Menu closeOnBlur={false} defaultIsOpen onClose={() => menuClose()}>
-                    <MenuList zIndex="overlay" bgColor="alt.100" borderColor="gray.500" maxWidth="xs">
-                        {node && (
-                            <>
-                                <Heading size="sm" isTruncated px={3} py={1}>
-                                    {node.title}
-                                </Heading>
-                                <MenuDivider borderColor="gray.500" />
-                            </>
-                        )}
-                        {scope.nodeIds.length !== 0 &&
-                            <>
-                                <MenuItem onClick={() => handleLocal(node!, "add")} icon={<PlusSquareIcon />}>
-                                    Expand local graph at node
-                                </MenuItem>
-                                <MenuItem onClick={() => handleLocal(node!, "replace")} icon={<ViewIcon />}>
-                                    Open local graph for this node
-                                </MenuItem>
-                            </>
-                        }
-                        {!node?.properties.FILELESS ? (
-                            <MenuItem icon={<EditIcon />} onClick={() => openNodeInEmacs(node as OrgRoamNode)}>Open in Emacs</MenuItem>
-                        ) : (
-                            <MenuItem icon={<AddIcon />}>Create node</MenuItem>
-                        )}
-                        {node?.properties.ROAM_REFS && (
-                            <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
-                        )}
-                        {scope.nodeIds.length === 0 &&
-                            <MenuItem icon={<ViewIcon />} onClick={() => handleLocal(node!, "replace")}>Open local graph</MenuItem>
-                        }
-                        {/* Doesn't work at the moment
+  const {
+    background,
+    node,
+    nodeType,
+    coordinates,
+    handleLocal,
+    menuClose,
+    scope,
+    openNodeInEmacs,
+    deleteNodeInEmacs,
+  } = props
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const copyRef = useRef<any>()
+  return (
+    <>
+      <Box
+        position="absolute"
+        zIndex="overlay"
+        left={coordinates[0] + 10}
+        top={coordinates[1] - 10}
+        padding={5}
+      >
+        <Menu closeOnBlur={false} defaultIsOpen onClose={() => menuClose()}>
+          <MenuList zIndex="overlay" bgColor="alt.100" borderColor="gray.500" maxWidth="xs">
+            {node && (
+              <>
+                <Heading size="sm" isTruncated px={3} py={1}>
+                  {node.title}
+                </Heading>
+                <MenuDivider borderColor="gray.500" />
+              </>
+            )}
+            {scope.nodeIds.length !== 0 && (
+              <>
+                <MenuItem onClick={() => handleLocal(node!, 'add')} icon={<PlusSquareIcon />}>
+                  Expand local graph at node
+                </MenuItem>
+                <MenuItem onClick={() => handleLocal(node!, 'replace')} icon={<ViewIcon />}>
+                  Open local graph for this node
+                </MenuItem>
+              </>
+            )}
+            {!node?.properties.FILELESS ? (
+              <MenuItem icon={<EditIcon />} onClick={() => openNodeInEmacs(node as OrgRoamNode)}>
+                Open in Emacs
+              </MenuItem>
+            ) : (
+              <MenuItem icon={<AddIcon />}>Create node</MenuItem>
+            )}
+            {node?.properties.ROAM_REFS && (
+              <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
+            )}
+            {scope.nodeIds.length === 0 && (
+              <MenuItem icon={<ViewIcon />} onClick={() => handleLocal(node!, 'replace')}>
+                Open local graph
+              </MenuItem>
+            )}
+            {/* Doesn't work at the moment
                             <MenuItem closeOnSelect={false} closeOnBlur={false}>
                             <Box _hover={{ bg: 'gray.200' }} width="100%">
                                 <Popover
@@ -129,63 +143,66 @@ export const ContextMenu = (props: ContextMenuProps) => {
                                 </Popover>
                             </Box>
                         </MenuItem> */}
-                        {node?.level === 0 &&
-                            <MenuItem
-                                closeOnSelect={false}
-                                icon={<DeleteIcon color="red.500" />}
-                                color="red.500"
-                                onClick={onOpen}
-                            >
-                                Permenantly delete note
-                            </MenuItem>
-                        }
-                    </MenuList>
-                </Menu>
-            </Box>
-            <Modal isCentered isOpen={isOpen} onClose={onClose}>
-                <ModalOverlay />
-                <ModalContent zIndex="popover" >
-                    <ModalHeader>Delete node?</ModalHeader>
-                    <ModalCloseButton />
-                    <ModalBody>
-                        <VStack
-                            spacing={4}
-                            display="flex"
-                            alignItems="flex-start">
-                            <Text>
-                                This will permanently delete your note:
-                            </Text>
-                            <Text fontWeight="bold">{node?.title}
-                            </Text>
-                            {node?.level !== 0 &&
-                                <Text>This will only delete the from this heading until but not including the next node.
-                                    Your parent file and all other nodes will not be deleted.</Text>}
-                            <Text>
-                                Are you sure you want to do continue?
-                            </Text>
-                        </VStack>
-                    </ModalBody>
-                    <ModalFooter>
-                        <Button mr={3} onClick={() => {
-                            console.log('closing')
-                            onClose()
-                        }}>
-                            Cancel
-                        </Button>
-                        <Button variant="link" colorScheme="red" ml={3}
-                            onClick={() => {
-                                console.log('aaaaa')
-                                deleteNodeInEmacs(node!)
-                                onClose()
-                            }}
-                        >
-                            Delete node
-                        </Button>
-                    </ModalFooter>
-                </ModalContent>
-            </Modal>
-        </>
-    )
+            {node?.level === 0 && (
+              <MenuItem
+                closeOnSelect={false}
+                icon={<DeleteIcon color="red.500" />}
+                color="red.500"
+                onClick={onOpen}
+              >
+                Permenantly delete note
+              </MenuItem>
+            )}
+          </MenuList>
+        </Menu>
+      </Box>
+      <Modal isCentered isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent zIndex="popover">
+          <ModalHeader>Delete node?</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <VStack spacing={4} display="flex" alignItems="flex-start">
+              <Text>This will permanently delete your note:</Text>
+              <Text fontWeight="bold">{node?.title}</Text>
+              {node?.level !== 0 && (
+                <Text>
+                  This will only delete the from this heading until but not including the next node.
+                  Your parent file and all other nodes will not be deleted.
+                </Text>
+              )}
+              <Text>Are you sure you want to do continue?</Text>
+            </VStack>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              mr={3}
+              onClick={() => {
+                console.log('closing')
+                onClose()
+                menuClose()
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="link"
+              colorScheme="red"
+              ml={3}
+              onClick={() => {
+                console.log('aaaaa')
+                deleteNodeInEmacs(node!)
+                onClose()
+                menuClose()
+              }}
+            >
+              Delete node
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
 }
 
 /* <Box>