From 6d2083b8e3ac7dbbe69f00fc6776b259a61b5e29 Mon Sep 17 00:00:00 2001 From: joseph izang Date: Thu, 15 Jul 2021 10:24:09 +0100 Subject: [PATCH] pass one large prop pluginComponent to maintain context --- .gitignore | 3 +- .../components/plugin-manager-component.js | 79 ++++++----- .../src/lib/components/button.tsx | 8 +- .../src/lib/components/moduleHeading.tsx | 9 +- .../src/lib/components/pluginCard.tsx | 4 +- .../src/lib/components/rootView.tsx | 133 +++++++++++------- .../src/lib/remix-ui-plugin-manager.tsx | 2 +- libs/remix-ui/plugin-manager/src/types.d.ts | 130 ++++++++++------- 8 files changed, 214 insertions(+), 154 deletions(-) diff --git a/.gitignore b/.gitignore index 4f0a8bafd7..75cfe519e7 100644 --- a/.gitignore +++ b/.gitignore @@ -51,4 +51,5 @@ testem.log # System Files .DS_Store -Thumbs.db \ No newline at end of file +Thumbs.db +.vscode/settings.json diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js index 8305ebc802..ebd1c9a7e4 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -97,7 +97,6 @@ class PluginManagerComponent extends ViewPlugin { this.engine = engine this.htmlElement = document.createElement('div') this.htmlElement.setAttribute('id', 'pluginManager') - this.props = {} this.views = { root: null, items: {} @@ -106,12 +105,10 @@ class PluginManagerComponent extends ViewPlugin { this.filter = '' this.activePlugins = [] this.inactivePlugins = [] - this.activePluginNames = this.appManager.actives - // this.appManager.event.on('activate', () => { this.reRender() }) - // this.appManager.event.on('deactivate', () => { this.reRender() }) - // this.engine.event.on('onRegistration', () => { this.reRender() }) - // const { actives, inactives } = this.getAllPlugins() - console.log('views property contents', this.views) + this.pluginNames = this.appManager.actives + // this.appManager.event.on('activate', () => { this.renderComponent() }) + // this.appManager.event.on('deactivate', () => { this.renderComponent() }) + // this.engine.event.on('onRegistration', () => { this.renderComponent() }) } isActive (name) { @@ -119,15 +116,19 @@ class PluginManagerComponent extends ViewPlugin { } activateP (name) { - // console.log(this.appManager) this.appManager.turnPluginOn(name) + console.log('activateP method reached. And activation of method was successful') _paq.push(['trackEvent', 'manager', 'activate', name]) + this.renderComponent() + console.log('activation was logged in _paq and renderComponent has been called.') } deactivateP (name) { - // console.log(this.appManager) this.call('manager', 'deactivatePlugin', name) + console.log('deactivateP has been called successfully') _paq.push(['trackEvent', 'manager', 'deactivate', name]) + this.renderComponent() + console.log('deactivation was logged and renderComponent has has been called.') } onActivation () { @@ -138,15 +139,17 @@ class PluginManagerComponent extends ViewPlugin { ReactDOM.render( , document.getElementById('pluginManager')) } @@ -176,29 +179,29 @@ class PluginManagerComponent extends ViewPlugin { render () { // 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 - } + // 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 + // } - 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: [] }) - this.activePlugins = actives - this.inactivePlugins = 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: [] }) + // this.activePlugins = actives + // this.inactivePlugins = inactives return this.htmlElement } @@ -208,10 +211,10 @@ class PluginManagerComponent extends ViewPlugin { // } // } - // filterPlugins ({ target }) { - // this.filter = target.value.toLowerCase() - // this.reRender() - // } + filterPlugins ({ target }) { + this.filter = target.value.toLowerCase() + this.renderComponent() + } } module.exports = PluginManagerComponent diff --git a/libs/remix-ui/plugin-manager/src/lib/components/button.tsx b/libs/remix-ui/plugin-manager/src/lib/components/button.tsx index 0bb723b729..203e0b5741 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/button.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/button.tsx @@ -7,19 +7,17 @@ interface ButtonProps { } function Button ({ buttonText, pluginName }: ButtonProps) { - const { appManager, _paq } = useContext(PluginManagerContext) + const { pluginComponent } = useContext(PluginManagerContext) const dataId = `pluginManagerComponentDeactivateButton${pluginName}` const [needToDeactivate] = useState('btn btn-secondary btn-sm') const [needToActivate] = useState('btn btn-success btn-sm') return (
- {actives !== undefined - ? () - : () + {activeP !== undefined + ? ( + + + {activeP.map((profile) => ( + + ))} + + ) + : null } - {inactives !== undefined ? () : } + {inactiveP !== undefined ? ( + + + {inactiveP.map((profile) => ( + + ))} + + ) : null}
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 26e5e33cbe..9d28b225a4 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 @@ -5,7 +5,7 @@ import PluginManagerContextProvider from './contexts/pluginmanagercontext' import './remix-ui-plugin-manager.css' export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { - console.log('current state of appmanager', props.appManager) + console.log('current state of appmanager', props.pluginComponent) console.log('The state of props ', props) return ( diff --git a/libs/remix-ui/plugin-manager/src/types.d.ts b/libs/remix-ui/plugin-manager/src/types.d.ts index 450f3a3336..23049a2430 100644 --- a/libs/remix-ui/plugin-manager/src/types.d.ts +++ b/libs/remix-ui/plugin-manager/src/types.d.ts @@ -2,48 +2,9 @@ import { PermissionHandler } from './app/ui/persmission-handler' import { PluginManager } from '@remixproject/engine/lib/manager' import { EventEmitter } from 'events' import { Engine } from '@remixproject/engine/lib/engine' -import { Profile } from '@remixproject/plugin-utils' +import { PluginBase, Profile } from '@remixproject/plugin-utils' +import { ViewPlugin } from '@remixproject/engine-web' /* eslint-disable camelcase */ - -// eslint-disable-next-line no-use-before-define -export = LocalPlugin; -declare class LocalPlugin { - /** - * Open a modal to create a local plugin - * @param {Profile[]} plugins The list of the plugins in the store - * @returns {Promise<{api: any, profile: any}>} A promise with the new plugin profile - */ - open(plugins: any[]): Promise<{ - api: any; - profile: any; - }>; - - profile: any; - /** - * Create the object to add to the plugin-list - */ - create(): any; - updateName({ target }: { - target: any; - }): void; - - updateUrl({ target }: { - target: any; - }): void; - - updateDisplayName({ target }: { - target: any; - }): void; - - updateProfile(key: any, e: any): void; - updateMethods({ target }: { - target: any; - }): void; - - /** The form to create a local plugin */ - form(): any; -} - declare module 'yo-yo'{ interface yo_yo { (strings:string[], ...values:any[]):HTMLElement; @@ -99,17 +60,86 @@ export class RemixAppManager extends PluginManager { turnPluginOff(name: string); } -export interface PluginManagerContextProviderProps { +export class PluginManagerSettings { + openDialog(): void; + permissions: any; + currentSetting: any; + onValidation(): void; + /** Clear one permission from a plugin */ + clearPersmission(from: any, to: any, method: any): void; + /** Clear all persmissions from a plugin */ + clearAllPersmission(to: any): void; + settings(): any; + render(): any; +} + +export class PluginManagerComponent extends ViewPlugin extends Plugin implements PluginBase { + constructor(appManager: RemixAppManager, engine: Engine) appManager: RemixAppManager - engine: RemixEngine + engine: Engine + htmlElement: HTMLDivElement + views: { root: null, items: {} } localPlugin: LocalPlugin - _paq: any + pluginNames: string[] + inactivePlugins: Profile[] + activePlugins: Profile[] filter: string + isActive(name: string): boolean + activateP(name: string): void + deactivateP(name: string): void + onActivation(): void + renderComponent(): void + openLocalPlugin(): Promise + render(): HTMLDivElement + filterPlugins({ target }: { target: any }) : void +} + +// eslint-disable-next-line no-use-before-define +export = LocalPlugin; +declare class LocalPlugin { + /** + * Open a modal to create a local plugin + * @param {Profile[]} plugins The list of the plugins in the store + * @returns {Promise<{api: any, profile: any}>} A promise with the new plugin profile + */ + open(plugins: any[]): Promise<{ + api: any; + profile: any; + }>; + + profile: any; + /** + * Create the object to add to the plugin-list + */ + create(): any; + updateName({ target }: { + target: any; + }): void; + + updateUrl({ target }: { + target: any; + }): void; + + updateDisplayName({ target }: { + target: any; + }): void; + + updateProfile(key: any, e: any): void; + updateMethods({ target }: { + target: any; + }): void; + + /** The form to create a local plugin */ + form(): any; +} + +export interface PluginManagerContextProviderProps { + appManager: RemixAppManager + pluginComponent: PluginManagerComponent + pluginSettings: PluginManagerSettings activePluginNames: string[] actives: Partial[] inactives: Partial[] - activatePlugin: (name: string) => void - deActivatePlugin: (name: string) => void isActive?: (name: string) => boolean filterPlugins: () => void profile: Partial @@ -119,15 +149,11 @@ export interface PluginManagerContextProviderProps { export interface RemixUiPluginManagerProps { appManager: RemixAppManager - engine: RemixEngine - localPlugin: LocalPlugin - _paq: any // Window & typeof globalThis | [] - filter: string + pluginComponent: PluginManagerComponent + pluginSettings: PluginManagerSettings // Window & typeof globalThis | [] activePluginNames: string[] actives: Partial[] inactives: Partial[] - activatePlugin: (name: string) => void - deActivatePlugin: (name: string) => void isActive?: (name: string) => boolean filterPlugins: () => void profile: Partial