implemented PluginLoader

scm-ui/src/components/PluginLoader.js

@@ -0,0 +1,93 @@
+// @flow
+import * as React from "react";
+import Loading from "./Loading";
+import { apiClient } from "../apiclient";
+
+type Props = {
+  children: React.Node
+};
+
+type State = {
+  finished: boolean,
+  message: string
+};
+
+type Plugin = {
+  id: string,
+  bundles: string[]
+};
+
+class PluginLoader extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      finished: false,
+      message: "booting"
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      message: "loading plugin information"
+    });
+    apiClient
+      .get("ui/plugins")
+      .then(response => response.text())
+      .then(JSON.parse)
+      .then(this.loadPlugins)
+      .then(() => {
+        this.setState({
+          finished: true
+        });
+      });
+  }
+
+  loadPlugins = (plugins: Plugin[]) => {
+    this.setState({
+      message: "loading plugins"
+    });
+
+    const promises = [];
+    for (let plugin of plugins) {
+      promises.push(this.loadPlugin(plugin));
+    }
+    return Promise.all(promises);
+  };
+
+  loadPlugin = (plugin: Plugin) => {
+    this.setState({
+      message: `loading ${plugin.name}`
+    });
+
+    const promises = [];
+    for (let bundle of plugin.bundles) {
+      // skip old bundles
+      // TODO remove old bundles
+      if (bundle.indexOf("/") !== 0) {
+        promises.push(this.loadBundle(bundle));
+      }
+    }
+    return Promise.all(promises);
+  };
+
+  loadBundle = (bundle: string) => {
+    return fetch(bundle)
+      .then(response => {
+        return response.text();
+      })
+      .then(script => {
+        // TODO is this safe???
+        eval(script);
+      });
+  };
+
+  render() {
+    const { message, finished } = this.state;
+    if (finished) {
+      return <div>{this.props.children}</div>;
+    }
+    return <Loading message={message} />;
+  }
+}
+
+export default PluginLoader;