From 59e4db6a434271004c10653ab5e2e59261e3266d Mon Sep 17 00:00:00 2001 From: joseph izang Date: Thu, 5 Aug 2021 16:50:51 +0100 Subject: [PATCH] trying manual plumbing for localplugin creation --- .../components/ActivePluginCardContainer.tsx | 2 +- .../src/lib/components/InactivePluginCard.tsx | 15 +--- .../InactivePluginCardContainer.tsx | 36 +++++++-- .../src/lib/components/LocalPluginForm.tsx | 60 +++++++------- .../src/lib/remix-ui-plugin-manager.tsx | 17 +--- .../src/pluginManagerStateMachine.ts | 80 ++----------------- 6 files changed, 73 insertions(+), 137 deletions(-) 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 7e6fb4d108..12e43ff83c 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx @@ -33,7 +33,7 @@ function ActivePluginCardContainer ({ pluginComponent }: ActivePluginCardContain buttonText="Deactivate" profile={profile} deactivatePlugin={deactivatePlugin} - key={profile.name} + key={profile.version} setInactivePlugins={setinactiveProfiles} inactivePlugins={inactiveProfiles} activePlugins={activeProfiles} diff --git a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx index 9e9b79089a..5b4b9dff81 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx @@ -1,6 +1,6 @@ -import { getSolidity } from '@remix-ui/plugin-manager' import { Profile } from '@remixproject/plugin-utils' import React, { Dispatch, useState } from 'react' +import { getSolidity } from '../../pluginManagerStateMachine' import { PluginManagerComponent } from '../../types' import '../remix-ui-plugin-manager.css' interface PluginCardProps { @@ -71,6 +71,7 @@ function InactivePluginCard ({ if (workspacePlugins.includes('solidity') === true && workspacePlugins.includes('solidity-logic') === true) { if (pluginComponent.activeProfiles.includes('solidity') && pluginComponent.activeProfiles.includes('solidity-logic')) { const result = await getSolidity(pluginComponent) + // check to make sure that solidity isn't already in tempList so that it won't be persisted to lcoalstorage twice. tempList.push(...result) } } @@ -81,18 +82,6 @@ function InactivePluginCard ({ const temp = inactivePlugins.filter(plugin => plugin.name !== profile.name).filter(plugin => plugin.name !== 'solidity' && plugin.name !== 'solidity-logic') setInactivePlugins(temp) localStorage.setItem('updatedInactives', JSON.stringify(temp)) - // const newActives = JSON.parse(localStorage.getItem('newActivePlugins')) - // // const updatedInactives = JSON.parse(localStorage.getItem('updatedInactives')) - // if (newActives === null || newActives.length === 0) { - // localStorage.setItem('newActivePlugins', JSON.stringify(getSolidity(pluginComponent))) - // const filteredInactives = pluginComponent.inactivePlugins.filter(inactive => inactive.name !== 'solidity' && - // inactive.name !== 'solidity-logic') - // localStorage.setItem('updatedInactives', JSON.stringify(filteredInactives)) - // } - // } - // } - // check to make sure that this activated profile is removed from inactives - // this should happen higher up in use effect at the root checking for the length of trackActiveProfiles }} className="btn btn-success btn-sm" data-id={`pluginManagerComponentActivateButton${profile.name}`} 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 81984091c9..1bed59fc34 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx @@ -1,12 +1,23 @@ import { Profile } from '@remixproject/plugin-utils' import React, { Fragment, useEffect, useState } from 'react' -import { PluginManagerComponent } from '../../types' +import { PluginManagerComponent, PluginManagerProfile } from '../../types' import InactivePluginCard from './InactivePluginCard' import ModuleHeading from './moduleHeading' interface InactivePluginCardContainerProps { pluginComponent: PluginManagerComponent } + +interface LocalPluginInterface { + profile: Partial // { name: string, displayName: string, url: string, type: 'iframe' | 'ws', hash: string, methods: string, location: 'sidePanel' | 'mainPanel' | 'none'} + activateService: {} + requestQueue: [] + options: { queueTimeout: number } + id: number + pendingRequest: {} + listener: [] + iframe: {} +} function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardContainerProps) { const [activeProfiles, setActiveProfiles] = useState() const [inactiveProfiles, setinactiveProfiles] = useState([]) @@ -16,14 +27,29 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon } useEffect(() => { - const savedInactiveProfiles = JSON.parse(localStorage.getItem('updatedInactives')) + const savedInactiveProfiles: Profile[] = JSON.parse(localStorage.getItem('updatedInactives')) + const savedLocalPlugins: LocalPluginInterface = JSON.parse(localStorage.getItem('plugins/local')) if (savedInactiveProfiles === null) { localStorage.setItem('updatedInactives', '[]') } - if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length > 0) { - setinactiveProfiles(pluginComponent.inactivePlugins) - } else if (savedInactiveProfiles && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) { + if (savedLocalPlugins === null) { + localStorage.setItem('plugins/local', '{}') + } + if (savedInactiveProfiles && pluginComponent.inactivePlugins.length > 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) + } else if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length > 0) { + const temp = [] + if (Object.keys(savedLocalPlugins).length > 0) { + const inactiveLocalPlugin = savedLocalPlugins.profile + localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name) + temp.push([...pluginComponent.inactivePlugins, inactiveLocalPlugin]) + } + setinactiveProfiles(temp) } }, [pluginComponent, pluginComponent.inactivePlugins]) return ( 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 da78d32e26..31825318bd 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx @@ -1,7 +1,7 @@ +import React, { useState } from 'react' import { ModalDialog } from '@remix-ui/modal-dialog' import { Toaster } from '@remix-ui/toaster' import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web' -import React, { useState } from 'react' import { FormStateProps, PluginManagerComponent } from '../../types' interface LocalPluginFormProps { @@ -12,37 +12,37 @@ interface LocalPluginFormProps { pluginManager: PluginManagerComponent } -function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) { - const [errorMsg, setErrorMsg] = useState('') - const handleModalOkClick = async () => { - try { - const profile = JSON.parse(localStorage.getItem('plugins/local')) || plugin - if (!profile) return - if (profile.profile) { - if (pluginManager.appManager.getIds().includes(profile.profile.name)) { - throw new Error('This name has already been used') - } - } else { - if (pluginManager.appManager.getIds().includes(profile.name)) { - throw new Error('This name has already been used') - } - if (!profile.location) throw new Error('Plugin should have a location') - if (!profile.name) throw new Error('Plugin should have a name') - if (!profile.url) throw new Error('Plugin should have an URL') - const localPlugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile) - localPlugin.profile.hash = `local-${profile.name}` - pluginManager.engine.register(localPlugin) - // eslint-disable-next-line no-debugger - debugger - await pluginManager.appManager.activatePlugin(localPlugin.profile.name) - localStorage.setItem('plugins/local', JSON.stringify(localPlugin)) +const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps, setErrorMsg: React.Dispatch>) => { + try { + const profile = JSON.parse(localStorage.getItem('plugins/local')) || plugin + if (!profile) return + if (profile.profile) { + if (pluginManager.appManager.getIds().includes(profile.profile.name)) { + throw new Error('This name has already been used') + } + } else { + if (pluginManager.appManager.getIds().includes(profile.name)) { + throw new Error('This name has already been used') } - } catch (error) { - console.error(error) - // setErrorMsg(error.message) - setErrorMsg('This name has already been used') + if (!profile.location) throw new Error('Plugin should have a location') + if (!profile.name) throw new Error('Plugin should have a name') + if (!profile.url) throw new Error('Plugin should have an URL') + const localPlugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile) + localPlugin.profile.hash = `local-${profile.name}` + // <-------------------------------- Plumbing starts here ---------------------------------------> + pluginManager.engine.register(localPlugin) + localStorage.setItem('plugins/local', JSON.stringify(localPlugin)) + pluginManager.activateP(localPlugin.profile.name) } + } catch (error) { + console.error(error) + // setErrorMsg(error.message) + setErrorMsg('This name has already been used') } +} +function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) { + const [errorMsg, setErrorMsg] = useState('') + return ( <> handleModalOkClick(pluginManager, plugin, setErrorMsg) } cancelLabel="Cancel" cancelFn={closeModal} > 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 166bb68ddf..e186f65253 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,25 +1,10 @@ import React from 'react' -import { PluginManagerComponent, RemixUiPluginManagerProps } from '../types' +import { RemixUiPluginManagerProps } from '../types' import ActivePluginCardContainer from './components/ActivePluginCardContainer' import InactivePluginCardContainer from './components/InactivePluginCardContainer' import RootView from './components/rootView' import './remix-ui-plugin-manager.css' -export function getSolidity (pluginComponent: PluginManagerComponent) { - const fetchSolidity = async () => { - const solidity = await pluginComponent.appManager.getProfile('solidity') - const solidityLogic = await pluginComponent.appManager.getProfile('solidity-logic') - return [solidity, solidityLogic] - } - const materializeFetch = fetchSolidity() - return materializeFetch -} - -export function getWorkspacePluginNames () { - const workspace: string[] = JSON.parse(localStorage.getItem('workspace')) - return workspace -} - export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerProps) => { return ( diff --git a/libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts b/libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts index b33d2bfa4f..f44ae6a718 100644 --- a/libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts +++ b/libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts @@ -1,4 +1,3 @@ -import { Profile } from '@remixproject/plugin-utils' import { PluginManagerComponent } from './types' export const defaultActivatedPlugins = [ @@ -27,75 +26,12 @@ export const defaultActivatedPlugins = [ 'udapp' ] -// /** -// * Compares default enabled plugins of remix ide -// * and tracks newly activated plugins and manages -// * their state by persisting in local storage -// * @param newPlugin Profile of a Plugin -// * @param pluginComponent PluginManagerComponent Instance -// */ -// export async function PersistActivatedPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile) { -// const persisted = localStorage.getItem('newActivePlugins') -// const activatedPlugins: Profile[] = JSON.parse(persisted) - -// const newlyActivatedPlugins: Array = [] -// const defaultActivated = defaultActivatedPlugins.includes(newPlugin.name) === false -// if (newPlugin) { -// if (defaultActivated) { -// // if this is true then we are sure that the profile name is in localStorage/workspace -// if (activatedPlugins && activatedPlugins.length && !activatedPlugins.includes(newPlugin)) { -// await FetchAndPersistPlugin(pluginComponent, newPlugin, activatedPlugins) -// localStorage.setItem('newActivePlugins', JSON.stringify(activatedPlugins)) -// } else { -// await FetchAndPersistPlugin(pluginComponent, newPlugin, newlyActivatedPlugins) -// localStorage.setItem('newActivePlugins', JSON.stringify(newlyActivatedPlugins)) -// } -// } -// } -// } - -export function populateActivePlugins (pluginComponent: PluginManagerComponent) { - const activePluginNames = pluginComponent.activeProfiles - const filteredNames = [] - const workspace: string[] = JSON.parse(localStorage.getItem('workspace')) - defaultActivatedPlugins.forEach(defaultName => { - if (workspace.includes(defaultName) === false) { - filteredNames.push(defaultName) - } - }) - // filteredNames = activePluginNames.concat(defaultActivatedPlugins) - // const newArray = [...new Set(filteredNames)] - console.log('Here are the plugin names that should be shown!!', filteredNames) - // console.log('Here are the distinct profile names!!', newArray) +export function getSolidity (pluginComponent: PluginManagerComponent) { + const fetchSolidity = async () => { + const solidity = await pluginComponent.appManager.getProfile('solidity') + const solidityLogic = await pluginComponent.appManager.getProfile('solidity-logic') + return [solidity, solidityLogic] + } + const materializeFetch = fetchSolidity() + return materializeFetch } - -// async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile, newlyActivatedPlugins: Profile[]) { -// try { -// const targetProfile = await pluginComponent.appManager.getProfile(newPlugin.name) -// if (targetProfile !== null || targetProfile !== undefined) newlyActivatedPlugins.push(targetProfile) -// } catch { -// throw new Error('Could not fetch and persist target profile!') -// } -// } - -// /** -// * Remove a deactivated plugin from persistence (localStorage) -// * @param pluginName Name of plugin profile to be removed -// */ -// export function RemoveActivatedPlugin (pluginName: string) { -// const getWorkspacePlugins = JSON.parse(localStorage.getItem('newActivePlugins')) -// const removeExisting = getWorkspacePlugins.filter(target => target.name !== pluginName) -// localStorage.setItem('newActivePlugins', JSON.stringify(removeExisting)) -// } - -// /** -// * Gets the latest list of inactive plugin profiles and persist them -// * in local storage -// * @param inactivesList Array of inactive plugin profiles -// * @returns {void} -// */ -// export function PersistNewInactivesState (inactivesList: Profile[]) { -// if (inactivesList && inactivesList.length) { -// localStorage.setItem('updatedInactives', JSON.stringify(inactivesList)) -// } -// }