chore: app group optimizations (#1027)

app/assets/javascripts/Components/NotesOptions/AddTagOption.tsx

@@ -25,7 +25,7 @@ export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) =>
 
   const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
 
-  const toggleTagsMenu = () => {
+  const toggleTagsMenu = useCallback(() => {
     if (!isMenuOpen) {
       const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
       if (menuPosition) {
@@ -34,7 +34,7 @@ export const AddTagOption: FunctionComponent<Props> = observer(({ appState }) =>
     }
 
     setIsMenuOpen(!isMenuOpen)
-  }
+  }, [isMenuOpen])
 
   const recalculateMenuStyle = useCallback(() => {
     const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)

app/assets/javascripts/Components/NotesOptions/ChangeEditorOption.tsx

@@ -4,7 +4,7 @@ import { AppState } from '@/UIModels/AppState'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { IconType, SNComponent, SNNote } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { ChangeEditorMenu } from '@/Components/ChangeEditor/ChangeEditorMenu'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
@@ -48,7 +48,7 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
     setIsVisible(open)
   })
 
-  const toggleChangeEditorMenu = () => {
+  const toggleChangeEditorMenu = useCallback(() => {
     if (!isOpen) {
       const menuStyle = calculateSubmenuStyle(buttonRef.current)
       if (menuStyle) {
@@ -57,7 +57,7 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
     }
 
     setIsOpen(!isOpen)
-  }
+  }, [isOpen])
 
   useEffect(() => {
     if (isOpen) {

app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx

@@ -35,7 +35,7 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
 }) => {
   const [isRunning, setIsRunning] = useState(false)
 
-  const handleClick = async () => {
+  const handleClick = useCallback(async () => {
     if (isRunning) {
       return
     }
@@ -47,7 +47,7 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
     setIsRunning(false)
 
     reloadMenuGroup(group).catch(console.error)
-  }
+  }, [application, action, group, isRunning, note, reloadMenuGroup])
 
   return (
     <button
@@ -80,29 +80,32 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ applicat
   const [menuGroups, setMenuGroups] = useState<ListedMenuGroup[]>([])
   const [isFetchingAccounts, setIsFetchingAccounts] = useState(true)
 
-  const reloadMenuGroup = async (group: ListedMenuGroup) => {
-    const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
+  const reloadMenuGroup = useCallback(
+    async (group: ListedMenuGroup) => {
+      const updatedAccountInfo = await application.getListedAccountInfo(group.account, note.uuid)
 
-    if (!updatedAccountInfo) {
-      return
-    }
-
-    const updatedGroup: ListedMenuGroup = {
-      name: updatedAccountInfo.display_name,
-      account: group.account,
-      actions: updatedAccountInfo.actions as Action[],
-    }
-
-    const updatedGroups = menuGroups.map((group) => {
-      if (updatedGroup.account.authorId === group.account.authorId) {
-        return updatedGroup
-      } else {
-        return group
+      if (!updatedAccountInfo) {
+        return
       }
-    })
 
-    setMenuGroups(updatedGroups)
-  }
+      const updatedGroup: ListedMenuGroup = {
+        name: updatedAccountInfo.display_name,
+        account: group.account,
+        actions: updatedAccountInfo.actions as Action[],
+      }
+
+      const updatedGroups = menuGroups.map((group) => {
+        if (updatedGroup.account.authorId === group.account.authorId) {
+          return updatedGroup
+        } else {
+          return group
+        }
+      })
+
+      setMenuGroups(updatedGroups)
+    },
+    [application, menuGroups, note],
+  )
 
   useEffect(() => {
     const fetchListedAccounts = async () => {
@@ -217,7 +220,7 @@ export const ListedActionsOption: FunctionComponent<Props> = ({ application, not
 
   const [closeOnBlur] = useCloseOnBlur(menuContainerRef, setIsMenuOpen)
 
-  const toggleListedMenu = () => {
+  const toggleListedMenu = useCallback(() => {
     if (!isMenuOpen) {
       const menuPosition = calculateSubmenuStyle(menuButtonRef.current)
       if (menuPosition) {
@@ -226,7 +229,7 @@ export const ListedActionsOption: FunctionComponent<Props> = ({ application, not
     }
 
     setIsMenuOpen(!isMenuOpen)
-  }
+  }, [isMenuOpen])
 
   const recalculateMenuStyle = useCallback(() => {
     const newMenuPosition = calculateSubmenuStyle(menuButtonRef.current, menuRef.current)

app/assets/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -2,7 +2,7 @@ import { AppState } from '@/UIModels/AppState'
 import { Icon } from '@/Components/Icon'
 import { Switch } from '@/Components/Switch'
 import { observer } from 'mobx-react-lite'
-import { useState, useEffect, useMemo } from 'preact/hooks'
+import { useState, useEffect, useMemo, useCallback } from 'preact/hooks'
 import { SNApplication, SNNote } from '@standardnotes/snjs'
 import { WebApplication } from '@/UIModels/Application'
 import { KeyboardModifier } from '@/Services/IOService'
@@ -211,13 +211,16 @@ export const NotesOptions = observer(({ application, appState, closeOnBlur }: No
     }
   }, [application])
 
-  const getNoteFileName = (note: SNNote): string => {
-    const editor = application.componentManager.editorForNote(note)
-    const format = editor?.package_info?.file_type || 'txt'
-    return `${note.title}.${format}`
-  }
+  const getNoteFileName = useCallback(
+    (note: SNNote): string => {
+      const editor = application.componentManager.editorForNote(note)
+      const format = editor?.package_info?.file_type || 'txt'
+      return `${note.title}.${format}`
+    },
+    [application],
+  )
 
-  const downloadSelectedItems = async () => {
+  const downloadSelectedItems = useCallback(async () => {
     if (notes.length === 1) {
       application.getArchiveService().downloadData(new Blob([notes[0].text]), getNoteFileName(notes[0]))
       return
@@ -242,17 +245,17 @@ export const NotesOptions = observer(({ application, appState, closeOnBlur }: No
         message: `Exported ${notes.length} notes`,
       })
     }
-  }
+  }, [application, getNoteFileName, notes])
 
-  const duplicateSelectedItems = () => {
+  const duplicateSelectedItems = useCallback(() => {
     notes.forEach((note) => {
       application.mutator.duplicateItem(note).catch(console.error)
     })
-  }
+  }, [application, notes])
 
-  const openRevisionHistoryModal = () => {
+  const openRevisionHistoryModal = useCallback(() => {
     appState.notes.setShowRevisionHistoryModal(true)
-  }
+  }, [appState])
 
   return (
     <>