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

projectSecondPart/Problem1: Made users appear in list + will update content...

projectSecondPart/Problem1: Made users appear in list + will update content when clicked (trigger userDetails.jsx)
parent 7efc8212
No related branches found
No related tags found
No related merge requests found
...@@ -4,10 +4,10 @@ import { ...@@ -4,10 +4,10 @@ import {
List, List,
ListItem, ListItem,
ListItemText, ListItemText,
Typography,
} }
from '@material-ui/core'; from '@material-ui/core';
import './userList.css'; import './userList.css';
import {Link} from "react-router-dom";
/** /**
* Define UserList, a React componment of CS142 project #5 * Define UserList, a React componment of CS142 project #5
...@@ -15,33 +15,43 @@ import './userList.css'; ...@@ -15,33 +15,43 @@ import './userList.css';
class UserList extends React.Component { class UserList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
console.log(window.cs142models.userListModel())
} }
render() { renderUsers() {
return ( /*<ListItem>
<div>
<Typography variant="body1">
This is the user list, which takes up 3/12 of the window.
You might choose to use <a href="https://material-ui.com/demos/lists/">Lists</a> and <a href="https://material-ui.com/demos/dividers">Dividers</a> to
display your users like so:
</Typography>
<List component="nav">
<ListItem>
<ListItemText primary="Item #1" /> <ListItemText primary="Item #1" />
</ListItem> </ListItem>
<Divider /> <Divider />
<ListItem> <ListItem>
<ListItemText primary="Item #2" /> <ListItemText primary="Item #2" />
</ListItem> </ListItem>
<Divider /> <Divider />*/
<ListItem>
<ListItemText primary="Item #3" /> /*return window.cs142models.userListModel().map(element => (
<ListItem key={element._id}>
<ListItemText primary={element.first_name + " " + element.last_name}/>
</ListItem> </ListItem>
<Divider /> ))*/
let users = [];
window.cs142models.userListModel().forEach(element => {
users.push((
<ListItem key={element._id} button component={Link} to={"/users/" + element._id}>
<ListItemText primary={element.first_name + " " + element.last_name}/>
</ListItem>
))
users.push(<Divider key={"Divider_" + element._id}/>)
})
return users
}
render() {
return (
<div>
<List component="nav">
{this.renderUsers()}
</List> </List>
<Typography variant="body1">
The model comes in from window.cs142models.userListModel()
</Typography>
</div> </div>
); );
} }
......
...@@ -36,17 +36,6 @@ class PhotoShare extends React.Component { ...@@ -36,17 +36,6 @@ class PhotoShare extends React.Component {
<Grid item sm={9}> <Grid item sm={9}>
<Paper className="cs142-main-grid-item"> <Paper className="cs142-main-grid-item">
<Switch> <Switch>
<Route exact path="/"
render={() =>
<Typography variant="body1">
Welcome to your photosharing app! This <a href="https://material-ui.com/demos/paper/">Paper</a> component
displays the main content of the application. The {"sm={9}"} prop in
the <a href="https://material-ui.com/layout/grid/">Grid</a> item component makes it responsively
display 9/12 of the window. The Switch component enables us to conditionally render different
components to this part of the screen. You don&apos;t need to display anything here on the homepage,
so you should delete this Route component once you get started.
</Typography>}
/>
<Route path="/users/:userId" <Route path="/users/:userId"
render={ props => <UserDetail {...props} /> } render={ props => <UserDetail {...props} /> }
/> />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment