From 7086831e85ceb4627afc1aee62ce076917492fdf Mon Sep 17 00:00:00 2001 From: Martin Wighus Holtmon <martinwh@stud.ntnu.no> Date: Thu, 11 Nov 2021 16:10:27 +0100 Subject: [PATCH] projectPart2/Problem1: Changed to using state to store userdata etc. --- .../src/photo-share/pages/user-detail/UserDetail.jsx | 9 +++++++-- .../src/photo-share/pages/user-list/UserList.jsx | 7 ++++++- .../src/photo-share/pages/user-photos/UserPhotos.jsx | 8 ++++++-- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx index 90db280..31659db 100644 --- a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx +++ b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx @@ -12,8 +12,14 @@ import PROG2053Models from '../../../model-data/PhotoApp'; * Define UserDetail, a React componment of PROG2053 part #2 */ class UserDetail extends React.Component { + constructor(props) { + super(props); + this.state = {userDetails: PROG2053Models.userModel(this.props.match.params.userId)}; + } + + generateUserPreview = () => { - const user = PROG2053Models.userModel(this.props.match.params.userId); + const user = this.state.userDetails; return ( <> <Typography variant="h3"> @@ -29,7 +35,6 @@ class UserDetail extends React.Component { }; render() { - //to={`/photo-share/photos/${this.props.match.params.userId} return ( <> {this.generateUserPreview()} diff --git a/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx b/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx index 691ef24..e73759c 100644 --- a/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx +++ b/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx @@ -13,9 +13,14 @@ import {Link} from 'react-router-dom'; * Define UserList, a React componment of PROG2053 part #2 */ class UserList extends React.Component { + constructor(props) { + super(props); + this.state = {userModel: PROG2053Models.userListModel()}; + } + displayUsers = () => { const users = []; - PROG2053Models.userListModel().forEach((e) => { + this.state.userModel.forEach((e) => { users.push(( <ListItem key={e._id} button component={Link} to={`/photo-share/users/${e._id}`}> <ListItemText primary={`${e.first_name} ${e.last_name}`}/> diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx index 95f2025..265fb07 100644 --- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx +++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx @@ -10,6 +10,11 @@ import {Link} from 'react-router-dom'; * Define UserPhotos, a React componment of PROG2053 part #2 */ class UserPhotos extends React.Component { + constructor(props) { + super(props); + this.state = {userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)}; + } + getAuthor = (user) => { if (user) { return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>; @@ -37,10 +42,9 @@ class UserPhotos extends React.Component { }; render() { - //PROG2053Models.photoOfUserModel(this.props.match.params.userId) return ( <div id="divImageList"> - {PROG2053Models.photoOfUserModel(this.props.match.params.userId).map((image) => ( + {this.state.userPhotos.map((image) => ( // eslint-disable-next-line react/jsx-key <div className="divImageItem" key={image._id}> <div className="divImage"> -- GitLab