compile settings landing file

apps/remix-ide/src/app.js

@@ -109,6 +109,7 @@ class AppComponent {
       !Registry.getInstance()
         .get('config')
         .api.exists('settings/matomo-analytics')
+        this.showMatamo = true
     this.walkthroughService = new WalkthroughService(
       appManager,
       this.showMatamo

apps/remix-ide/src/app/panels/file-panel.js

@@ -58,18 +58,8 @@ module.exports = class Filepanel extends ViewPlugin {
     this.currentWorkspaceMetadata = {}
   }
 
-  onActivation () {
-    this.renderComponent()
-  }
-
   render () {
-    return this.el
-  }
-
-  renderComponent () {
-    ReactDOM.render(
-      <FileSystemProvider plugin={this} />
-      , this.el)
+    return <div id='fileExplorerView'><FileSystemProvider plugin={this} /></div>
   }
 
   /**

apps/remix-ide/src/app/tabs/compile-tab.js

@@ -42,9 +42,7 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
   }
 
   renderComponent () {
-    ReactDOM.render(
-      <SolidityCompiler api={this}/>
-      , this.el)
+    console.log('rendering compile tab')
   }
 
   onCurrentFileChanged () {
@@ -68,9 +66,7 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
   }
 
   render () {
-    this.renderComponent()
-
-    return this.el
+    return <div id='compileTabView'><SolidityCompiler api={this}/></div>
   }
 
   async compileWithParameters (compilationTargets, settings) {

apps/remix-ide/src/app/tabs/settings-tab.js

@@ -1,69 +0,0 @@
-import React from 'react' // eslint-disable-line
-import { ViewPlugin } from '@remixproject/engine-web'
-import ReactDOM from 'react-dom'
-import * as packageJson from '../../../../../package.json'
-import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
-import Registry from '../state/registry'
-
-const profile = {
-  name: 'settings',
-  displayName: 'Settings',
-  methods: ['get'],
-  events: [],
-  icon: 'assets/img/settings.webp',
-  description: 'Remix-IDE settings',
-  kind: 'settings',
-  location: 'sidePanel',
-  documentation: 'https://remix-ide.readthedocs.io/en/latest/settings.html',
-  version: packageJson.version,
-  permission: true
-}
-
-module.exports = class SettingsTab extends ViewPlugin {
-  constructor (config, editor) {
-    super(profile)
-    this.config = config
-    this.editor = editor
-    this._deps = {
-      themeModule: Registry.getInstance().get('themeModule').api
-    }
-    this.element = document.createElement('div')
-    this.element.setAttribute('id', 'settingsTab')
-    this.useMatomoAnalytics = null
-  }
-
-  render() {
-    return (
-      <div id='settingsTab'>
-      <RemixUiSettings
-        config={this.config}
-        editor={this.editor}
-        _deps={this._deps}
-        useMatomoAnalytics={this.useMatomoAnalytics}
-      />
-      </div>
-    );
-  }
-
-  renderComponent () {
-    ReactDOM.render(
-      <RemixUiSettings
-        config = { this.config }
-        editor = { this.editor }
-        _deps = { this._deps }
-        useMatomoAnalytics = {this.useMatomoAnalytics}
-      />,
-      this.element
-    )
-  }
-
-  get (key) {
-    return this.config.get(key)
-  }
-
-  updateMatomoAnalyticsChoice (isChecked) {
-    this.config.set('settings/matomo-analytics', isChecked)
-    this.useMatomoAnalytics = isChecked
-    this.renderComponent()
-  }
-}

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react' // eslint-disable-line
+import { ViewPlugin } from '@remixproject/engine-web'
+import ReactDOM from 'react-dom'
+import * as packageJson from '../../../../../package.json'
+import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
+import Registry from '../state/registry'
+
+const profile = {
+  name: 'settings',
+  displayName: 'Settings',
+  methods: ['get'],
+  events: [],
+  icon: 'assets/img/settings.webp',
+  description: 'Remix-IDE settings',
+  kind: 'settings',
+  location: 'sidePanel',
+  documentation: 'https://remix-ide.readthedocs.io/en/latest/settings.html',
+  version: packageJson.version,
+  permission: true
+}
+
+module.exports = class SettingsTab extends ViewPlugin {
+  config: any = {}
+  editor: any
+  private _deps: {
+    themeModule: any // eslint-disable-line
+    
+  }
+  element: HTMLDivElement
+  public useMatomoAnalytics: any
+  dispatch: React.Dispatch<any> = () => {}
+  constructor (config, editor) {
+    super(profile)
+    this.config = config
+    this.editor = editor
+    this._deps = {
+      themeModule: Registry.getInstance().get('themeModule').api
+    }
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'settingsTab')
+    this.useMatomoAnalytics = null
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+    this.renderComponent()
+  }
+
+  render() {  
+    
+    return (
+      <div id='settingsTab'>
+        <ViewPluginUI plugin={this} />
+      </div>
+    );
+  }
+
+  updateComponent(state: any){
+    console.log('updateComponent', state)
+    return <RemixUiSettings
+    config={state.config}
+    editor={state.editor}
+    _deps={state._deps}
+    useMatomoAnalytics={state.useMatomoAnalytics}
+    themeModule = {state._deps.themeModule}
+  />
+  }
+
+  renderComponent () {
+    console.log('dispatching', this.useMatomoAnalytics, this.dispatch)
+    this.dispatch(this)
+  }
+
+  get (key) {
+    return this.config.get(key)
+  }
+
+  updateMatomoAnalyticsChoice (isChecked) {
+    console.log('update matomo')
+    this.config.set('settings/matomo-analytics', isChecked)
+    this.useMatomoAnalytics = isChecked
+    this.dispatch({
+      ...this
+    })
+  }
+}
+
+
+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? 
+      <div>{props.plugin.updateComponent(state)}</div>
+    :<></>
+    }</>
+  )
+}

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -31,15 +31,9 @@ export class LandingPage extends ViewPlugin {
   }
 
   render () {
-    this.renderComponent()
-    return this.el
-  }
-
-  renderComponent () {
-    ReactDOM.render(
-      <RemixUiHomeTab
+    return <div id='landingPageHomeContainer' className='remixui_homeContainer justify-content-between bg-light d-flex' data-id='landingPageHomeContainer'>      <RemixUiHomeTab
     plugin={this}
-      />
-      , this.el)
+  /></div>
   }
+  
 }