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

projectSecondPart/components/userDetail/userDetail.jsx

 import React from 'react';
-import {
-  Typography
-} from '@material-ui/core';
 import './userDetail.css';
 
 
@@ -11,17 +8,29 @@ import './userDetail.css';
 class UserDetail extends React.Component {
   constructor(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() {
     return (
-      <Typography variant="body1">
-        This should be the UserDetail view of the PhotoShare app. Since
-        it is invoked from React Router the params from the route will be
-        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>
+      <div id="divUserDetail">
+        {this.generateUserPreview()}
+      </div>
     );
   }
 }

projectSecondPart/components/userList/userList.jsx

@@ -15,7 +15,7 @@ import {Link} from "react-router-dom";
 class UserList extends React.Component {
   constructor(props) {
     super(props);
-    console.log(window.cs142models.userListModel())
+    //console.log(window.cs142models.userListModel())
   }
 
   renderUsers() {