From 5381bc99e8a8de56a0bf60508b92993674bae9ee Mon Sep 17 00:00:00 2001 From: filip mertens Date: Tue, 24 Aug 2021 18:25:02 +0200 Subject: [PATCH 1/4] set default value --- .../plugin-manager/src/lib/components/permissionsSettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx index cf6b99cd97..692c18f76a 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx @@ -18,7 +18,7 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { const [permissions, setPermissions] = useLocalStorage('plugins/permissions', {} as PluginPermissions) const closeModal = () => setModalVisibility(true) const openModal = () => { - const currentValue = JSON.parse(window.localStorage.getItem('plugins/permissions')) + const currentValue = JSON.parse(window.localStorage.getItem('plugins/permissions') || '{}') setPermissions(currentValue) setModalVisibility(!modalVisibility) } From a69639893ace2300f46b75e43fb447bce7340928 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Tue, 24 Aug 2021 18:53:58 +0200 Subject: [PATCH 2/4] allowing stored plugin to be shown in modal --- .../components/plugin-manager-component.js | 2 +- .../src/lib/components/LocalPluginForm.tsx | 21 +++++++++++++------ 2 files changed, 16 insertions(+), 7 deletions(-) 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 fe0d2df02a..e86a62da92 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -67,7 +67,7 @@ class PluginManagerComponent extends ViewPlugin { this.engine.register(localPlugin) this.appManager.activatePlugin(localPlugin.profile.name) this.getAndFilterPlugins() - localStorage.setItem('plugins/local', JSON.stringify(localPlugin)) + localStorage.setItem('plugins/local', JSON.stringify(localPlugin.profile)) } } 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 38ee483563..71ddb5b7ff 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useReducer, useState } from 'react' +import React, { useEffect, useReducer, useState } from 'react' import { ModalDialog } from '@remix-ui/modal-dialog' import { Toaster } from '@remix-ui/toaster' import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web' @@ -35,7 +35,6 @@ const defaultProfile = { function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFormProps) { const [errorMsg, dispatchToastMsg] = useReducer(localPluginToastReducer, '') - const [defaultPlugin] = useState(JSON.parse(localStorage.getItem('plugins/local')) || defaultProfile) const [name, setName] = useState('') const [displayName, setDisplayName] = useState('') const [url, setUrl] = useState('') @@ -43,6 +42,16 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor const [location, setLocation] = useState<'sidePanel' | 'mainPanel' | 'none'>('sidePanel') const [methods, setMethods] = useState('') + useEffect(() => { + const storagePlugin:FormStateProps = localStorage.getItem('plugins/local') ? JSON.parse(localStorage.getItem('plugins/local')) : defaultProfile + setName(storagePlugin.name) + setUrl(storagePlugin.url) + setLocation(storagePlugin.location as 'sidePanel' | 'mainPanel' | 'none') + setMethods(storagePlugin.methods) + setType(storagePlugin.type) + setDisplayName(storagePlugin.displayName) + }, []) + const handleModalOkClick = async () => { try { if (!name) throw new Error('Plugin should have a name') @@ -97,7 +106,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor setName(e.target.value)} - value={ name || defaultPlugin.name } + value={ name} id="plugin-name" data-id="localPluginName" placeholder="Should be camelCase" /> @@ -107,7 +116,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor setDisplayName(e.target.value)} - value={ displayName || defaultPlugin.displayName } + value={ displayName } id="plugin-displayname" data-id="localPluginDisplayName" placeholder="Name in the header" /> @@ -117,7 +126,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor setMethods(e.target.value)} - value={ methods || defaultPlugin.methods } + value={ methods } id="plugin-methods" data-id="localPluginMethods" placeholder="Name in the header" /> @@ -128,7 +137,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor setUrl(e.target.value)} - value={ url || defaultPlugin.url } + value={ url } id="plugin-url" data-id="localPluginUrl" placeholder="ex: https://localhost:8000" /> From bee4590e2d648e10026809da36b55b8555443e1d Mon Sep 17 00:00:00 2001 From: filip mertens Date: Tue, 24 Aug 2021 19:02:08 +0200 Subject: [PATCH 3/4] rm console --- .../plugin-manager/src/lib/components/permissionsSettings.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx index 692c18f76a..42522ba1bb 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx @@ -91,7 +91,6 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { } useEffect(() => { - console.log({ permissions }) }, [Object.keys(permissions).length]) function clearAllPersmissions (pluginName: string, topLevelPluginName: string, funcName: string) { const permissionsCopy = permissions // don't mutate state From d6b431b0e1472d624c4b9f393c336b324dc46d5a Mon Sep 17 00:00:00 2001 From: filip mertens Date: Wed, 25 Aug 2021 09:28:20 +0200 Subject: [PATCH 4/4] rm comments --- .../src/lib/components/rootView.tsx | 1 - .../src/lib/custom-hooks/useLocalStorage.ts | 37 ------------------- .../src/lib/remix-ui-plugin-manager.tsx | 1 - 3 files changed, 39 deletions(-) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx index 567ea64f8c..c889aad285 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx @@ -33,7 +33,6 @@ function RootView ({ pluginComponent, pluginManagerSettings, children }: RootVie useEffect(() => { pluginComponent.getAndFilterPlugins(filterPlugins) }, [filterPlugins]) - // console.log('This is the state of pluginSettings instance passed from pluginmanager', pluginComponent.pluginSettings) return (
diff --git a/libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts b/libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts index 80e3ea3a4d..d4a90aa657 100644 --- a/libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts +++ b/libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts @@ -1,40 +1,3 @@ -// import { useState } from 'react' - -// // Hook -// export const useLocalStorage = (key: string, initialValue: any) => { -// // State to store our value -// // Pass initial state function to useState so logic is only executed once -// const [storedValue, setStoredValue] = useState(() => { -// try { -// // Get from local storage by key -// const item = window.localStorage.getItem(key) -// // Parse stored json or if none return initialValue -// return item ? JSON.parse(item) : initialValue -// } catch (error) { -// // If error also return initialValue -// console.log(error) -// return initialValue -// } -// }) -// // Return a wrapped version of useState's setter function that ... -// // ... persists the new value to localStorage. -// const setValue = (value: any | ((val: any) => any)) => { -// try { -// // Allow value to be a function so we have same API as useState -// const valueToStore = -// value instanceof Function ? value(storedValue) : value -// // Save state -// setStoredValue(valueToStore) -// // Save to local storage -// window.localStorage.setItem(key, JSON.stringify(valueToStore)) -// } catch (error) { -// // A more advanced implementation would handle the error case -// console.log(error) -// } -// } -// return [storedValue, setValue] as const -// } - import { Dispatch, SetStateAction, useEffect, useState } from 'react' type SetValue = Dispatch> 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 1af73faf85..56d042685c 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 @@ -10,7 +10,6 @@ import './remix-ui-plugin-manager.css' export const RemixUiPluginManager = ({ pluginComponent, pluginManagerSettings }: RemixUiPluginManagerProps) => { const [activeProfiles, setActiveProfiles] = useState(pluginComponent.activePlugins) const [inactiveProfiles, setinactiveProfiles] = useState(pluginComponent.inactivePlugins) - // console.log('This is the state of pluginSettings at the root of the components', pluginComponent.pluginSettings) return (