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

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

parent dfe19027
No related branches found
No related tags found
No related merge requests found
...@@ -4,7 +4,7 @@ import { ...@@ -4,7 +4,7 @@ import {
} from '@material-ui/core'; } from '@material-ui/core';
import './TopBar.css'; import './TopBar.css';
import {withRouter} from 'react-router'; 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 * Define TopBar, a React componment of PROG2053 part #2
...@@ -28,13 +28,19 @@ class TopBar extends React.Component { ...@@ -28,13 +28,19 @@ class TopBar extends React.Component {
updateHeader = (pathname) => { updateHeader = (pathname) => {
const path = pathname.split('/'); const path = pathname.split('/');
if (path[2] && path[3]) { 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 = ''; let newContext = '';
if (path[2] === 'photos') { if (path[2] === 'photos') {
newContext += 'Photos of '; newContext += 'Photos of ';
} }
newContext += `${user.first_name} ${user.last_name}`; newContext += `${user.first_name} ${user.last_name}`;
this.setState({headerContext: newContext}); this.setState({headerContext: newContext});
})
.catch((error) => console.log(error));
} }
}; };
......
...@@ -13,15 +13,25 @@ import fetchModel from '../../../lib/fetchModelData'; ...@@ -13,15 +13,25 @@ import fetchModel from '../../../lib/fetchModelData';
class UserDetail extends React.Component { class UserDetail extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {userDetails: fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)}; this.state = {userDetails: ''};
}
componentDidMount() {
this.fetchUserDetails();
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (this.props.match.params.userId !== prevProps.match.params.userId) { 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 = () => { generateUserPreview = () => {
const user = this.state.userDetails; const user = this.state.userDetails;
return ( return (
...@@ -42,7 +52,8 @@ class UserDetail extends React.Component { ...@@ -42,7 +52,8 @@ class UserDetail extends React.Component {
return ( return (
<> <>
{this.generateUserPreview()} {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>
</> </>
); );
} }
......
...@@ -6,8 +6,8 @@ import { ...@@ -6,8 +6,8 @@ import {
ListItemText ListItemText
} from '@material-ui/core'; } from '@material-ui/core';
import './UserList.css'; import './UserList.css';
import PROG2053Models from '../../../model-data/PhotoApp';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import fetchModel from '../../../lib/fetchModelData';
/** /**
* Define UserList, a React componment of PROG2053 part #2 * Define UserList, a React componment of PROG2053 part #2
...@@ -15,7 +15,15 @@ import {Link} from 'react-router-dom'; ...@@ -15,7 +15,15 @@ import {Link} from 'react-router-dom';
class UserList extends React.Component { class UserList extends React.Component {
constructor(props) { constructor(props) {
super(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 = () => { displayUsers = () => {
......
...@@ -4,6 +4,7 @@ import PROG2053Models from '../../../model-data/PhotoApp'; ...@@ -4,6 +4,7 @@ import PROG2053Models from '../../../model-data/PhotoApp';
import {withRouter} from 'react-router'; import {withRouter} from 'react-router';
import * as path from 'path'; import * as path from 'path';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import fetchModel from '../../../lib/fetchModelData';
/** /**
...@@ -15,12 +16,22 @@ class UserPhotos extends React.Component { ...@@ -15,12 +16,22 @@ class UserPhotos extends React.Component {
this.state = {userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)}; this.state = {userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)};
} }
componentDidMount() {
this.fetchUserPhotos();
}
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (this.props.match.params.userId !== prevProps.match.params.userId) { 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) => { 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>;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment