From fcf43ee8459451a5fb5c3288a0e47f5582923d2a Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Sat, 12 Oct 2024 11:33:12 +0800
Subject: [PATCH] plugin page context

---
 web/app/(commonLayout)/plugins/page.tsx       |  4 +--
 .../plugins/plugin-page/context.tsx           | 30 +++++++++++++++++++
 .../{container.tsx => plugin-page/index.tsx}  | 28 ++++++++++++-----
 .../install-plugin-dropdown.tsx}              |  0
 4 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 web/app/components/plugins/plugin-page/context.tsx
 rename web/app/components/plugins/{container.tsx => plugin-page/index.tsx} (87%)
 rename web/app/components/plugins/{Install-plugin-dropdown.tsx => plugin-page/install-plugin-dropdown.tsx} (100%)

diff --git a/web/app/(commonLayout)/plugins/page.tsx b/web/app/(commonLayout)/plugins/page.tsx
index 981319eb4a..6220c20aa0 100644
--- a/web/app/(commonLayout)/plugins/page.tsx
+++ b/web/app/(commonLayout)/plugins/page.tsx
@@ -1,10 +1,10 @@
+import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugins-panel'
-import Container from '@/app/components/plugins/container'
 import Marketplace from '@/app/components/plugins/marketplace'
 
 const PluginList = async () => {
   return (
-    <Container
+    <PluginPage
       plugins={<PluginsPanel />}
       marketplace={<Marketplace />}
     />
diff --git a/web/app/components/plugins/plugin-page/context.tsx b/web/app/components/plugins/plugin-page/context.tsx
new file mode 100644
index 0000000000..94351484b1
--- /dev/null
+++ b/web/app/components/plugins/plugin-page/context.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useRef } from 'react'
+import { createContext } from 'use-context-selector'
+
+export type PluginPageContextValue = {
+  containerRef: React.RefObject<HTMLDivElement>
+}
+
+export const PluginPageContext = createContext<PluginPageContextValue>({
+  containerRef: { current: null },
+})
+
+type PluginPageContextProviderProps = {
+  children: ReactNode
+}
+
+export const PluginPageContextProvider = ({
+  children,
+}: PluginPageContextProviderProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  return (
+    <PluginPageContext.Provider value={{
+      containerRef,
+    }}>
+      {children}
+    </PluginPageContext.Provider>
+  )
+}
diff --git a/web/app/components/plugins/container.tsx b/web/app/components/plugins/plugin-page/index.tsx
similarity index 87%
rename from web/app/components/plugins/container.tsx
rename to web/app/components/plugins/plugin-page/index.tsx
index 8c97f3b4bf..fa62a592c7 100644
--- a/web/app/components/plugins/container.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -1,14 +1,19 @@
 'use client'
 
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useContextSelector } from 'use-context-selector'
 import {
   RiArrowRightUpLine,
   RiBugLine,
   RiClipboardLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
-import InstallPluginDropdown from './Install-plugin-dropdown'
+import {
+  PluginPageContext,
+  PluginPageContextProvider,
+} from './context'
+import InstallPluginDropdown from './install-plugin-dropdown'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useModalContext } from '@/context/modal-context'
 import Button from '@/app/components/base/button'
@@ -17,16 +22,17 @@ import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
 
-type ContainerWrapperProps = {
+export type PluginPageProps = {
   plugins: React.ReactNode
   marketplace: React.ReactNode
 }
-const ContainerWrapper = ({
+const PluginPage = ({
   plugins,
   marketplace,
-}: ContainerWrapperProps) => {
+}: PluginPageProps) => {
   const { t } = useTranslation()
   const { setShowPluginSettingModal } = useModalContext() as any
+  const containerRef = useContextSelector(PluginPageContext, v => v.containerRef)
 
   const options = useMemo(() => {
     return [
@@ -39,8 +45,6 @@ const ContainerWrapper = ({
     defaultTab: options[0].value,
   })
 
-  const containerRef = useRef<HTMLDivElement>(null)
-
   return (
     <div
       ref={containerRef}
@@ -118,4 +122,12 @@ const ContainerWrapper = ({
   )
 }
 
-export default ContainerWrapper
+const PluginPageWithContext = (props: PluginPageProps) => {
+  return (
+    <PluginPageContextProvider>
+      <PluginPage {...props} />
+    </PluginPageContextProvider>
+  )
+}
+
+export default PluginPageWithContext
diff --git a/web/app/components/plugins/Install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
similarity index 100%
rename from web/app/components/plugins/Install-plugin-dropdown.tsx
rename to web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx