Finish implementing Context for easy state access

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -116,9 +116,9 @@ class PluginManagerComponent extends ViewPlugin {
     ReactDOM.render(<RemixUiPluginManager />, document.getElementById('pluginManager'))
   }
 
-  // isActive (name) {
-  //   return this.appManager.actives.includes(name)
-  // }
+  isActive (name) {
+    return this.appManager.actives.includes(name)
+  }
 
   activateP (name) {
     this.appManager.activatePlugin(name)
@@ -219,17 +219,17 @@ class PluginManagerComponent extends ViewPlugin {
     }
 
     //   // Filter all active and inactive modules that are not required
-    //   const { actives, inactives } = this.appManager.getAll()
-    //     .filter(isFiltered)
-    //     .filter(isNotRequired)
-    //     .filter(isNotDependent)
-    //     .filter(isNotHome)
-    //     .sort(sortByName)
-    //     .reduce(({ actives, inactives }, profile) => {
-    //       return this.isActive(profile.name)
-    //         ? { actives: [...actives, profile], inactives }
-    //         : { inactives: [...inactives, profile], actives }
-    //     }, { actives: [], inactives: [] })
+    const { actives, inactives } = this.appManager.getAll()
+      .filter(isFiltered)
+      .filter(isNotRequired)
+      .filter(isNotDependent)
+      .filter(isNotHome)
+      .sort(sortByName)
+      .reduce(({ actives, inactives }, profile) => {
+        return this.isActive(profile.name)
+          ? { actives: [...actives, profile], inactives }
+          : { inactives: [...inactives, profile], actives }
+      }, { actives: [], inactives: [] })
 
     //   const activeTile = actives.length !== 0
     //     ? yo`

libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx

@@ -12,7 +12,7 @@ function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProp
     <nav className="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
       <span className="navbar-brand plugins-list-title h6 mb-0 mr-2">{tileLabel.label}</span>
       <span className="badge badge-primary" style={{ cursor: 'default' }} data-id="pluginManagerComponentInactiveTilesCount">
-        {tileLabel.label === 'Active Module' ? activesCount : inactivesCount}
+        {tileLabel.label === 'Active Module' ? activesCount : tileLabel.label === 'Inactive Modules' ? inactivesCount : '-' }
       </span>
     </nav>
   )

libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx

-import React from 'react'
-import { Profile, TileLabel } from '../../customTypes'
+import React, { useContext } from 'react'
+import { PluginManagerContext } from '../remix-ui-plugin-manager'
 import ActiveTile from './activeTile'
 import ListGroupItem from './listGroupItem'
 
 interface RootViewProps {
   localPluginButtonText: string
-  activeProfiles: Profile[]
-  inactiveProfiles?: Profile[]
-  filterPlugins: () => void
-  openLocalPlugins: () => void
-  tileLabel: TileLabel
 }
 
-function RootView ({
-  localPluginButtonText,
-  activeProfiles,
-  inactiveProfiles,
-  filterPlugins,
-  openLocalPlugins,
-  tileLabel
-}: RootViewProps) {
+function RootView ({ localPluginButtonText }: RootViewProps) {
+  const { actives, inactives, tileLabel } = useContext(PluginManagerContext)
   return (
     <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
       <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
@@ -28,13 +17,13 @@ function RootView ({
       </header>
       <section data-id="pluginManagerComponentPluginManagerSection">
         <ActiveTile
-          activesCount={activeProfiles.length}
-          inactivesCount={inactiveProfiles.length}
+          activesCount={actives.length}
+          inactivesCount={inactives.length}
           tileLabel={tileLabel}
         />
         <ListGroupItem
-          activeProfiles={activeProfiles}
-          inactiveProfiles={inactiveProfiles}
+          activeProfiles={actives}
+          inactiveProfiles={inactives}
         />
       </section>
     </div>

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

 import React, { createContext, useEffect, useState } from 'react'
-import { Profile } from '../customTypes'
+import { Profile, TileLabel } from '../customTypes'
 import { RemixAppManager, RemixEngine, _Paq } from '../types'
 import RootView from './components/rootView'
 import './remix-ui-plugin-manager.css'
 
 /* eslint-disable-next-line */
-export interface RemixUiPluginManagerProps {
+export interface PluginManagerContextProviderProps {
   appManager: RemixAppManager
   engine: RemixEngine
   _paq: _Paq
   filter: string
+  actives: Profile[]
+  inactives: Profile[]
   activatePlugin: (name: string) => void
   deActivatePlugin: (name: string) => void
-  isActive: (name: string) => void
+  isActive: (name: string) => any
   openLocalPlugin: () => Promise<void>
   filterPlugins: () => void
   profile: Profile
+  tileLabel: TileLabel
 }
 
-export const PluginManagerContext = createContext({})
-
-function PluginManagerContextProvider ({ children }) {
-  const [globalState] = useState<RemixUiPluginManagerProps>({} as RemixUiPluginManagerProps)
-  return (
-    <PluginManagerContext.Provider value={globalState}>
-      {children}
-    </PluginManagerContext.Provider>
-  )
+export interface RemixUiPluginManagerProps {
+  appManager: RemixAppManager
+  engine: RemixEngine
+  _paq: _Paq
+  filter: string
+  actives: Profile[]
+  inactives: Profile[]
+  activatePlugin: (name: string) => void
+  deActivatePlugin: (name: string) => void
+  isActive: (name: string) => any
+  openLocalPlugin: () => Promise<void>
+  filterPlugins: () => void
+  profile: Profile
+  tileLabel: TileLabel
 }
 
-// // Filtering helpers
-//   const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
-//   const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
-//   const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
-//   const isNotHome = (profile) => profile.name !== 'home'
-//   const sortByName = (profileA, profileB) => {
-//     const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
-//     const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
-//     return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
-//   }
-
-//   // Filter all active and inactive modules that are not required
-//   const { actives, inactives } = this.appManager.getAll()
-//     .filter(isFiltered)
-//     .filter(isNotRequired)
-//     .filter(isNotDependent)
-//     .filter(isNotHome)
-//     .sort(sortByName)
-//     .reduce(({ actives, inactives }, profile) => {
-//       return this.isActive(profile.name)
-//         ? { actives: [...actives, profile], inactives }
-//         : { inactives: [...inactives, profile], actives }
-//     }, { actives: [], inactives: [] })
+export const PluginManagerContext = createContext<Partial<PluginManagerContextProviderProps>>({})
 
-export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
+function PluginManagerContextProvider ({ children, props }) {
   const [isFiltered] = useState((profile) =>
     (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(props.filter))
-  const [isNotRequired, setIsNotRequired] = useState<boolean>(false)
-  const [isNotDependent, setIsNotDependent] = useState((profile) => !props.appManager.isDependent(profile.name))
-  const [isNotHome, setIsNotHome] = useState((profile) => profile.name !== 'home')
-  const [sortByName, setSortByName] = useState<1 | -1 | 0>((profileA, profileB) => {
-    const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
-    const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
-    return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
-  })
+  const [isNotRequired, setIsNotRequired] = useState<any>()
+  const [isNotDependent, setIsNotDependent] = useState<any>()
+  const [isNotHome, setIsNotHome] = useState<any>()
+  const [sortByName, setSortByName] = useState<any>()
   const { actives, inactives } = props.appManager.getAll()
     .filter(isFiltered)
     .filter(isNotRequired)
@@ -71,21 +53,38 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
     .filter(isNotHome)
     .sort(sortByName)
     .reduce(({ actives, inactives }, profile) => {
-      return this.isActive(profile.name)
+      return props.isActive(profile.name)
         ? { actives: [...actives, profile], inactives }
         : { inactives: [...inactives, profile], actives }
     }, { actives: [], inactives: [] })
+  props.actives = actives
+  props.inactives = inactives
   useEffect(() => {
     const notRequired = (profile: Profile) => !props.appManager.isRequired(profile.name)
+    const notDependent = (profile) => !props.appManager.isDependent(profile.name)
+    const notHome = (profile) => profile.name !== 'home'
+    const sortedByName = (profileA: Profile, profileB: Profile) => {
+      const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
+      const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
+      return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
+    }
     setIsNotRequired(notRequired(props.profile))
-  })
+    setIsNotDependent(notDependent(notDependent))
+    setIsNotHome(notHome)
+    setSortByName(sortedByName)
+  }, [props.appManager, props.profile])
+  return (
+    <PluginManagerContext.Provider value={...props}>
+      {children}
+    </PluginManagerContext.Provider>
+  )
+}
 
+export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
   return (
-    <PluginManagerContextProvider>
+    <PluginManagerContextProvider props>
       <RootView
-        openLocalPlugins={props.openLocalPlugin}
-        filterPlugins={props.filterPlugins}
-        activeProfiles
+        localPluginButtonText="Connect to a Local Plugin"
       />
     </PluginManagerContextProvider>
   )