Refactor web configuration editing logic into the use-web-configuration-editing hook

- in settings, handlers should live in `apps/editor/src/views/settings/frontend/hooks/use-web-configuration-editing.ts`, similarly to panel

Author: robertpiosik

apps/editor/src/views/settings/frontend/Settings.tsx

@@ -6,19 +6,20 @@ import { Home, NavItem } from './Home/Home'
 import { use_web_configuration_editing } from './hooks/use-web-configuration-editing'
 import { Modal as UiModal } from '@ui/components/editor/settings/Modal'
 import { EditWebConfigurationForm } from '@/views/shared/components/EditWebConfigurationForm'
-import { WebConfiguration } from '@shared/types/web-configuration'
 
 const vscode = acquireVsCodeApi()
 
 export const Settings = () => {
   const settings_hook = use_settings(vscode)
-  const { updating_web_configuration, set_updating_web_configuration } =
-    use_web_configuration_editing()
+  const {
+    updating_web_configuration,
+    set_updating_web_configuration,
+    set_updated_web_configuration,
+    edit_web_configuration_cancel_handler,
+    edit_web_configuration_save_handler
+  } = use_web_configuration_editing(vscode)
   const [scroll_to_section_on_load, set_scroll_to_section_on_load] =
     useState<NavItem>()
-  const [updated_web_configuration, set_updated_web_configuration] = useState<
-    WebConfiguration | undefined
-  >()
 
   const all_data_loaded = useMemo(() => {
     return (
@@ -46,18 +47,12 @@ export const Settings = () => {
     )
   }, [settings_hook])
 
-  useEffect(() => {
-    set_updated_web_configuration(updating_web_configuration)
-  }, [updating_web_configuration])
-
   useEffect(() => {
     if (!all_data_loaded) return
     post_message(vscode, { command: 'SETTINGS_UI_READY' })
     const handle_message = (event: MessageEvent<BackendMessage>) => {
       if (event.data.command == 'SHOW_SECTION') {
         set_scroll_to_section_on_load(event.data.section as NavItem)
-      } else if (event.data.command == 'WEB_CONFIGURATION_UPDATED') {
-        set_updating_web_configuration(undefined)
       }
     }
     window.addEventListener('message', handle_message)
@@ -201,44 +196,11 @@ export const Settings = () => {
         scroll_to_section_on_load={scroll_to_section_on_load}
       />
       {updating_web_configuration && (
-        <UiModal
-          on_close={() => {
-            if (updated_web_configuration) {
-              post_message(vscode, {
-                command: 'UPDATE_WEB_CONFIGURATION',
-                updating_web_configuration,
-                updated_web_configuration,
-                origin: 'cancel'
-              })
-            } else {
-              set_updating_web_configuration(undefined)
-            }
-          }}
-        >
+        <UiModal on_close={edit_web_configuration_cancel_handler}>
           <UiModal.Form
             title="Edit Configuration"
-            on_save={() => {
-              if (updated_web_configuration) {
-                post_message(vscode, {
-                  command: 'UPDATE_WEB_CONFIGURATION',
-                  updating_web_configuration,
-                  updated_web_configuration,
-                  origin: 'save'
-                })
-              }
-            }}
-            on_cancel={() => {
-              if (updated_web_configuration) {
-                post_message(vscode, {
-                  command: 'UPDATE_WEB_CONFIGURATION',
-                  updating_web_configuration,
-                  updated_web_configuration,
-                  origin: 'cancel'
-                })
-              } else {
-                set_updating_web_configuration(undefined)
-              }
-            }}
+            on_save={edit_web_configuration_save_handler}
+            on_cancel={edit_web_configuration_cancel_handler}
           >
             <EditWebConfigurationForm
               web_configuration={updating_web_configuration}

apps/editor/src/views/settings/frontend/hooks/use-web-configuration-editing.ts

@@ -1,11 +1,60 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { WebConfiguration } from '@shared/types/web-configuration'
+import { BackendMessage } from '../../types/messages'
+import { post_message } from '../utils/post-message'
 
-export const use_web_configuration_editing = () => {
-  const [updating_web_configuration, set_updating_web_configuration] = useState<WebConfiguration>()
+export const use_web_configuration_editing = (vscode: any) => {
+  const [updating_web_configuration, set_updating_web_configuration] =
+    useState<WebConfiguration>()
+  const [updated_web_configuration, set_updated_web_configuration] =
+    useState<WebConfiguration>()
+
+  useEffect(() => {
+    set_updated_web_configuration(updating_web_configuration)
+  }, [updating_web_configuration])
+
+  const edit_web_configuration_cancel_handler = () => {
+    if (updated_web_configuration) {
+      post_message(vscode, {
+        command: 'UPDATE_WEB_CONFIGURATION',
+        updating_web_configuration: updating_web_configuration!,
+        updated_web_configuration: updated_web_configuration,
+        origin: 'cancel'
+      })
+    } else {
+      set_updating_web_configuration(undefined)
+    }
+  }
+
+  const edit_web_configuration_save_handler = () => {
+    if (updated_web_configuration) {
+      post_message(vscode, {
+        command: 'UPDATE_WEB_CONFIGURATION',
+        updating_web_configuration: updating_web_configuration!,
+        updated_web_configuration: updated_web_configuration,
+        origin: 'save'
+      })
+    }
+  }
+
+  useEffect(() => {
+    const handle_message = (event: MessageEvent<BackendMessage>) => {
+      const message = event.data
+      if (message.command == 'WEB_CONFIGURATION_UPDATED') {
+        set_updating_web_configuration(undefined)
+        set_updated_web_configuration(undefined)
+      }
+    }
+
+    window.addEventListener('message', handle_message)
+    return () => window.removeEventListener('message', handle_message)
+  }, [])
 
   return {
     updating_web_configuration,
-    set_updating_web_configuration
+    set_updating_web_configuration,
+    set_updated_web_configuration,
+    edit_web_configuration_cancel_handler,
+    edit_web_configuration_save_handler
   }
 }