Skip to content
Snippets Groups Projects
Commit fa2a2318 authored by Martin Wighus Holtmon's avatar Martin Wighus Holtmon
Browse files

projectSecondPart/Problem1

- Implemented functionality that display the users photos. Need to make it more viewable.
- Reformat code (fix indentation to 2 spaces)
parent ef28ab26
No related branches found
No related tags found
No related merge requests found
...@@ -14,26 +14,30 @@ class UserDetail extends React.Component { ...@@ -14,26 +14,30 @@ class UserDetail extends React.Component {
} }
generateUserPreview() { 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) console.log(user)
return ( return (
<div id="divUserDetail">
<Typography variant="h3">
{user.first_name} {user.last_name}
</Typography>
<Typography variant="body1"> <Typography variant="body1">
<h2>{user.first_name} {user.last_name}</h2>
<p>
Occupation: {user.occupation} <br/> Occupation: {user.occupation} <br/>
From: {user.location} <br/> From: {user.location} <br/>
Description: {user.description} Description: {user.description}
</p>
</Typography> </Typography>
</div>
) )
} }
render() { render() {
return ( return (
<div id="divUserDetail"> <div>
{this.generateUserPreview()} {this.generateUserPreview()}
<Typography variant="button" display="block" gutterBottom>
<Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link> <Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link>
</Typography>
</div> </div>
); );
} }
......
import React from 'react'; import React from 'react';
import { import {
Typography Box,
Grid, Paper, styled
} from '@material-ui/core'; } from '@material-ui/core';
import './userPhotos.css'; 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 * Define UserPhotos, a React componment of CS142 project #5
*/ */
class UserPhotos extends React.Component { class UserPhotos extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId)) //console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId))
} }
render() { render() {
return ( /*How the render should look like:
<Typography variant="body1"> Display all photos in a gid.
This should be the UserPhotos view of the PhotoShare app. Since For each gridelement, display
it is invoked from React Router the params from the route will be - Photo
in property match. So this should show details of user: - Creation time
{this.props.match.params.userId}. You can fetch the model for the user from - Comments
window.cs142models.photoOfUserModel(userId): - Date when comment was created
<Typography variant="caption"> - name of the user who created the comment (should be a link to their user page)
{JSON.stringify(window.cs142models.photoOfUserModel(this.props.match.params.userId))} - Text of the comment
</Typography> */
</Typography>
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>
); );
} }
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment