moved icon statuschanged handling higher up

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

@@ -76,9 +76,7 @@ export class VerticalIcons extends Plugin {
     //   this.setIconStatus(profile.name, status)
     // }
     // this.iconStatus[profile.name] = fn
-    // this.on(profile.name, 'statusChanged', () => {
-    //   console.log('caught statusChanged in react!')
-    // })
+    // this.on(profile.name, this.iconStatus[profile.name])
   }
 
   /**

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

@@ -7,15 +7,12 @@ import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeR
 import { BadgeStatus, IconProfile, IconStatus } from './Icon'
 
 interface BadgeProps {
-  verticalIconPlugin: VerticalIcons
-  iconRef: React.MutableRefObject<any>
-  profile: IconProfile,
   badgeStatus: BadgeStatus
 }
 
 // eslint-disable-next-line no-undef
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Badge ({ iconRef, verticalIconPlugin, profile, badgeStatus }: BadgeProps) {
+function Badge ({ badgeStatus }: BadgeProps) {
   /**
    * resolve a classes list for @arg key
    * @param {Object} key
@@ -43,14 +40,28 @@ function Badge ({ iconRef, verticalIconPlugin, profile, badgeStatus }: BadgeProp
     return classes
   }
 
+  function checkStatusKeyValue (value: any, type: string) {
+    if (value === 'succeed' || value === 'edited' || value === 'loading' || value === 'failed' ||
+      typeof value === 'number' || type === 'warning' || type === 'error' || type === 'success' || type === 'info' || type === 'danger') {
+      return true
+    }
+    return false
+  }
+
   return (
-    <i
-      title={badgeStatus.title}
-      className={`${resolveClasses(badgeStatus.key, badgeStatus.type!)} remixui_status`}
-      aria-hidden="true"
-    >
-      {badgeStatus.text}
-    </i>
+    <Fragment>
+      {
+        badgeStatus && checkStatusKeyValue(badgeStatus.key, badgeStatus.type) ? (
+          <i
+            title={badgeStatus.title}
+            className={resolveClasses(badgeStatus.key, badgeStatus.type!)}
+            aria-hidden="true"
+          >
+            {badgeStatus.text}
+          </i>
+        ) : null
+      }
+    </Fragment>
   )
 }
 

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

@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface DebuggerProps {
   verticalIconsPlugin: VerticalIcons
@@ -10,7 +12,24 @@ interface DebuggerProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+  const ref = useRef<any>(null)
+
+  useEffect(() => {
+    verticalIconsPlugin.on('debugger', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+  }, [])
+
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -31,6 +50,14 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}

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

@@ -5,9 +5,6 @@ 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 Badge from './Badge'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -41,13 +38,6 @@ export interface IconProfile {
     tooltip?: string
   }
 
-const initialState = {
-  text: '',
-  key: '',
-  title: '',
-  type: ''
-}
-
 function Icon ({
   profile,
   verticalIconPlugin,
@@ -71,7 +61,6 @@ function Icon ({
   const [showContext, setShowContext] = useState(false)
   const [canDeactivate] = useState(false)
   const iconRef = useRef<any>(null)
-  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
   const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
@@ -91,13 +80,6 @@ function Icon ({
     setShowContext(false)
   }
 
-  useEffect(() => {
-    verticalIconPlugin.on(profile.name, 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: profile.name, payload: { status: iconStatus, ref: iconRef } }
-      dispatchStatusUpdate(action)
-    })
-  }, [])
-
   return (
     <Fragment>
       <div
@@ -127,16 +109,7 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
-      {
-        verticalIconPlugin.keys.includes(badgeStatus.key) ? (
-          <Badge
-            iconRef={iconRef}
-            verticalIconPlugin={verticalIconPlugin}
-            profile={profile}
-            badgeStatus={badgeStatus}
-          />
-        ) : null
-      }
+
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}

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

@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface SolidityProps {
   verticalIconsPlugin: VerticalIcons
@@ -9,8 +11,23 @@ interface SolidityProps {
   addActive: (name: string) => void
   removeActive: () => void
 }
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
 
 function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+
+  useEffect(() => {
+    verticalIconsPlugin.on('solidity', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'solidity', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+    console.log('solidity icon useEffect handled no issues')
+  }, [])
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -31,6 +48,14 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}

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

@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface SolidityStaticAnalysisProps {
   verticalIconsPlugin: VerticalIcons
@@ -10,7 +12,21 @@ interface SolidityStaticAnalysisProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+  useEffect(() => {
+    verticalIconsPlugin.on('solidityStaticAnalysis', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'solidityStaticAnalysis', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+  }, [])
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -31,6 +47,14 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}

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

@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface UdappProps {
   verticalIconsPlugin: VerticalIcons
@@ -10,7 +12,24 @@ interface UdappProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+  const ref = useRef<any>(null)
+
+  useEffect(() => {
+    verticalIconsPlugin.on('udapp', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+  }, [])
+
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -32,6 +51,14 @@ function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActiv
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}

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

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import helper from 'apps/remix-ide/src/lib/helper'
 import { BadgeStatus, IconStatus } from '../components/Icon'
-import React from 'react'
+import React, { MutableRefObject } from 'react'
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 
 export type IconBadgeReducerAction = {
   readonly type: string
@@ -24,11 +25,7 @@ export type IconBadgeReducerAction = {
    */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // if (!ref.current) return
-function setIconStatus (name: string, status: IconStatus, ref: React.MutableRefObject<any>) {
-  const statusEl = ref.current.querySelector('i')
-  if (statusEl) {
-    ref.current.removeChild(statusEl) // need to eject component instead of removing?
-  }
+function setIconStatus (name: string, status: IconStatus) {
   if (status.key === 'none') return { ...status, text: '' } // remove status
 
   let text = ''
@@ -42,19 +39,18 @@ function setIconStatus (name: string, status: IconStatus, ref: React.MutableRefO
   let thisType = ''
   if (status.type === 'error') {
     thisType = 'danger' // to use with bootstrap
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type!
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const title = helper.checkSpecialChars(status.title) ? '' : status.title
-  // ref.current.classList.add('remixui_icon')
+  console.log(`new status for ${name} is :`, { title, type: thisType, key, text })
   return { title, type: thisType, key, text }
 }
 
 export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAction) {
-  const status = setIconStatus(action.type, action.payload.status, action.payload.ref)
-  if (action.type.length > 0) {
-    console.log(`from reducer of ${action.type} :`, { status })
-    return status
+  const { status, ref, verticalIconPlugin } = action.payload
+  if (Object.keys(verticalIconPlugin.targetProfileForChange).includes(action.type)) {
+    const setStatus = setIconStatus(action.type, status)
+    console.log(`from reducer of ${action.type} :`, { setStatus })
+    return setStatus
   }
   return state
 }

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -44,9 +44,10 @@
     bottom: 0;
   }
   .remixui_status {
-    /* position: relative;
+    /* position: relative; */
     bottom: 0;
-    right: 0; */
+    right: 0;
+    align-self: flex-end;
   }
   .remixui_statusCheck {
     font-size: 1.2em;