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)

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())
   }
 
-  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>
+  renderUsers() {
+    /*<ListItem>
       <ListItemText primary="Item #1" />
     </ListItem>
     <Divider />
     <ListItem>
       <ListItemText primary="Item #2" />
     </ListItem>
-          <Divider />
-          <ListItem>
-            <ListItemText primary="Item #3" />
+    <Divider />*/
+
+    /*return window.cs142models.userListModel().map(element => (
+        <ListItem key={element._id}>
+          <ListItemText primary={element.first_name + " " + element.last_name}/>
         </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>
-        <Typography variant="body1">
-          The model comes in from window.cs142models.userListModel()
-        </Typography>
       </div>
     );
   }

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&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"
                 render={ props => <UserDetail {...props} /> }
               />