Commit 65700394 authored by Martin Wighus Holtmon's avatar Martin Wighus Holtmon
Browse files

projectSecondPart - Added template for projectSecondPart

parent 541ca8fc
{
"presets": [
"env",
"react",
"stage-2"
]
}
\ No newline at end of file
**/webpack.config.js
**/bundle.js
**/node_modules
\ No newline at end of file
{
"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"
}
}
}
node_modules
/start.bat
/compiled/
\ No newline at end of file
.cs142-topbar-appBar {
height: 60;
justify-content: 'center';
}
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;
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;
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;
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;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment