Working on getting a DB query to photo list thingy.

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Fetch } from './fetch.js';
-import { ProvideDB, DBQueryConsole, DBTypeEnum, DBSourceEnum } from './database.js';
+import { ProvideDB, DBQueryConsole, DBQueryBar, DBTypeEnum, DBSourceEnum } from './database.js';
 import { PhotoView, PhotoThumbView, PhotoTableLine } from './media.js';
 import { do_image_query, image_query_with_where } from './queries.js';
 
@@ -48,6 +48,36 @@ export class PhotoFromDB extends React.Component {
   }
 }
 
+export class ImageWhereConsole extends React.Component {
+  state = {
+    processing: false,
+    result: false,
+    where: "",
+  }
+
+  onQueryChangeHandler = whereclause => { this.setState({ where: whereclause }); }
+  onQuerySubmitHandler = () => {
+    this.setState({ processing: true, result: false });
+    this.props.database.queries_async([image_query_with_where(this.state.where)])
+      .then(result => {
+        this.setState({ processing: false, result: JSON.stringify(result) });
+      });
+  }
+
+  render() {
+    return (
+      <>
+        <div>
+          <DBQueryBar onChange={this.onQueryChangeHandler} />
+          <button onClick={this.onQuerySubmitHandler}>Submit</button>
+          <p>Result:</p>
+          {this.state.result && <p>{this.state.result}</p>}
+        </div>
+      </>
+    );
+  }
+}
+
 const TestDBFetch = ({ sqlite_file }) => (
   <ProvideDB db_file={sqlite_file} db_source_type={DBTypeEnum.SQLJS_SQLITE} db_target_type={DBTypeEnum.ALASQL_NATIVE}
     db_source_name="sqlite_db" db_target_name="db" db_source={DBSourceEnum.ATTACHFILE}>
@@ -60,6 +90,8 @@ const TestDBFetch = ({ sqlite_file }) => (
         {done && <DBQueryConsole database={db} />}
         <h2>Example photo from DB</h2>
         {done && <PhotoFromDB database={db} />}
+        <h2>DB WHERE clause image search</h2>
+        {done && <ImageWhereConsole database={db} />}
       </>
     )}
   </ProvideDB>