working on icons reducers

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, useRef, useState } from 'react'
+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 { defaultState, iconStatusReducer } from '../reducers/iconReducers'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -32,7 +33,7 @@ function Icon ({
   const { tooltip, displayName, name, kind, icon, documentation } = profile
   const [title] = useState(() => {
     const temp = tooltip || displayName || name
-    return temp.replace(/^\w/, word => word.toUpperCase())
+    return temp.replace(/^\w/, (word: string) => word.toUpperCase())
   })
   const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>(
       {} as { Documentation: string, CanDeactivate: boolean }
@@ -44,7 +45,8 @@ function Icon ({
   const [showContext, setShowContext] = useState(false)
   const [canDeactivate] = useState(false)
   const iconRef = useRef<any>(null)
-  const iconStatusValues = { title: '', key: '', type: '', text: '' }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [status, dispatchIconStatus] = useReducer(iconStatusReducer, defaultState)
 
   const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
     const deactivationState = verticalIconPlugin.appManager
@@ -63,45 +65,19 @@ function Icon ({
     setShowContext(false)
   }
 
-  /**
-   * resolve a classes list for @arg key
-   * @param {String} key
-   * @param {String} type
-   */
-  function resolveClasses (key: string, type: string) {
-    let classes = 'remixui_status'
-
-    switch (key) {
-      case 'succeed':
-        classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'edited':
-        classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'loading':
-        classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'failed':
-        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      default: {
-        classes += ' badge badge-pill badge-' + type
-      }
-    }
-    return classes
-  }
-
   /**
    * Set a new status for the @arg name
+   * keys = ['succeed', 'edited', 'none', 'loading', 'failed']
+   * types = ['error', 'warning', 'success', 'info', '']
    * @param {String} name
    * @param {Object} status
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function setIconStatus (name: string, status: { key: string | number, title: string, type: string }) {
+  function setIconStatus (name: string) {
     if (!iconRef.current) return
     const statusEl = iconRef.current.querySelector('i')
     if (statusEl) {
-      iconRef.current.removeChild(statusEl)
+      iconRef.current.removeChild(statusEl) // need to eject component instead of removing?
     }
     if (status.key === 'none') return // remove status
 
@@ -120,7 +96,7 @@ function Icon ({
 
     const icon = document.createElement('i')
     icon.title = title
-    icon.className = resolveClasses(key, type)
+    // icon.className = resolveClasses(key, type)
     icon.ariaHidden = 'true'
     const innerText = document.createTextNode(text)
     icon.appendChild(innerText)
@@ -128,21 +104,21 @@ function Icon ({
     iconRef.current.classList.add('remixui_icon')
   }
 
-  function listenOnStatus (profile: any) {
-    function setErrorStatus (status: any) {
-      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, status)
+  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())
     }
-    verticalIconPlugin.iconStatus[profile.name] = setErrorStatus
-    verticalIconPlugin.on(profile.name, 'statusChanged', verticalIconPlugin.iconStatus[profile.name])
+    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(profile)
+    listenOnStatus()
     return () => {
       console.log('just listened for status change ', { profile })
       addEventListener('statusChanged', (e) => {
@@ -180,15 +156,6 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
-      {verticalIconPlugin.iconStatus && Object.keys(verticalIconPlugin.iconStatus).length !== null ? (
-        <i
-          title={iconStatusValues.title}
-          className={resolveClasses(iconStatusValues.key, iconStatusValues.type)}
-          aria-hidden="true"
-        >
-          {iconStatusValues.text}
-        </i>
-      ) : null }
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}

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

@@ -3,8 +3,47 @@ export const defaultState: {
   title: string
   type: string
   text: string
-} = { key: '', title: '', type: '', text: '' }
+  profileName: string
+  errorStatus: () => void
+} = { key: '', title: '', type: '', text: '', profileName: '', errorStatus: () => {} }
 
-function iconStatusReducer (state, action: any) {
+export type IconStatusActionType = {
+  type: 'success' | 'warning' | 'error' | 'info' | ''
+  payload?: any
+}
+
+/** status: { key: string | number, title: string, type: string }
+   * resolve a classes list for @arg key
+   * @param {String} key
+   * @param {String} type
+   */
+function resolveClasses (key: string, type: string) {
+  let classes = 'remixui_status'
+
+  switch (key) {
+    case 'succeed':
+      classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    case 'edited':
+      classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    case 'loading':
+      classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    case 'failed':
+      classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    default: {
+      classes += ' badge badge-pill badge-' + type
+    }
+  }
+  return classes
+}
+
+export function iconStatusReducer (state, action: IconStatusActionType) {
+  const { type, payload } = action
+  if (type === 'success') {
+
+  }
   return defaultState
 }