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