diff --git a/projectSecondPart/components/userList/userList.jsx b/projectSecondPart/components/userList/userList.jsx index 4eec82f24c7ee79f34581e23129f4ba0180e3958..ccacd646df03600f6c7923fcecd20a1082a39e25 100644 --- a/projectSecondPart/components/userList/userList.jsx +++ b/projectSecondPart/components/userList/userList.jsx @@ -4,10 +4,10 @@ import { List, ListItem, ListItemText, - Typography, } from '@material-ui/core'; import './userList.css'; +import {Link} from "react-router-dom"; /** * Define UserList, a React componment of CS142 project #5 @@ -15,33 +15,43 @@ import './userList.css'; class UserList extends React.Component { constructor(props) { super(props); + console.log(window.cs142models.userListModel()) + } + + renderUsers() { + /*<ListItem> + <ListItemText primary="Item #1" /> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Item #2" /> + </ListItem> + <Divider />*/ + + /*return window.cs142models.userListModel().map(element => ( + <ListItem key={element._id}> + <ListItemText primary={element.first_name + " " + element.last_name}/> + </ListItem> + ))*/ + + 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> - <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" /> - </ListItem> - <Divider /> - <ListItem> - <ListItemText primary="Item #2" /> - </ListItem> - <Divider /> - <ListItem> - <ListItemText primary="Item #3" /> - </ListItem> - <Divider /> + {this.renderUsers()} </List> - <Typography variant="body1"> - The model comes in from window.cs142models.userListModel() - </Typography> </div> ); } diff --git a/projectSecondPart/photoShare.jsx b/projectSecondPart/photoShare.jsx index 8c68959146e89a049ebff1b1e15d48ca8f7aac54..f0e1f87601c21996a7dfa70fb57dad3fd5b30753 100644 --- a/projectSecondPart/photoShare.jsx +++ b/projectSecondPart/photoShare.jsx @@ -36,17 +36,6 @@ class PhotoShare extends React.Component { <Grid item sm={9}> <Paper className="cs142-main-grid-item"> <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'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" render={ props => <UserDetail {...props} /> } />