Album navigation almost working.

src/browser.js

@@ -8,6 +8,8 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import Collapse from '@material-ui/core/Collapse';
 
+import { user_query_from_album_path } from './queries';
+
 class AlbumTreeItem {
     name = false;
     relative_path = false;
@@ -28,7 +30,6 @@ export function split_tree_item_location(treeitem) {
 
 export function insert_into_album_tree(treebaseitem, treeitem) {
     var parts = split_tree_item_location(treeitem);
-    console.log("parts:", parts);
     var current_item = treebaseitem;
     for (var i = 0; i < parts.length; i++) {
         var part = parts[i];
@@ -41,12 +42,14 @@ export function insert_into_album_tree(treebaseitem, treeitem) {
             }
         }
         if (!subitem) {
+            var new_path = (current_item.relative_path == "/") ?
+                current_item.relative_path + part :
+                current_item.relative_path + "/" + part;
             var new_sub = new AlbumTreeItem(
                 part,
-                current_item.relative_path + "/" + part,
+                new_path,
                 []
             );
-            console.log("inserting:", new_sub, "into:", current_item);
             current_item.children.push(new_sub);
             subitem = new_sub;
         }
@@ -59,7 +62,6 @@ export function build_albums_tree(all_db_albums) {
     for (var i = 0; i < all_db_albums.length; i++) {
         var album = all_db_albums[i];
         if (album.state.relative_path != "/") { // we already made the base
-            console.log("Inserting:", album);
             var item = new AlbumTreeItem(
                 album.state.name,
                 album.state.relative_path,
@@ -85,31 +87,38 @@ const useStyles = makeStyles(theme => ({
 export function AlbumListItem(props) {
     const classes = useStyles();
     const [open, setOpen] = React.useState(false);
-    const { album } = props;
+    const { album, onNewQuery } = props;
 
-    const handleClick = () => {
+    const handleExpandClick = () => {
         setOpen(!open);
     }
 
+    const handleClick = () => {
+        if (onNewQuery) {
+            var query = user_query_from_album_path(album.relative_path);
+            console.log(query);
+            onNewQuery(query);
+        }
+    }
+
     if (album.children.length == 0) {
         return (
-            <ListItem button>
+            <ListItem button onClick={handleClick}>
                 <ListItemText primary={album.name} />
             </ListItem>
         )
     } else {
         return (
             <>
-                <ListItem button onClick={handleClick}>
+                <ListItem button >
-                    <ListItemText primary={album.name} />
+                    <ListItemText primary={album.name} onClick={handleClick} />
-                    {open ? <ExpandLess /> : <ExpandMore />}
+                    {open ? <ExpandLess onClick={handleExpandClick} /> : <ExpandMore onClick={handleExpandClick} />}
                 </ListItem>
                 <Collapse in={open} timeout="auto" unmountOnExit>
                     <List component="nav" className={classes.nested}>
                         {
                             album.children.map(elem => {
-                                console.log(elem);
+                                return <AlbumListItem album={elem} onNewQuery={onNewQuery}/>
-                                return <AlbumListItem album={elem} />
                             })
                         }
                     </List>
@@ -121,10 +130,16 @@ export function AlbumListItem(props) {
 
 export function Browser(props) {
     const classes = useStyles();
-    const { albums } = props;
+    const { albums, onNewQuery } = props;
+
+    const propagateQuery = (query) => {
+        if (onNewQuery) {
+            onNewQuery(query);
+        }
+    }
 
     const tree = build_albums_tree(albums);
-    console.log("Full tree:", tree);
+
     return (
         <>
             <List
@@ -139,8 +154,7 @@ export function Browser(props) {
             >
                 {
                     tree.children.map(elem => {
-                        console.log(elem);
+                        return <AlbumListItem album={elem} onNewQuery={propagateQuery} />
-                        return <AlbumListItem album={elem} />
                     })
                 }
             </List>

src/main.js

@@ -40,7 +40,6 @@ const useStyles = makeStyles(theme => ({
 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);
 
@@ -77,11 +76,16 @@ export function LoadedMainPage(props) {
         performGalleryQuery();
     }
 
+    function onBrowser(q) {
+        setGalleryUserQuery(q);
+        performGalleryQuery();
+    }
+
     return (
         <>
             <Box className={classes.root}>
                 <Box className={classes.navigator}>
-                    <Box className={classes.margined}>{albums && <Browser albums={albums} />}</Box>
+                    <Box className={classes.margined}>{albums && <Browser albums={albums} onNewQuery={onBrowser} />}</Box>
                 </Box>
                 <Box className={classes.searchandview}>
                     <Box className={classes.margined}><SearchBar onSubmit={onSearch} /></Box>

src/queries.js

@@ -204,3 +204,14 @@ export function user_query_from_search_string(search_string) {
 
     return r;
 }
+
+export function user_query_from_album_path(album_path) {
+    var r = new UserQuery();
+    var match_type = MatchTypeEnum.MATCH_EQUALS;
+    var match_text = "\"" + album_path + "\"";
+    var match_against = "Albums.relativePath";
+    r.image_filter = new MatchingFilter(ResultTypeEnum.ALBUM, match_against, match_text, match_type, false);
+    r.album_filter = new ConstFilter(ResultTypeEnum.ALBUM, false);
+
+    return r;
+}