refactored components by hoisting state

apps/remix-ide-e2e/src/tests/pluginManager.spec.ts

@@ -133,10 +133,10 @@ module.exports = {
       .click('*[data-id="localPluginRadioButtonsidePanel"]')
       .click('*[data-id="pluginManagerLocalPluginModalDialogModalDialogModalFooter-react"]')
       // .modalFooterOKClick()
-      // .pause(5000)
-      // .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)')
+      .pause(5000)
+      .waitForElementVisible('*[data-shared="tooltipPopup"]')
       .pause(2000)
-      .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Cannot create Plugin : This name has already been used')
+      .assert.containsText('*[data-shared="tooltipPopup"]', 'Cannot create Plugin : This name has already been used')
   },
 
   'Should load back installed plugins after reload': function (browser: NightwatchBrowser) {

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

@@ -10,8 +10,6 @@ interface PluginCardProps {
   profile: any
   buttonText: string
   deactivatePlugin: (pluginName: string) => void
-  inactivePlugins: Profile[]
-  setInactivePlugins: Dispatch<React.SetStateAction<Profile<any>[]>>
   setActivePlugins: Dispatch<React.SetStateAction<Profile<any>[]>>
   activePlugins: Profile[]
 }
@@ -21,9 +19,7 @@ function ActivePluginCard ({
   profile,
   buttonText,
   deactivatePlugin,
-  inactivePlugins,
   activePlugins,
-  setInactivePlugins,
   setActivePlugins
 }: PluginCardProps) {
   const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name)

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

@@ -6,10 +6,11 @@ import ModuleHeading from './moduleHeading'
 
 interface ActivePluginCardContainerProps {
   pluginComponent: PluginManagerComponent
+  setActiveProfiles: React.Dispatch<React.SetStateAction<Profile<any>[]>>
+  activeProfiles: Profile[]
 }
 function ActivePluginCardContainer ({ pluginComponent }: ActivePluginCardContainerProps) {
   const [activeProfiles, setActiveProfiles] = useState<Profile[]>()
-  const [inactiveProfiles, setinactiveProfiles] = useState<Profile[]>([])
   const deactivatePlugin = (pluginName: string) => {
     pluginComponent.deactivateP(pluginName)
   }
@@ -31,8 +32,6 @@ function ActivePluginCardContainer ({ pluginComponent }: ActivePluginCardContain
           profile={profile}
           deactivatePlugin={deactivatePlugin}
           key={idx}
-          setInactivePlugins={setinactiveProfiles}
-          inactivePlugins={inactiveProfiles}
           activePlugins={activeProfiles}
           setActivePlugins={setActiveProfiles}
         />

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

@@ -1,11 +1,13 @@
 import { Profile } from '@remixproject/plugin-utils'
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { PluginManagerComponent, PluginManagerProfile } from '../../types'
 import InactivePluginCard from './InactivePluginCard'
 import ModuleHeading from './moduleHeading'
 
 interface InactivePluginCardContainerProps {
   pluginComponent: PluginManagerComponent
+  setInactiveProfiles: React.Dispatch<React.SetStateAction<Profile<any>[]>>
+  inactiveProfiles: Profile<any>[]
 }
 
 interface LocalPluginInterface {
@@ -18,9 +20,7 @@ interface LocalPluginInterface {
   listener: []
   iframe: {}
 }
-function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardContainerProps) {
-  const [activeProfiles, setActiveProfiles] = useState<Profile[]>()
-  const [inactiveProfiles, setinactiveProfiles] = useState<Profile[]>([])
+function InactivePluginCardContainer ({ pluginComponent, setInactiveProfiles, inactiveProfiles }: InactivePluginCardContainerProps) {
   const activatePlugin = (profile: Profile) => {
     pluginComponent.activateP(profile.name)
   }
@@ -28,32 +28,42 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon
   useEffect(() => {
     const savedInactiveProfiles: Profile[] = JSON.parse(localStorage.getItem('updatedInactives'))
     const savedLocalPlugins: LocalPluginInterface = JSON.parse(localStorage.getItem('plugins/local'))
-    if (savedInactiveProfiles && savedInactiveProfiles.length > 0 && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) {
+    const savedActiveProfiles: Profile[] = JSON.parse(localStorage.getItem('newActivePlugins'))
+    if (savedInactiveProfiles && savedInactiveProfiles.length) {
       if (Object.keys(savedLocalPlugins).length > 0 && !pluginComponent.inactivePlugins.includes(savedLocalPlugins.profile as Profile)) {
         const inactiveLocalPlugin = savedLocalPlugins.profile
         localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name)
         savedInactiveProfiles.push(inactiveLocalPlugin as Profile)
       }
-      setinactiveProfiles(savedInactiveProfiles)
+      // setinactiveProfiles(savedInactiveProfiles)
     } else if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length > 0) {
-      const temp = []
+      let temp: Profile[] = []
       if (Object.keys(savedLocalPlugins).length > 0) {
         const inactiveLocalPlugin = savedLocalPlugins.profile
         localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name)
-        temp.push([...pluginComponent.inactivePlugins, inactiveLocalPlugin])
-        setinactiveProfiles(temp)
       }
-      setinactiveProfiles(pluginComponent.inactivePlugins)
+      if (Object.keys(savedLocalPlugins).length) {
+        temp = [...pluginComponent.inactivePlugins, savedLocalPlugins.profile as Profile]
+      } else {
+        temp = [...pluginComponent.inactivePlugins]
+      }
+      const filtered = temp.filter(t => {
+        return !savedActiveProfiles.find(active => {
+          return active.name === t.name
+        })
+      })
+      console.log(filtered)
+      setInactiveProfiles(filtered)
     }
-  }, [pluginComponent, pluginComponent.inactivePlugins])
+  }, [pluginComponent, pluginComponent.inactivePlugins, setInactiveProfiles])
   return (
     <Fragment>
       {(inactiveProfiles && inactiveProfiles.length) ? <ModuleHeading headingLabel="Inactive Modules" count={inactiveProfiles.length} /> : null}
-      {inactiveProfiles && inactiveProfiles.map(profile => (
+      {inactiveProfiles && inactiveProfiles.map((profile, idx) => (
         <InactivePluginCard
           buttonText="Activate"
           profile={profile}
-          key={profile.name}
+          key={profile.name || idx}
           activatePlugin={activatePlugin}
         />
       ))

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

@@ -173,7 +173,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
           </div>
         </div>
       </form>
-    </ModalDialog><Toaster message={`Cannot create Plugin : ${errorMsg}`} timeOut={3000} /></>
+    </ModalDialog><Toaster message={`Cannot create Plugin : ${errorMsg}`} timeOut={10000} /></>
   )
 }
 

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

@@ -1,4 +1,5 @@
-import React from 'react'
+import { Profile } from '@remixproject/plugin-utils'
+import React, { useState } from 'react'
 import { RemixUiPluginManagerProps } from '../types'
 import ActivePluginCardContainer from './components/ActivePluginCardContainer'
 import InactivePluginCardContainer from './components/InactivePluginCardContainer'
@@ -6,6 +7,8 @@ import RootView from './components/rootView'
 import './remix-ui-plugin-manager.css'
 
 export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerProps) => {
+  const [activeProfiles, setActiveProfiles] = useState<Profile[]>(pluginComponent.activePlugins)
+  const [inactiveProfiles, setinactiveProfiles] = useState<Profile[]>(pluginComponent.inactivePlugins)
   if (JSON.parse(localStorage.getItem('newActivePlugins')) === null) {
     localStorage.setItem('newActivePlugins', '[]')
   }
@@ -23,9 +26,13 @@ export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerPr
       <section data-id="pluginManagerComponentPluginManagerSection">
         <ActivePluginCardContainer
           pluginComponent={pluginComponent}
+          setActiveProfiles={setActiveProfiles}
+          activeProfiles={activeProfiles}
         />
         <InactivePluginCardContainer
           pluginComponent={pluginComponent}
+          setInactiveProfiles={setinactiveProfiles}
+          inactiveProfiles={inactiveProfiles}
         />
       </section>
     </RootView>