feat: add api-based extension & external data tool & moderation (#1459)

web/context/modal-context.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import type { Dispatch, SetStateAction } from 'react'
+import { useState } from 'react'
+import { createContext, useContext } from 'use-context-selector'
+import AccountSetting from '@/app/components/header/account-setting'
+import ApiBasedExtensionModal from '@/app/components/header/account-setting/api-based-extension-page/modal'
+import ModerationSettingModal from '@/app/components/app/configuration/toolbox/moderation/moderation-setting-modal'
+import ExternalDataToolModal from '@/app/components/app/configuration/tools/external-data-tool-modal'
+import type { ModerationConfig } from '@/models/debug'
+import type {
+  ApiBasedExtension,
+  ExternalDataTool,
+} from '@/models/common'
+
+export type ModalState<T> = {
+  payload: T
+  onCancelCallback?: () => void
+  onSaveCallback?: (newPayload: T) => void
+  onValidateBeforeSaveCallback?: (newPayload: T) => boolean
+}
+
+const ModalContext = createContext<{
+  setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<string> | null>>
+  setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
+  setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
+  setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
+}>({
+  setShowAccountSettingModal: () => {},
+  setShowApiBasedExtensionModal: () => {},
+  setShowModerationSettingModal: () => {},
+  setShowExternalDataToolModal: () => {},
+})
+
+export const useModalContext = () => useContext(ModalContext)
+
+type ModalContextProviderProps = {
+  children: React.ReactNode
+}
+export const ModalContextProvider = ({
+  children,
+}: ModalContextProviderProps) => {
+  const [showAccountSettingModal, setShowAccountSettingModal] = useState<ModalState<string> | null>(null)
+  const [showApiBasedExtensionModal, setShowApiBasedExtensionModal] = useState<ModalState<ApiBasedExtension> | null>(null)
+  const [showModerationSettingModal, setShowModerationSettingModal] = useState<ModalState<ModerationConfig> | null>(null)
+  const [showExternalDataToolModal, setShowExternalDataToolModal] = useState<ModalState<ExternalDataTool> | null>(null)
+
+  const handleCancelAccountSettingModal = () => {
+    setShowAccountSettingModal(null)
+
+    if (showAccountSettingModal?.onCancelCallback)
+      showAccountSettingModal?.onCancelCallback()
+  }
+
+  const handleCancelModerationSettingModal = () => {
+    setShowModerationSettingModal(null)
+
+    if (showModerationSettingModal?.onCancelCallback)
+      showModerationSettingModal.onCancelCallback()
+  }
+
+  const handleSaveApiBasedExtension = (newApiBasedExtension: ApiBasedExtension) => {
+    if (showApiBasedExtensionModal?.onSaveCallback)
+      showApiBasedExtensionModal.onSaveCallback(newApiBasedExtension)
+
+    setShowApiBasedExtensionModal(null)
+  }
+
+  const handleSaveModeration = (newModerationConfig: ModerationConfig) => {
+    if (showModerationSettingModal?.onSaveCallback)
+      showModerationSettingModal.onSaveCallback(newModerationConfig)
+
+    setShowModerationSettingModal(null)
+  }
+
+  const handleSaveExternalDataTool = (newExternalDataTool: ExternalDataTool) => {
+    if (showExternalDataToolModal?.onSaveCallback)
+      showExternalDataToolModal.onSaveCallback(newExternalDataTool)
+
+    setShowExternalDataToolModal(null)
+  }
+
+  const handleValidateBeforeSaveExternalDataTool = (newExternalDataTool: ExternalDataTool) => {
+    if (showExternalDataToolModal?.onValidateBeforeSaveCallback)
+      return showExternalDataToolModal?.onValidateBeforeSaveCallback(newExternalDataTool)
+
+    return true
+  }
+
+  return (
+    <ModalContext.Provider value={{
+      setShowAccountSettingModal,
+      setShowApiBasedExtensionModal,
+      setShowModerationSettingModal,
+      setShowExternalDataToolModal,
+    }}>
+      <>
+        {children}
+        {
+          !!showAccountSettingModal && (
+            <AccountSetting
+              activeTab={showAccountSettingModal.payload}
+              onCancel={handleCancelAccountSettingModal}
+            />
+          )
+        }
+        {
+          !!showApiBasedExtensionModal && (
+            <ApiBasedExtensionModal
+              data={showApiBasedExtensionModal.payload}
+              onCancel={() => setShowApiBasedExtensionModal(null)}
+              onSave={handleSaveApiBasedExtension}
+            />
+          )
+        }
+        {
+          !!showModerationSettingModal && (
+            <ModerationSettingModal
+              data={showModerationSettingModal.payload}
+              onCancel={handleCancelModerationSettingModal}
+              onSave={handleSaveModeration}
+            />
+          )
+        }
+        {
+          !!showExternalDataToolModal && (
+            <ExternalDataToolModal
+              data={showExternalDataToolModal.payload}
+              onCancel={() => setShowExternalDataToolModal(null)}
+              onSave={handleSaveExternalDataTool}
+              onValidateBeforeSave={handleValidateBeforeSaveExternalDataTool}
+            />
+          )
+        }
+      </>
+    </ModalContext.Provider>
+  )
+}
+
+export default ModalContext