diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx index 1eae74013ac0b221b289f1ce731349a6204bbf2a..2b50cccd75da44f1b301601777d6d39bc862a787 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 dc96fad08d9ca04a9556be15b9ae7b3892a8a7f0..a02227b52b19eb8e80188cee78ab5f4a5ce795c3 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 e73759c239bba4341543a7f844c0613e519128ba..c79acbd4b2972447f928db75200d92d70447bd0a 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 6e41697a78f7db106af88249f7cde15ff2082c8d..046ea31bef3edf6add8fbce0a98b0eec25e3eca9 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>;