From 6fd03b1f4c40d72ba785b8601f9b0e11ad4cefbb Mon Sep 17 00:00:00 2001
From: joseph izang <joeizang@hotmail.com>
Date: Mon, 23 Aug 2021 11:24:27 +0100
Subject: [PATCH] add localPlugin Form state fix

---
 .../src/lib/components/LocalPluginForm.tsx    |  8 ++---
 .../src/lib/custom-hooks/useLocalStorage.ts   | 36 +++++++++++++++++++
 .../remix-ui/plugin-manager/tsconfig.lib.json |  3 ++
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts

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 d8ea7c59bb..15e8546ac5 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
@@ -97,7 +97,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setName(e.target.value)}
-            value={ name }
+            value={ name || defaultPlugin.name }
             id="plugin-name"
             data-id="localPluginName"
             placeholder="Should be camelCase" />
@@ -107,7 +107,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setDisplayName(e.target.value)}
-            value={ displayName }
+            value={ displayName || defaultPlugin.displayName }
             id="plugin-displayname"
             data-id="localPluginDisplayName"
             placeholder="Name in the header" />
@@ -117,7 +117,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setMethods(e.target.value)}
-            value={ methods }
+            value={ methods || defaultPlugin.methods }
             id="plugin-methods"
             data-id="localPluginMethods"
             placeholder="Name in the header" />
@@ -128,7 +128,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setUrl(e.target.value)}
-            value={ url }
+            value={ url || defaultPlugin.url }
             id="plugin-url"
             data-id="localPluginUrl"
             placeholder="ex: https://localhost:8000" />
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
new file mode 100644
index 0000000000..19ea07b7eb
--- /dev/null
+++ b/libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts
@@ -0,0 +1,36 @@
+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<any>(() => {
+    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
+}
diff --git a/libs/remix-ui/plugin-manager/tsconfig.lib.json b/libs/remix-ui/plugin-manager/tsconfig.lib.json
index ae1aeb41d7..8b7894d03b 100644
--- a/libs/remix-ui/plugin-manager/tsconfig.lib.json
+++ b/libs/remix-ui/plugin-manager/tsconfig.lib.json
@@ -1,10 +1,13 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react",
+    "composite": true,
     "outDir": "../../../dist/out-tsc",
     "types": ["node"]
   },
   "files": [],
+  "composite": true,
   "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
   "references": [