projectSecondPart/Problem2 - The data is now fetched from the webserver.

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]);
+			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));
 		}
 	};
 

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>
 			</>
 		);
 	}

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 = () => {

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>;