projectPart2/Problem1: implemented header context

projectSecondPart/src/photo-share/components/top-bar/TopBar.css

 .prog2053-topbar-toolbar {
 	justify-content: space-between;
 }
-
-.prog2053-topbar-toolbar #left{
-	background-color: red;
-}
-
-.prog2053-topbar-toolbar #right{
-	background-color: orange;
-}

projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx

@@ -3,6 +3,8 @@ import {
 	AppBar, Box, Toolbar, Typography
 } from '@material-ui/core';
 import './TopBar.css';
+import {withRouter} from 'react-router';
+import PROG2053Models from '../../../model-data/PhotoApp';
 
 /**
  * Define TopBar, a React componment of PROG2053 part #2
@@ -10,18 +12,40 @@ import './TopBar.css';
 class TopBar extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {right: 'right', left: 'name'};
+		this.state = {headerContext: '', name: 'name'};
 	}
+
+	componentDidUpdate(prevProps) {
+		if (this.props.location.pathname !== prevProps.location.pathname) {
+			this.updateHeader(this.props.location.pathname);
+		}
+	}
+
+	componentDidMount() {
+		this.updateHeader(this.props.location.pathname);
+	}
+
+	updateHeader = (pathname) => {
+		const path = pathname.split('/');
+		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});
+	};
+
 	render() {
 		return (
 			<Box sx={{flexGrow: 1}}>
 				<AppBar position="fixed">
 					<Toolbar className="prog2053-topbar-toolbar">
 						<Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="left">
-							{this.state.left}
+							{this.state.name}
 						</Typography>
 						<Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="right">
-							{this.state.right}
+							{this.state.headerContext}
 						</Typography>
 					</Toolbar>
 				</AppBar>
@@ -30,4 +54,4 @@ class TopBar extends React.Component {
 	}
 }
 
-export default TopBar;
+export default withRouter(TopBar);

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

@@ -7,7 +7,6 @@ import {Link, withRouter} from 'react-router-dom';
 import './UserDetail.css';
 import PROG2053Models from '../../../model-data/PhotoApp';
 
-
 /**
  * Define UserDetail, a React componment of PROG2053 part #2
  */