more fixes for icon status change

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

@@ -103,7 +103,7 @@ export class SidePanel extends AbstractPanel {
 
   addView (profile, view) {
     super.addView(profile, view)
-    this.verticalIcons.linkContent(profile)
+    setTimeout(() => this.verticalIcons.linkContent(profile), 60000)
   }
 
   /**

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

@@ -66,17 +66,19 @@ export class VerticalIcons extends Plugin {
     // the list of supported keys. 'none' will remove the status
     // const keys = ['edited', 'succeed', 'none', 'loading', 'failed']
     // const types = ['error', 'warning', 'success', 'info', '']
-    // const fn = (status) => {
+    const fn = (status) => {
-    //   if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
+      if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
-    //   if (status.key === undefined) throw new Error('status key should be defined')
+      if (status.key === undefined) throw new Error('status key should be defined')
-
+
-    //   if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
+      if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
-    //     throw new Error('key should contain either number or ' + this.keys.join())
+        throw new Error('key should contain either number or ' + this.keys.join())
-    //   }
+      }
-    //   this.setIconStatus(profile.name, status)
+      this.setIconStatus(profile.name, status)
-    // }
+    }
-    // this.iconStatus[profile.name] = fn
+    this.iconStatus[profile.name] = fn
-    // this.on(profile.name, 'statusChanged', this.iconStatus[profile.name])
+    this.on(profile.name, 'statusChanged', () => {
+      console.log('caught statusChanged in react!')
+    })
   }
 
   /**
@@ -114,8 +116,6 @@ export class VerticalIcons extends Plugin {
    */
   setIconStatus (name, status) {
     const el = this.icons[name]
-    // eslint-disable-next-line no-debugger
-    debugger
     if (!el) return
     const statusEl = el.querySelector('i')
     if (statusEl) {

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -5,17 +5,11 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
+// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 import { defaultState, iconStatusReducer } from '../reducers/iconReducers'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
-    // kind: string
-    // name: string
-    // icon: string
-    // displayName: string
-    // tooltip: string
-    // documentation: string
     profile: any
     contextMenuAction: (evt: any, profileName: string, documentation: string) => void
     addActive: (profileName: string) => void
@@ -73,58 +67,42 @@ function Icon ({
    * @param {Object} status
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function setIconStatus (name: string) {
+  // function setIconStatus (name: string, status: any) {
-    if (!iconRef.current) return
+  //   if (!iconRef.current) return
-    const statusEl = iconRef.current.querySelector('i')
+  //   const statusEl = iconRef.current.querySelector('i')
-    if (statusEl) {
+  //   if (statusEl) {
-      iconRef.current.removeChild(statusEl) // need to eject component instead of removing?
+  //     iconRef.current.removeChild(statusEl) // need to eject component instead of removing?
-    }
+  //   }
-    if (status.key === 'none') return // remove status
+  //   if (status.key === 'none') return // remove status
 
-    let text = ''
+  //   let text = ''
-    let key = ''
+  //   let key = ''
-    if (typeof status.key === 'number') {
+  //   if (typeof status.key === 'number') {
-      key = status.key.toString()
+  //     key = status.key.toString()
-      text = key
+  //     text = key
-    } else key = helper.checkSpecialChars(status.key) ? '' : status.key
+  //   } else key = helper.checkSpecialChars(status.key) ? '' : status.key
 
-    let type = ''
+  //   let type = ''
-    if (status.type === 'error') {
+  //   if (status.type === 'error') {
-      type = 'danger' // to use with bootstrap
+  //     type = 'danger' // to use with bootstrap
-    } else type = helper.checkSpecialChars(status.type) ? '' : status.type
+  //   } else type = helper.checkSpecialChars(status.type) ? '' : status.type
-    const title = helper.checkSpecialChars(status.title) ? '' : status.title
+  //   const title = helper.checkSpecialChars(status.title) ? '' : status.title
 
-    const icon = document.createElement('i')
+  //   const icon = document.createElement('i')
-    icon.title = title
+  //   icon.title = title
-    // icon.className = resolveClasses(key, type)
+  //   // icon.className = resolveClasses(key, type)
-    icon.ariaHidden = 'true'
+  //   icon.ariaHidden = 'true'
-    const innerText = document.createTextNode(text)
+  //   const innerText = document.createTextNode(text)
-    icon.appendChild(innerText)
+  //   icon.appendChild(innerText)
-    iconRef.current!.appendChild(icon)
+  //   iconRef.current!.appendChild(icon)
-    iconRef.current.classList.add('remixui_icon')
+  //   iconRef.current.classList.add('remixui_icon')
-  }
+  // }
-
-  function setErrorStatus () {
-    if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
-    if (status.key === undefined) throw new Error('status key should be defined')
-    if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
-      throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
-    }
-    setIconStatus(profile.name)
-  }
-  function listenOnStatus () {
-    // verticalIconPlugin.iconStatus[profile.name] = setErrorStatus // { profileName: profile.name, errorStatus: setErrorStatus } ?
-    verticalIconPlugin.on(profile.name, 'statusChanged', dispatchIconStatus({ type: 'success', payload: { } }))
-  }
 
   useEffect(() => {
-    listenOnStatus()
+    console.log('profile.name: ', profile.name)
-    return () => {
+    verticalIconPlugin.on(profile.name, 'statusChanged', () => {
-      console.log('just listened for status change ', { profile })
+      console.log('caught statusChanged in react! icon.tsx')
-      addEventListener('statusChanged', (e) => {
+    })
-        console.log('statusChanged just happend for this icon and this is its payload ', e)
-      })
-    }
   }, [])
 
   return (
@@ -156,6 +134,15 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
+      {/* { status && status.profileName.length
+        ? <i
+          title={status.title}
+          className={resolveClasses(status.key as string, status.type)}
+          aria-hidden="true"
+        >
+          {status.text}
+        </i> : null
+      } */}
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}

libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts

@@ -17,7 +17,7 @@ export type IconStatusActionType = {
    * @param {String} key
    * @param {String} type
    */
-function resolveClasses (key: string, type: string) {
+export function resolveClasses (key: string, type: string) {
   let classes = 'remixui_status'
 
   switch (key) {
@@ -43,7 +43,7 @@ function resolveClasses (key: string, type: string) {
 export function iconStatusReducer (state, action: IconStatusActionType) {
   const { type, payload } = action
   if (type === 'success') {
-
+    
   }
   return defaultState
 }