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
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 14672 additions and 7270 deletions
projectSecondPart/.babelrc deleted 100644 → 0
+ 0
− 7
View file @ d5674958
{
"presets": [
"env",
"react",
"stage-2"
]
}
\ No newline at end of file
projectSecondPart/.eslintignore
+ 1
− 3
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
+ 25
− 22
View file @ b27f998b
{
"plugins": [
"react"
],
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
"plugin:react/recommended",
"@selvklart/eslint-config/react"
],
"parser": "babel-eslint",
"rules": {
"no-console": 0,
"react/prop-types": "off"
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"es6": true
"ecmaVersion": 12,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
}
"plugins": [
"react"
],
"rules": {
"no-useless-constructor": ["warn"],
"react/prop-types": ["off"],
"linebreak-style": "off"
}
}
projectSecondPart/.gitignore
+ 23
− 4
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
+ 28
− 0
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
+ 0
− 4
View file @ d5674958
.cs142-topbar-appBar {
height: 60;
justify-content: 'center';
}
projectSecondPart/components/topBar/TopBar.jsx deleted 100644 → 0
+ 0
− 28
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
+ 0
− 46
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
+ 0
− 60
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
+ 0
− 55
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
+ 0
− 32
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
+ 0
− 27
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
+ 0
− 239
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;
};
var photoOfUserModel = function(userId) {
return photos.filter(function (photo) {
return (photo.user_id === userId);
});
};
var schemaModel = function() {
return schemaInfo;
};
var cs142models = {
userListModel: userListModel,
userModel: userModel,
photoOfUserModel: photoOfUserModel,
schemaInfo: schemaModel
};
if( typeof exports !== 'undefined' ) {
// We're being loaded by the Node.js module loader ('require') so we use its
// conventions of returning the object in exports.
exports.cs142models = cs142models;
} else {
// We're not in the Note.js module loader so we assume we're being loaded
// by the browser into the DOM.
window.cs142models = cs142models;
}
})();
projectSecondPart/package-lock.json
+ 14570
− 6626
View file @ b27f998b
This diff is collapsed.
projectSecondPart/package.json
+ 25
− 40
View file @ b27f998b
{
"name": "project5",
"version": "1.0.0",
"private": true,
"description": "CS142 Project #5 - Start ReactJS PhotoApp",
"main": "webServer.js",
"name": "part2",
"version": "0.1.0",
"scripts": {
"build": "node_modules/.bin/webpack -d",
"build:w": "node_modules/.bin/webpack -d --watch",
"lint": "node_modules/.bin/eslint *.jsx components/*/*.jsx lib/*.js"
"start": "react-scripts start"
},
"author": "Mendel Rosenblum <mendel@cs.stanford.edu> ",
"license": "ISC",
"dependencies": {
"@material-ui/core": "^4.9.2",
"@material-ui/icons": "^4.9.1",
"@popperjs/core": "^2.0.5",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"js-yaml": "^3.13.1",
"promise": "^8.0.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"url-loader": "^1.1.2"
"@material-ui/core": "^4.12.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^1.0.0",
"eslint": "^5.8.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"style-loader": "^0.23.0",
"y18n": "^4.0.3",
"ssri": "^6.0.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.1.2"
"@selvklart/eslint-config": "^1.1.5",
"eslint": "^7.32.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-react": "^7.26.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
projectSecondPart/photo-share.html deleted 100644 → 0
+ 0
− 17
View file @ d5674958
<!doctype html>
<!-- React.js applications are written in JavaScript but you need an
HTML document to load the JavaScript. This HTML loads the React.js
component Example -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CS142 Class Project</title>
<!-- Insert the model data for the Example widet into the DOM -->
<script src="modelData/photoApp.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<div id="photoshareapp"></div>
<script src="compiled/photoShare.bundle.js"></script>
</body>
</html>
projectSecondPart/photoShare.jsx deleted 100644 → 0
+ 0
− 60
View file @ d5674958
import React from 'react';
import ReactDOM from 'react-dom';
import {
HashRouter, Route, Switch
} from 'react-router-dom';
import {
Grid, Paper
} from '@material-ui/core';
import './styles/main.css';
// import necessary components
import TopBar from './components/topBar/TopBar';
import UserDetail from './components/userDetail/UserDetail';
import UserList from './components/userList/UserList';
import UserPhotos from './components/userPhotos/UserPhotos';
class PhotoShare extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<HashRouter>
<div>
<Grid container spacing={8}>
<Grid item xs={12}>
<TopBar/>
</Grid>
<div className="cs142-main-topbar-buffer"/>
<Grid item sm={3}>
<Paper className="cs142-main-grid-item">
<UserList/>
</Paper>
</Grid>
<Grid item sm={9}>
<Paper className="cs142-main-grid-item">
<Switch>
<Route path="/users/:userId"
render={props => <UserDetail {...props} />}
/>
<Route path="/photos/:userId"
render={props => <UserPhotos {...props} />}
/>
<Route path="/users" component={UserList}/>
</Switch>
</Paper>
</Grid>
</Grid>
</div>
</HashRouter>
);
}
}
ReactDOM.render(
<PhotoShare/>,
document.getElementById('photoshareapp'),
);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment