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

projectSecondPart/Problem1: made userDetails display basic information about the selected user.

parent 7ccc5521
Branches
No related tags found
No related merge requests found
import React from 'react'; import React from 'react';
import {
Typography
} from '@material-ui/core';
import './userDetail.css'; import './userDetail.css';
...@@ -11,17 +8,29 @@ import './userDetail.css'; ...@@ -11,17 +8,29 @@ import './userDetail.css';
class UserDetail extends React.Component { class UserDetail extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
//console.log(this.props.match.params.userId);
} }
generateUserPreview() {
let user = window.cs142models.userListModel().find(e => e._id === this.props.match.params.userId)
console.log(user)
return (<div id="DivUserPreview">
<h2>{user.first_name} {user.last_name}</h2>
<p>
Occupation: {user.occupation} <br />
From: {user.location} <br />
Description: {user.description}
</p>
</div>
)
}
render() { render() {
return ( return (
<Typography variant="body1"> <div id="divUserDetail">
This should be the UserDetail view of the PhotoShare app. Since {this.generateUserPreview()}
it is invoked from React Router the params from the route will be </div>
in property match. So this should show details of user:
{this.props.match.params.userId}. You can fetch the model for the
user from window.cs142models.userModel(userId).
</Typography>
); );
} }
} }
......
...@@ -15,7 +15,7 @@ import {Link} from "react-router-dom"; ...@@ -15,7 +15,7 @@ import {Link} from "react-router-dom";
class UserList extends React.Component { class UserList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
console.log(window.cs142models.userListModel()) //console.log(window.cs142models.userListModel())
} }
renderUsers() { renderUsers() {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment