projectSecondPart/UserPhoto - users photos are displayed with date created and comments

projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx

 import React from 'react';
 import {
 	Button,
-	Link,
 	Typography
 } from '@material-ui/core';
-import {Redirect, withRouter} from 'react-router-dom';
+import {Link, Redirect, withRouter} from 'react-router-dom';
 import './UserDetail.css';
 import PROG2053Models from '../../../model-data/PhotoApp';
 
@@ -34,7 +33,7 @@ class UserDetail extends React.Component {
 		return (
 			<>
 				{this.generateUserPreview()}
-				<Button variant="outlined" >See Photos!</Button>
+				<Button variant="outlined" component={Link} to={`/photo-share/photos/${this.props.match.params.userId}`}>See Photos!</Button>
 			</>
 		);
 	}

projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css

+#divImageList {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: flex-start;
+    justify-content: space-between;
+    row-gap: 15px;
+    /*background-color: green;*/
+}
+
+#divImageList > .divImageItem {
+    width: 49%;
+    height: auto;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    /*background-color: blue; */
+}
+
+#divImageList > .divImageItem > .divImage {
+    max-height: 300px;
+}
+
+#divImageList > .divImageItem > .divImage img {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}
+
+#divImageList > .divImageItem > .divPhotoInfo {
+    margin-top: 5px;
+}

projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx

 import React from 'react';
-import {
-	Typography
-} from '@material-ui/core';
 import './UserPhotos.css';
 import PROG2053Models from '../../../model-data/PhotoApp';
 import {withRouter} from 'react-router';
+import * as path from 'path';
 
 
 /**
  * Define UserPhotos, a React componment of PROG2053 part #2
  */
 class UserPhotos extends React.Component {
+	generateComments = (image) => {
+		//console.log(image.comments);
+		if (image.comments) {
+			return (
+				<>
+					{image.comments.map((comment) => {
+						let author = '';
+						if (comment.user) {
+							author += ` by ${comment.user.first_name} ${comment.user.last_name}`;
+						}
+						return (
+							<div key={comment._id}>
+								{comment.comment} <br/>
+								Created on {comment.date_time} {author}<br /><br />
+							</div>
+						);
+					})}
+				</>
+			);
+		}
+		return <>No Comments!</>;
+	};
+
 	render() {
+		//PROG2053Models.photoOfUserModel(this.props.match.params.userId)
 		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
-				PROG2053Models.photoOfUserModel(userId):
-				<Typography variant="caption">
-					{JSON.stringify(PROG2053Models.photoOfUserModel(this.props.match.params.userId))}
-				</Typography>
-			</Typography>
+			<div id="divImageList">
+				{PROG2053Models.photoOfUserModel(this.props.match.params.userId).map((image) => (
+					// eslint-disable-next-line react/jsx-key
+					<div className="divImageItem" key={image._id}>
+						<div className="divImage">
+							<img src={path.join(__dirname, 'images', image.file_name)}/>
+						</div>
+						<div className="divPhotoInfo">
+							<span>Creation date: {image.date_time}</span> <br />
+							<span>Comments: </span><br />
+							{this.generateComments(image)}
+						</div>
+					</div>
+				))}
+			</div>
 		);
 	}
 }