fix icon badge

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

@@ -7,7 +7,7 @@ import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeR
 import { BadgeStatus, IconProfile, IconStatus } from './Icon'
 
 interface BadgeProps {
-  badgeStatus: BadgeStatus
+  badgeStatus?: BadgeStatus
 }
 
 // eslint-disable-next-line no-undef

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

@@ -3,9 +3,10 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 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 React, { Dispatch, Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import Badge from './Badge'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -13,7 +14,6 @@ import Badge from './Badge'
     contextMenuAction: (evt: any, profileName: string, documentation: string) => void
     addActive: (profileName: string) => void
     removeActive: () => void
-    badgeStatus?: BadgeStatus
   }
 
 export interface IconStatus {
@@ -41,14 +41,21 @@ export interface IconProfile {
     tooltip?: string
   }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: '',
+  pluginName: ''
+}
+
 function Icon ({
   profile,
   verticalIconPlugin,
   contextMenuAction,
   addActive,
-  removeActive,
+  removeActive
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  badgeStatus
 }: IconProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { tooltip, displayName, name, kind, icon, documentation } = profile
@@ -59,6 +66,7 @@ function Icon ({
   const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>(
       {} as { Documentation: string, CanDeactivate: boolean }
   )
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
   // @ts-ignore
   const [pageX, setPageX] = useState<number>(null)
   // @ts-ignore
@@ -85,6 +93,14 @@ function Icon ({
     setShowContext(false)
   }
 
+  useEffect(() => {
+    verticalIconPlugin.on(name, 'statusChanged', (iconStatus: IconStatus) => {
+      iconStatus.pluginName = name
+      const action: IconBadgeReducerAction = { type: name, payload: { status: iconStatus, verticalIconPlugin: verticalIconPlugin } }
+      dispatchStatusUpdate(action)
+    })
+  }, [])
+
   return (
     <Fragment>
       <div
@@ -114,7 +130,7 @@ function Icon ({
         <img className="remixui_image" src={icon} alt={name} />
         { badgeStatus && badgeStatus.pluginName === name ? (
           <Badge
-            badgeStatus={badgeStatus!}
+            badgeStatus={badgeStatus}
           />) : null }
       </div>
       {showContext ? (

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

@@ -19,30 +19,29 @@ interface OtherIconsProps {
   removeActive: () => void
 }
 
-const initialState = {
-  text: '',
-  key: '',
-  title: '',
-  type: '',
-  pluginName: ''
-}
+// const initialState = {
+//   text: '',
+//   key: '',
+//   title: '',
+//   type: '',
+//   pluginName: ''
+// }
 
 function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) {
-  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-
-  useEffect(() => {
-    Object.keys(verticalIconsPlugin.targetProfileForChange)
-      .filter(customFilter)
-      .forEach(p =>
-        verticalIconsPlugin.on(verticalIconsPlugin.targetProfileForChange[p].name, 'statusChanged', (iconStatus: IconStatus) => {
-          iconStatus.pluginName = verticalIconsPlugin.targetProfileForChange[p].name
-          const action: IconBadgeReducerAction = {
-            type: verticalIconsPlugin.targetProfileForChange[p].name,
-            payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin }
-          }
-          dispatchStatusUpdate(action)
-        }))
-  }, [verticalIconsPlugin.targetProfileForChange, Object.keys(verticalIconsPlugin.targetProfileForChange).length])
+  // useEffect(() => {
+  //   Object.keys(verticalIconsPlugin.targetProfileForChange)
+  //     .filter(customFilter)
+  //     .forEach(p =>
+  //       verticalIconsPlugin.on(verticalIconsPlugin.targetProfileForChange[p].name, 'statusChanged', (iconStatus: IconStatus) => {
+  //         iconStatus.pluginName = verticalIconsPlugin.targetProfileForChange[p].name
+  //         const action: IconBadgeReducerAction = {
+  //           type: verticalIconsPlugin.targetProfileForChange[p].name,
+  //           payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin }
+  //         }
+  //         console.log('check the event payload', { iconStatus })
+  //         dispatchStatusUpdate(action)
+  //       }))
+  // }, [verticalIconsPlugin.targetProfileForChange, Object.keys(verticalIconsPlugin.targetProfileForChange).length])
   return (
     <div id="otherIcons">
       {
@@ -58,7 +57,6 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove
               key={
                 verticalIconsPlugin.targetProfileForChange[p].displayName
               }
-              badgeStatus={badgeStatus}
             />
           ))}
     </div>

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

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

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

@@ -1,9 +1,8 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment, useEffect, useReducer } from 'react'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import { Fragment } from 'react'
 // import Badge from './Badge'
-import Icon, { IconStatus } from './Icon'
+import Icon from './Icon'
 
 interface SolidityStaticAnalysisProps {
   verticalIconsPlugin: VerticalIcons
@@ -12,22 +11,15 @@ 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) => {
-      iconStatus.pluginName = 'solidityStaticAnalysis'
-      const action: IconBadgeReducerAction = { type: 'solidityStaticAnalysis', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
-      dispatchStatusUpdate(action)
-    })
-  }, [])
+  // const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+  // useEffect(() => {
+  //   verticalIconsPlugin.on('solidityStaticAnalysis', 'statusChanged', (iconStatus: IconStatus) => {
+  //     iconStatus.pluginName = 'solidityStaticAnalysis'
+  //     const action: IconBadgeReducerAction = { type: 'solidityStaticAnalysis', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
+  //     dispatchStatusUpdate(action)
+  //   })
+  // }, [])
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -47,7 +39,6 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
-                badgeStatus={badgeStatus}
               />
             </div>
           ))