Add rating sort

src/components/MasonryGallery.js

@@ -11,7 +11,8 @@ import classNames from "classnames";
 const MasonryGallery = ({
   images,
   aspectsByBreakpoint: aspectTargetsByBreakpoint,
-  debug,
+  debugHue,
+  debugRating,
 }) => {
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
@@ -114,7 +115,7 @@ const MasonryGallery = ({
           <Link
             className={classNames(
               "border-4 overflow-hidden",
-              debug && "border-8"
+              debugHue && "border-8"
             )}
             id={image.base}
             key={`${image.base}`}
@@ -124,7 +125,7 @@ const MasonryGallery = ({
               width,
               // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
               // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`
-              borderColor: debug
+              borderColor: debugHue
                 ? `hsl(
                     ${image.fields.imageMeta.dominantHue[0]},
                     ${image.fields.imageMeta.dominantHue[1] * 100}%,
@@ -134,7 +135,7 @@ const MasonryGallery = ({
             }}
             to={`/photogallery/${image.base}`}
           >
-            {debug && (
+            {debugHue && (
               <span className="text-white z-20 absolute bg-black">
                 hsl(
                 {image.fields.imageMeta.dominantHue[0]},{" "}
@@ -142,6 +143,11 @@ const MasonryGallery = ({
                 {(image.fields.imageMeta.dominantHue[2] * 100).toFixed(2)}% )
               </span>
             )}
+            {debugRating && (
+              <span className="text-white z-20 absolute bg-black">
+                rating: {image.fields.imageMeta.meta.Rating}
+              </span>
+            )}
             <GatsbyImage
               alt={getName(image)}
               className="w-full h-full"

src/pages/photogallery.js

@@ -9,12 +9,13 @@ import MasonryGallery from "../components/MasonryGallery";
 
 const SORT_KEYS = {
   hue: ["fields", "imageMeta", "vibrantHue"],
+  rating: ["fields", "imageMeta", "meta", "Rating"],
   hue_debug: ["fields", "imageMeta", "dominantHue", 0],
   date: [],
 };
 
 const GalleryPage = ({ data }) => {
-  const [sortKey, _setSortKey] = React.useState("date");
+  const [sortKey, _setSortKey] = React.useState("rating");
   const setSortKey = React.useCallback(
     (key) => {
       try {
@@ -51,7 +52,7 @@ const GalleryPage = ({ data }) => {
               );
               return -1 * (date1.getTime() - date2.getTime());
             })
-          : R.sortBy(R.path(SORT_KEYS[sortKey]))
+          : R.sort(R.descend(R.path(SORT_KEYS[sortKey])))
       )(data.allFile.edges),
     [data, sortKey]
   );
@@ -98,9 +99,10 @@ const GalleryPage = ({ data }) => {
               onSelectionChange={setSortKey}
               selectedKey={sortKey}
             >
+              <Item key="rating">Default</Item>
+              <Item key="date">Date</Item>
               <Item key="hue">Hue</Item>
               {showDebug && <Item key="hue_debug">Dominant hue[debug]</Item>}
-              <Item key="date">Date</Item>
             </Picker>
           </div>
         </div>
@@ -113,7 +115,8 @@ const GalleryPage = ({ data }) => {
           xl: 5,
           // '2xl': 6.1,
         }}
-        debug={sortKey === "hue_debug"}
+        debugHue={sortKey === "hue_debug"}
+        debugRating={sortKey === "rating" && showDebug}
         images={images}
       />
     </>
@@ -122,7 +125,10 @@ const GalleryPage = ({ data }) => {
 
 export const query = graphql`
   query GalleryPageQuery {
-    allFile(filter: { sourceInstanceName: { eq: "gallery" } }) {
+    allFile(
+      filter: { sourceInstanceName: { eq: "gallery" } }
+      sort: { fields: fields___imageMeta___dateTaken, order: DESC }
+    ) {
       edges {
         node {
           relativePath
@@ -143,6 +149,7 @@ export const query = graphql`
               dominantHue
               dateTaken
               meta {
+                Rating
                 ObjectName
               }
               vibrant {