From b19bd5640b532f8678e6a6849ee3936eba95746a Mon Sep 17 00:00:00 2001 From: joseph izang Date: Mon, 9 Aug 2021 00:33:36 +0100 Subject: [PATCH] refactored components by hoisting state --- .../src/tests/pluginManager.spec.ts | 6 ++-- .../src/lib/components/ActivePluginCard.tsx | 4 --- .../components/ActivePluginCardContainer.tsx | 5 ++- .../InactivePluginCardContainer.tsx | 36 ++++++++++++------- .../src/lib/components/LocalPluginForm.tsx | 2 +- .../src/lib/remix-ui-plugin-manager.tsx | 9 ++++- 6 files changed, 37 insertions(+), 25 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/pluginManager.spec.ts b/apps/remix-ide-e2e/src/tests/pluginManager.spec.ts index c709f8919c..a610b86ae0 100644 --- a/apps/remix-ide-e2e/src/tests/pluginManager.spec.ts +++ b/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) { diff --git a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx index e90417d76a..28f2b9b973 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx +++ b/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[]>> setActivePlugins: Dispatch[]>> activePlugins: Profile[] } @@ -21,9 +19,7 @@ function ActivePluginCard ({ profile, buttonText, deactivatePlugin, - inactivePlugins, activePlugins, - setInactivePlugins, setActivePlugins }: PluginCardProps) { const [displayName] = useState((profile.displayName) ? profile.displayName : profile.name) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx index 4ac512bc15..9c109794cf 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx +++ b/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[]>> + activeProfiles: Profile[] } function ActivePluginCardContainer ({ pluginComponent }: ActivePluginCardContainerProps) { const [activeProfiles, setActiveProfiles] = useState() - const [inactiveProfiles, setinactiveProfiles] = useState([]) 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} /> diff --git a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx index bf5abef9c7..407299d3b5 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx +++ b/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[]>> + inactiveProfiles: Profile[] } interface LocalPluginInterface { @@ -18,9 +20,7 @@ interface LocalPluginInterface { listener: [] iframe: {} } -function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardContainerProps) { - const [activeProfiles, setActiveProfiles] = useState() - const [inactiveProfiles, setinactiveProfiles] = useState([]) +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 ( {(inactiveProfiles && inactiveProfiles.length) ? : null} - {inactiveProfiles && inactiveProfiles.map(profile => ( + {inactiveProfiles && inactiveProfiles.map((profile, idx) => ( )) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx index aa6f002634..cfc9741a71 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx @@ -173,7 +173,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa - + ) } diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx index d92647edac..380a3c2581 100644 --- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx +++ b/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(pluginComponent.activePlugins) + const [inactiveProfiles, setinactiveProfiles] = useState(pluginComponent.inactivePlugins) if (JSON.parse(localStorage.getItem('newActivePlugins')) === null) { localStorage.setItem('newActivePlugins', '[]') } @@ -23,9 +26,13 @@ export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerPr