diff --git a/projectSecondPart/src/model-data/PhotoApp.js b/projectSecondPart/src/model-data/PhotoApp.js
deleted file mode 100644
index bc1e79f33cd23b356e73a4fe617817bb90c1ebdb..0000000000000000000000000000000000000000
--- a/projectSecondPart/src/model-data/PhotoApp.js
+++ /dev/null
@@ -1,261 +0,0 @@
-/*
- * Model data for PROG2053 part #2 - the photo sharing site.
- * This module returns an object called PROG2053Models with the following functions:
- *
- * PROG2053Models.userListModel - A function that returns the list of users on the system. The
- * list is returned as an array of objects containing:
- * _id (string) - The ID of the user.
- * first_name (string) - The first name of the user.
- * last_name (string) - The last name of the user.
- * location (string) - The location of the user.
- * description (string) - A brief user description.
- * occupation (string) - The occupation of the user.
- *
- * PROG2053Models.userModel - A function that returns the info of the specified user. Called
- * with an user ID (id), the function returns n object containing:
- * _id (string) - The ID of the user.
- * first_name (string) - The first name of the user.
- * last_name (string) - The last name of the user.
- * location (string) - The location of the user.
- * description (string) - A brief user description.
- * occupation (string) - The occupation of the user.
- *
- * PROG2053Models.photoOfUserModel - A function that returns the photos belong to
- * the specified user. Called with an user ID (id), the function returns an object containing:
- * _id (string) - The ID of the photo
- * date_time (date) - he date and time the picture was taken in ISO format.
- * file_name (string) - The file name in the image directory of the picture.
- * user_id (string) - The user id of the picture's owner.
- * comments: {array of objects} - An array of comment objects containing the properties:
- * _id (string) - The ID of the comment.
- * date_time (date) - The date the comment was made in ISO format.
- * comment (string) - The text of the comment.
- * user: {object} The user info (see userMode for format) who made the comment
- * photo_id: (string) - The ID of the photo the comment belongs to.
- *
- * PROG2053Models.schemaModel - A function that returns the test info from the fake schema.
- * The function returns an object containing:
- * _id (string) - The ID of the schema
- * __v (number) - The version number
- * load_date_time (date) - The date the schema was made in ISO format.
- *
- *
- */
-
-class PROG2053Models {
- // Create fake test Schema
- static schemaInfo = {
- load_date_time: 'Fri Apr 29 2016 01:45:15 GMT-0700 (PDT)',
- __v: 0,
- _id: '57231f1b30e4351f4e9f4bf6'
- };
-
- // Create init users.
- static im = {_id: '57231f1a30e4351f4e9f4bd7', first_name: 'Ian', last_name: 'Malcolm',
- location: 'Austin, TX', description: 'Should\'ve stayed in the car.', occupation: 'Mathematician'};
- static er = {_id: '57231f1a30e4351f4e9f4bd8', first_name: 'Ellen', last_name: 'Ripley',
- location: 'Nostromo', description: 'Lvl 6 rating. Pilot.', occupation: 'Warrant Officer'};
- static pt = {_id: '57231f1a30e4351f4e9f4bd9', first_name: 'Peregrin', last_name: 'Took',
- location: 'Gondor', description: 'Home is behind, the world ahead... ' +
- 'And there are many paths to tread. Through shadow, to the edge of night, ' +
- 'until the stars are all alight... Mist and shadow, cloud and shade, ' +
- 'all shall fade... all... shall... fade... ', occupation: 'Thain'};
- static rk = {_id: '57231f1a30e4351f4e9f4bda', first_name: 'Rey', last_name: 'Kenobi',
- location: 'D\'Qar', description: 'Excited to be here!', occupation: 'Rebel'};
- static al = {_id: '57231f1a30e4351f4e9f4bdb', first_name: 'April', last_name: 'Ludgate',
- location: 'Pawnee, IN', description: 'Witch', occupation: 'Animal Control'};
- static jo = {_id: '57231f1a30e4351f4e9f4bdc', first_name: 'John', last_name: 'Ousterhout',
- location: 'Stanford, CA', description: '<i>CS142!</i>', occupation: 'Professor'};
-
- static users = [
- PROG2053Models.im,
- PROG2053Models.er,
- PROG2053Models.pt,
- PROG2053Models.rk,
- PROG2053Models.al,
- PROG2053Models.jo
- ];
-
- // Create initial photos.
- static photo1 = {_id: '57231f1a30e4351f4e9f4bdd', date_time: '2012-08-30 10:44:23', file_name: 'ouster.jpg', user_id: PROG2053Models.jo._id};
- static photo2 = {_id: '57231f1a30e4351f4e9f4bde', date_time: '2009-09-13 20:00:00', file_name: 'malcolm2.jpg', user_id: PROG2053Models.im._id};
- static photo3 = {_id: '57231f1a30e4351f4e9f4bdf', date_time: '2009-09-13 20:05:03', file_name: 'malcolm1.jpg', user_id: PROG2053Models.im._id};
- static photo4 = {_id: '57231f1a30e4351f4e9f4be0', date_time: '2013-11-18 18:02:00', file_name: 'ripley1.jpg', user_id: PROG2053Models.er._id};
- static photo5 = {_id: '57231f1a30e4351f4e9f4be1', date_time: '2013-09-20 17:30:00', file_name: 'ripley2.jpg', user_id: PROG2053Models.er._id};
- static photo6 = {_id: '57231f1a30e4351f4e9f4be2', date_time: '2009-07-10 16:02:49', file_name: 'kenobi1.jpg', user_id: PROG2053Models.rk._id};
- static photo7 = {_id: '57231f1a30e4351f4e9f4be3', date_time: '2010-03-18 23:48:00', file_name: 'kenobi2.jpg', user_id: PROG2053Models.rk._id};
- static photo8 = {_id: '57231f1a30e4351f4e9f4be4', date_time: '2010-08-30 14:26:00', file_name: 'kenobi3.jpg', user_id: PROG2053Models.rk._id};
- static photo9 = {_id: '57231f1a30e4351f4e9f4be5', date_time: '2013-12-03 09:02:00', file_name: 'took1.jpg', user_id: PROG2053Models.pt._id};
- static photo10 = {_id: '57231f1a30e4351f4e9f4be6', date_time: '2013-12-03 09:03:00', file_name: 'took2.jpg', user_id: PROG2053Models.pt._id};
- static photo11 = {_id: '57231f1a30e4351f4e9f4be7', date_time: '2013-09-04 09:16:32', file_name: 'ludgate1.jpg', user_id: PROG2053Models.al._id};
- static photo12 = {_id: '57231f1a30e4351f4e9f4be8', date_time: '2008-10-16 17:12:28', file_name: 'stick.gif', user_id: PROG2053Models.rk._id};
-
- static photos = [
- PROG2053Models.photo1,
- PROG2053Models.photo2,
- PROG2053Models.photo3,
- PROG2053Models.photo4,
- PROG2053Models.photo5,
- PROG2053Models.photo6,
- PROG2053Models.photo7,
- PROG2053Models.photo8,
- PROG2053Models.photo9,
- PROG2053Models.photo10,
- PROG2053Models.photo11,
- PROG2053Models.photo12
- ];
-
- // Create initial comments.
- static comment1 = {
- _id: '57231f1a30e4351f4e9f4be9',
- date_time: '2012-09-02 14:01:00',
- comment: 'Learning new programming languages is hard... ' +
- 'it\'s so easy to forget a </div>!', user: PROG2053Models.jo, photo_id: PROG2053Models.photo1._id
- };
-
- static comment2 = {
- _id: '57231f1a30e4351f4e9f4bea',
- date_time: '2013-09-06 14:02:00',
- comment: 'This is another comment, with a bit more text; ' +
- 'if the text gets long enough, does it wrap properly ' +
- 'from line to line?', user: PROG2053Models.jo, photo_id: PROG2053Models.photo1._id
- };
-
- static comment3 = {
- _id: '57231f1a30e4351f4e9f4beb',
- date_time: '2013-09-08 14:06:00',
- comment: 'If you see this text in <b>boldface</b> ' +
- 'then HTML escaping isn\'t working properly.', user: PROG2053Models.jo, photo_id: PROG2053Models.photo1._id
- };
-
- static comment4 = {
- _id: '57231f1a30e4351f4e9f4bec',
- date_time: '2009-09-14 18:07:00',
- comment: 'If there is one thing the history of evolution has' +
- ' taught us it\'s that life will not be contained. Life breaks ' +
- 'free, it expands to new territories and crashes through ' +
- 'barriers, painfully, maybe even dangerously, but, uh... well, ' +
- 'there it is. Life finds a way.', user: PROG2053Models.im, photo_id: PROG2053Models.photo2._id
- };
-
- static comment5 = {
- _id: '57231f1a30e4351f4e9f4bed',
- date_time: '2013-11-28 17:45:13',
- comment: 'Back from my trip. Did IQs just... drop sharply while I was ' +
- 'away?', user: PROG2053Models.er, photo_id: PROG2053Models.photo5._id
- };
-
- static comment6 = {
- _id: '57231f1a30e4351f4e9f4bee',
- date_time: '2013-11-02 14:07:00',
- comment: 'Hey Rey, great form. Love what ' +
- 'you do with the scavenged tech, got any tips?', user: PROG2053Models.er, photo_id: PROG2053Models.photo7._id
- };
-
- static comment7 = {
- _id: '57231f1a30e4351f4e9f4bef',
- date_time: '2013-11-02 14:07:00',
- comment: 'Definitely! I love your work! I\'m away on a trip at ' +
- 'the moment, but let\'s meet up when I get back! :)', user: PROG2053Models.rk, photo_id: PROG2053Models.photo7._id
- };
-
- static comment8 = {
- _id: '57231f1a30e4351f4e9f4bf0',
- date_time: '2010-09-06 13:59:33',
- comment: 'Made a new friend today! Well, they followed me ' +
- 'home, anyway.', user: PROG2053Models.rk, photo_id: PROG2053Models.photo8._id
- };
-
- static comment9 = {
- _id: '57231f1a30e4351f4e9f4bf1',
- date_time: '2008-10-16 18:04:55',
- comment: 'Wouldn\'t get anywhere without this beauty! ' +
- 'Completely built from scraps by hand, but she goes at top ' +
- 'speeds that\'ll rival any First Order piece of junk.', user: PROG2053Models.rk, photo_id: PROG2053Models.photo12._id
- };
-
- static comment10 = {
- _id: '57231f1a30e4351f4e9f4bf2',
- date_time: '2013-12-04 13:12:00',
- comment: 'What do you mean you haven\'t heard of second ' +
- 'breakfast?', user: PROG2053Models.pt, photo_id: PROG2053Models.photo10._id
- };
-
- static comment11 = {
- _id: '57231f1a30e4351f4e9f4bf3',
- date_time: '2013-09-04 10:14:32',
- comment: 'Beautiful yet cold and aloof. Loner. Does not obey, ' +
- 'occasionally chooses to cooperate. ', user: PROG2053Models.al, photo_id: PROG2053Models.photo11._id
- };
-
- static comment12 = {
- _id: '57231f1a30e4351f4e9f4bf4',
- date_time: '2016-01-04 2:00:01',
- comment: 'Which one are you?', user: PROG2053Models.al, photo_id: PROG2053Models.photo9._id
- };
-
- static comment13 = {
- _id: '57231f1a30e4351f4e9f4bf5',
- date_time: '2016-01-04 2:04:01',
- comment: 'The tall one.', user: PROG2053Models.pt, photo_id: PROG2053Models.photo9._id
- };
-
- static comments = [
- PROG2053Models.comment1,
- PROG2053Models.comment2,
- PROG2053Models.comment3,
- PROG2053Models.comment4,
- PROG2053Models.comment5,
- PROG2053Models.comment6,
- PROG2053Models.comment7,
- PROG2053Models.comment8,
- PROG2053Models.comment9,
- PROG2053Models.comment10,
- PROG2053Models.comment11,
- PROG2053Models.comment12,
- PROG2053Models.comment13
- ];
-
- static populatedPhotoComments = false;
-
- static userListModel = () => {
- return PROG2053Models.users;
- };
-
- static userModel = (userId) => {
- for (let i = 0; i < PROG2053Models.users.length; i++) {
- if (PROG2053Models.users[i]._id === userId) {
- return PROG2053Models.users[i];
- }
- }
- return null;
- };
-
- static photoOfUserModel = (userId) => {
- return PROG2053Models.photos.filter(function (photo) {
- return (photo.user_id === userId);
- });
- };
-
- static schemaModel = () => {
- return PROG2053Models.schemaInfo;
- };
-
- static populatePhotoComments = () => {
- PROG2053Models.populatedPhotoComments = true;
- PROG2053Models.comments.forEach(function (comment) {
- const photo = PROG2053Models.photos.filter(function (photo) {
- return (photo._id === comment.photo_id);
- })[0]; //only one match. return the content of the match inside the array
-
- if (!photo.comments) {
- photo.comments = [];
- }
- photo.comments.push(comment);
- });
- };
-}
-
-PROG2053Models.populatePhotoComments();
-
-module.exports = PROG2053Models;
diff --git a/projectSecondPart/src/photo-share/PhotoShare.jsx b/projectSecondPart/src/photo-share/PhotoShare.jsx
index 6a4121158aa1f3371029895adaeba89cb7029c37..0ae0d4b9f8014ef50e82ce768807d9c45561e3ef 100644
--- a/projectSecondPart/src/photo-share/PhotoShare.jsx
+++ b/projectSecondPart/src/photo-share/PhotoShare.jsx
@@ -3,7 +3,7 @@ import {
BrowserRouter as Router, Route, Switch
} from 'react-router-dom';
import {
- Grid, Paper, Typography
+ Grid, Paper
} from '@material-ui/core';
// import necessary components
@@ -11,7 +11,6 @@ import TopBar from './components/top-bar/TopBar';
import UserDetail from './pages/user-detail/UserDetail';
import UserList from './pages/user-list/UserList';
import UserPhotos from './pages/user-photos/UserPhotos';
-import PROG2053Models from '../model-data/PhotoApp';
class PhotoShare extends React.Component {
render() {
@@ -31,17 +30,6 @@ class PhotoShare extends React.Component {
<Grid item sm={9}>
<Paper className="prog2053-main-grid-item">
<Switch>
- <Route exact path="/photo-share">
- <Typography variant="body1">
- Welcome to your photosharing app! This <a href="https://material-ui.com/demos/paper/">Paper</a> component
- displays the main content of the application. The {'sm={9}'} prop in
- the <a href="https://material-ui.com/layout/grid/">Grid</a> item component makes it responsively
- display 9/12 of the window. The Switch component enables us to conditionally render different
- components to this part of the screen. You don't need to display anything here on the homepage,
- so you should delete this Route component once you get started.
- </Typography>
- <img src={`/images/${PROG2053Models.photoOfUserModel('57231f1a30e4351f4e9f4bda')[3].file_name}`} alt="test"></img>
- </Route>
<Route path="/photo-share/users/:userId">
<UserDetail />
</Route>
diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
index a6c51820d489306ea15a6503a2b4a9c787b0ec9d..103ab59d4d44fc629adcc505e1bfea05e5f1ac04 100644
--- a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
+++ b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
@@ -12,7 +12,12 @@ 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: ''};
+ }
+
+ componentDidMount() {
+ this.updateHeader(this.props.location.pathname);
+ this.fetchInfo();
}
componentDidUpdate(prevProps) {
@@ -21,10 +26,6 @@ class TopBar extends React.Component {
}
}
- componentDidMount() {
- this.updateHeader(this.props.location.pathname);
- }
-
updateHeader = (pathname) => {
const path = pathname.split('/');
if (path[2] && path[3]) {
@@ -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>
diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
index 3a8a77315bedf4a5aa46ea4758f3d6d28c1d61b6..0e084b96861f80a55ed8d7e05505c8e9334767e8 100644
--- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
@@ -1,7 +1,6 @@
import React from 'react';
import './UserPhotos.css';
import '../Global.css';
-import PROG2053Models from '../../../model-data/PhotoApp';
import {withRouter} from 'react-router';
import * as path from 'path';
import {Link} from 'react-router-dom';
@@ -14,7 +13,7 @@ import fetchModel from '../../../lib/fetchModelData';
class UserPhotos extends React.Component {
constructor(props) {
super(props);
- this.state = {userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)};
+ this.state = {userPhotos: []};
}
componentDidMount() {
@@ -73,7 +72,7 @@ class UserPhotos extends React.Component {
// eslint-disable-next-line react/jsx-key
<div className="divImageItem" key={image._id}>
<div className="divImage">
- <img src={path.join(__dirname, 'images', image.file_name)}/>
+ <img src={path.join(__dirname, 'images', image.file_name)} alt={image.file_name} />
</div>
<div className="divPhotoInfo">
{this.generateComments(image)}