Refactored configuration handling in order to reduce re-renderings

ransome1 · Feb 21, 2025 · c19c9f2 · c19c9f2
1 parent 015a697
commit c19c9f2
Show file tree

Hide file tree

Showing 15 changed files with 432 additions and 632 deletions.
diff --git a/.github/workflows/code-scan-update-mirror.yml b/.github/workflows/code-scan-update-mirror.yml
@@ -5,7 +5,7 @@ on:
       - '*'
 jobs:
   trigger-flathub_build:
-    name: Trigger Flathub build bot
+    name: Update commit id in Flathub repo
     runs-on: ubuntu-latest
     steps:
       - name: Trigger Flathub build

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sleek",
   "productName": "sleek",
-  "version": "2.0.17-rc.4",
+  "version": "2.0.17-rc.5",
   "description": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "synopsis": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "keywords": [
@@ -45,10 +45,10 @@
   "dependencies": {
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@mui/icons-material": "^6.4.4",
-    "@mui/material": "^6.4.4",
+    "@mui/icons-material": "^6.4.5",
+    "@mui/material": "^6.4.5",
     "@mui/system": "^6.4.0",
-    "@mui/x-date-pickers": "^7.26.0",
+    "@mui/x-date-pickers": "^7.27.0",
     "chokidar": "^4.0.3",
     "dayjs": "^1.11.13",
     "electron-store": "^10.0.0",
@@ -57,33 +57,33 @@
     "react": "^19.0.0",
     "react-autosuggest": "^10.1.0",
     "react-dom": "^19.0.0",
-    "react-i18next": "^15.3.0",
-    "react-markdown": "^9.0.1",
+    "react-i18next": "^15.4.1",
+    "react-markdown": "^10.0.0",
     "react-string-replace": "^1.1.1",
     "remark-gfm": "^4.0.1",
     "sugar": "^2.0.6"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config-prettier": "^3.0.0",
-    "@electron-toolkit/eslint-config-ts": "^2.0.0",
+    "@electron-toolkit/eslint-config-ts": "^3.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@types/node": "^22.13.2",
-    "@types/react": "^19.0.7",
-    "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/parser": "^8.24.0",
+    "@types/node": "^22.13.4",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/parser": "^8.24.1",
     "@vitejs/plugin-react": "^4.3.1",
     "electron": "^34.2.0",
     "electron-builder": "^25.1.8",
-    "electron-vite": "^2.3.0",
+    "electron-vite": "^3.0.0",
     "eslint": "^9.20.1",
     "eslint-plugin-react": "^7.34.3",
     "material-ui-popup-state": "^5.3.3",
     "peggy": "^4.2.0",
     "prettier": "^3.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sass": "^1.84.0",
+    "sass": "^1.85.0",
     "typescript": "^5.5.2",
-    "vite": "^6.1.0"
+    "vite": "^6.1.1"
   }
 }
diff --git a/src/main/config.tsx b/src/main/config.tsx
@@ -148,24 +148,53 @@ filter.onDidChange('attributes', () => {
   }
 })
 
-config.onDidAnyChange((settings) => {
+const rerender = {
+  'sorting': true,
+  'files': true,
+  'showCompleted': true,
+  'showHidden': true,
+  'fileSorting': true,
+  'thresholdDateInTheFuture': true,
+  'dueDateInTheFuture': true,
+  'sortCompletedLast': true,
+};
+
+function findObjectDifferences(oldObj, newObj) {
+  const differences = {};
+
+  for (const key in newObj) {
+    if (JSON.stringify(newObj[key]) !== JSON.stringify(oldObj[key])) {
+      differences[key] = {
+        oldValue: oldObj[key],
+        newValue: newObj[key],
+      };
+      if (rerender[key]) {
+        const requestedData = dataRequest(searchString)
+        mainWindow!.webContents.send('requestData', requestedData)
+        return false;
+      }
+    }
+  }
+  return differences;
+}
+
+config.onDidAnyChange((newValue, oldValue) => {
   try {
     if (mainWindow && mainWindow.webContents) {
-      mainWindow.webContents.send('settingsChanged', settings)
+      findObjectDifferences(oldValue, newValue);
+      mainWindow.webContents.send('settingsChanged', newValue)
     } else {
       console.warn('The window is not available, skipping setting change.')
     }
   } catch (error: any) {
     handleError(error)
   }
-})
+});
 
 config.onDidChange('files', (newValue: FileObject[] | undefined) => {
   try {
     if (newValue !== undefined) {
       createFileWatcher(newValue)
-      const requestedData = dataRequest(searchString)
-      mainWindow!.webContents.send('requestData', requestedData)
     }
   } catch (error: any) {
     handleError(error)

diff --git a/src/main/index.ts b/src/main/index.ts
@@ -226,7 +226,9 @@ app
   .on('before-quit', handleBeforeQuit)
   .on('activate', handleCreateWindow)
   .on('open-file', (event, path) => {
-    event.preventDefault()
-    handleOpenFile(path)
-  })
+    event.preventDefault();
+      setTimeout(() => {
+        handleOpenFile(path);
+      }, 1000);
+  });
 export { mainWindow, handleCreateWindow, eventListeners }
diff --git a/src/main/modules/IpcMain.tsx b/src/main/modules/IpcMain.tsx
@@ -130,14 +130,6 @@ function handleAddFile(event: IpcMainEvent, filePath: string): void {
   }
 }
 
-function handleDroppedFile(event: IpcMainEvent, filePath: string): void {
-  try {
-    addFile(filePath, null)
-  } catch (error: any) {
-    handleError(error)
-  }
-}
-
 function handleRevealInFileManager(event: IpcMainEvent, pathToReveal: string): void {
   try {
     shell.showItemInFolder(pathToReveal)
@@ -212,7 +204,6 @@ function removeEventListeners(): void {
   ipcMain.off('writeTodoToFile', handleWriteTodoToFile)
   ipcMain.off('archiveTodos', handleArchiveTodos)
   ipcMain.off('addFile', handleAddFile)
-  ipcMain.off('droppedFile', handleDroppedFile)
   ipcMain.off('saveToClipboard', handleSaveToClipboard)
   ipcMain.off('revealInFileManager', handleRevealInFileManager)
   ipcMain.off('removeLineFromFile', handleRemoveLineFromFile)
@@ -237,7 +228,6 @@ ipcMain.on('requestData', handleDataRequest)
 ipcMain.on('writeTodoToFile', handleWriteTodoToFile)
 ipcMain.on('archiveTodos', handleArchiveTodos)
 ipcMain.on('addFile', handleAddFile)
-ipcMain.on('droppedFile', handleDroppedFile)
 ipcMain.on('saveToClipboard', handleSaveToClipboard)
 ipcMain.on('revealInFileManager', handleRevealInFileManager)
 ipcMain.on('removeLineFromFile', handleRemoveLineFromFile)

diff --git a/src/renderer/Buttons.scss b/src/renderer/Buttons.scss
@@ -26,6 +26,9 @@ button {
         &:last-child {
           border-right: none;
         }
+        &:hover {
+        	background: Variables.$lighter-grey;
+        }
       }   
     }
   }
@@ -163,4 +166,16 @@ div[data-todotxt-attribute='priority'] {
         background: rgba(0, 0, 0, 0.35);
       }
     }
+	.MuiDialog-root {
+	  .MuiDialog-paper {
+	    .MuiDialogActions-root {
+	      button {
+	        &:hover {
+	        	color: white;
+	        	background: Variables.$dark-grey;
+	        }
+	      }   
+	    }
+	  }
+	}    
 }
diff --git a/src/renderer/Dialog/DatePicker.scss b/src/renderer/Dialog/DatePicker.scss
@@ -47,6 +47,10 @@
       border: inherit;
       background: Variables.$mid-grey;
     }
+    &.Mui-selected {
+      color: white;
+      background: Variables.$blue;
+    }
   }
 }
 .darkTheme {

diff --git a/src/renderer/Drawer/Filters.tsx b/src/renderer/Drawer/Filters.tsx
@@ -6,7 +6,7 @@ import Switch from '@mui/material/Switch'
 import HelpIcon from '@mui/icons-material/Help'
 import { withTranslation, WithTranslation } from 'react-i18next'
 import { i18n } from '../Settings/LanguageSelector'
-import { handleLinkClick, handleToggleClick } from '../Shared'
+import { handleLinkClick } from '../Shared'
 import './Filters.scss'
 
 const { store } = window.api
@@ -48,7 +48,7 @@ const DrawerFiltersComponent: React.FC<DrawerFiltersComponentProps> = ({ setting
                 <Switch
                   data-testid={`setting-toggle-${settingName}`}
                   checked={!!settings[settingName as keyof Settings]}
-                  onChange={(event) => handleToggleClick(settingName, event.target.checked, settingValue.rerender)}
+                  onChange={(event) => store.setConfig(settingName, event.target.checked)}
                   name={settingName}
                 />
               }

diff --git a/src/renderer/Drawer/Sorting.tsx b/src/renderer/Drawer/Sorting.tsx
@@ -11,7 +11,7 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
 import SortIcon from '@mui/icons-material/Sort'
 import { withTranslation, WithTranslation } from 'react-i18next'
 import { i18n } from '../Settings/LanguageSelector'
-import { translatedAttributes, handleToggleClick } from '../Shared'
+import { translatedAttributes } from '../Shared'
 import './Sorting.scss'
 
 const { store } = window.api
@@ -68,7 +68,7 @@ const DrawerSortingComponent: React.FC<DrawerSortingComponentProps> = ({ setting
               control={
                 <Switch
                   checked={settings[settingName as keyof Settings]}
-                  onChange={(event) => handleToggleClick(settingName, event.target.checked, settingValue.rerender)}
+                  onChange={(event) => store.setConfig(settingName, event.target.checked)}
                   name={settingName}
                 />
               }

diff --git a/src/renderer/IpcRenderer.tsx b/src/renderer/IpcRenderer.tsx
@@ -53,25 +53,13 @@ const IpcComponent: React.FC<IpcComponentProps> = ({
     }
   }
 
-  const handleDrop = (event: React.DragEvent<HTMLElement>): void => {
-    event.preventDefault()
-    const filePath = event.dataTransfer.files[0].path
-    if (typeof filePath === 'string') ipcRenderer.send('droppedFile', filePath)
-  }
-
-  const handleDragOver = (event: React.DragEvent<HTMLElement>): void => {
-    event.preventDefault()
-  }
-
   useEffect(() => {
     ipcRenderer.on('requestData', handleRequestedData)
     ipcRenderer.on('updateAttributeFields', handleUpdateAttributeFields)
     ipcRenderer.on('updateTodoObject', (todoObject: TodoObject) => setTodoObject(todoObject))
     ipcRenderer.on('responseFromMainProcess', handleResponse)
     ipcRenderer.on('settingsChanged', (settings: Settings) => setSettings(settings))
     ipcRenderer.on('isSettingsOpen', (isSettingsOpen: boolean) => setIsSettingsOpen(isSettingsOpen))
-    window.addEventListener('drop', handleDrop)
-    window.addEventListener('dragover', handleDragOver)
     return (): void => {
       ipcRenderer.off('requestData', handleRequestedData)
       ipcRenderer.off('updateAttributeFields', handleUpdateAttributeFields)
@@ -81,8 +69,6 @@ const IpcComponent: React.FC<IpcComponentProps> = ({
       ipcRenderer.off('isSettingsOpen', (isSettingsOpen: boolean) =>
         setIsSettingsOpen(isSettingsOpen)
       )
-      window.removeEventListener('drop', handleDrop)
-      window.removeEventListener('dragover', handleDragOver)
     }
   }, [])
 

diff --git a/src/renderer/Navigation.scss b/src/renderer/Navigation.scss
@@ -126,6 +126,9 @@
       }
       &.showNavigation {
         background: Variables.$darker-grey;
+        &:hover {
+          background: inherit;  
+        }
       }
     }
   }

diff --git a/src/renderer/Navigation.tsx b/src/renderer/Navigation.tsx
@@ -9,7 +9,6 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import li from '@mui/material/li'
 import { withTranslation, WithTranslation } from 'react-i18next'
 import { i18n } from './Settings/LanguageSelector'
-import { handleToggleClick } from './Shared'
 import './Navigation.scss'
 
 const { ipcRenderer, store } = window.api
@@ -61,8 +60,7 @@ const NavigationComponent: React.FC<NavigationComponentProps> = memo(
                 <AddIcon />
               </li>
               <li
-                //onClick={() => store.setConfig('isDrawerOpen', !settings.isDrawerOpen)}
-                onClick={() => handleToggleClick('isDrawerOpen', !settings.isDrawerOpen)}
+                onClick={() => store.setConfig('isDrawerOpen', !settings.isDrawerOpen)}
                 className={settings.isDrawerOpen ? 'active' : ''}
                 data-testid="navigation-button-toggle-drawer"
                 title={`${t('attributes')}, ${t('filters')}, ${t('sorting')}`}

diff --git a/src/renderer/Settings/Settings.tsx b/src/renderer/Settings/Settings.tsx
@@ -16,7 +16,7 @@ import Slider from '@mui/material/Slider'
 import HelpIcon from '@mui/icons-material/Help'
 import { withTranslation, WithTranslation } from 'react-i18next'
 import LanguageSelector, { i18n } from './LanguageSelector'
-import { handleLinkClick, handleToggleClick } from '../Shared'
+import { handleLinkClick } from '../Shared'
 import { darkTheme, lightTheme } from '../Themes'
 import './Settings.scss'
 
@@ -81,10 +81,6 @@ const visibleSettings: VisibleSettings = {
   }
 }
 
-// const handleChange = (settingName: string, value: string | boolean | number): void => {
-//   store.setConfig(settingName, value)
-// }
-
 interface SettingsComponentProps extends WithTranslation {
   isOpen: boolean
   onClose: () => void
@@ -157,7 +153,7 @@ const SettingsComponent: React.FC<SettingsComponentProps> = memo(({ isOpen, onCl
                   <Switch
                     data-testid={`setting-toggle-${settingName}`}
                     checked={settings[settingName as keyof Settings]}
-                    onChange={(event) => handleToggleClick(settingName, event.target.checked)}
+                    onChange={(event) => store.setConfig(settingName, event.target.checked)}
                     name={settingName}
                   />
                 }
@@ -192,7 +188,7 @@ const SettingsComponent: React.FC<SettingsComponentProps> = memo(({ isOpen, onCl
                   className={settingName}
                   label={t(`settings.${settingName}`)}
                   value={settings[settingName as keyof Settings]}
-                  onChange={(event) => handleToggleClick(settingName, event.target.value)}
+                  onChange={(event) => store.setConfig(settingName, event.target.value)}
                 >
                   {settingValue?.values?.map((value) => (
                     <MenuItem key={value} value={value}>
@@ -237,8 +233,7 @@ const SettingsComponent: React.FC<SettingsComponentProps> = memo(({ isOpen, onCl
                   }
                   min={settingValue.min}
                   max={settingValue.max}
-                  onChange={(_, value: number | number[]) => handleToggleClick(settingName, value)}
-                  //onChange={(event) => handleToggleClick(event, settingName, event.target.checked)}
+                  onChange={(_, value: number | number[]) => store.setConfig(settingName, event.target.checked)}
                 />
               </FormControl>
             ) : null

diff --git a/src/renderer/Shared.tsx b/src/renderer/Shared.tsx
@@ -67,15 +67,6 @@ export const handleReset = (): void => {
   store.setFilters('attributes', [])
 }
 
-export const handleToggleClick = (settingName: string, settingValue: boolean, rerender: boolean): void => {
-  if (settingName) {
-    store.setConfig(settingName, settingValue, rerender)
-    if(rerender) {
-      ipcRenderer.send('requestData')
-    }
-  }
-}
-
 export const handleLinkClick = (event: MouseEvent, url: string): void => {
   event.preventDefault()
   event.stopPropagation()