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

projectSecondPart - Migrated from old version to new one provided by Bruno

parent d5674958
No related branches found
No related tags found
No related merge requests found
import React from 'react';
import {
Button,
Link,
Typography
} from '@material-ui/core';
import {Redirect, withRouter} from 'react-router-dom';
import './UserDetail.css';
import PROG2053Models from '../../../model-data/PhotoApp';
/**
* Define UserDetail, a React componment of PROG2053 part #2
*/
class UserDetail extends React.Component {
generateUserPreview = () => {
const user = PROG2053Models.userModel(this.props.match.params.userId);
return (
<>
<Typography variant="h3">
{user.first_name} {user.last_name}
</Typography>
<Typography variant="body1">
Occupation: {user.occupation} <br/>
From: {user.location} <br/>
Description: {user.description}
</Typography>
</>
);
};
render() {
//to={`/photo-share/photos/${this.props.match.params.userId}
return (
<>
{this.generateUserPreview()}
<Button variant="outlined" >See Photos!</Button>
</>
);
}
}
export default withRouter(UserDetail);
import React from 'react';
import {
Divider,
List,
ListItem,
ListItemText
} from '@material-ui/core';
import './UserList.css';
import PROG2053Models from '../../../model-data/PhotoApp';
import {Link} from 'react-router-dom';
/**
* Define UserList, a React componment of PROG2053 part #2
*/
class UserList extends React.Component {
displayUsers = () => {
const users = [];
PROG2053Models.userListModel().forEach((e) => {
users.push((
<ListItem key={e._id} button component={Link} to={`/photo-share/users/${e._id}`}>
<ListItemText primary={`${e.first_name} ${e.last_name}`}/>
</ListItem>
));
users.push(<Divider key={`Divider_${e._id}`}/>);
});
return users;
};
render() {
return (
<div>
<List component="nav">
{this.displayUsers()}
</List>
</div>
);
}
}
export default UserList;
import React from 'react';
import {
Typography
} from '@material-ui/core';
import './UserPhotos.css';
import PROG2053Models from '../../../model-data/PhotoApp';
import {withRouter} from 'react-router';
/**
* Define UserPhotos, a React componment of PROG2053 part #2
*/
class UserPhotos extends React.Component {
render() {
return (
<Typography variant="body1">
This should be the UserPhotos view of the PhotoShare app. Since
it is invoked from React Router the params from the route will be
in property match. So this should show details of user:
{this.props.match.params.userId}. You can fetch the model for the user from
PROG2053Models.photoOfUserModel(userId):
<Typography variant="caption">
{JSON.stringify(PROG2053Models.photoOfUserModel(this.props.match.params.userId))}
</Typography>
</Typography>
);
}
}
export default withRouter(UserPhotos);
'use strict';
/*
* A simple Node.js program for exporting the current working directory via a webserver listing
* on a hard code (see portno below) port. To start the webserver run the command:
* node webServer.js
*
* Note that anyone able to connect to localhost:3001 will be able to fetch any file accessible
* to the current user in the current directory or any of its children.
*/
/* jshint node: true */
var express = require('express');
var portno = 3000; // Port number to use
var app = express();
var cs142models = require('./modelData/photoApp.js').cs142models;
// We have the express static module (http://expressjs.com/en/starter/static-files.html) do all
// the work for us.
app.use(express.static(__dirname));
app.get('/', function (request, response) {
response.send('Simple web server of files from ' + __dirname);
});
app.get('/test/:p1', function (request, response) {
// Express parses the ":p1" from the URL and returns it in the request.params objects.
var param = request.params.p1;
console.log('/test called with param1 = ', param);
if (param !== "info") {
console.error("Nothing to be done for param: ", param);
response.status(400).send('Not found');
return;
}
var info = cs142models.schemaInfo();
// Query didn't return an error but didn't find the SchemaInfo object - This
// is also an internal error return.
if (info.length === 0) {
response.status(500).send('Missing SchemaInfo');
return;
}
response.status(200).send(info);
});
/*
* URL /user/list - Return all the User object.
*/
app.get('/user/list', function (request, response) {
response.status(200).send(cs142models.userListModel());
return;
});
/*
* URL /user/:id - Return the information for User (id)
*/
app.get('/user/:id', function (request, response) {
var id = request.params.id;
var user = cs142models.userModel(id);
if (user === null) {
console.log('User with _id:' + id + ' not found.');
response.status(400).send('Not found');
return;
}
response.status(200).send(user);
return;
});
/*
* URL /photosOfUser/:id - Return the Photos for User (id)
*/
app.get('/photosOfUser/:id', function (request, response) {
var id = request.params.id;
var photos = cs142models.photoOfUserModel(id);
if (photos.length === 0) {
console.log('Photos for user with _id:' + id + ' not found.');
response.status(400).send('Not found');
return;
}
response.status(200).send(photos);
});
var server = app.listen(portno, function () {
var port = server.address().port;
console.log('Listening at http://localhost:' + port + ' exporting the directory ' + __dirname);
});
module.exports = {
entry: {
photoShare: './photoShare.jsx',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.css$/,
use: [ "style-loader", "css-loader" ],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: `${__dirname}/compiled`,
publicPath: '/',
filename: '[name].bundle.js',
},
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment