Skip to content
GitLab
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
Expand all Hide whitespace changes
Inline Side-by-side
projectSecondPart/.babelrc deleted 100644 → 0
View file @ d5674958
{
"presets": [
"env",
"react",
"stage-2"
]
}
\ No newline at end of file
projectSecondPart/.eslintignore
View file @ b27f998b
**/webpack.config.js
**/bundle.js
**/node_modules
\ No newline at end of file
node_modules
\ No newline at end of file
projectSecondPart/.eslintrc.json
View file @ b27f998b
{
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parser": "babel-eslint",
"rules": {
"no-console": 0,
"react/prop-types": "off"
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"settings": {
"react": {
"version": "detect"
}
}
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"@selvklart/eslint-config/react"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"no-useless-constructor": ["warn"],
"react/prop-types": ["off"],
"linebreak-style": "off"
}
}
projectSecondPart/.gitignore
View file @ b27f998b
.idea
node_modules
/start.bat
/compiled/
\ No newline at end of file
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
projectSecondPart/README.md 0 → 100644
View file @ b27f998b
# NTNU PROG2053 Part 2
Check the project description for what to do.
The project is taken from the Stanford course, CS142, with the permission of the course leader
Mendel Rosenblum.
## Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
projectSecondPart/components/topBar/TopBar.css deleted 100644 → 0
View file @ d5674958
.cs142-topbar-appBar {
height: 60;
justify-content: 'center';
}
projectSecondPart/components/topBar/TopBar.jsx deleted 100644 → 0
View file @ d5674958
import React from 'react';
import {
AppBar, Toolbar, Typography
} from '@material-ui/core';
import './TopBar.css';
/**
* Define TopBar, a React componment of CS142 project #5
*/
class TopBar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<AppBar className="cs142-topbar-appBar" position="absolute">
<Toolbar>
<Typography variant="h5" color="inherit">
This is the TopBar component
</Typography>
</Toolbar>
</AppBar>
);
}
}
export default TopBar;
projectSecondPart/components/userDetail/userDetail.jsx deleted 100644 → 0
View file @ d5674958
import React from 'react';
import './userDetail.css';
import {Link} from "react-router-dom";
import {Typography} from "@material-ui/core";
/**
* Define UserDetail, a React componment of CS142 project #5
*/
class UserDetail extends React.Component {
constructor(props) {
super(props);
//console.log(this.props.match.params.userId);
}
generateUserPreview() {
let user = window.cs142models.userModel(this.props.match.params.userId)
console.log(user)
return (
<div id="divUserDetail">
<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>
</div>
)
}
render() {
return (
<div>
{this.generateUserPreview()}
<Typography variant="button" display="block" gutterBottom>
<Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link>
</Typography>
</div>
);
}
}
export default UserDetail;
projectSecondPart/components/userList/userList.jsx deleted 100644 → 0
View file @ d5674958
import React from 'react';
import {
Divider,
List,
ListItem,
ListItemText,
}
from '@material-ui/core';
import './userList.css';
import {Link} from "react-router-dom";
/**
* Define UserList, a React componment of CS142 project #5
*/
class UserList extends React.Component {
constructor(props) {
super(props);
//console.log(window.cs142models.userListModel())
}
renderUsers() {
/*<ListItem>
<ListItemText primary="Item #1" />
</ListItem>
<Divider />
<ListItem>
<ListItemText primary="Item #2" />
</ListItem>
<Divider />*/
/*return window.cs142models.userListModel().map(element => (
<ListItem key={element._id}>
<ListItemText primary={element.first_name + " " + element.last_name}/>
</ListItem>
))*/
let users = [];
window.cs142models.userListModel().forEach(element => {
users.push((
<ListItem key={element._id} button component={Link} to={"/users/" + element._id}>
<ListItemText primary={element.first_name + " " + element.last_name}/>
</ListItem>
))
users.push(<Divider key={"Divider_" + element._id}/>)
})
return users
}
render() {
return (
<div>
<List component="nav">
{this.renderUsers()}
</List>
</div>
);
}
}
export default UserList;
projectSecondPart/components/userPhotos/userPhotos.jsx deleted 100644 → 0
View file @ d5674958
import React from 'react';
import {
Box,
Grid, Paper, styled
} from '@material-ui/core';
import './userPhotos.css';
import path from "path";
const Item = styled(Paper)(({theme}) => ({
...theme.typography.body2,
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
/**
* Define UserPhotos, a React componment of CS142 project #5
*/
class UserPhotos extends React.Component {
constructor(props) {
super(props);
//console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId))
}
render() {
/*How the render should look like:
Display all photos in a gid.
For each gridelement, display
- Photo
- Creation time
- Comments
- Date when comment was created
- name of the user who created the comment (should be a link to their user page)
- Text of the comment
*/
return (
//Source: https://mui.com/components/grid/
// Would like to expand the grid that is already there!
<Box sx={{flexGrow: 1}}>
<Grid container spacing={2} direction="row" alignItems="flex-start">
{window.cs142models.photoOfUserModel(this.props.match.params.userId).map(e => (
<Grid item key={e._id}>
<Item><img src={path.join(__dirname, 'images', e.file_name)} alt={e.file_name}/></Item>
</Grid>
))}
</Grid>
</Box>
);
}
}
export default UserPhotos;
projectSecondPart/index.html deleted 100644 → 0
View file @ d5674958
<!doctype html>
<html>
<head>
<title>CS142 Project #5</title>
</head>
<body>
<h1>CS142 Project #5</h1>
<p>
If you can see this message it means your simple Node.js web server is working!
</p>
<p>
Your solutions to project #5 should be served by this web server from the following files
that can be clicked on to test in your browser:
</p>
<ul>
<li>Photo Sharing App - <a href="photo-share.html">photo-share.html</a></li>
</ul>
<script type="text/javascript">
//<![CDATA[
// Angular doesn't work using the file protocol and it dies with an obscure error
// message. Since the project's files are accessible using either the file or
// http protocols we warn the user if they are not using http.
if(window.location.protocol !== 'http:') {
var msg = "Project #5 files must be accessed with the http protocol (not from local files)." +
"\nUse the URL http://localhost:3000";
console.error(msg);
alert(msg);
}
//]]>
</script>
</body>
</html>
projectSecondPart/lib/fetchModelData.js deleted 100644 → 0
View file @ d5674958
var Promise = require("Promise");
/**
* FetchModel - Fetch a model from the web server.
* url - string - The URL to issue the GET request.
* Returns: a Promise that should be filled
* with the response of the GET request parsed
* as a JSON object and returned in the property
* named "data" of an object.
* If the requests has an error the promise should be
* rejected with an object contain the properties:
* status: The HTTP response status
* statusText: The statusText from the xhr request
*
*/
function fetchModel(url) {
return new Promise(function(resolve, reject) {
console.log(url);
setTimeout(() => reject({status: 501, statusText: "Not Implemented"}),0);
// On Success return:
// resolve({data: getResponseObject});
});
}
export default fetchModel;
projectSecondPart/modelData/photoApp.js deleted 100644 → 0
View file @ d5674958
"use strict";
/* jshint node: true */
/*
* Model data for CS142 Project #5 - the photo sharing site.
* This module returns an object called cs142Models with the following functions:
*
* cs142Models.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.
*
* cs142Models.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.
*
* cs142Models.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.
*
* cs142Models.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.
*
*
*/
(function() {
// Create fake test Schema
var schemaInfo = {
load_date_time: "Fri Apr 29 2016 01:45:15 GMT-0700 (PDT)",
__v: 0,
_id: "57231f1b30e4351f4e9f4bf6"
};
// Create init users.
var im = {_id: "57231f1a30e4351f4e9f4bd7", first_name: "Ian", last_name: "Malcolm",
location: "Austin, TX", description: "Should've stayed in the car.", occupation: "Mathematician"};
var er = {_id: "57231f1a30e4351f4e9f4bd8", first_name: "Ellen", last_name: "Ripley",
location: "Nostromo", description: "Lvl 6 rating. Pilot.", occupation: "Warrant Officer"};
var 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"};
var rk = {_id: "57231f1a30e4351f4e9f4bda", first_name: "Rey", last_name: "Kenobi",
location: "D'Qar", description: "Excited to be here!", occupation: "Rebel"};
var al = {_id: "57231f1a30e4351f4e9f4bdb", first_name: "April", last_name: "Ludgate",
location: "Pawnee, IN", description: "Witch", occupation: "Animal Control"};
var jo = {_id: "57231f1a30e4351f4e9f4bdc", first_name: "John", last_name: "Ousterhout",
location: "Stanford, CA", description: "<i>CS142!</i>", occupation: "Professor"};
var users = [im, er, pt, rk, al, jo];
// Create initial photos.
var photo1 = {_id: "57231f1a30e4351f4e9f4bdd", date_time: "2012-08-30 10:44:23", file_name: "ouster.jpg", user_id: jo._id};
var photo2 = {_id: "57231f1a30e4351f4e9f4bde", date_time: "2009-09-13 20:00:00", file_name: "malcolm2.jpg", user_id: im._id};
var photo3 = {_id: "57231f1a30e4351f4e9f4bdf", date_time: "2009-09-13 20:05:03", file_name: "malcolm1.jpg", user_id: im._id};
var photo4 = {_id: "57231f1a30e4351f4e9f4be0", date_time: "2013-11-18 18:02:00", file_name: "ripley1.jpg", user_id: er._id};
var photo5 = {_id: "57231f1a30e4351f4e9f4be1", date_time: "2013-09-20 17:30:00", file_name: "ripley2.jpg", user_id: er._id};
var photo6 = {_id: "57231f1a30e4351f4e9f4be2", date_time: "2009-07-10 16:02:49", file_name: "kenobi1.jpg", user_id: rk._id};
var photo7 = {_id: "57231f1a30e4351f4e9f4be3", date_time: "2010-03-18 23:48:00", file_name: "kenobi2.jpg", user_id: rk._id};
var photo8 = {_id: "57231f1a30e4351f4e9f4be4", date_time: "2010-08-30 14:26:00", file_name: "kenobi3.jpg", user_id: rk._id};
var photo9 = {_id: "57231f1a30e4351f4e9f4be5", date_time: "2013-12-03 09:02:00", file_name: "took1.jpg", user_id: pt._id};
var photo10 = {_id: "57231f1a30e4351f4e9f4be6", date_time: "2013-12-03 09:03:00", file_name: "took2.jpg", user_id: pt._id};
var photo11 = {_id: "57231f1a30e4351f4e9f4be7", date_time: "2013-09-04 09:16:32", file_name: "ludgate1.jpg", user_id: al._id};
var photo12 = {_id: "57231f1a30e4351f4e9f4be8", date_time: "2008-10-16 17:12:28", file_name: "kenobi4.jpg", user_id: rk._id};
var photos = [photo1, photo2, photo3, photo4, photo5, photo6, photo7,
photo8, photo9, photo10, photo11, photo12];
// Create initial comments.
var 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: jo, photo_id: photo1._id
};
var 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: jo, photo_id: photo1._id
};
var 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: jo, photo_id: photo1._id
};
var 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: im, photo_id: photo2._id
};
var 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: er, photo_id: photo5._id
};
var 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: er, photo_id: photo7._id
};
var 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: rk, photo_id: photo7._id
};
var comment8 = {
_id: "57231f1a30e4351f4e9f4bf0",
date_time: "2010-09-06 13:59:33",
comment: "Made a new friend today! Well, they followed me " +
"home, anyway.", user: rk, photo_id: photo8._id
};
var 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: rk, photo_id: photo12._id
};
var comment10 = {
_id: "57231f1a30e4351f4e9f4bf2",
date_time: "2013-12-04 13:12:00",
comment: "What do you mean you haven't heard of second " +
"breakfast?", user: pt, photo_id: photo10._id
};
var 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: al, photo_id: photo11._id
};
var comment12 = {
_id: "57231f1a30e4351f4e9f4bf4",
date_time: "2016-01-04 2:00:01",
comment: "Which one are you?", user: al, photo_id: photo9._id
};
var comment13 = {
_id: "57231f1a30e4351f4e9f4bf5",
date_time: "2016-01-04 2:04:01",
comment: "The tall one.", user: pt, photo_id: photo9._id
};
var comments = [comment1, comment2, comment3, comment4, comment5, comment6, comment7,
comment8, comment9, comment10, comment11, comment12, comment13];
comments.forEach(function (comment) {
var photo = 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);
});
var userListModel = function() {
return users;
};
var userModel = function(userId) {
for (var i = 0; i < users.length; i++) {
if (users[i]._id === userId) {
return users[i];
}
}
return null;