plugin page context

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 />}
     />

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>
+  )
+}

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