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" />