Add a photo table line with simple CSS

src/PhotoTableLine.css

@@ -0,0 +1,32 @@
+.PhotoTableLine_body {
+    border: 2px solid black;
+    background-color: lightgrey;
+    height:80px;
+}
+
+.PhotoTableLine_thumb {
+    height: inherit;
+}
+
+.PhotoTableLine_field {
+    border: 2px solid black;
+    float: left;
+    height: inherit;
+}
+
+.PhotoTableLine_textsubfield {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: inherit;
+}
+
+.PhotoTableLine_textsubsubfield {
+    margin: 8px;
+    border: 0 solid black;
+}
+
+a {
+    height: inherit;
+    display: block;
+}

src/index.js

@@ -2,7 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Fetch } from './fetch.js';
 import { ProvideDB, DBQueryConsole, DBTypeEnum, DBSourceEnum } from './database.js';
-import { Photo, PhotoView } from './media.js';
+import { PhotoView, PhotoThumbView, PhotoTableLine } from './media.js';
+import { find_photos } from './queries.js';
 
 import './index.css';
 
@@ -33,19 +34,15 @@ export class PhotoFromDB extends React.Component {
   }
 
   componentDidMount() {
-    this.props.database.queries_async(["SELECT Images.uniqueHash FROM Images;"])
-      .then(res => {
-        var photo = new Photo;
-        var imagepath = process.env.PUBLIC_URL + "/test_photos_thumbs/" + res[0]["uniqueHash"] + ".jpg";
-        photo.state.path = imagepath;
-        this.setState({ done: true, photo: photo });
-      });
+    find_photos("", this.props.database, "/test_photos", "/test_photos_thumbs").then(photos => {
+      this.setState({ done: true, photo: photos[0] });
+    });
   }
 
   render() {
     return (
       <>
-        {this.state.done && <PhotoView photo={this.state.photo} />}
+        {this.state.photo && <PhotoTableLine photo={this.state.photo} />}
       </>
     );
   }
@@ -59,7 +56,9 @@ const TestDBFetch = ({ sqlite_file }) => (
         {loading && <DBLoading sqlite_file={sqlite_file} />}
         {error && <DBError error={error} />}
         {done && <DBFinished sqlite_file={sqlite_file} db={db} />}
+        <h2>DB Query Console</h2>
         {done && <DBQueryConsole database={db} />}
+        <h2>Example photo from DB</h2>
         {done && <PhotoFromDB database={db} />}
       </>
     )}

src/media.js

@@ -1,12 +1,45 @@
 import React from 'react';
+import './PhotoTableLine.css';
 
 export class Media {}
 
 export class Photo extends Media {
   state = {
+    id: false,
+    name: false,
     path: false,
     thumbnailpath: false
   }
 }
 
-export const PhotoView = ({ photo }) => <img src={ photo.state.path } alt=""/>;
+export function create_photo(maybe_id, maybe_name, maybe_path, maybe_thumbnail_path) {
+  var p = new Photo;
+  if(maybe_id) { p.state.id = maybe_id; }
+  if(maybe_name) { p.state.name = maybe_name; }
+  if(maybe_path) { p.state.path = maybe_path; }
+  if(maybe_thumbnail_path) { p.state.thumbnailpath = maybe_thumbnail_path; }
+  return p;
+}
+
+export const PhotoView = ({ photo }) => <img src={ photo.state.path ? photo.state.path : "/resources/no_image_available.png"} alt=""/>;
+
+export class PhotoThumbView extends React.Component {
+  render() {
+    return (
+           <>
+           <a href={ this.props.href }>
+           <img class={ this.props.class } src={ this.props.photo.state.thumbnailpath ? this.props.photo.state.thumbnailpath : "/resources/no_thumb_available.png"} alt=""/>
+           </a>
+           </>
+    );
+  }
+}
+
+export const PhotoTableLine = ({ photo }) => (
+  <>
+  <div class="PhotoTableLine_body">
+    <div class="PhotoTableLine_field"><PhotoThumbView photo={photo} class="PhotoTableLine_thumb" href={photo.state.path}/></div>
+    <div class="PhotoTableLine_field"><div class="PhotoTableLine_textsubfield"><div class="PhotoTableLine_textsubsubfield"><p>{photo.state.name ? photo.state.name : "Unknown"}</p></div></div></div>
+  </div>
+  </>
+)

src/queries.js

@@ -0,0 +1,25 @@
+
+import { Photo, PhotoView, PhotoThumbView, create_photo } from './media.js';
+
+// This query will return database entries with the fields "id", "uniqueHash", "relativePath" (of the album) and "name" for each matching image.
+export function images_query(maybe_where) {
+    return "SELECT Images.id, Images.name, Images.uniqueHash, Albums.relativePath FROM Images INNER JOIN Albums ON Images.album=Albums.id " + (maybe_where ? maybe_where : "") + ";";
+}
+
+export function find_photos(maybe_where, database, collection_path, collection_thumbs_path) {
+    return new Promise(function (resolve, reject) {
+        var queries = [];
+        queries.push(images_query(maybe_where));
+        database.queries_async(queries).then(res => {
+            var photos = [];
+            if (res && Array.isArray(res)) {
+                res.forEach(row => {
+                    var imagepath = process.env.PUBLIC_URL + collection_path + "/" + res[0]["relativePath"] + "/" + res[0]["name"];
+                    var thumbpath = process.env.PUBLIC_URL + collection_thumbs_path + "/" + res[0]["uniqueHash"] + ".jpg";
+                    photos.push(create_photo(res[0]["id"], res[0]["name"], imagepath, thumbpath));
+                });
+            }
+            resolve(photos);
+        });
+    });
+}