import * as React from "react";
import * as R from "ramda";
import { graphql, Link } from "gatsby";
import { navigate } from "gatsby";
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"],
rating: ["fields", "imageMeta", "meta", "Rating"],
hue_debug: ["fields", "imageMeta", "dominantHue", 0],
date: [],
};
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 {
window.plausible("Sort Gallery", {
props: { key },
});
} catch (e) {
// do nothing
}
localStorage?.setItem("photogallery.sortkey2", key);
_setSortKey(key);
},
[_setSortKey]
);
React.useEffect(() => {
const _sortKey = localStorage.getItem("photogallery.sortkey2");
if (_sortKey) {
setSortKey(_sortKey);
}
}, [setSortKey]);
const images = React.useMemo(
() =>
R.pipe(
R.map((edge) => edge.node),
sortKey === "date"
? R.sort((node1, node2) => {
const date1 = new Date(
R.path(["fields", "imageMeta", "dateTaken"], node1)
);
const date2 = new Date(
R.path(["fields", "imageMeta", "dateTaken"], node2)
);
return -1 * (date1.getTime() - date2.getTime());
})
: 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, keyword]
);
const showDebug =
typeof window !== "undefined" &&
window.location.search.includes("debug=true");
return (
<>
Photo Gallery | Chuck Dries
Photo Gallery
- Default
- Date
- Hue
{showDebug && - Dominant hue[debug]
}
);
};
export const query = graphql`
query GalleryPageQuery {
allFile(
filter: { sourceInstanceName: { eq: "gallery" } }
sort: { fields: fields___imageMeta___dateTaken, order: DESC }
) {
edges {
node {
relativePath
base
childImageSharp {
fluid {
aspectRatio
}
gatsbyImageData(
layout: CONSTRAINED
height: 550
placeholder: DOMINANT_COLOR
)
}
fields {
imageMeta {
vibrantHue
dominantHue
dateTaken
meta {
Keywords
Rating
ObjectName
}
vibrant {
Vibrant
}
}
}
}
}
}
}
`;
export default GalleryPage;