chore: app group optimizations (#1027)

app/assets/javascripts/Components/NoAccountWarning/index.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@/Components/Icon'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
+import { useCallback } from 'preact/hooks'
 
 type Props = { appState: AppState }
 
@@ -9,23 +10,28 @@ export const NoAccountWarning = observer(({ appState }: Props) => {
   if (!canShow) {
     return null
   }
+
+  const showAccountMenu = useCallback(
+    (event: Event) => {
+      event.stopPropagation()
+      appState.accountMenu.setShow(true)
+    },
+    [appState],
+  )
+
+  const hideWarning = useCallback(() => {
+    appState.noAccountWarning.hide()
+  }, [appState])
+
   return (
     <div className="mt-5 p-5 rounded-md shadow-sm grid grid-template-cols-1fr">
       <h1 className="sk-h3 m-0 font-semibold">Data not backed up</h1>
       <p className="m-0 mt-1 col-start-1 col-end-3">Sign in or register to back up your notes.</p>
-      <button
-        className="sn-button small info mt-3 col-start-1 col-end-3 justify-self-start"
-        onClick={(event) => {
-          event.stopPropagation()
-          appState.accountMenu.setShow(true)
-        }}
-      >
+      <button className="sn-button small info mt-3 col-start-1 col-end-3 justify-self-start" onClick={showAccountMenu}>
         Open Account menu
       </button>
       <button
-        onClick={() => {
-          appState.noAccountWarning.hide()
-        }}
+        onClick={hideWarning}
         title="Ignore"
         label="Ignore"
         style="height: 20px"