implemented version number

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

@@ -12,18 +12,19 @@ import fetchModel from '../../../lib/fetchModelData';
 class TopBar extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {headerContext: '', name: 'Group 9'};
+		this.state = {headerContext: '', name: 'Group 9', version: ''};
 	}
 
-	componentDidUpdate(prevProps) {
-		if (this.props.location.pathname !== prevProps.location.pathname) {
+	componentDidMount() {
 		this.updateHeader(this.props.location.pathname);
-		}
+		this.fetchInfo();
 	}
 
-	componentDidMount() {
+	componentDidUpdate(prevProps) {
+		if (this.props.location.pathname !== prevProps.location.pathname) {
 			this.updateHeader(this.props.location.pathname);
 		}
+	}
 
 	updateHeader = (pathname) => {
 		const path = pathname.split('/');
@@ -44,6 +45,12 @@ class TopBar extends React.Component {
 		}
 	};
 
+	fetchInfo() {
+		fetchModel('http://localhost:3001/test/info')
+			.then((value) => this.setState({version: `v.${value.data.__v}`}))
+			.catch((error) => console.log(error));
+	}
+
 	render() {
 		return (
 			<Box sx={{flexGrow: 1}}>
@@ -55,6 +62,9 @@ class TopBar extends React.Component {
 						<Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="right">
 							{this.state.headerContext}
 						</Typography>
+						<Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="version">
+							{this.state.version}
+						</Typography>
 					</Toolbar>
 				</AppBar>
 			</Box>