Album browsing works.

src/browser.js

@@ -96,7 +96,6 @@ export function AlbumListItem(props) {
     const handleClick = () => {
         if (onNewQuery) {
             var query = user_query_from_album_path(album.relative_path);
-            console.log(query);
             onNewQuery(query);
         }
     }
@@ -150,7 +149,7 @@ export function Browser(props) {
                         Albums
             </ListSubheader>
                 }
-                classname={classes.root}
+                className={classes.root}
             >
                 {
                     tree.children.map(elem => {

src/main.js

@@ -53,7 +53,7 @@ export function LoadedMainPage(props) {
             });
     }, []);
 
-    function performGalleryQuery() {
+    useEffect(() => {
         var sql_image_query = maybe_image_query(gallery_user_query);
         setPhotos(false);
         do_image_query(sql_image_query, props.database, props.photos_dir, props.thumbs_dir)
@@ -68,17 +68,15 @@ export function LoadedMainPage(props) {
                         setPhotos(got_photos);
                     });
             });
-    }
+    }, [gallery_user_query]);
 
     function onSearch(q) {
         var query = user_query_from_search_string(q);
         setGalleryUserQuery(query);
-        performGalleryQuery();
     }
 
     function onBrowser(q) {
         setGalleryUserQuery(q);
-        performGalleryQuery();
     }
 
     return (

src/queries.js

@@ -1,9 +1,9 @@
 
 import { create_photo, create_album } from './media.js';
 
-export function escape_regex(string) {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
+export function escape_regex(s) {
+    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+};
 
 export function do_image_query(query, database, collection_path, collection_thumbs_path) {
     return new Promise(function (resolve, reject) {
@@ -31,7 +31,7 @@ export function do_album_query(query, database) {
             var albums = [];
             if (res && Array.isArray(res)) {
                 res.forEach(row => {
-                    var album_name = new String(row["relativePath"]).substring(row["relativePath"].lastIndexOf('/') + 1); 
+                    var album_name = new String(row["relativePath"]).substring(row["relativePath"].lastIndexOf('/') + 1);
                     albums.push(create_album(row["id"], album_name, row["relativePath"]));
                 });
             }
@@ -96,16 +96,16 @@ export class MatchingFilter extends ResultFilter {
 
     to_sql_where() {
         var match_type_str = false;
-    
-        if(this.match_type == MatchTypeEnum.MATCH_EQUALS) {
+
+        if (this.match_type == MatchTypeEnum.MATCH_EQUALS) {
             match_type_str = "=";
-        } else if(this.match_type == MatchTypeEnum.MATCH_REGEXP) {
+        } else if (this.match_type == MatchTypeEnum.MATCH_REGEXP) {
             match_type_str = " REGEXP ";
         } else {
             throw new Error('Unsupported match type: ' + this.match_type);
         }
-    
-        return "(" + (this.negate ? "NOT " : "")  + this.match_against + match_type_str + this.match_from + ")";
+
+        return "(" + (this.negate ? "NOT " : "") + this.match_against + match_type_str + this.match_from + ")";
     }
 }
 
@@ -124,9 +124,9 @@ export class LogicalOperatorFilter extends ResultFilter {
         var where1 = this.sub_filter_a.to_sql_where();
         var where2 = this.sub_filter_b.to_sql_where();
         var operator_str = "";
-        if(this.operator == LogicalOperatorEnum.AND) {
+        if (this.operator == LogicalOperatorEnum.AND) {
             operator_str = " AND ";
-        } else if(this.operator == LogicalOperatorEnum.OR) {
+        } else if (this.operator == LogicalOperatorEnum.OR) {
             operator_str = " OR ";
         } else {
             throw new Error('Unsupported logical operator: ' + this.operator);
@@ -152,7 +152,7 @@ export function album_query_with_where(maybe_where) {
 
 export function maybe_image_query(user_query) {
     var where = false;
-    if(user_query.image_filter) {
+    if (user_query.image_filter) {
         where = "WHERE " + user_query.image_filter.to_sql_where();
     }
     return image_query_with_where(where);
@@ -160,7 +160,7 @@ export function maybe_image_query(user_query) {
 
 export function maybe_album_query(user_query) {
     var where = false;
-    if(user_query.album_filter) {
+    if (user_query.album_filter) {
         where = "WHERE " + user_query.album_filter.to_sql_where();
     }
     return album_query_with_where(where);
@@ -170,19 +170,19 @@ function filter_from_text_segment(result_type, segment) {
     var match_type = false;
     var match_text = false;
     var match_against = false;
-    
-    if(result_type == ResultTypeEnum.IMAGE) {
-        match_type =  MatchTypeEnum.MATCH_EQUALS;
-        match_text = "\"" + segment['text'] + "\"";
+
+    if (result_type == ResultTypeEnum.IMAGE) {
+        match_type = MatchTypeEnum.MATCH_EQUALS;
+        match_text = '"' + segment['text'] + '"';
         match_against = "Images.name";
-    } else if(result_type == ResultTypeEnum.ALBUM) {
+    } else if (result_type == ResultTypeEnum.ALBUM) {
         // Match against the album "name", which is the basename of its relative path.
         match_type = MatchTypeEnum.MATCH_REGEXP;
-        match_text = "\"" + '\/(.*\/)*' + escape_regex(segment['text']) + "\"";
+        match_text = '"' + '\/(.*\/)*' + escape_regex(segment['text']) + '"';
         match_against = "Albums.relativePath";
     }
 
-    return new MatchingFilter(result_type, match_against,match_text, match_type, segment['negated']);
+    return new MatchingFilter(result_type, match_against, match_text, match_type, segment['negated']);
 }
 
 export function user_query_from_search_string(search_string) {
@@ -207,8 +207,8 @@ export function user_query_from_search_string(search_string) {
 
 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_type = MatchTypeEnum.MATCH_REGEXP;
+    var match_text = '"' + escape_regex(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);