basic home section with dates and images issue#15

frontend/package.json

@@ -20,6 +20,7 @@
     "@testing-library/user-event": "^12.8.3",
     "apollo-upload-client": "^16.0.0",
     "graphql": "^15.5.3",
+    "moment": "^2.29.1",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

frontend/src/pages/Photos.js

@@ -1,7 +1,70 @@
 import React from 'react';
+import moment from 'moment';
+import { reducePhotos } from '../utils';
+import { gql, useQuery } from '@apollo/client';
+import { Grid, GridCell } from '@rmwc/grid';
+import '@rmwc/grid/styles';
+
+const GET_MEDIA = gql`
+  query GetMedia {
+    mediaItems {
+      nodes {
+        id
+        imageUrl
+        mimeType
+        fileName
+        createdAt
+        updatedAt
+      }
+    }
+  }
+`;
 
 const Photos = () => {
-  return <>Photos</>;
+  const { loading, error, data } = useQuery(GET_MEDIA);
+
+  if (loading) return 'Loading...';
+  if (error) return `Error! ${error.message}`;
+  console.log(data.mediaItems.nodes);
+  console.log(reducePhotos(data.mediaItems.nodes));
+
+  return (
+    <>
+      {data && data.mediaItems && (
+        <>
+          {/*
+          {data.mediaItems.nodes.map((img) => {
+            return (
+              <GridCell desktop={2} tablet={4} phone={12} key={img}>
+                <img src={img.imageUrl} width="100%" />
+              </GridCell>
+            );
+          })}
+          */}
+          {reducePhotos(data.mediaItems.nodes).map((image) => {
+            return (
+              <>
+                <Grid>
+                  <GridCell desktop={10} tablet={6} phone={3}>
+                    {moment(image.createdAt).format('MMMM D, YYYY')}
+                  </GridCell>
+                </Grid>
+                <Grid>
+                  {image.imageUrl.map((img) => {
+                    return (
+                      <GridCell desktop={2} tablet={4} phone={12} key={img}>
+                        <img key={img} src={img} width="100%" />
+                      </GridCell>
+                    );
+                  })}
+                </Grid>
+              </>
+            );
+          })}
+        </>
+      )}
+    </>
+  );
 };
 
 export default Photos;

frontend/src/utils/index.js

@@ -0,0 +1,3 @@
+import reducePhotos from './reducePhotos';
+
+export { reducePhotos };

frontend/src/utils/reducePhotos.js

@@ -0,0 +1,32 @@
+import moment from 'moment';
+
+const reducePhotos = (data) => {
+  var output = data.reduce((ob, cur) => {
+    // Get the index of the key-value pair.
+    var occurs = ob.reduce((n, item, i) => {
+      return moment(item.createdAt).format('D MMMM YYYY') ===
+        moment(cur.createdAt).format('D MMMM YYYY')
+        ? i
+        : n;
+    }, -1);
+
+    // If date is same
+    if (occurs >= 0) {
+      // append imageUrl in array
+      ob[occurs].imageUrl = ob[occurs].imageUrl.concat(cur.imageUrl);
+      ob[occurs].id = ob[occurs].id.concat(cur.id);
+    } else {
+      // add the imageUrl to ob (but make sure the value is an array).
+      var obj = {
+        createdAt: cur.createdAt,
+        id: [cur.id],
+        imageUrl: [cur.imageUrl],
+      };
+      ob = ob.concat([obj]);
+    }
+    return ob;
+  }, []);
+  return output;
+};
+
+export default reducePhotos;