projectSecondPart - Added template for projectSecondPart

projectSecondPart/.babelrc

+{
+  "presets": [
+    "env",
+    "react",
+    "stage-2"
+  ]
+}
\ No newline at end of file

projectSecondPart/.eslintignore

+**/webpack.config.js
+**/bundle.js
+**/node_modules
\ No newline at end of file

projectSecondPart/.eslintrc.json

+{
+  "plugins": [
+      "react"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "babel-eslint",
+  "rules": {
+    "no-console": 0,
+    "react/prop-types": "off"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

projectSecondPart/.gitignore

+node_modules
+/start.bat
+/compiled/
\ No newline at end of file

projectSecondPart/components/topBar/TopBar.css

+.cs142-topbar-appBar {
+  height: 60;
+  justify-content: 'center';
+}

projectSecondPart/components/topBar/TopBar.jsx

+import React from 'react';
+import {
+  AppBar, Toolbar, Typography
+} from '@material-ui/core';
+import './TopBar.css';
+
+/**
+ * Define TopBar, a React componment of CS142 project #5
+ */
+class TopBar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <AppBar className="cs142-topbar-appBar" position="absolute">
+        <Toolbar>
+          <Typography variant="h5" color="inherit">
+              This is the TopBar component
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    );
+  }
+}
+
+export default TopBar;

projectSecondPart/components/userDetail/userDetail.jsx

+import React from 'react';
+import {
+  Typography
+} from '@material-ui/core';
+import './userDetail.css';
+
+
+/**
+ * Define UserDetail, a React componment of CS142 project #5
+ */
+class UserDetail extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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>
+    );
+  }
+}
+
+export default UserDetail;

projectSecondPart/components/userList/userList.jsx

+import React from 'react';
+import {
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  Typography,
+}
+from '@material-ui/core';
+import './userList.css';
+
+/**
+ * Define UserList, a React componment of CS142 project #5
+ */
+class UserList extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  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 />
+        </List>
+        <Typography variant="body1">
+          The model comes in from window.cs142models.userListModel()
+        </Typography>
+      </div>
+    );
+  }
+}
+
+export default UserList;

projectSecondPart/components/userPhotos/userPhotos.jsx

+import React from 'react';
+import {
+  Typography
+} from '@material-ui/core';
+import './userPhotos.css';
+
+
+/**
+ * Define UserPhotos, a React componment of CS142 project #5
+ */
+class UserPhotos extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+
+  render() {
+    return (
+      <Typography variant="body1">
+      This should be the UserPhotos 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.photoOfUserModel(userId):
+        <Typography variant="caption">
+          {JSON.stringify(window.cs142models.photoOfUserModel(this.props.match.params.userId))}
+        </Typography>
+      </Typography>
+
+    );
+  }
+}
+
+export default UserPhotos;