Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Martin Wighus Holtmon
PROG2053-Project
Commits
b27f998b
Commit
b27f998b
authored
Nov 05, 2021
by
Martin Wighus Holtmon
Browse files
projectSecondPart - Migrated from old version to new one provided by Bruno
parent
d5674958
Changes
47
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).
"
+
"
\n
Use 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
;