From c4ea6054cb48a507d224a286e83b03970393d1b8 Mon Sep 17 00:00:00 2001
From: Martin Wighus Holtmon <martinwh@stud.ntnu.no>
Date: Wed, 17 Nov 2021 09:33:52 +0100
Subject: [PATCH] projectSecondPart/Problem2 - The data is now fetched from the
webserver.
---
.../photo-share/components/top-bar/TopBar.jsx | 22 ++++++++++++-------
.../pages/user-detail/UserDetail.jsx | 17 +++++++++++---
.../photo-share/pages/user-list/UserList.jsx | 12 ++++++++--
.../pages/user-photos/UserPhotos.jsx | 13 ++++++++++-
4 files changed, 50 insertions(+), 14 deletions(-)
diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
index 1eae740..2b50ccc 100644
--- a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
+++ b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
@@ -4,7 +4,7 @@ import {
} from '@material-ui/core';
import './TopBar.css';
import {withRouter} from 'react-router';
-import PROG2053Models from '../../../model-data/PhotoApp';
+import fetchModel from '../../../lib/fetchModelData';
/**
* Define TopBar, a React componment of PROG2053 part #2
@@ -28,13 +28,19 @@ class TopBar extends React.Component {
updateHeader = (pathname) => {
const path = pathname.split('/');
if (path[2] && path[3]) {
- const user = PROG2053Models.userModel(path[3]);
- let newContext = '';
- if (path[2] === 'photos') {
- newContext += 'Photos of ';
- }
- newContext += `${user.first_name} ${user.last_name}`;
- this.setState({headerContext: newContext});
+ fetchModel(`http://localhost:3001/user/${path[3]}`)
+ .then((value) => {
+ const user = value.data;
+
+ // Set context
+ let newContext = '';
+ if (path[2] === 'photos') {
+ newContext += 'Photos of ';
+ }
+ newContext += `${user.first_name} ${user.last_name}`;
+ this.setState({headerContext: newContext});
+ })
+ .catch((error) => console.log(error));
}
};
diff --git a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
index dc96fad..a02227b 100644
--- a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
@@ -13,15 +13,25 @@ import fetchModel from '../../../lib/fetchModelData';
class UserDetail extends React.Component {
constructor(props) {
super(props);
- this.state = {userDetails: fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)};
+ this.state = {userDetails: ''};
+ }
+
+ componentDidMount() {
+ this.fetchUserDetails();
}
componentDidUpdate(prevProps) {
if (this.props.match.params.userId !== prevProps.match.params.userId) {
- this.setState({userDetails: fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)});
+ this.fetchUserDetails();
}
}
+ fetchUserDetails() {
+ fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)
+ .then((value) => this.setState({userDetails: value.data}))
+ .catch((error) => console.log(error));
+ }
+
generateUserPreview = () => {
const user = this.state.userDetails;
return (
@@ -42,7 +52,8 @@ class UserDetail extends React.Component {
return (
<>
{this.generateUserPreview()}
- <Button variant="outlined" component={Link} to={`/photo-share/photos/${this.props.match.params.userId}`}>See Photos!</Button>
+ <Button variant="outlined" component={Link} to={`/photo-share/photos/${this.props.match.params.userId}`}>See
+ Photos!</Button>
</>
);
}
diff --git a/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx b/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx
index e73759c..c79acbd 100644
--- a/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx
@@ -6,8 +6,8 @@ import {
ListItemText
} from '@material-ui/core';
import './UserList.css';
-import PROG2053Models from '../../../model-data/PhotoApp';
import {Link} from 'react-router-dom';
+import fetchModel from '../../../lib/fetchModelData';
/**
* Define UserList, a React componment of PROG2053 part #2
@@ -15,7 +15,15 @@ import {Link} from 'react-router-dom';
class UserList extends React.Component {
constructor(props) {
super(props);
- this.state = {userModel: PROG2053Models.userListModel()};
+ this.state = {userModel: []};
+ }
+
+ componentDidMount() {
+ fetchModel('http://localhost:3001/user/list')
+ .then((value) => {
+ this.setState({userModel: value.data});
+ })
+ .catch((error) => console.log(error));
}
displayUsers = () => {
diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
index 6e41697..046ea31 100644
--- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
@@ -4,6 +4,7 @@ import PROG2053Models from '../../../model-data/PhotoApp';
import {withRouter} from 'react-router';
import * as path from 'path';
import {Link} from 'react-router-dom';
+import fetchModel from '../../../lib/fetchModelData';
/**
@@ -15,12 +16,22 @@ class UserPhotos extends React.Component {
this.state = {userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)};
}
+ componentDidMount() {
+ this.fetchUserPhotos();
+ }
+
componentDidUpdate(prevProps) {
if (this.props.match.params.userId !== prevProps.match.params.userId) {
- this.setState({userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)});
+ this.fetchUserPhotos();
}
}
+ fetchUserPhotos() {
+ fetchModel(`http://localhost:3001/photosOfUser/${this.props.match.params.userId}`)
+ .then((value) => this.setState({userPhotos: value.data}))
+ .catch((error) => console.log(error));
+ }
+
getAuthor = (user) => {
if (user) {
return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
--
GitLab