From 8b54ecb5b3432a70addbee28ed16c59341c25941 Mon Sep 17 00:00:00 2001
From: Sander Vocke <sander.vocke@screenpointmed.com>
Date: Tue, 21 Jan 2020 12:02:57 +0100
Subject: [PATCH] Move debugging stuff out of index.

---
 src/debuggingpage.js | 176 ++++++++++++++++++++++++++++++++++++++++++
 src/index.css        |   0
 src/index.js         | 177 +------------------------------------------
 3 files changed, 178 insertions(+), 175 deletions(-)
 create mode 100644 src/debuggingpage.js
 delete mode 100644 src/index.css

diff --git a/src/debuggingpage.js b/src/debuggingpage.js
new file mode 100644
index 0000000..afa9348
--- /dev/null
+++ b/src/debuggingpage.js
@@ -0,0 +1,176 @@
+import React from 'react';
+import { Fetch } from './fetch.js';
+import { ProvideDB, DBQueryConsole, DBQueryBar, DBTypeEnum, DBSourceEnum } from './database.js';
+import { PhotoTableLine, MediaTableLine } from './media.js';
+import { do_image_query, do_album_query, image_query_with_where, user_query_from_search_string, maybe_image_query, maybe_album_query } from './queries.js';
+
+const URLLoading = ({ url }) => <p>Loading: {url}</p>;
+const URLError = ({ error }) => <p>Failed to load URL resource: {error.message}</p>;
+const URLFinished = ({ url, data }) => <p>{url} was loaded: {data.byteLength} bytes received.</p>;
+
+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}. </p>;
+
+const TestFetch = ({ url }) => (
+  <Fetch url={url}>
+    {({ loading, error, done, data }) => (
+      <>
+        {loading && <URLLoading url={url} />}
+        {error && <URLError error={error} />}
+        {done && <URLFinished url={url} data={data} />}
+      </>
+    )}
+  </Fetch>
+)
+
+export class PhotoFromDB extends React.Component {
+  state = {
+    done: false,
+    photo: false,
+  }
+
+  componentDidMount() {
+    do_image_query(this.props.sql_query, this.props.database, "/test_photos", "/test_photos_thumbs").then(photos => {
+      this.setState({ done: true, photo: photos[0] });
+    });
+  }
+
+  render() {
+    return (
+      <>
+        {!this.state.done && <p>>Querying photo from DB: {this.props.sql_query}</p> }
+        {this.state.photo && <PhotoTableLine photo={this.state.photo} />}
+      </>
+    );
+  }
+}
+
+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 MediaTable = ({ items }) => (
+  <>
+    {
+    items.map((value, index) => {
+      return value && <MediaTableLine media={value} />
+    })
+    }
+  </>
+)
+
+export class TestDBStringQuery extends React.Component {
+  state = {
+    string: false,
+    query: false,
+    sql_image_query: false,
+    sql_album_query: false,
+    photos: false,
+    albums: false,
+  }
+
+  onQueryChangeHandler = str => { this.setState({ string: str }); }
+  onQuerySubmitHandler = () => {
+    var q = user_query_from_search_string(this.state.string);
+    var sql_image_query = maybe_image_query(q);
+    var sql_album_query = maybe_album_query(q);
+    this.setState({ query: q, sql_image_query: sql_image_query, sql_album_query: sql_album_query, photos: false, albums: false  });
+    do_image_query(sql_image_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(photos => {
+      console.log(photos);
+      this.setState({ done: true, photos: photos });
+    });
+    do_album_query(sql_album_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(albums => {
+      console.log(albums);
+      this.setState({ done: true, albums: albums });
+    });
+  }
+
+  render() {
+    
+    return (
+      <>
+        <div>
+          <DBQueryBar onChange={this.onQueryChangeHandler}/>
+          <button onClick={this.onQuerySubmitHandler}>Submit</button>
+          { this.state.photos && <p>Found {this.state.photos.length} photos.</p> }
+          { this.state.photos && <MediaTable items={this.state.photos} /> }
+          { this.state.albums && <p>Found {this.state.albums.length} albums.</p> }
+          { this.state.albums && <MediaTable items={this.state.albums} /> }
+        </div>
+      </>
+    );
+  }
+}
+
+const TestDBFetch = ({ db }) => (
+      <>
+        <h2>DB Query Console</h2>
+        <DBQueryConsole database={db} />
+        <h2>Example photo from DB</h2>
+        <PhotoFromDB database={db} sql_query={image_query_with_where("")} />
+        <h2>DB WHERE clause image search</h2>
+        <ImageWhereConsole database={db} />
+      </>
+)
+
+const TestDBPlayground = ({ db }) => (
+      <>
+        <DBQueryConsole database={db} />
+      </>
+)
+
+export const DebuggingPage = () => (
+  <>
+    <h1>Test file fetching:</h1>
+    <TestFetch url={process.env.PUBLIC_URL + "/stuff"} />
+    <ProvideDB db_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} 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}>
+      {({ loading, error, done, db }) => (
+        
+        <>
+        {loading && <DBLoading sqlite_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} />}
+        {error && <DBError error={error} />}
+        {done && (
+          <>
+          <DBFinished sqlite_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} db={db} />
+          <h1>IndexedDB playground:</h1>
+          <TestDBPlayground db={db} />
+          <h1>Test DB fetching:</h1>
+          <TestDBFetch db={db} />
+          <h1>Test queries:</h1>
+          <TestDBStringQuery db={db} />
+          </>
+        )
+        }
+        </>
+      )}
+    </ProvideDB>
+  </>
+);
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/index.js b/src/index.js
index 1f8f333..334655d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,181 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Fetch } from './fetch.js';
-import { ProvideDB, DBQueryConsole, DBQueryBar, DBTypeEnum, DBSourceEnum } from './database.js';
-import { PhotoTableLine, MediaTableLine } from './media.js';
-import { do_image_query, do_album_query, image_query_with_where, user_query_from_search_string, maybe_image_query, maybe_album_query } from './queries.js';
-
-import './index.css';
-import { thisExpression } from '@babel/types';
-
-const URLLoading = ({ url }) => <p>Loading: {url}</p>;
-const URLError = ({ error }) => <p>Failed to load URL resource: {error.message}</p>;
-const URLFinished = ({ url, data }) => <p>{url} was loaded: {data.byteLength} bytes received.</p>;
-
-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}. </p>;
-
-const TestFetch = ({ url }) => (
-  <Fetch url={url}>
-    {({ loading, error, done, data }) => (
-      <>
-        {loading && <URLLoading url={url} />}
-        {error && <URLError error={error} />}
-        {done && <URLFinished url={url} data={data} />}
-      </>
-    )}
-  </Fetch>
-)
-
-export class PhotoFromDB extends React.Component {
-  state = {
-    done: false,
-    photo: false,
-  }
-
-  componentDidMount() {
-    do_image_query(this.props.sql_query, this.props.database, "/test_photos", "/test_photos_thumbs").then(photos => {
-      this.setState({ done: true, photo: photos[0] });
-    });
-  }
-
-  render() {
-    return (
-      <>
-        {!this.state.done && <p>>Querying photo from DB: {this.props.sql_query}</p> }
-        {this.state.photo && <PhotoTableLine photo={this.state.photo} />}
-      </>
-    );
-  }
-}
-
-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 MediaTable = ({ items }) => (
-  <>
-    {
-    items.map((value, index) => {
-      return value && <MediaTableLine media={value} />
-    })
-    }
-  </>
-)
-
-export class TestDBStringQuery extends React.Component {
-  state = {
-    string: false,
-    query: false,
-    sql_image_query: false,
-    sql_album_query: false,
-    photos: false,
-    albums: false,
-  }
-
-  onQueryChangeHandler = str => { this.setState({ string: str }); }
-  onQuerySubmitHandler = () => {
-    var q = user_query_from_search_string(this.state.string);
-    var sql_image_query = maybe_image_query(q);
-    var sql_album_query = maybe_album_query(q);
-    this.setState({ query: q, sql_image_query: sql_image_query, sql_album_query: sql_album_query, photos: false, albums: false  });
-    do_image_query(sql_image_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(photos => {
-      console.log(photos);
-      this.setState({ done: true, photos: photos });
-    });
-    do_album_query(sql_album_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(albums => {
-      console.log(albums);
-      this.setState({ done: true, albums: albums });
-    });
-  }
-
-  render() {
-    
-    return (
-      <>
-        <div>
-          <DBQueryBar onChange={this.onQueryChangeHandler}/>
-          <button onClick={this.onQuerySubmitHandler}>Submit</button>
-          { this.state.photos && <p>Found {this.state.photos.length} photos.</p> }
-          { this.state.photos && <MediaTable items={this.state.photos} /> }
-          { this.state.albums && <p>Found {this.state.albums.length} albums.</p> }
-          { this.state.albums && <MediaTable items={this.state.albums} /> }
-        </div>
-      </>
-    );
-  }
-}
-
-const TestDBFetch = ({ db }) => (
-      <>
-        <h2>DB Query Console</h2>
-        <DBQueryConsole database={db} />
-        <h2>Example photo from DB</h2>
-        <PhotoFromDB database={db} sql_query={image_query_with_where("")} />
-        <h2>DB WHERE clause image search</h2>
-        <ImageWhereConsole database={db} />
-      </>
-)
-
-const TestDBPlayground = ({ db }) => (
-      <>
-        <DBQueryConsole database={db} />
-      </>
-)
+import { DebuggingPage } from './debuggingpage.js';
 
 ReactDOM.render(
-  <>
-    <h1>Test file fetching:</h1>
-    <TestFetch url={process.env.PUBLIC_URL + "/stuff"} />
-    <ProvideDB db_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} 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}>
-      {({ loading, error, done, db }) => (
-        
-        <>
-        {loading && <DBLoading sqlite_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} />}
-        {error && <DBError error={error} />}
-        {done && (
-          <>
-          <DBFinished sqlite_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} db={db} />
-          <h1>IndexedDB playground:</h1>
-          <TestDBPlayground db={db} />
-          <h1>Test DB fetching:</h1>
-          <TestDBFetch db={db} />
-          <h1>Test queries:</h1>
-          <TestDBStringQuery db={db} />
-          </>
-        )
-        }
-        </>
-      )}
-    </ProvideDB>
-  </>,
+  <><DebuggingPage /></>,
   document.getElementById('root')
 );