Refactoring dialog group

Improve dialog onClose

src/renderer/components/dialog/dialog-changelog.tsx

@@ -82,9 +82,13 @@ const DialogChangelog = () => {
     setCheckUsingLastVersion(false)
   }
 
-  useOnKeyUp('Escape', () => {
-    setShowChangelog(false)
-  })
+  useOnKeyUp(
+    'Escape',
+    () => {
+      setShowChangelog(false)
+    },
+    isShowChangelog,
+  )
 
   return (
     <>
@@ -109,6 +113,7 @@ const DialogChangelog = () => {
       />
 
       <Dialog
+        id="user-note"
         open={isUserShowNotes}
         onClose={onCloseDialog}
         actions={

src/renderer/components/dialog/dialog-recent-files.tsx

@@ -273,6 +273,7 @@ const DialogRecentFiles = ({ isOpen, onClose }: Props) => {
 
   return (
     <Dialog
+      id="recent-files"
       open={isOpen}
       title={t('page.compilation.actions.recentFiles')}
       onClose={onDialogClose}

src/renderer/components/dialog/dialog.tsx

@@ -23,6 +23,7 @@ type DialogProps = {
     content?: string
     child?: string
   }
+  id: string
 }
 
 enum CloseReason {
@@ -40,26 +41,33 @@ const Dialog = ({
   content: Content,
   contentClassNames = {},
   children,
+  id,
 }: React.PropsWithChildren<DialogProps>) => {
   const container = useRef<HTMLDivElement | null>(null)
 
   useDocumentClick(
     () => {
-      onClose?.(CloseReason.outside)
+      if (open) {
+        onClose?.(CloseReason.outside)
+      }
     },
     clicked => clicked === container.current,
   )
 
   const onEscape = useCallback(() => {
-    onClose?.(CloseReason.escape)
-  }, [onClose])
+    if (open) {
+      onClose?.(CloseReason.escape)
+    }
+  }, [onClose, open])
 
   const onEnter = useCallback(() => {
-    onClose?.(CloseReason.enter)
-  }, [onClose])
+    if (open) {
+      onClose?.(CloseReason.enter)
+    }
+  }, [onClose, open])
 
-  useOnKeyUp('Escape', onEscape)
-  useOnKeyUp('Enter', onEnter)
+  useOnKeyUp('Escape', onEscape, open)
+  useOnKeyUp('Enter', onEnter, open)
 
   const dialogContent = useMemo(
     () => (
@@ -111,6 +119,7 @@ const Dialog = ({
       </>
     ) : null,
     document.body,
+    id,
   )
 }
 

src/renderer/components/groups/groups-dialog.tsx

@@ -137,6 +137,7 @@ const GroupsDialog = ({
 
   return (
     <Dialog
+      id="group"
       open={open}
       onClose={onDialogClose}
       actions={

src/renderer/components/open-compilation-logs.tsx

@@ -90,6 +90,7 @@ const OpenCompilationLogs = () => {
       </NavItem>
 
       <Dialog
+        id="compilation-logs"
         open={isDialogOpen}
         onClose={onClickButtonCloseLogs}
         actions={

src/renderer/components/open-documentation.tsx

@@ -55,6 +55,7 @@ const OpenDocumentation = () => {
   return (
     <>
       <Dialog
+        id="documentation"
         open={isDialogOpen}
         maxWidth={70}
         title={t('nav.help.title')}

src/renderer/components/page-app-bar.tsx

@@ -10,7 +10,7 @@ import { useFocus } from '../hooks/use-focus'
 
 type Props = {
   title?: string
-  actions?: ReactNode[]
+  actions?: ReactNode
 }
 
 const PageAppBar = ({ title, actions = [] }: Props) => {
@@ -26,11 +26,7 @@ const PageAppBar = ({ title, actions = [] }: Props) => {
     >
       <div className="flex h-16 items-center px-4">
         <h2 className="font-nova text-3xl font-bold">{title}</h2>
-        <div className="ml-auto flex items-center gap-2">
-          {actions.map((action, index) => {
-            return <React.Fragment key={index}>{action}</React.Fragment>
-          })}
-        </div>
+        <div className="ml-auto flex items-center gap-2">{actions}</div>
       </div>
     </div>
   )

src/renderer/hooks/use-groups.ts

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2022 Kiyozz~WK~WushuLate.
+ *
+ * All rights reserved.
+ */
+
+import is from '@sindresorhus/is'
+
+import { TelemetryEvent } from '../../common/telemetry-event'
+import { Group, GroupRenderer } from '../types'
+import { useApp } from './use-app'
+import { useTelemetry } from './use-telemetry'
+
+type EditGroupParams = {
+  group: GroupRenderer
+  lastGroupName: string
+}
+
+type UseGroupsReturns = {
+  add: (group: GroupRenderer) => void
+  edit: (params: EditGroupParams) => void
+  remove: (group: GroupRenderer) => void
+}
+
+export const useGroups = (): UseGroupsReturns => {
+  const { groups, setConfig } = useApp()
+  const { send } = useTelemetry()
+
+  const addGroup = (group: GroupRenderer) => {
+    if (
+      !is.undefined(
+        groups.find(
+          g => g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
+        ),
+      )
+    ) {
+      return
+    }
+
+    send(TelemetryEvent.groupCreated, { scripts: group.scripts.length })
+    setConfig({
+      groups: [
+        ...groups,
+        {
+          name: group.name,
+          scripts: group.scripts.map(s => ({ name: s.name, path: s.path })),
+        },
+      ],
+    })
+  }
+
+  const editGroup = ({ group, lastGroupName }: EditGroupParams) => {
+    if (
+      group.name.trim().toLowerCase() !== lastGroupName.trim().toLowerCase() &&
+      !is.undefined(
+        groups.find(
+          g => g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
+        ),
+      )
+    ) {
+      return
+    }
+
+    send(TelemetryEvent.groupEdited, { scripts: group.scripts.length })
+    setConfig({
+      groups: groups.map((g: Group) => {
+        if (g.name === lastGroupName) {
+          return {
+            scripts: group.scripts.map(s => ({ name: s.name, path: s.path })),
+            name: group.name,
+          }
+        }
+
+        return {
+          ...g,
+          scripts: g.scripts.map(s => ({ name: s.name, path: s.path })),
+        }
+      }),
+    })
+  }
+
+  const removeGroup = (group: GroupRenderer) => {
+    if (
+      is.undefined(
+        groups.find(
+          g => g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
+        ),
+      )
+    ) {
+      return
+    }
+
+    setConfig(
+      {
+        groups: groups
+          .map(g => ({ name: g.name, scripts: g.scripts }))
+          .filter(g => g.name !== group.name),
+      },
+      true,
+    )
+  }
+
+  return {
+    add: addGroup,
+    edit: editGroup,
+    remove: removeGroup,
+  }
+}

src/renderer/hooks/use-on-key-up.ts

@@ -15,6 +15,7 @@ type UseOnKeyUpOptions = {
 export const useOnKeyUp = (
   key: string,
   action: () => void,
+  isActive: boolean,
   options?: UseOnKeyUpOptions,
 ) => {
   const onKeyUp = useCallback(
@@ -43,10 +44,18 @@ export const useOnKeyUp = (
   )
 
   useEffect(() => {
-    document.body.addEventListener('keyup', onKeyUp)
+    const unSub = () => {
+      document.body.removeEventListener('keyup', onKeyUp)
+    }
+
+    if (isActive) {
+      document.body.addEventListener('keyup', onKeyUp)
+    } else {
+      unSub()
+    }
 
     return () => {
-      document.body.removeEventListener('keyup', onKeyUp)
+      unSub()
     }
-  }, [onKeyUp])
+  }, [onKeyUp, isActive])
 }