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 { gql, useQuery } from '@apollo/client';
+import { Grid, GridCell } from '@rmwc/grid';
+import { reducePhotos } from '../utils';
+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}`;
+
+  return (
+    <>
+      {data && data.mediaItems && (
+        <>
+          {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, index) => {
+                    const imageId = image.id[index];
+                    return (
+                      <GridCell
+                        key={image.id[index]}
+                        desktop={2}
+                        tablet={4}
+                        phone={12}
+                      >
+                        <img
+                          key={image.id[index]}
+                          src={img}
+                          width="100%"
+                          onClick={() => console.log(imageId)}
+                        />
+                      </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,28 @@
+import moment from 'moment';
+
+const reducePhotos = (data) => {
+  let output = data.reduce((ob, cur) => {
+    let 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 (occurs >= 0) {
+      ob[occurs].imageUrl = ob[occurs].imageUrl.concat(cur.imageUrl);
+      ob[occurs].id = ob[occurs].id.concat(cur.id);
+    } else {
+      let obj = {
+        createdAt: cur.createdAt,
+        id: [cur.id],
+        imageUrl: [cur.imageUrl],
+      };
+      ob = ob.concat([obj]);
+    }
+    return ob;
+  }, []);
+  return output;
+};
+
+export default reducePhotos;