Implemented basic space selector

src/editor/js/components/editor.tsx

@@ -3,7 +3,6 @@ import PropTypes, { InferType } from "prop-types";
 import { State } from "../state";
 import * as Interactions from "../interactions";
 import { Graph } from "../structures/graph/graph";
-import ForceGraph from "force-graph";
 import { loadGraphJson } from "../../../datasets";
 import { ToolPool } from "./toolpool";
 import { ToolDetails } from "./tooldetails";
@@ -63,7 +62,7 @@ export class Editor extends React.PureComponent<
         console.log("Starting to load new graph ...");
         console.log(data);
         console.log(Graph.parse(data));
-        
+
         // Create global objects
         const newState = new State();
         const newGraph = Graph.parse(data);
@@ -168,7 +167,7 @@ export class Editor extends React.PureComponent<
                 <h1>Interface</h1>
                 <div id="content">
                     <div id="sidepanel">
-                        <SpaceSelect />
+                        <SpaceSelect onLoadSpace={this.loadSpace} />
                         <hr />
                         <ToolPool state={this.state.state} />
                         <hr />

src/editor/js/components/spaceselect.tsx

-import React from "react";
+import React, { ChangeEvent } from "react";
 import { ReactNode } from "react";
-import "./spaceselect.css"
+import { listAllSpaces } from "../../../datasets";
+import "./spaceselect.css";
+
+type propTypes = {
+    onLoadSpace: (spaceId: string) => boolean;
+};
+
+type stateTypes = {
+    spaces: string[];
+};
+
+export class SpaceSelect extends React.Component<propTypes, stateTypes> {
+    constructor(props: propTypes) {
+        super(props);
+        this.state = {
+            spaces: [],
+        };
+
+        this.handleSelectChange = this.handleSelectChange.bind(this);
+        this.updateSpaceList = this.updateSpaceList.bind(this);
+
+        listAllSpaces().then(this.updateSpaceList);
+    }
+
+    updateSpaceList(spaceList: string[]) {
+        this.setState({
+            spaces: spaceList,
+        });
+    }
+
+    handleSelectChange(e: ChangeEvent<HTMLSelectElement>) {
+        const success = this.props.onLoadSpace(e.target.value);
+
+        if (!success) {
+            alert("Failed to load space with id [" + e.target.value + "]");
+        }
+    }
 
-export class SpaceSelect extends React.Component {
     render(): ReactNode {
         return (
             <div id="spaceselect">
-                <select>
-                    <option>Space</option>
-                    <option>AuD1</option>
+                <select onChange={this.handleSelectChange}>
+                    {this.state.spaces.map((spaceName: string) => (
+                        <option key={spaceName} value={spaceName}>
+                            {spaceName}
+                        </option>
+                    ))}
                 </select>
                 <button>Save</button>
             </div>