install/uninstall plugin

packages/web/src/plugins/PluginsProvider.js

@@ -1,23 +1,40 @@
 import React from 'react';
+import _ from 'lodash';
 import axios from '../utility/axios';
+import { useInstalledPlugins } from '../utility/metadataLoaders';
 
 const PluginsContext = React.createContext(null);
 
 export default function PluginsProvider({ children }) {
-  const [plugins, setPlugins] = React.useState(null);
-  const handleLoadPlugin = async () => {
-    const resp = await axios.request({
-      method: 'get',
-      url: 'plugins/script',
-      params: {
-        plugin: 'csv',
-      },
-    });
-    const module = eval(resp.data);
-    console.log('MODULE', module);
+  const installedPlugins = useInstalledPlugins();
+  const [plugins, setPlugins] = React.useState({});
+  const handleLoadPlugins = async () => {
+    setPlugins((x) =>
+      _.pick(
+        x,
+        installedPlugins.map((y) => y.name)
+      )
+    );
+    for (const installed of installedPlugins) {
+      if (!_.keys(plugins).includes(installed.name)) {
+        console.log('Loading module', installed.name);
+        const resp = await axios.request({
+          method: 'get',
+          url: 'plugins/script',
+          params: {
+            packageName: installed.name,
+          },
+        });
+        const module = eval(resp.data);
+        setPlugins((v) => ({
+          ...v,
+          [installed.name]: module,
+        }));
+      }
+    }
   };
   React.useEffect(() => {
-    handleLoadPlugin();
-  }, []);
-  return <PluginsContext.Provider value={{ plugins, setPlugins }}>{children}</PluginsContext.Provider>;
+    handleLoadPlugins();
+  }, [installedPlugins]);
+  return <PluginsContext.Provider value={plugins}>{children}</PluginsContext.Provider>;
 }