projectSecondPart/Problem1

- Implemented functionality that display the users photos. Need to make it more viewable.
- Reformat code (fix indentation to 2 spaces)

projectSecondPart/components/userDetail/userDetail.jsx

@@ -14,26 +14,30 @@ class UserDetail extends React.Component {
   }
 
   generateUserPreview() {
-    let user = window.cs142models.userListModel().find(e => e._id === this.props.match.params.userId)
+    let user = window.cs142models.userModel(this.props.match.params.userId)
     console.log(user)
     return (
+      <div id="divUserDetail">
+        <Typography variant="h3">
+          {user.first_name} {user.last_name}
+        </Typography>
         <Typography variant="body1">
-        <h2>{user.first_name} {user.last_name}</h2>
-        <p>
           Occupation: {user.occupation} <br/>
           From: {user.location} <br/>
           Description: {user.description}
-        </p>
         </Typography>
+      </div>
     )
   }
 
 
   render() {
     return (
-      <div id="divUserDetail">
+      <div>
         {this.generateUserPreview()}
+        <Typography variant="button" display="block" gutterBottom>
           <Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link>
+        </Typography>
       </div>
     );
   }

projectSecondPart/components/userPhotos/userPhotos.jsx

 import React from 'react';
 import {
-  Typography
+  Box,
+  Grid, Paper, styled
 } from '@material-ui/core';
 import './userPhotos.css';
+import path from "path";
 
 
+const Item = styled(Paper)(({theme}) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
 /**
  * Define UserPhotos, a React componment of CS142 project #5
  */
 class UserPhotos extends React.Component {
   constructor(props) {
     super(props);
-    console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId))
+    //console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId))
   }
 
   render() {
-    return (
-      <Typography variant="body1">
-      This should be the UserPhotos view of the PhotoShare app. Since
-      it is invoked from React Router the params from the route will be
-      in property match. So this should show details of user:
-      {this.props.match.params.userId}. You can fetch the model for the user from
-      window.cs142models.photoOfUserModel(userId):
-        <Typography variant="caption">
-          {JSON.stringify(window.cs142models.photoOfUserModel(this.props.match.params.userId))}
-        </Typography>
-      </Typography>
+    /*How the render should look like:
+    Display all photos in a gid.
+    For each gridelement, display
+     - Photo
+     - Creation time
+     - Comments
+       - Date when comment was created
+       - name of the user who created the comment (should be a link to their user page)
+       - Text of the comment
+    */
 
+
+    return (
+      //Source: https://mui.com/components/grid/
+      // Would like to expand the grid that is already there!
+      <Box sx={{flexGrow: 1}}>
+        <Grid container spacing={2} direction="row" alignItems="flex-start">
+          {window.cs142models.photoOfUserModel(this.props.match.params.userId).map(e => (
+            <Grid item key={e._id}>
+              <Item><img src={path.join(__dirname, 'images', e.file_name)} alt={e.file_name}/></Item>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
     );
   }
 }