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
Branches
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 node_modules
**/bundle.js \ No newline at end of file
**/node_modules
\ No newline at end of file
projectSecondPart/.eslintrc.json
+ 25
− 22
View file @ b27f998b
{ {
"plugins": [ "env": {
"react" "browser": true,
], "es2021": true,
"node": true
},
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:react/recommended" "plugin:react/recommended",
"@selvklart/eslint-config/react"
], ],
"parser": "babel-eslint", "parserOptions": {
"rules": { "ecmaFeatures": {
"no-console": 0, "jsx": true
"react/prop-types": "off"
}, },
"env": { "ecmaVersion": 12,
"browser": true, "sourceType": "module"
"node": true,
"es6": true
}, },
"settings": { "plugins": [
"react": { "react"
"version": "detect" ],
} "rules": {
"no-useless-constructor": ["warn"],
"react/prop-types": ["off"],
"linebreak-style": "off"
} }
} }
projectSecondPart/.gitignore
+ 23
− 4
View file @ b27f998b
.idea # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
node_modules
/start.bat # dependencies
/compiled/ /node_modules
\ No newline at end of file /.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", "name": "part2",
"version": "1.0.0", "version": "0.1.0",
"private": true,
"description": "CS142 Project #5 - Start ReactJS PhotoApp",
"main": "webServer.js",
"scripts": { "scripts": {
"build": "node_modules/.bin/webpack -d", "start": "react-scripts start"
"build:w": "node_modules/.bin/webpack -d --watch",
"lint": "node_modules/.bin/eslint *.jsx components/*/*.jsx lib/*.js"
}, },
"author": "Mendel Rosenblum <mendel@cs.stanford.edu> ",
"license": "ISC",
"dependencies": { "dependencies": {
"@material-ui/core": "^4.9.2", "@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.9.1", "react": "^17.0.2",
"@popperjs/core": "^2.0.5", "react-dom": "^17.0.2",
"express": "^4.16.4", "react-router": "^5.2.1",
"file-loader": "^3.0.1", "react-router-dom": "^5.3.0",
"js-yaml": "^3.13.1", "react-scripts": "4.0.3"
"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"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.26.0", "@selvklart/eslint-config": "^1.1.5",
"babel-eslint": "^10.0.1", "eslint": "^7.32.0",
"babel-jest": "^24.8.0", "eslint-plugin-babel": "^5.3.1",
"babel-loader": "^7.1.4", "eslint-plugin-react": "^7.26.1"
"babel-preset-env": "^1.6.1", },
"babel-preset-react": "^6.24.1", "browserslist": {
"babel-preset-stage-2": "^6.24.1", "production": [
"css-loader": "^1.0.0", ">0.2%",
"eslint": "^5.8.0", "not dead",
"eslint-config-airbnb": "^17.1.0", "not op_mini all"
"eslint-plugin-import": "^2.14.0", ],
"eslint-plugin-jsx-a11y": "^6.1.2", "development": [
"eslint-plugin-react": "^7.11.1", "last 1 chrome version",
"style-loader": "^0.23.0", "last 1 firefox version",
"y18n": "^4.0.3", "last 1 safari version"
"ssri": "^6.0.2", ]
"webpack": "^4.43.0",
"webpack-cli": "^3.1.2"
} }
} }
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