projectPart2/Problem2: finished the fetchModel method - do not know how to handle errors yet...

projectSecondPart/src/lib/fetchModelData.js

@@ -15,10 +15,24 @@
 
 function fetchModel(url) {
 	return new Promise(function (resolve, reject) {
-		console.log(url);
-		setTimeout(() => reject(new Error({status: 501, statusText: 'Not Implemented'})), 0);
-		// On Success return:
-		// resolve({data: getResponseObject});
+		//console.log(url);
+		//setTimeout(() => reject({status: 501, statusText: 'Not Implemented'}), 0);
+		const request = new XMLHttpRequest();
+		request.open('GET', url, true);
+		request.onload = function () {
+			if (request.status !== 200) {
+				// eslint-disable-next-line prefer-promise-reject-errors
+				reject({
+					status: request.status,
+					statusText: request.statusText
+				});
+			} else {
+				resolve({
+					data: JSON.parse(request.response)
+				});
+			}
+		};
+		request.send();
 	});
 }
 

projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx

@@ -5,7 +5,7 @@ import {
 } from '@material-ui/core';
 import {Link, withRouter} from 'react-router-dom';
 import './UserDetail.css';
-import PROG2053Models from '../../../model-data/PhotoApp';
+import fetchModel from '../../../lib/fetchModelData';
 
 /**
  * Define UserDetail, a React componment of PROG2053 part #2
@@ -13,12 +13,12 @@ import PROG2053Models from '../../../model-data/PhotoApp';
 class UserDetail extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {userDetails: PROG2053Models.userModel(this.props.match.params.userId)};
+		this.state = {userDetails: fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)};
 	}
 
 	componentDidUpdate(prevProps) {
 		if (this.props.match.params.userId !== prevProps.match.params.userId) {
-			this.setState({userDetails: PROG2053Models.userModel(this.props.match.params.userId)});
+			this.setState({userDetails: fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)});
 		}
 	}