projectSecondPart/UserPhoto - added comment author.

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

@@ -3,7 +3,7 @@ import {
 	Button,
 	Typography
 } from '@material-ui/core';
-import {Link, Redirect, withRouter} from 'react-router-dom';
+import {Link, withRouter} from 'react-router-dom';
 import './UserDetail.css';
 import PROG2053Models from '../../../model-data/PhotoApp';
 

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

@@ -3,26 +3,30 @@ import './UserPhotos.css';
 import PROG2053Models from '../../../model-data/PhotoApp';
 import {withRouter} from 'react-router';
 import * as path from 'path';
+import {Link} from 'react-router-dom';
 
 
 /**
  * Define UserPhotos, a React componment of PROG2053 part #2
  */
 class UserPhotos extends React.Component {
+	getAuthor = (user) => {
+		if (user) {
+			return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
+		}
+		return '';
+	};
+
 	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 />
+								Created on {comment.date_time} by {this.getAuthor(comment.user)}<br/><br/>
 							</div>
 						);
 					})}
@@ -43,8 +47,8 @@ class UserPhotos extends React.Component {
 							<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 />
+							<span>Creation date: {image.date_time}</span> <br/>
+							<span>Comments: </span><br/>
 							{this.generateComments(image)}
 						</div>
 					</div>