diff --git a/projectSecondPart/components/userDetail/userDetail.jsx b/projectSecondPart/components/userDetail/userDetail.jsx index d7c252ae427c5859d4795910a23566aeaa32be99..6002f79723e3d1c5f14550dd2c12f7385deb5d17 100644 --- a/projectSecondPart/components/userDetail/userDetail.jsx +++ b/projectSecondPart/components/userDetail/userDetail.jsx @@ -14,26 +14,30 @@ class UserDetail extends React.Component { } generateUserPreview() { - let user = window.cs142models.userListModel().find(e => e._id === this.props.match.params.userId) + let user = window.cs142models.userModel(this.props.match.params.userId) console.log(user) return ( - <Typography variant="body1"> - <h2>{user.first_name} {user.last_name}</h2> - <p> - Occupation: {user.occupation} <br /> - From: {user.location} <br /> + <div id="divUserDetail"> + <Typography variant="h3"> + {user.first_name} {user.last_name} + </Typography> + <Typography variant="body1"> + Occupation: {user.occupation} <br/> + From: {user.location} <br/> Description: {user.description} - </p> - </Typography> + </Typography> + </div> ) } render() { return ( - <div id="divUserDetail"> + <div> {this.generateUserPreview()} - <Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link> + <Typography variant="button" display="block" gutterBottom> + <Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link> + </Typography> </div> ); } diff --git a/projectSecondPart/components/userList/userList.jsx b/projectSecondPart/components/userList/userList.jsx index 79c30973668fa2238c820c2ab671769653fcbfde..195d74d731404f44cdc6a0ce07d6f7ecc2ea21ac 100644 --- a/projectSecondPart/components/userList/userList.jsx +++ b/projectSecondPart/components/userList/userList.jsx @@ -5,7 +5,7 @@ import { ListItem, ListItemText, } -from '@material-ui/core'; + from '@material-ui/core'; import './userList.css'; import {Link} from "react-router-dom"; diff --git a/projectSecondPart/components/userPhotos/userPhotos.jsx b/projectSecondPart/components/userPhotos/userPhotos.jsx index 181e0617c1b86e4440e9085dc43090761b2c92d2..a8cf1723953eac02e678b595b73690ca5c666af2 100644 --- a/projectSecondPart/components/userPhotos/userPhotos.jsx +++ b/projectSecondPart/components/userPhotos/userPhotos.jsx @@ -1,32 +1,53 @@ import React from 'react'; import { - Typography + Box, + Grid, Paper, styled } from '@material-ui/core'; import './userPhotos.css'; +import path from "path"; +const Item = styled(Paper)(({theme}) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, +})); + /** * Define UserPhotos, a React componment of CS142 project #5 */ class UserPhotos extends React.Component { constructor(props) { super(props); - console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId)) + //console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId)) } 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> + /*How the render should look like: + Display all photos in a gid. + For each gridelement, display + - Photo + - Creation time + - Comments + - Date when comment was created + - name of the user who created the comment (should be a link to their user page) + - Text of the comment + */ + + return ( + //Source: https://mui.com/components/grid/ + // Would like to expand the grid that is already there! + <Box sx={{flexGrow: 1}}> + <Grid container spacing={2} direction="row" alignItems="flex-start"> + {window.cs142models.photoOfUserModel(this.props.match.params.userId).map(e => ( + <Grid item key={e._id}> + <Item><img src={path.join(__dirname, 'images', e.file_name)} alt={e.file_name}/></Item> + </Grid> + ))} + </Grid> + </Box> ); } } diff --git a/projectSecondPart/photoShare.jsx b/projectSecondPart/photoShare.jsx index 9c010b41c0109674fe438840e6fb755f4969cced..5329960a686b6e07dfea5df6728142056f1791a4 100644 --- a/projectSecondPart/photoShare.jsx +++ b/projectSecondPart/photoShare.jsx @@ -22,39 +22,39 @@ class PhotoShare extends React.Component { render() { return ( <HashRouter> - <div> - <Grid container spacing={8}> - <Grid item xs={12}> - <TopBar/> - </Grid> - <div className="cs142-main-topbar-buffer"/> - <Grid item sm={3}> - <Paper className="cs142-main-grid-item"> - <UserList /> - </Paper> - </Grid> - <Grid item sm={9}> - <Paper className="cs142-main-grid-item"> - <Switch> - <Route path="/users/:userId" - render={ props => <UserDetail {...props} /> } - /> - <Route path="/photos/:userId" - render ={ props => <UserPhotos {...props} /> } - /> - <Route path="/users" component={UserList} /> - </Switch> - </Paper> - </Grid> - </Grid> - </div> - </HashRouter> + <div> + <Grid container spacing={8}> + <Grid item xs={12}> + <TopBar/> + </Grid> + <div className="cs142-main-topbar-buffer"/> + <Grid item sm={3}> + <Paper className="cs142-main-grid-item"> + <UserList/> + </Paper> + </Grid> + <Grid item sm={9}> + <Paper className="cs142-main-grid-item"> + <Switch> + <Route path="/users/:userId" + render={props => <UserDetail {...props} />} + /> + <Route path="/photos/:userId" + render={props => <UserPhotos {...props} />} + /> + <Route path="/users" component={UserList}/> + </Switch> + </Paper> + </Grid> + </Grid> + </div> + </HashRouter> ); } } ReactDOM.render( - <PhotoShare />, + <PhotoShare/>, document.getElementById('photoshareapp'), );