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 React from 'react';
import { import {
Button, Button,
Link,
Typography Typography
} from '@material-ui/core'; } from '@material-ui/core';
import {Redirect, withRouter} from 'react-router-dom'; import {Link, Redirect, withRouter} from 'react-router-dom';
import './UserDetail.css'; import './UserDetail.css';
import PROG2053Models from '../../../model-data/PhotoApp'; import PROG2053Models from '../../../model-data/PhotoApp';
...@@ -34,7 +33,7 @@ class UserDetail extends React.Component { ...@@ -34,7 +33,7 @@ class UserDetail extends React.Component {
return ( return (
<> <>
{this.generateUserPreview()} {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 React from 'react';
import {
Typography
} from '@material-ui/core';
import './UserPhotos.css'; import './UserPhotos.css';
import PROG2053Models from '../../../model-data/PhotoApp'; import PROG2053Models from '../../../model-data/PhotoApp';
import {withRouter} from 'react-router'; import {withRouter} from 'react-router';
import * as path from 'path';
/** /**
* Define UserPhotos, a React componment of PROG2053 part #2 * Define UserPhotos, a React componment of PROG2053 part #2
*/ */
class UserPhotos extends React.Component { 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() { render() {
//PROG2053Models.photoOfUserModel(this.props.match.params.userId)
return ( return (
<Typography variant="body1"> <div id="divImageList">
This should be the UserPhotos view of the PhotoShare app. Since {PROG2053Models.photoOfUserModel(this.props.match.params.userId).map((image) => (
it is invoked from React Router the params from the route will be // eslint-disable-next-line react/jsx-key
in property match. So this should show details of user: <div className="divImageItem" key={image._id}>
{this.props.match.params.userId}. You can fetch the model for the user from <div className="divImage">
PROG2053Models.photoOfUserModel(userId): <img src={path.join(__dirname, 'images', image.file_name)}/>
<Typography variant="caption"> </div>
{JSON.stringify(PROG2053Models.photoOfUserModel(this.props.match.params.userId))} <div className="divPhotoInfo">
</Typography> <span>Creation date: {image.date_time}</span> <br />
</Typography> <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