Added keyboard shortcut to delete selected row

ransome1 · Oct 27, 2023 · 4798349 · 4798349
1 parent 7578703
commit 4798349
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -156,7 +156,7 @@
     "webpack-merge": "^5.9.0"
   },
   "build": {
-    "buildVersion": "28",
+    "buildVersion": "29",
     "asar": true,
     "asarUnpack": "**\\*.{node,dll}",
     "files": [

diff --git a/src/main/util.tsx b/src/main/util.tsx
@@ -32,6 +32,14 @@ export interface InputProps {
   onKeyDown: (event: React.KeyboardEvent) => void;
 }
 
+export interface PromptItem {
+    id: string,
+    todoObject: TodoObject,
+    headline: typeof i18n.t,
+    text: typeof i18n.t,
+    label: typeof i18n.t,
+  }
+
 export function resolveHtmlPath(htmlFileName: string): string {
   try {
     if (process.env.NODE_ENV === 'development') {

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -14,9 +14,10 @@ import ToolBar from './ToolBar';
 import ContextMenu from './ContextMenu';
 import { I18nextProvider } from 'react-i18next';
 import { i18n } from './LanguageSelector';
-import { Sorting, Headers, File, TodoObject, Attributes, Filters, TranslatedAttributes } from '../main/util';
+import { Sorting, Headers, File, TodoObject, Attributes, Filters, TranslatedAttributes, ContextMenuItem } from '../main/util';
 import Settings from './Settings';
 import { translatedAttributes } from './Shared';
+import Prompt from './Prompt';
 import './App.scss';
 
 const { ipcRenderer, store } = window.api;
@@ -43,9 +44,10 @@ const App = () => {
   const [showFileTabs, setShowFileTabs] = useState<boolean>(store.get('showFileTabs'));
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [contextMenuPosition, setContextMenuPosition] = useState(null);
-  const [contextMenuItems, setContextMenuItems] = useState([]);
+  const [contextMenuItems, setContextMenuItems] = useState<ContextMenuItem | []>([]);
   const [attributeMapping, setAttributeMapping] = useState<TranslatedAttributes>(translatedAttributes(i18n.t) || {});
   const [textFieldValue, setTextFieldValue] = useState<string | null>(null);
+  const [promptItem, setPromptItem] = useState<PromptItem | null>(null);
 
   const searchFieldRef = useRef(null);
 
@@ -95,6 +97,24 @@ const App = () => {
     if(typeof filePath === 'string') ipcRenderer.send('droppedFile', filePath);
   };
 
+  const handlePromptConfirm = (item: ContextMenuItem) => {
+    const { id, todoObject, index } = item;
+    switch (id) {
+      case 'delete':
+        ipcRenderer.send('removeLineFromFile', todoObject?.id);
+        break;
+      case 'removeFile':
+        ipcRenderer.send('removeFile', index);
+        break;
+      default:
+        setContextMenuItems(null);
+    }
+  };
+
+  const handlePromptClose = () => {
+    setPromptItem(null);
+  };  
+
   const handleDragOver = (event: Event) => {
     event.preventDefault();
   };
@@ -148,6 +168,10 @@ const App = () => {
     store.set('isSearchOpen', isSearchOpen)
   }, [isSearchOpen]);
 
+  useEffect(() => {
+    setContextMenuItems(null);
+  }, [promptItem]);
+
   useEffect(() => {
     store.set('', isNavigationOpen)
   }, [isNavigationOpen]);
@@ -255,6 +279,7 @@ const App = () => {
               contextMenuItems={contextMenuItems}
               setContextMenuItems={setContextMenuItems}
               setTextFieldValue={setTextFieldValue}
+              setPromptItem={setPromptItem}
             />
             <SplashScreen
               screen={splashScreen}
@@ -282,14 +307,17 @@ const App = () => {
           zoom={zoom}
           setZoom={setZoom}
         />
-        <ContextMenu
-          contextMenuPosition={contextMenuPosition}
-          setContextMenuPosition={setContextMenuPosition}
-          contextMenuItems={contextMenuItems}
-          setContextMenuItems={setContextMenuItems}
-          setSnackBarSeverity={setSnackBarSeverity}
-          setSnackBarContent={setSnackBarContent}
-        />
+        {contextMenuItems && (
+          <ContextMenu
+            contextMenuPosition={contextMenuPosition}
+            setContextMenuPosition={setContextMenuPosition}
+            contextMenuItems={contextMenuItems}
+            setContextMenuItems={setContextMenuItems}
+            setSnackBarSeverity={setSnackBarSeverity}
+            setSnackBarContent={setSnackBarContent}
+            setPromptItem={setPromptItem}
+          />
+        )}
         <Snackbar
           open={snackBarOpen}
           onClose={handleAlertClose}
@@ -305,6 +333,16 @@ const App = () => {
           setSnackBarSeverity={setSnackBarSeverity}
           setSnackBarContent={setSnackBarContent}
         />
+        {promptItem && (
+          <Prompt
+            open={true}
+            onClose={handlePromptClose}
+            onConfirm={() => handlePromptConfirm(promptItem)}
+            headline={promptItem.headline || ''}
+            text={promptItem.text || ''}
+            buttonText={promptItem.label}
+          />
+        )}
       </ThemeProvider>
     </I18nextProvider>
   );

diff --git a/src/renderer/ContextMenu.tsx b/src/renderer/ContextMenu.tsx
@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Menu, MenuItem, Button, Tooltip } from '@mui/material';
 import FileOpenIcon from '@mui/icons-material/FileOpen';
-import Prompt from './Prompt';
-import { ContextMenuItem } from '../main/util';
+import { ContextMenuItem, PromptItem } from '../main/util';
 
 interface Props {
   contextMenuPosition: {
@@ -14,6 +13,7 @@ interface Props {
   setContextMenuItems: React.Dispatch<React.SetStateAction<ContextMenuItem[]>>;
   setSnackBarSeverity: React.Dispatch<React.SetStateAction<string>>;
   setSnackBarContent: React.Dispatch<React.SetStateAction<string>>;
+  setPromptItem: React.Dispatch<React.SetStateAction<PromptItem>>;
 }
 
 const { ipcRenderer } = window.api;
@@ -25,54 +25,27 @@ const ContextMenu: React.FC<Props> = ({
   setContextMenuItems,
   setSnackBarSeverity,
   setSnackBarContent,
+  setPromptItem,
 }) => {
-  const [promptItem, setPromptItem] = useState<ContextMenuItem | null>(null);
-
-  const handleCloseContextMenu = () => {
-    setContextMenuPosition(null);
-    setContextMenuItems([]);
-  };
-
-  const handlePromptClose = () => {
-    setPromptItem(null);
-    handleCloseContextMenu();
-  };
-
   const handleContextMenuClick = (item: ContextMenuItem) => {
     const { id, todoObject, index} = item;
-
     switch (id) {
       case 'delete':
         setPromptItem(item);
         break;
       case 'copy':
-        handleCloseContextMenu();
+        setContextMenuItems(null);
         ipcRenderer.send('saveToClipboard', todoObject?.string);
         break;
       case 'removeFile':
         setPromptItem(item);
         break;
       case 'revealFile':
-        handleCloseContextMenu();
+        setContextMenuItems(null);
         ipcRenderer.send('revealFile', index);
         break;
       default:
-        handleCloseContextMenu();
-    }
-  };
-
-  const handlePromptConfirm = (item: ContextMenuItem) => {
-    const { id, todoObject, index } = item;
-
-    switch (id) {
-      case 'delete':
-        ipcRenderer.send('removeLineFromFile', todoObject?.id);
-        break;
-      case 'removeFile':
-        ipcRenderer.send('removeFile', index);
-        break;
-      default:
-        handleCloseContextMenu();
+        setContextMenuItems(null);
     }
   };
 
@@ -97,11 +70,11 @@ const ContextMenu: React.FC<Props> = ({
     <>
       <Menu
         open={Boolean(contextMenuPosition)}
-        onClose={handleCloseContextMenu}
+        onClose={() => setContextMenuItems(null)}
         anchorReference="anchorPosition"
         anchorPosition={contextMenuPosition || undefined}
       >
-        {contextMenuItems.map((item) => (
+        {contextMenuItems && contextMenuItems.map((item) => (
           <MenuItem key={item.id} onClick={() => handleContextMenuClick(item)}>
             {item.id === 'changeDoneFilePath' ? (
               <Tooltip placement='right' arrow title={item.doneFilePath || ''}>
@@ -115,16 +88,6 @@ const ContextMenu: React.FC<Props> = ({
           </MenuItem>
         ))}
       </Menu>
-      {promptItem && (
-        <Prompt
-          open={true}
-          onClose={handlePromptClose}
-          onConfirm={() => handlePromptConfirm(promptItem)}
-          headline={promptItem.headline || ''}
-          text={promptItem.text || ''}
-          buttonText={promptItem.label}
-        />
-      )}
     </>
   );
 };

diff --git a/src/renderer/DataGrid/Grid.tsx b/src/renderer/DataGrid/Grid.tsx
@@ -1,7 +1,7 @@
 import React, { useState, KeyboardEvent } from 'react';
 import { List } from '@mui/material';
 import Row from './Row';
-import { TodoObject, Attributes, Filters, ContextMenuItem } from '../../main/util';
+import { TodoObject, Attributes, Filters, ContextMenuItem, PromptItem } from '../../main/util';
 import './Grid.scss';
 
 interface TodoDataGridProps {
@@ -15,6 +15,7 @@ interface TodoDataGridProps {
   contextMenuItems: ContextMenuItem[];
   setContextMenuItems: (items: any[]) => void;
   setTodoObject: (todoObject: TodoObject) => void;
+  setPromptItem: PromptItem;
 }
 
 const TodoDataGrid: React.FC<TodoDataGridProps> = ({
@@ -28,6 +29,7 @@ const TodoDataGrid: React.FC<TodoDataGridProps> = ({
    contextMenuItems,
    setContextMenuItems,
    setTodoObject,
+   setPromptItem,
  }) => {
   const [visibleRowCount, setVisibleRowCount] = useState(50);
   const [loadMoreRows, setLoadMoreRows] = useState(true);
@@ -99,6 +101,7 @@ const TodoDataGrid: React.FC<TodoDataGridProps> = ({
           setContextMenuPosition={setContextMenuPosition}
           contextMenuItems={contextMenuItems}
           setContextMenuItems={setContextMenuItems}
+          setPromptItem={setPromptItem}
         />
       ))}
     </List>