Skip to content
Snippets Groups Projects
Commit 7086831e authored by Martin Wighus Holtmon's avatar Martin Wighus Holtmon
Browse files

projectPart2/Problem1: Changed to using state to store userdata etc.

parent 79934b3b
No related branches found
No related tags found
No related merge requests found
...@@ -12,8 +12,14 @@ import PROG2053Models from '../../../model-data/PhotoApp'; ...@@ -12,8 +12,14 @@ import PROG2053Models from '../../../model-data/PhotoApp';
* Define UserDetail, a React componment of PROG2053 part #2 * Define UserDetail, a React componment of PROG2053 part #2
*/ */
class UserDetail extends React.Component { class UserDetail extends React.Component {
constructor(props) {
super(props);
this.state = {userDetails: PROG2053Models.userModel(this.props.match.params.userId)};
}
generateUserPreview = () => { generateUserPreview = () => {
const user = PROG2053Models.userModel(this.props.match.params.userId); const user = this.state.userDetails;
return ( return (
<> <>
<Typography variant="h3"> <Typography variant="h3">
...@@ -29,7 +35,6 @@ class UserDetail extends React.Component { ...@@ -29,7 +35,6 @@ class UserDetail extends React.Component {
}; };
render() { render() {
//to={`/photo-share/photos/${this.props.match.params.userId}
return ( return (
<> <>
{this.generateUserPreview()} {this.generateUserPreview()}
......
...@@ -13,9 +13,14 @@ import {Link} from 'react-router-dom'; ...@@ -13,9 +13,14 @@ import {Link} from 'react-router-dom';
* Define UserList, a React componment of PROG2053 part #2 * Define UserList, a React componment of PROG2053 part #2
*/ */
class UserList extends React.Component { class UserList extends React.Component {
constructor(props) {
super(props);
this.state = {userModel: PROG2053Models.userListModel()};
}
displayUsers = () => { displayUsers = () => {
const users = []; const users = [];
PROG2053Models.userListModel().forEach((e) => { this.state.userModel.forEach((e) => {
users.push(( users.push((
<ListItem key={e._id} button component={Link} to={`/photo-share/users/${e._id}`}> <ListItem key={e._id} button component={Link} to={`/photo-share/users/${e._id}`}>
<ListItemText primary={`${e.first_name} ${e.last_name}`}/> <ListItemText primary={`${e.first_name} ${e.last_name}`}/>
......
...@@ -10,6 +10,11 @@ import {Link} from 'react-router-dom'; ...@@ -10,6 +10,11 @@ import {Link} from 'react-router-dom';
* Define UserPhotos, a React componment of PROG2053 part #2 * Define UserPhotos, a React componment of PROG2053 part #2
*/ */
class UserPhotos extends React.Component { class UserPhotos extends React.Component {
constructor(props) {
super(props);
this.state = {userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)};
}
getAuthor = (user) => { getAuthor = (user) => {
if (user) { if (user) {
return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>; return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
...@@ -37,10 +42,9 @@ class UserPhotos extends React.Component { ...@@ -37,10 +42,9 @@ class UserPhotos extends React.Component {
}; };
render() { render() {
//PROG2053Models.photoOfUserModel(this.props.match.params.userId)
return ( return (
<div id="divImageList"> <div id="divImageList">
{PROG2053Models.photoOfUserModel(this.props.match.params.userId).map((image) => ( {this.state.userPhotos.map((image) => (
// eslint-disable-next-line react/jsx-key // eslint-disable-next-line react/jsx-key
<div className="divImageItem" key={image._id}> <div className="divImageItem" key={image._id}>
<div className="divImage"> <div className="divImage">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment