keyword images and add keyword filtering

src/pages/photogallery.js

@@ -6,6 +6,7 @@ import { Helmet } from "react-helmet";
 import { Picker, Item } from "@adobe/react-spectrum";
 
 import MasonryGallery from "../components/MasonryGallery";
+import KeywordsPicker from "../components/KeywordsPicker";
 
 const SORT_KEYS = {
   hue: ["fields", "imageMeta", "vibrantHue"],
@@ -15,7 +16,20 @@ const SORT_KEYS = {
 };
 
 const GalleryPage = ({ data }) => {
+  const [keyword, _setKeyword] = React.useState(null);
   const [sortKey, _setSortKey] = React.useState("rating");
+
+  const setKeyword = React.useCallback((keyword) => {
+    try {
+      window.plausible("Filter Keyword", {
+        props: { keyword },
+      });
+    } catch (e) {
+      // do nothing
+    }
+    _setKeyword(keyword);
+  }, [_setKeyword]);
+
   const setSortKey = React.useCallback(
     (key) => {
       try {
@@ -25,14 +39,14 @@ const GalleryPage = ({ data }) => {
       } catch (e) {
         // do nothing
       }
-      localStorage?.setItem("photogallery.sortkey", key);
+      localStorage?.setItem("photogallery.sortkey2", key);
       _setSortKey(key);
     },
     [_setSortKey]
   );
 
   React.useEffect(() => {
-    const _sortKey = localStorage.getItem("photogallery.sortkey");
+    const _sortKey = localStorage.getItem("photogallery.sortkey2");
     if (_sortKey) {
       setSortKey(_sortKey);
     }
@@ -52,9 +66,17 @@ const GalleryPage = ({ data }) => {
               );
               return -1 * (date1.getTime() - date2.getTime());
             })
-          : R.sort(R.descend(R.path(SORT_KEYS[sortKey])))
+          : R.sort(R.descend(R.path(SORT_KEYS[sortKey]))),
+        keyword
+          ? R.filter((image) =>
+              R.includes(
+                keyword,
+                R.path(["fields", "imageMeta", "meta", "Keywords"], image)
+              )
+            )
+          : R.identity
       )(data.allFile.edges),
-    [data, sortKey]
+    [data, sortKey, keyword]
   );
 
   const showDebug =
@@ -93,6 +115,22 @@ const GalleryPage = ({ data }) => {
           <h1 className="text-3xl sm:text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
             Photo Gallery
           </h1>
+          <KeywordsPicker
+            keywords={[
+              "night",
+              "coast",
+              "city",
+              "landscape",
+              "flowers",
+              "product",
+              "waterfall",
+              "fireworks",
+              "panoramic",
+              // "sunset",
+            ]}
+            onChange={setKeyword}
+            value={keyword}
+          />
           <div className="m-2 ml-5 self-end">
             <Picker
               label="Sort by..."
@@ -149,6 +187,7 @@ export const query = graphql`
               dominantHue
               dateTaken
               meta {
+                Keywords
                 Rating
                 ObjectName
               }