Commit 654aeb1d authored by Martin Wighus Holtmon's avatar Martin Wighus Holtmon
Browse files

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

parent b27f998b
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>
</>
);
}
......
#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;
}
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>
);
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment