refactor

apps/remix-ide/src/app/components/hidden-panel.tsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 import { RemixPluginPanel } from '@remix-ui/panel'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'hiddenPanel',
@@ -28,7 +29,7 @@ export class HiddenPanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  render (state: any) {
+  updateComponent (state: any) {
     return <div className='pluginsContainer'><RemixPluginPanel header={<></>} plugins={state.plugins}/></div> 
   }
 
@@ -36,6 +37,12 @@ export class HiddenPanel extends AbstractPanel {
     this.dispatch = dispatch
   }
 
+  render() {      
+    return (
+        <ViewPluginUI plugin={this} />
+    );
+  }
+
   renderComponent () {
     this.dispatch({
       plugins: this.plugins,

apps/remix-ide/src/app/components/main-panel.tsx

@@ -3,6 +3,7 @@ import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'mainPanel',
@@ -14,6 +15,7 @@ const profile = {
 
 export class MainPanel extends AbstractPanel {
     element: HTMLDivElement
+    dispatch: React.Dispatch<any> = () => {}
     constructor (config) {
       super(profile)
       this.element = document.createElement('div')
@@ -22,6 +24,10 @@ export class MainPanel extends AbstractPanel {
       // this.config = config
     }
 
+    setDispatch (dispatch: React.Dispatch<any>) {
+      this.dispatch = dispatch
+    }
+
     onActivation () {
       this.renderComponent()
     }
@@ -47,11 +53,17 @@ export class MainPanel extends AbstractPanel {
       this.renderComponent()
     }
 
-    render () {
+    renderComponent () {
-      return this.element
+      this.dispatch({
+        plugins: this.plugins
+      })
+    }
+
+    render() {      
+      return <div style={{height: '100%', width: '100%'}} data-id='mainPanelPluginsContainer'><ViewPluginUI plugin={this} /></div>
     }
 
-    renderComponent () {
+    updateComponent (state: any) {
-      ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.element)
+      return <RemixPluginPanel header={<></>} plugins={state.plugins}/>
     }
 }

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -82,10 +82,6 @@ class PluginManagerComponent extends ViewPlugin {
     _paq.push(['trackEvent', 'manager', 'deactivate', name])
   }
 
-  onActivation () {
-
-  }
-
   setDispatch (dispatch) {
     this.dispatch = dispatch
     this.renderComponent()

apps/remix-ide/src/app/components/side-panel.tsx

@@ -5,6 +5,7 @@ import { AbstractPanel } from './panel'
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
@@ -83,7 +84,13 @@ export class SidePanel extends AbstractPanel {
     this.dispatch = dispatch
   }
 
-  render(state: any) {
+  render() {      
+    return (
+        <ViewPluginUI plugin={this} />
+    );
+  }
+
+  updateComponent(state: any) {
     return <section className='panel plugin-manager'> <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} /> </section>
   }
 

apps/remix-ide/src/app/components/vertical-icons.tsx

@@ -6,6 +6,7 @@ import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import { IconRecord, RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 import { Profile } from '@remixproject/plugin-utils'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'menuicons',
@@ -111,10 +112,16 @@ export class VerticalIcons extends Plugin {
     this.events.emit('toggleContent', name)
   }
 
-  render (state: any) {
+  updateComponent(state: any){
     return  <div id='icon-panel'><RemixUiVerticalIconsPanel
     verticalIconsPlugin={state.verticalIconsPlugin}
     icons={state.icons}
-  /></div>
+    /></div>
+  }
+
+  render() {      
+    return (
+        <ViewPluginUI plugin={this} />
+    );
   }
 }

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -69,46 +69,18 @@ const RemixApp = (props: IRemixAppUi) => {
       <MatomoDialog hide={!appReady}></MatomoDialog>
 
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
-        <div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"><ViewPluginUI plugin={props.app.menuicons}></ViewPluginUI></div>
+        <div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light">{props.app.menuicons.render()}</div>
-        <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}><ViewPluginUI plugin={props.app.sidePanel}></ViewPluginUI></div>
+        <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}>{props.app.sidePanel.render()}</div>
         <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
           <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
         </div>
       </div>
-      <div><ViewPluginUI plugin={props.app.hiddenPanel}></ViewPluginUI></div>
+      <div>{props.app.hiddenPanel.render()}</div>
       <AppDialogs></AppDialogs>
       <DialogViewPlugin></DialogViewPlugin>
     </AppProvider>
   )
 }
 
-export interface IViewPluginUI {
-  plugin: any
-}
-
-export const ViewPluginUI = (props: IViewPluginUI) => {
-
-  const [state, setState] = useState<any>(null)
-
-  useEffect(() => {
-    // console.log(props.plugin)
-    if(props.plugin.setDispatch){
-      props.plugin.setDispatch(setState)
-    }
-  }, [])
-
-  useEffect(() => {
-    // console.log(state)
-  }, [state])
-
-  return (
-    <>{state? 
-      props.plugin.render(state)
-    :<></>
-    }</>
-  )
-}
-
-
 export default RemixApp

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -76,11 +76,6 @@ iframe {
     display: block;
 }
 
-.pluginsContainer {
-    height: 100%;
-    overflow-y: hidden;
-}
-
 #editorView {
     height: 100%;
     width: 100%;