Add an interactive DB query window.

src/database.js

@@ -1,19 +1,42 @@
 import React from 'react';
 
+var DBTypeEnum = {
+  SQLITE: 1,
+  // INDEXEDDB: 2 // TODO: implement with migration
+};
+
+var DBLibraryEnum = {
+  ALASQL: 1
+}
+
 export class DB {
   state = {
-    db_object: false, // In current implementation, this is an alasql object.
+    db_type: false,
+    db_object: false,
     db_name: false,
+    db_library: false,
   }
 
-  constructor(obj, name) {
+  constructor(obj, name, type, library) {
     this.state.db_object = obj;
     this.state.db_name = name;
+    this.state.db_type = type;
+    this.state.db_library = library;
+  }
+
+  query_async(s) {
+    if(this.state.db_library === DBLibraryEnum.ALASQL) {
+      return this.state.db_object.promise(s);
+    }
+    throw new Error("Unsupported database library: " + this.state.db_library);
   }
 
-  query(s) {
+  query_sync(s) {
+    if(this.state.db_library === DBLibraryEnum.ALASQL) {
       return this.state.db_object(s);
     }
+    throw new Error("Unsupported database library: " + this.state.db_library);
+  }
 }
 
 function fetch_db_from_sqlite(filename) {
@@ -29,13 +52,14 @@ function fetch_db_from_sqlite(filename) {
       query += "ATTACH SQLITE DATABASE db(\"" + filename + "\"); USE db;";
       asql.promise(query)
       .then(res => {
-        var imported_db = new DB(asql, "db");
+        var imported_db = new DB(asql, "db", DBTypeEnum.SQLITE, DBLibraryEnum.ALASQL);
         resolve(imported_db);
       });
     });
   });
 }
 
+// TODO: generalize to FetchDB
 export class FetchSQLiteDB extends React.Component {
   state = {
     loading: true,
@@ -54,3 +78,46 @@ export class FetchSQLiteDB extends React.Component {
     return this.props.children(this.state);
   }
 }
+
+export class DBQueryBar extends React.Component {
+  onChangeHandler = (event) => {
+    this.props.onChange(event.target.value);
+  }
+
+  render() {
+    return (
+      <form>
+        <input type="text" onChange={ this.onChangeHandler }/>
+      </form>
+    );
+  }
+}
+
+export class DBQueryConsole extends React.Component {
+  state = {
+    processing: false,
+    result: false,
+    query: "",
+  }
+
+  onQueryChangeHandler = query => { this.setState( { query: query } ); }
+  onQuerySubmitHandler = () => {
+    console.log("Submitting query: " + this.state.query);
+    this.setState( { processing: true, result: false } );
+    this.props.database.query_async(this.state.query)
+    .then(result => {
+      this.setState( { processing: false, result: JSON.stringify(result) } );
+    });
+  }
+
+  render() {
+    return (
+      <>
+      <DBQueryBar onChange={this.onQueryChangeHandler} />
+      <button onClick={this.onQuerySubmitHandler}>Submit</button>
+      <p>Result:</p>
+      { this.state.result && <p>{this.state.result}</p> }
+      </>
+    );
+  }
+}

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Fetch } from './fetch.js';
-import { FetchSQLiteDB } from './database.js';
+import { FetchSQLiteDB, DBQueryConsole } from './database.js';
 
 import './index.css';
 
@@ -11,7 +11,7 @@ const URLFinished = ({url, data}) => <p>{url} was loaded: {data.byteLength} byte
 
 const DBLoading = ({sqlite_file}) => <p>Loading: {sqlite_file}</p>;
 const DBError = ({error}) => <p>Failed to load database: {error.message}</p>;
-const DBFinished = ({sqlite_file, db}) => <p>{sqlite_file} was loaded. Name: { db.state.db_name }. Tables: { JSON.stringify(db.query("SHOW TABLES;")) } </p>;
+const DBFinished = ({sqlite_file, db}) => <p>{sqlite_file} was loaded. Name: { db.state.db_name }. Tables: { JSON.stringify(db.query_sync("SHOW TABLES;")) } </p>;
 
 const TestFetch = ({url}) => (
   <Fetch url={url}>
@@ -32,6 +32,7 @@ const TestDBFetch = ({sqlite_file}) => (
         { loading && <DBLoading sqlite_file={sqlite_file}/> }
         { error && <DBError error={error} />}
         { done && <DBFinished sqlite_file={sqlite_file} db={db} /> }
+        { done && <DBQueryConsole database={db}/> }
       </>
     )}
   </FetchSQLiteDB>