Did some layouting.

src/gridgallery.js

@@ -1,26 +1,13 @@
 import React from 'react';
+import Gallery from 'react-grid-gallery';
 
-/*
-LEGACY: react-photo-gallery version
-
-import Gallery from "react-photo-gallery";
-
-const photo_to_gallery_photo = (photo) => {
-    console.log("Gallery photo", photo);
-    if(!photo.state.thumbnailsize) {
-        throw new Error("Photo for gallery does not have a thumbnail size.");
-    }
-    return {
-        src: photo.state.thumbnailpath,
-        width: photo.state.thumbnailsize[0],
-        height: photo.state.thumbnailsize[1],
-    }
-}
-
-export const GridGallery = ({ photos }) => <Gallery photos={photos.map(x => photo_to_gallery_photo(x))}/>
-*/
+import { makeStyles } from '@material-ui/core/styles';
 
-import Gallery from 'react-grid-gallery';
+const useStyles = makeStyles(theme => ({
+    root: {
+        width: "100%",
+    },
+}));
 
 const photo_to_gallery_photo = (photo) => {
     if (!photo.state.thumbnailsize) {
@@ -35,4 +22,10 @@ const photo_to_gallery_photo = (photo) => {
     }
 }
 
-export const GridGallery = ({ photos }) => <Gallery enableImageSelection={false} images={photos.map(x => photo_to_gallery_photo(x))}/>
+export function GridGallery(props) {
+    const classes = useStyles();
+
+    return (
+        <Gallery className={classes.root} enableImageSelection={false} images={props.photos.map(x => photo_to_gallery_photo(x))} />
+    )
+}

src/main.js

@@ -1,4 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { borders } from '@material-ui/system';
+import Box from '@material-ui/core/Box';
 
 import { SearchBar } from './searchbar.js';
 import { InternalErrorPage } from './error.js';
@@ -8,61 +12,85 @@ import { GridGallery } from './gridgallery.js';
 import { UserQuery, user_query_from_search_string, maybe_image_query, do_image_query, maybe_album_query, do_album_query } from './queries.js';
 import { Browser } from './browser.js';
 
-export class LoadedMainPage extends React.Component {
-    state = {
-        gallery_user_query: false,
-        album_browser_tree: false,
-        photos: false,
-        albums: false,
+const useStyles = makeStyles(theme => ({
+    root: {
+        display: "table",
+        "border-spacing": "6px",
+        width: "100%",
+    },
+    navigator: {
+        display: "table-cell",
+        "width": "300px",
+        border: "1px solid black",
+        "border-radius": "3px",
+        "vertical-align": "top",
+    },
+    searchandview: {
+        display: "table-cell",
+        width: "auto",
+        border: "1px solid black",
+        "border-radius": "3px",
+        "vertical-align": "top",
+    },
+    margined: {
+        margin: "6px",
     }
+}));
+
+export function LoadedMainPage(props) {
+    const classes = useStyles();
+    const [gallery_user_query, setGalleryUserQuery] = React.useState(false);
+    const [album_browser_tree, setAlbumBrowserTree] = React.useState(false);
+    const [photos, setPhotos] = React.useState(false);
+    const [albums, setAlbums] = React.useState(false);
 
-    componentDidMount() {
-        // Start retrieving the albums list.
-        var self = this;
+    useEffect(() => {
+        // Single-fire effect to start retrieving the albums list.
         var blank_user_query = new UserQuery;
         var sql_album_query = maybe_album_query(blank_user_query);
-        do_album_query(sql_album_query, this.props.database)
+        do_album_query(sql_album_query, props.database)
             .then(albums => {
-            self.setState({ albums: albums });
+                setAlbums(albums);
             });
-    }
+    }, []);
 
-    onGalleryUserQueryChangeHandler = gallery_user_query => {
-        var self = this;
+    function performGalleryQuery() {
         var sql_image_query = maybe_image_query(gallery_user_query);
-        this.setState({ photos: false });
-        do_image_query(sql_image_query, this.props.database, this.props.photos_dir, this.props.thumbs_dir)
-        .then(photos => {
+        setPhotos(false);
+        do_image_query(sql_image_query, props.database, props.photos_dir, props.thumbs_dir)
+            .then(got_photos => {
                 // Make each photo fetch its thumbnail size before proceeding
                 var promises = [];
-            photos.forEach(elem => {
+                got_photos.forEach(elem => {
                     promises.push(elem.fetch_thumb_size());
                 })
                 Promise.all(promises)
                     .then(() => {
-                console.log(photos);
-                self.setState({ photos: photos });
+                        setPhotos(got_photos);
                     });
             });
     }
 
-    onSearchHandler = (q) => {
-        var self = this;
+    function onSearch(q) {
         var query = user_query_from_search_string(q);
-        this.setState({gallery_user_query: query});
-        this.onGalleryUserQueryChangeHandler(query);
+        setGalleryUserQuery(query);
+        performGalleryQuery();
     }
 
-    render() {
     return (
         <>
-                 <SearchBar onSubmit={this.onSearchHandler}/>
-                 {this.state.albums && <div><Browser albums={this.state.albums}/></div>}
-                 {this.state.photos && <div><GridGallery photos={this.state.photos}/></div>}
+            <Box className={classes.root}>
+                <Box className={classes.navigator}>
+                    <Box className={classes.margined}>{albums && <Browser albums={albums} />}</Box>
+                </Box>
+                <Box className={classes.searchandview}>
+                    <Box className={classes.margined}><SearchBar onSubmit={onSearch} /></Box>
+                    <Box className={classes.margined}>{photos && <GridGallery photos={photos} />}</Box>
+                </Box>
+            </Box>
         </>
     );
 }
-}
 
 export const MainPage = () => (
     <ProvideDB db_file={process.env.PUBLIC_URL + "/test_many_photos_db/digikam4.db"} db_source_type={DBTypeEnum.SQLJS_SQLITE} db_target_type={DBTypeEnum.ALASQL_NATIVE}

src/searchbar.js

@@ -18,7 +18,7 @@ export class SearchBar extends React.Component {
     render() {
         return (
             <>
-                <TextField variant="outlined" label="Search" fullWidth type="text" onChange={this.onChangeHandler} onKeyDown={this.keyDownHandler} />
+                <TextField variant="outlined" fullWidth label="Search" type="text" onChange={this.onChangeHandler} onKeyDown={this.keyDownHandler} />
             </>
         );
     }