13 |
18 | );
19 | };
20 |
21 | const App = () => {
22 |
23 | return (
24 | NOT FOUND: 404
14 |15 | ERROR: the page you requested in not available. 16 |
17 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 10 | Just Another Page 11 |
12 | 13 | 14 |15 | Some Lore Ipsum (a placeholder text): 16 | 17 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 18 | ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 19 | laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 20 | voluptate velit esse cillum dolore eu fugiat nulla pariatur. 21 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 22 | deserunt mollit anim id est laborum. 23 | 24 |
25 | 26 |27 | Return to Home. 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /les01/cards/img/2_of_spades.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arcuri82/web_development_and_api_design/41abcbdfc34216e4c6a59b249a4e6fa77c733322/les01/cards/img/2_of_spades.png -------------------------------------------------------------------------------- /les01/cards/img/black_joker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arcuri82/web_development_and_api_design/41abcbdfc34216e4c6a59b249a4e6fa77c733322/les01/cards/img/black_joker.png -------------------------------------------------------------------------------- /les01/cards/img/cover_card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arcuri82/web_development_and_api_design/41abcbdfc34216e4c6a59b249a4e6fa77c733322/les01/cards/img/cover_card.jpg -------------------------------------------------------------------------------- /les01/cards/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0px; 3 | background-color: rgb(243, 239, 231); 4 | color: rgb(71, 53, 25); 5 | text-align: center; 6 | font-size: 1.2em; 7 | } 8 | 9 | 10 | .card { 11 | margin: 20px; 12 | height: 300px; 13 | border: 2px solid black; 14 | border-radius: 5px; 15 | cursor: pointer; 16 | } 17 | 18 | .selectedCard{ 19 | box-shadow: 10px 10px 30px 1px blue; 20 | } 21 | 22 | .outputMessage{ 23 | background-color: green; 24 | color: black; 25 | } 26 | 27 | .backcover:hover{ 28 | box-shadow: 10px 10px 30px 1px yellow; 29 | } 30 | 31 | .fakeLink{ 32 | color: blue; 33 | cursor: pointer; 34 | text-decoration: underline; 35 | } -------------------------------------------------------------------------------- /les02/libraries/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Andrea Arcuri", 3 | "dependencies": { 4 | "lodash": "4.17.20" 5 | }, 6 | "description": "", 7 | "devDependencies": { 8 | "webpack": "5.11.1", 9 | "webpack-cli": "4.3.1", 10 | "webpack-dev-server": "3.11.1" 11 | }, 12 | "engines": { 13 | "node": "^14.0.0" 14 | }, 15 | "keywords": [], 16 | "license": "LGPL-3.0", 17 | "name": "basics", 18 | "private": true, 19 | "scripts": { 20 | "build": "webpack --mode production", 21 | "dev": "webpack serve --open --mode development", 22 | "test": "echo \"Error: no test specified\" && exit 1" 23 | }, 24 | "version": "1.0.0" 25 | } -------------------------------------------------------------------------------- /les02/libraries/src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | When we "import" the default object exported by a library, we can give it any name 3 | we want, eg., "_" in this case. 4 | Such name is then use as a variable in the rest of this module 5 | */ 6 | import _ from 'lodash'; 7 | 8 | /* 9 | A library/module could export several different objects/functions. 10 | In such case, a common approach is to "import" an object definition 11 | where each element we want to use from that module is declared. 12 | This creates variables associated to those names, which then can be 13 | used directly. 14 | */ 15 | import {computeMin, computeMax, computeMean, computeSum} from "./my-math.js"; 16 | 17 | 18 | function initValues() { 19 | 20 | const array = [8,1,5,1,1,2,3]; 21 | 22 | const min = computeMin(array); 23 | const max = computeMax(array); 24 | const mean = computeMean(array); 25 | const sum = computeSum(array); 26 | 27 | const arrayString = "[" + _.join(array, ", ") + "]"; 28 | 29 | document.getElementById("arrayStringId").innerHTML = arrayString; 30 | document.getElementById("minId").innerHTML = min; 31 | document.getElementById("maxId").innerHTML = max; 32 | document.getElementById("meanId").innerHTML = mean; 33 | document.getElementById("sumId").innerHTML = sum; 34 | }; 35 | 36 | 37 | initValues(); 38 | -------------------------------------------------------------------------------- /les02/libraries/src/my-math.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | 4 | export function computeMin(array){ 5 | return _.min(array); 6 | } 7 | 8 | export function computeMax(array) { 9 | return _.max(array); 10 | } 11 | 12 | export function computeMean(array){ 13 | return _.mean(array); 14 | } 15 | 16 | export function computeSum(array) { 17 | return _.sum(array); 18 | } -------------------------------------------------------------------------------- /les02/libraries/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const TerserPlugin = require("terser-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: './src/index.js', 6 | output: { 7 | filename: 'bundle.js', 8 | path: path.resolve(__dirname, 'public') 9 | }, 10 | devServer: { 11 | contentBase: './public' 12 | }, 13 | optimization: { 14 | /* 15 | This is done to avoid creation of unwanted license file for the dependencies 16 | */ 17 | minimize: true, 18 | minimizer: [new TerserPlugin({ 19 | extractComments: false, 20 | })] 21 | } 22 | }; -------------------------------------------------------------------------------- /les02/tic-tac-toe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Andrea Arcuri", 3 | "babel": { 4 | "presets": [ 5 | "@babel/env" 6 | ] 7 | }, 8 | "description": "", 9 | "devDependencies": { 10 | "@babel/cli": "7.12.10", 11 | "@babel/core": "7.12.10", 12 | "@babel/preset-env": "7.12.11", 13 | "babel-jest": "24.9.0", 14 | "jest": "24.9.0", 15 | "webpack": "5.11.1", 16 | "webpack-cli": "4.3.1", 17 | "webpack-dev-server": "3.11.1" 18 | }, 19 | "engines": { 20 | "node": "^14.0.0" 21 | }, 22 | "jest": { 23 | "collectCoverageFrom": [ 24 | "src/**/*.(js|jsx)" 25 | ], 26 | "testRegex": "tests/.*-test\\.(js|jsx)$" 27 | }, 28 | "keywords": [], 29 | "license": "LGPL-3.0", 30 | "main": "index.js", 31 | "name": "tic-tac-toe", 32 | "scripts": { 33 | "build": "webpack --mode production", 34 | "dev": "webpack serve --open --mode development", 35 | "test": "jest --coverage" 36 | }, 37 | "version": "1.0.0" 38 | } -------------------------------------------------------------------------------- /les02/tic-tac-toe/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Tic-Tac-Toe Game
11 | 12 | Tic-Tac-Toe is a very common example in Computer Science / Software Engineering. 13 | Here, we start with a very simplified version where two users play on the same screen. 14 | 15 | 16 |
17 |
18 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/les02/tic-tac-toe/public/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 30px;
3 | }
4 |
5 |
6 | .cell {
7 | float: left;
8 | background: white;
9 | border: 1px solid gray;
10 | font-size: 24px;
11 | font-weight: bold;
12 | text-align: center;
13 | height: 30px;
14 | width: 30px;
15 | margin-right: -1px;
16 | margin-top: -1px;
17 | }
18 |
19 |
20 | .game {
21 | margin-top: 50px;
22 | display: flex;
23 | flex-direction: row;
24 | }
25 |
26 | .game-info {
27 | margin-left: 20px;
28 | }
29 |
30 |
31 | .btn {
32 | background-color: rgb(207, 205, 200);
33 | font-size: 1em;
34 | text-align: center;
35 | vertical-align: middle;
36 | border: 2px solid black;
37 | border-radius: 5px;
38 | margin: 5px;
39 | margin-top: 20px;
40 | padding: 3px;
41 | cursor: pointer;
42 | }
43 |
--------------------------------------------------------------------------------
/les02/tic-tac-toe/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/index.js',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | devServer: {
12 | contentBase: './public'
13 | },
14 | optimization: {
15 | minimize: true,
16 | minimizer: [new TerserPlugin({
17 | extractComments: false,
18 | })]
19 | }
20 | };
--------------------------------------------------------------------------------
/les02/unit-tests/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Andrea Arcuri",
3 | "babel": {
4 | "presets": [
5 | "@babel/env"
6 | ]
7 | },
8 | "description": "",
9 | "devDependencies": {
10 | "@babel/cli": "7.12.10",
11 | "@babel/core": "7.12.10",
12 | "@babel/preset-env": "7.12.11",
13 | "@webpack-cli/serve": "^1.2.2",
14 | "babel-jest": "24.9.0",
15 | "jest": "24.9.0",
16 | "webpack": "4.41.2",
17 | "webpack-cli": "3.3.10",
18 | "webpack-dev-server": "3.9.0"
19 | },
20 | "engines": {
21 | "node": "^14.0.0"
22 | },
23 | "jest": {
24 | "collectCoverageFrom": [
25 | "src/**/*.(js|jsx)"
26 | ],
27 | "testRegex": "tests/.*-test\\.(js|jsx)$"
28 | },
29 | "keywords": [],
30 | "license": "LGPL-3.0",
31 | "main": "index.js",
32 | "name": "unit-tests",
33 | "scripts": {
34 | "build": "webpack --mode production",
35 | "dev": "webpack-dev-server --open --mode development",
36 | "test": "jest --coverage"
37 | },
38 | "version": "1.0.0"
39 | }
40 |
--------------------------------------------------------------------------------
/les02/unit-tests/src/my-math.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 |
4 | export function computeMin(array){
5 | return _.min(array);
6 | }
7 |
8 | export function computeMax(array) {
9 | return _.max(array);
10 | }
11 |
12 | export function computeMean(array){
13 | return _.mean(array);
14 | }
15 |
16 | export function computeSum(array) {
17 | return _.sum(array);
18 | }
--------------------------------------------------------------------------------
/les02/unit-tests/tests/index-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Tests are run on NodeJS, which uses "require()" to handle modules and
3 | not "import"
4 | */
5 | const index = require('../src/index.js');
6 |
7 | /*
8 | With Jest included in package.json, and properly configured, then
9 | in these files we can use the method "test" to write unit tests.
10 | It takes 2 inputs:
11 | - the name of the test
12 | - a function that is going to be executed, representing the code
13 | of the test
14 |
15 | We use "expect(result).toBe(expectedValue)"
16 | to write check on whether the "result" we get from testing the code
17 | is the expected one. If it is not, then the test fails.
18 | */
19 |
20 |
21 | test('Not a string', () => {
22 | expect(index.validateInput(1)).toBe(false);
23 | });
24 |
25 | test('Invalid character', () => {
26 | expect(index.validateInput("1 <")).toBe(false);
27 | });
28 |
29 |
30 |
31 | test('Single element', () => {
32 | expect(index.validateInput("1")).toBe(true);
33 | });
34 |
35 | test('Multi-elements', () => {
36 | expect(index.validateInput("1, 2")).toBe(true);
37 | });
38 |
39 | test('Negative value', () => {
40 | expect(index.validateInput("-1")).toBe(true);
41 | });
42 |
43 | test('Complex example', () => {
44 | expect(index.validateInput(" -1,2, -3 , 1 ")).toBe(true);
45 | });
46 |
47 |
--------------------------------------------------------------------------------
/les02/unit-tests/tests/my-math-test.js:
--------------------------------------------------------------------------------
1 | const math = require('../src/my-math.js');
2 |
3 |
4 | const array = [8,1,5,1,1,2,3];
5 |
6 | test('Min', () => {
7 | expect(math.computeMin(array)).toEqual(1);
8 | });
9 |
10 |
11 | test('Max', () => {
12 | expect(math.computeMax(array)).toEqual(8);
13 | });
14 |
15 | test('Mean', () => {
16 | expect(math.computeMean(array)).toEqual(3);
17 | });
18 |
19 | test('Sum', () => {
20 | expect(math.computeSum(array)).toEqual(21);
21 | });
--------------------------------------------------------------------------------
/les02/unit-tests/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/index.js',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public'),
10 | /*
11 | The code from bundle.js will be executed when HTML loads it.
12 | But, by default, we cannot access it. To be able to access it from
13 | other JS in the page, we need to export it as a module.
14 | In this case, the module will be called 'EntryPoint', which is a 'var'.
15 | Note: this is just an example. In general, we will not need to do something
16 | like this, as all the code we will run is from bundle.js itself
17 |
18 | NOTE: this does not work yet in WebPack 5 (regression bug)... so need to use v4.
19 | Anyway, this the only case in the course in which are going to do something like this
20 | */
21 | libraryTarget: 'var',
22 | library: 'EntryPoint'
23 | },
24 | devServer: {
25 | contentBase: './public'
26 | },
27 | optimization: {
28 | minimize: true,
29 | minimizer: [new TerserPlugin({
30 | extractComments: false,
31 | })]
32 | }
33 | };
--------------------------------------------------------------------------------
/les03/puzzle15/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
19 |
35 |
36 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
37 |
38 |
40 |
41 | New Match
39 | " +
20 | "
"
23 | );
24 | }
25 | }
--------------------------------------------------------------------------------
/les03/spa-components-js/src/counter.js:
--------------------------------------------------------------------------------
1 | import {MyComponent} from "./mylib/MyComponent";
2 |
3 |
4 | export class Counter extends MyComponent {
5 |
6 | constructor(name) {
7 | super();
8 | this.name = name;
9 | this.state = {value: 0};
10 | }
11 |
12 | increase() {
13 | this.setState({value: this.state.value + 1});
14 | }
15 |
16 | decrease() {
17 | this.setState({value: this.state.value - 1});
18 | }
19 |
20 | render() {
21 |
22 | const name = this.name ? this.name : "Default";
23 |
24 | return (
25 | "Counters
" + 21 | this.children.map(e => e.render()).join("") + 22 | "" +
26 | "
"
30 | );
31 | }
32 |
33 | }
--------------------------------------------------------------------------------
/les03/spa-components-js/src/index.js:
--------------------------------------------------------------------------------
1 | import {MyComponent} from "./mylib/MyComponent";
2 | import {render} from "./mylib/MyDOM";
3 | import {Container} from "./container";
4 |
5 | class App extends MyComponent {
6 |
7 | constructor() {
8 | super();
9 |
10 | this.container = new Container(3);
11 | this.children = [this.container];
12 | }
13 |
14 | render() {
15 | return (
16 | "Counter for " + name + ": " + this.state.value + "
" +
27 | "+
" +
28 | "-
" +
29 | "" +
17 | "
"
20 | );
21 | }
22 | }
23 |
24 |
25 | render(new App(), document.getElementById("root"));
--------------------------------------------------------------------------------
/les03/spa-components-js/src/mylib/MyComponent.js:
--------------------------------------------------------------------------------
1 | import {update} from "./MyDOM"
2 |
3 | let id_counter = 0;
4 |
5 | export class MyComponent {
6 |
7 | constructor() {
8 | //each component will have a unique id
9 | this.id = "MyComponent_id_" + id_counter;
10 | id_counter++;
11 | }
12 |
13 | setState(state) {
14 |
15 | this.state = state;
16 |
17 | //every time there is a state change, we render the components
18 | update();
19 | }
20 |
21 | doesMatchId(id) {
22 | return this.id === id;
23 | }
24 |
25 | /*
26 | In the generated HTML for the component, we will need to be able to
27 | register event handlers.
28 | But those handlers need to refer to the specific component they belong to.
29 | So, the generated JS in the page somehow needs to find the right component to
30 | use its state.
31 | We will use a global support function registered in MyDOM.js.
32 |
33 | This works, but it has limitations: the method must not have input parameters,
34 | and should be a method belonging to the class of the component.
35 | */
36 | methodHandler(method) {
37 |
38 | const name = method.name;
39 |
40 | return "'MyDOM_callMethodOnComponent(\"" + this.id + "\", \"" + name + "\")'";
41 | }
42 | }
--------------------------------------------------------------------------------
/les03/spa-components-js/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/index.js',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | devServer: {
12 | contentBase: './public'
13 | },
14 | optimization: {
15 | minimize: true,
16 | minimizer: [new TerserPlugin({
17 | extractComments: false,
18 | })]
19 | }
20 | };
--------------------------------------------------------------------------------
/les03/spa-components-react-hooks/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Andrea Arcuri",
3 | "babel": {
4 | "presets": [
5 | "@babel/react"
6 | ]
7 | },
8 | "dependencies": {
9 | "react": "16.12.0",
10 | "react-dom": "16.12.0"
11 | },
12 | "description": "",
13 | "devDependencies": {
14 | "@babel/core": "7.12.10",
15 | "@babel/preset-react": "7.12.10",
16 | "babel-loader": "8.2.2",
17 | "webpack": "5.11.1",
18 | "webpack-cli": "4.3.1",
19 | "webpack-dev-server": "3.11.1"
20 | },
21 | "engines": {
22 | "node": "^14.0.0"
23 | },
24 | "keywords": [],
25 | "license": "LGPL-3.0",
26 | "main": "index.js",
27 | "name": "spa-components-react-hooks",
28 | "scripts": {
29 | "build": "webpack --mode production",
30 | "dev": "webpack serve --open --mode development",
31 | "test": "echo \"Error: no test specified\" && exit 1"
32 | },
33 | "version": "1.0.0"
34 | }
--------------------------------------------------------------------------------
/les03/spa-components-react-hooks/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Example of Single-Page Application Components with Vanilla JavaScript
" + 18 | this.container.render() + 19 | "
17 |
23 | );
24 | }
25 | }
--------------------------------------------------------------------------------
/les03/spa-components-react-hooks/src/counter.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from "react";
2 |
3 | export function Counter(props) {
4 |
5 | /*
6 | - new state, with default value 0
7 | - useState will return an array with two values
8 | - the first array value will be saved in a variable called 'count'
9 | - the second array value will be saved in a variable called 'setCount'
10 | */
11 | const [count, setCount] = useState(0);
12 |
13 | const name = props.name ? props.name : "Default";
14 |
15 | return (
16 | Counters
18 | { 19 | Array.from(Array(n)) 20 | .map((e,i) =>
17 |
21 | );
22 | }
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/les03/spa-components-react-hooks/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {Container} from "./container";
4 |
5 | const App = () => {
6 |
7 | return(
8 | Counter for {name}: {count}
18 | setCount(count + 1)}>+
19 | setCount(count - 1)}>-
20 |
9 |
16 |
17 | );
18 | };
19 |
20 | /*
21 | This is where we bind our generated HTML via React to the .html file.
22 | Changes in the state of the React Components will automatically trigger
23 | the re-rendering of the HTML.
24 | */
25 | ReactDOM.render(Example of Single-Page Application Components with React Hooks
10 | {/* 11 | This will render the HTML from the Container component with 12 | 3 Counter components inside it. 13 | We simply call the name of component inside a tag. 14 | */} 15 |
8 |
11 | );
12 | };
13 |
14 | ReactDOM.render(Connect Four Game
9 |
29 |
32 | );
33 | };
--------------------------------------------------------------------------------
/les04/connect4/src/utils.jsx:
--------------------------------------------------------------------------------
1 |
2 | export function createMatrix(rows, columns, value){
3 | return Array(rows).fill(null).map(() => Array(columns).fill(value));
4 | }
5 |
6 |
7 | export function cloneMatrix(matrix){
8 | return matrix.map(e => e.slice());
9 | }
10 |
--------------------------------------------------------------------------------
/les04/connect4/tests/jest-setup.js:
--------------------------------------------------------------------------------
1 | // Origin: shared/jest-setup.js
2 |
3 | const {configure } = require('enzyme');
4 | const jsdom = require('jsdom');
5 | const Adapter = require('enzyme-adapter-react-16');
6 |
7 |
8 | /*
9 | To be able to use Enzyme with Jest, we need this file, with this
10 | exact name.
11 | Here, we setup a virtual HTML page (on the server) in which our components
12 | will be "mounted" with Enzyme.
13 | JSDOM is used for such virtual pages on the server.
14 | Note the overriding of some global variables to point to JSDOM.
15 | */
16 |
17 | export function setUpDomEnvironment(url) {
18 | const { JSDOM } = jsdom;
19 | const dom = new JSDOM('', {url: url});
20 | const { window } = dom;
21 |
22 | global.window = window;
23 | global.document = window.document;
24 | global.navigator = {userAgent: 'node.js'};
25 | copyProps(window, global);
26 |
27 | configure({ adapter: new Adapter() });
28 | }
29 |
30 | function copyProps(src, target) {
31 | const props = Object.getOwnPropertyNames(src)
32 | .filter(prop => typeof target[prop] === 'undefined')
33 | .map(prop => Object.getOwnPropertyDescriptor(src, prop));
34 | Object.defineProperties(target, props);
35 | }
36 |
37 | setUpDomEnvironment('http://localhost:80/');
38 |
39 |
40 |
--------------------------------------------------------------------------------
/les04/connect4/tests/utils-test.js:
--------------------------------------------------------------------------------
1 | const utils = require("../src/utils");
2 |
3 |
4 | test("Create matrix", () => {
5 |
6 | const r = 2;
7 | const c = 3;
8 | const v = "foo";
9 |
10 | const m = utils.createMatrix(r, c, v);
11 |
12 | expect(m.length).toEqual(r);
13 |
14 | for(let i=0; i{msg}
30 | New Match
31 |
9 |
11 |
12 | );
13 | };
14 |
15 | ReactDOM.render(Example of Shared State Lifted Up in Ancestor Components
10 |
12 |
19 | );
20 | };
--------------------------------------------------------------------------------
/les05/games/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {BrowserRouter, Switch, Route} from 'react-router-dom'
4 |
5 | import {Home} from "./home";
6 | import {Silly} from "./games/silly/silly";
7 | import {Cards} from "./games/cards/cards";
8 | import {NotFound} from "./not_found";
9 |
10 |
11 | const App = () => {
12 |
13 | return (
14 | Which Game Do You Want to Play?
13 | 14 |-
15 |
- Silly 16 |
- Cards 17 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
8 | Link back to Home.
9 |
10 | );
11 | };
--------------------------------------------------------------------------------
/les05/games/src/not_found.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const NotFound = () =>{
5 |
6 | return(
7 |
8 |
14 | );
15 |
16 | };
--------------------------------------------------------------------------------
/les05/games/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/index.jsx',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | devServer: {
12 | contentBase: './public'
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.jsx$/,
18 | exclude: /node_modules/,
19 | use: {
20 | loader: "babel-loader"
21 | }
22 | }
23 | ]
24 | },
25 | resolve: {
26 | extensions: ['.js', '.jsx'],
27 | alias: {
28 | ['~']: path.resolve(__dirname + '/src')
29 | }
30 | },
31 | optimization: {
32 | minimize: true,
33 | minimizer: [new TerserPlugin({
34 | extractComments: false,
35 | })]
36 | }
37 |
38 | };
--------------------------------------------------------------------------------
/les05/spa-routing-index-404/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Andrea Arcuri",
3 | "babel": {
4 | "presets": [
5 | "@babel/react"
6 | ]
7 | },
8 | "dependencies": {
9 | "react": "16.12.0",
10 | "react-dom": "16.12.0",
11 | "react-router-dom": "5.2.0"
12 | },
13 | "devDependencies": {
14 | "@babel/core": "7.12.10",
15 | "@babel/preset-react": "7.12.10",
16 | "babel-loader": "8.2.2",
17 | "webpack": "5.11.1",
18 | "webpack-cli": "4.3.1",
19 | "webpack-dev-server": "3.11.1"
20 | },
21 | "engines": {
22 | "node": "^14.0.0"
23 | },
24 | "license": "LGPL-3.0",
25 | "main": "index.js",
26 | "name": "spa-routing-index-404",
27 | "scripts": {
28 | "build": "webpack --mode production",
29 | "dev": "yarn build && yarn start",
30 | "start": "node src/server/server.js"
31 | },
32 | "version": "1.0.0"
33 | }
--------------------------------------------------------------------------------
/les05/spa-routing-index-404/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | NOT FOUND: 404
9 |10 | ERROR: the page you requested in not available. 11 |
12 |
8 |
20 | );
21 |
22 | };
23 |
--------------------------------------------------------------------------------
/les05/spa-routing-index-404/src/client/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {BrowserRouter, Switch, Route} from 'react-router-dom'
4 |
5 | import {Home} from "./home";
6 | import {First} from "./first";
7 | import {Second} from "./second";
8 | import {NotFound} from "./not_found";
9 |
10 | const App = () => {
11 |
12 | return (
13 | First Page
9 |10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 11 | do eiusmod tempor incididunt ut labore et dolore magna aliqua. 12 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 13 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 14 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 15 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 16 | deserunt mollit anim id est laborum. 17 |
18 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
8 | Link back to Home.
9 |
10 | );
11 | };
--------------------------------------------------------------------------------
/les05/spa-routing-index-404/src/client/not_found.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const NotFound = () =>{
5 |
6 | return(
7 |
8 |
14 | );
15 |
16 | };
--------------------------------------------------------------------------------
/les05/spa-routing-index-404/src/client/second.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const Second = () =>{
5 |
6 | return(
7 | NOT FOUND: 404
9 |10 | ERROR: the page you requested in not available. 11 |
12 |
8 |
20 | );
21 |
22 | };
23 |
--------------------------------------------------------------------------------
/les05/spa-routing-index-404/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/client/index.jsx',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.jsx$/,
15 | exclude: /node_modules/,
16 | use: {
17 | loader: "babel-loader"
18 | }
19 | }
20 | ]
21 | },
22 | resolve: {
23 | extensions: ['.js', '.jsx']
24 | },
25 | devServer: {
26 | contentBase: './public'
27 | },
28 | optimization: {
29 | minimize: true,
30 | minimizer: [new TerserPlugin({
31 | extractComments: false,
32 | })]
33 | }
34 | };
--------------------------------------------------------------------------------
/les05/spa-routing-js/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Andrea Arcuri",
3 | "description": "",
4 | "devDependencies": {
5 | "webpack": "5.11.1",
6 | "webpack-cli": "4.3.1",
7 | "webpack-dev-server": "3.11.1"
8 | },
9 | "engines": {
10 | "node": "^14.0.0"
11 | },
12 | "keywords": [],
13 | "license": "LGPL-3.0",
14 | "main": "index.js",
15 | "name": "spa-routing-js",
16 | "scripts": {
17 | "build": "webpack --mode production",
18 | "dev": "webpack serve --open --mode development",
19 | "test": "echo \"Error: no test specified\" && exit 1"
20 | },
21 | "version": "1.0.0"
22 | }
--------------------------------------------------------------------------------
/les05/spa-routing-js/public/mylib.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | .spaPage{
4 | display: none
5 | }
6 |
7 | .spaLink{
8 | color: blue;
9 | cursor: pointer;
10 | text-decoration: underline;
11 | }
--------------------------------------------------------------------------------
/les05/spa-routing-js/public/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 30px;
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/les05/spa-routing-js/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/index.js',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | devServer: {
12 | contentBase: './public'
13 | },
14 | optimization: {
15 | minimize: true,
16 | minimizer: [new TerserPlugin({
17 | extractComments: false,
18 | })]
19 | }
20 | };
--------------------------------------------------------------------------------
/les05/spa-routing-react/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Second Page
9 |10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 11 | do eiusmod tempor incididunt ut labore et dolore magna aliqua. 12 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 13 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 14 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 15 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 16 | deserunt mollit anim id est laborum. 17 |
18 |
8 |
20 | );
21 |
22 | };
23 |
--------------------------------------------------------------------------------
/les05/spa-routing-react/src/my_home_link.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {Link} from "react-router-dom";
3 |
4 | export const MyHomeLink = () =>{
5 |
6 | return(
7 | First Page
9 |10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 11 | do eiusmod tempor incididunt ut labore et dolore magna aliqua. 12 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 13 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 14 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 15 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 16 | deserunt mollit anim id est laborum. 17 |
18 |
8 | Link back to Home.
9 |
10 | );
11 | };
--------------------------------------------------------------------------------
/les05/spa-routing-react/src/not_found.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const NotFound = () =>{
5 |
6 | return(
7 |
8 |
14 | );
15 |
16 | };
--------------------------------------------------------------------------------
/les05/spa-routing-react/src/second.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const Second = () =>{
5 |
6 | return(
7 | NOT FOUND: 404
9 |10 | ERROR: the page you requested in not available. 11 |
12 |
8 |
20 | );
21 |
22 | };
23 |
--------------------------------------------------------------------------------
/les05/spa-routing-react/tests/jest-setup.js:
--------------------------------------------------------------------------------
1 | // Origin: shared/jest-setup.js
2 |
3 | const {configure } = require('enzyme');
4 | const jsdom = require('jsdom');
5 | const Adapter = require('enzyme-adapter-react-16');
6 |
7 |
8 | /*
9 | To be able to use Enzyme with Jest, we need this file, with this
10 | exact name.
11 | Here, we setup a virtual HTML page (on the server) in which our components
12 | will be "mounted" with Enzyme.
13 | JSDOM is used for such virtual pages on the server.
14 | Note the overriding of some global variables to point to JSDOM.
15 | */
16 |
17 | export function setUpDomEnvironment(url) {
18 | const { JSDOM } = jsdom;
19 | const dom = new JSDOM('', {url: url});
20 | const { window } = dom;
21 |
22 | global.window = window;
23 | global.document = window.document;
24 | global.navigator = {userAgent: 'node.js'};
25 | copyProps(window, global);
26 |
27 | configure({ adapter: new Adapter() });
28 | }
29 |
30 | function copyProps(src, target) {
31 | const props = Object.getOwnPropertyNames(src)
32 | .filter(prop => typeof target[prop] === 'undefined')
33 | .map(prop => Object.getOwnPropertyDescriptor(src, prop));
34 | Object.defineProperties(target, props);
35 | }
36 |
37 | setUpDomEnvironment('http://localhost:80/');
38 |
39 |
40 |
--------------------------------------------------------------------------------
/les05/spa-routing-react/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/index.jsx',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.jsx$/,
15 | exclude: /node_modules/,
16 | use: {
17 | loader: "babel-loader"
18 | }
19 | }
20 | ]
21 | },
22 | resolve: {
23 | extensions: ['.js', '.jsx']
24 | },
25 | devServer: {
26 | contentBase: './public'
27 | },
28 | optimization: {
29 | minimize: true,
30 | minimizer: [new TerserPlugin({
31 | extractComments: false,
32 | })]
33 | }
34 | };
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Andrea Arcuri",
3 | "babel": {
4 | "presets": [
5 | "@babel/env",
6 | "@babel/react"
7 | ]
8 | },
9 | "dependencies": {
10 | "react": "16.12.0",
11 | "react-dom": "16.12.0",
12 | "react-router-dom": "5.2.0"
13 | },
14 | "devDependencies": {
15 | "@babel/cli": "7.12.10",
16 | "@babel/core": "7.12.10",
17 | "@babel/preset-env": "7.12.11",
18 | "@babel/preset-react": "7.12.10",
19 | "babel-loader": "8.2.2",
20 | "webpack": "5.11.1",
21 | "webpack-cli": "4.3.1",
22 | "webpack-dev-server": "3.11.1"
23 | },
24 | "engines": {
25 | "node": "^14.0.0"
26 | },
27 | "license": "LGPL-3.0",
28 | "main": "index.js",
29 | "name": "spa-routing-ssr",
30 | "scripts": {
31 | "build": "yarn build:client && yarn build:server",
32 | "build:client": "webpack --mode production",
33 | "build:server": "babel ./src -d build",
34 | "dev": "yarn build && yarn start",
35 | "start": "node build/server/server.js"
36 | },
37 | "version": "1.0.0"
38 | }
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/public/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 30px;
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/src/client/app.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {Switch, Route} from 'react-router-dom'
3 |
4 | import {Home} from "./home";
5 | import {First} from "./first";
6 | import {Second} from "./second";
7 | import {NotFound} from "./not_found";
8 |
9 |
10 | export const App = () => {
11 |
12 | return (
13 | Second Page
9 |10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 11 | do eiusmod tempor incididunt ut labore et dolore magna aliqua. 12 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 13 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 14 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 15 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 16 | deserunt mollit anim id est laborum. 17 |
18 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 |
23 | };
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/src/client/first.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const First = () =>{
5 |
6 | return(
7 |
8 |
20 | );
21 |
22 | };
23 |
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/src/client/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {BrowserRouter} from 'react-router-dom'
4 |
5 | import {App} from "./app"
6 |
7 |
8 | ReactDOM.render(
9 | First Page
9 |10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 11 | do eiusmod tempor incididunt ut labore et dolore magna aliqua. 12 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 13 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 14 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 15 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 16 | deserunt mollit anim id est laborum. 17 |
18 |
8 | Link back to Home.
9 |
10 | );
11 | };
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/src/client/not_found.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const NotFound = () =>{
5 |
6 | return(
7 |
8 |
14 | );
15 |
16 | };
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/src/client/second.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {MyHomeLink} from "./my_home_link";
3 |
4 | export const Second = () =>{
5 |
6 | return(
7 | NOT FOUND: 404
9 |10 | ERROR: the page you requested in not available. 11 |
12 |
8 |
20 | );
21 |
22 | };
23 |
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/src/server/renderer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {renderToString} from 'react-dom/server'
3 | import {StaticRouter} from 'react-router-dom'
4 | import {App} from "../client/app"
5 |
6 |
7 | export const serverSideRender = (url) => {
8 |
9 | /*
10 | Here must use StaticRouter instead of BrowserRouter, as we
11 | are not in a browser
12 | */
13 | const content = renderToString(
14 | Second Page
9 |10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 11 | do eiusmod tempor incididunt ut labore et dolore magna aliqua. 12 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 13 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 14 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 15 | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 16 | deserunt mollit anim id est laborum. 17 |
18 |${content}
30 |
31 |
32 |
33 |
34 |
35 | `;
36 |
37 | return html;
38 | };
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/src/server/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const bodyParser = require('body-parser');
3 | const path = require('path');
4 | const app = express();
5 |
6 | const Renderer = require('./renderer');
7 |
8 |
9 | app.get("/", (req, res) => {
10 | res.send(Renderer.serverSideRender(req.url));
11 | });
12 |
13 | app.use(express.static('public'));
14 |
15 |
16 | app.use((req, res) => {
17 | res.send(Renderer.serverSideRender(req.url));
18 | });
19 |
20 | const port = process.env.PORT || 8080;
21 |
22 | app.listen(port, () => {
23 | console.log('Started server on port ' + port);
24 | });
25 |
26 |
--------------------------------------------------------------------------------
/les05/spa-routing-ssr/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/client/index.jsx',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.jsx$/,
15 | exclude: /node_modules/,
16 | use: {
17 | loader: "babel-loader"
18 | }
19 | }
20 | ]
21 | },
22 | resolve: {
23 | extensions: ['.js', '.jsx']
24 | },
25 | devServer: {
26 | contentBase: './public'
27 | },
28 | optimization: {
29 | minimize: true,
30 | minimizer: [new TerserPlugin({
31 | extractComments: false,
32 | })]
33 | }
34 | };
--------------------------------------------------------------------------------
/les06/weather/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
39 |
48 | );
49 | }
50 | }
--------------------------------------------------------------------------------
/les08/server_client_separated/frontend/src/client/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {BrowserRouter, Switch, Route} from 'react-router-dom'
4 |
5 | import {Home} from "./home";
6 | import {Create} from "./create"
7 | import {Edit} from "./edit";
8 | import {NotFound} from "./not_found";
9 |
10 | const App = () => {
11 |
12 | return (
13 | Create a New Book
40 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
7 |
12 | );
13 |
14 | };
--------------------------------------------------------------------------------
/les08/server_client_separated/frontend/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/client/index.jsx',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public'),
10 | libraryTarget: 'var',
11 | library: 'EntryPoint'
12 | },
13 | module: {
14 | rules: [
15 | {
16 | test: /\.jsx$/,
17 | exclude: /node_modules/,
18 | use: {
19 | loader: "babel-loader"
20 | }
21 | }
22 | ]
23 | },
24 | resolve: {
25 | extensions: ['.js', '.jsx']
26 | },
27 | devServer: {
28 | contentBase: './public'
29 | },
30 | optimization: {
31 | minimize: true,
32 | minimizer: [new TerserPlugin({
33 | extractComments: false,
34 | })]
35 | }
36 | };
--------------------------------------------------------------------------------
/les08/server_client_separated/rest/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Andrea Arcuri",
3 | "dependencies": {
4 | "cors": "2.8.5",
5 | "express": "4.17.1"
6 | },
7 | "description": "",
8 | "devDependencies": {
9 | "jest": "24.9.0",
10 | "supertest": "6.0.1"
11 | },
12 | "engines": {
13 | "node": "^14.0.0"
14 | },
15 | "jest": {
16 | "collectCoverageFrom": [
17 | "src/**/*.(js|jsx)"
18 | ],
19 | "testEnvironment": "node",
20 | "testRegex": "tests/.*-test\\.(js|jsx)$"
21 | },
22 | "keywords": [],
23 | "license": "LGPL-3.0",
24 | "main": "src/server/server.js",
25 | "name": "rest",
26 | "scripts": {
27 | "start": "node src/server/server.js",
28 | "test": "jest --coverage"
29 | },
30 | "version": "1.0.0"
31 | }
--------------------------------------------------------------------------------
/les08/server_client_separated/rest/src/server/server.js:
--------------------------------------------------------------------------------
1 | const app = require("./app");
2 | const repository = require("./repository");
3 |
4 | const port = process.env.PORT || 8081;
5 |
6 |
7 | app.listen(port, () => {
8 | repository.initWithSomeBooks();
9 | console.log('Started RESTful API on port ' + port);
10 | });
11 |
12 |
--------------------------------------------------------------------------------
/les08/server_client_together/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | NOT FOUND: 404
8 |9 | ERROR: the page you requested in not available. 10 |
11 |
39 |
48 | );
49 | }
50 | }
--------------------------------------------------------------------------------
/les08/server_client_together/src/client/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {BrowserRouter, Switch, Route} from 'react-router-dom';
4 |
5 | import {Home} from "./home";
6 | import {Create} from "./create"
7 | import {Edit} from "./edit";
8 | import {NotFound} from "./not_found";
9 |
10 | const App = () => {
11 |
12 | return (
13 | Create a New Book
40 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
7 |
12 | );
13 |
14 | };
--------------------------------------------------------------------------------
/les08/server_client_together/src/server/server.js:
--------------------------------------------------------------------------------
1 | const app = require("./app");
2 | const repository = require("./repository");
3 |
4 |
5 |
6 | const port = process.env.PORT || 8080;
7 |
8 | app.listen(port, () => {
9 | repository.initWithSomeBooks();
10 | console.log('Started server on port ' + port);
11 | });
12 |
13 |
--------------------------------------------------------------------------------
/les08/server_client_together/tests/jest-setup.js:
--------------------------------------------------------------------------------
1 | // Origin: shared/jest-setup.js
2 |
3 | const {configure } = require('enzyme');
4 | const jsdom = require('jsdom');
5 | const Adapter = require('enzyme-adapter-react-16');
6 |
7 |
8 | /*
9 | To be able to use Enzyme with Jest, we need this file, with this
10 | exact name.
11 | Here, we setup a virtual HTML page (on the server) in which our components
12 | will be "mounted" with Enzyme.
13 | JSDOM is used for such virtual pages on the server.
14 | Note the overriding of some global variables to point to JSDOM.
15 | */
16 |
17 | export function setUpDomEnvironment(url) {
18 | const { JSDOM } = jsdom;
19 | const dom = new JSDOM('', {url: url});
20 | const { window } = dom;
21 |
22 | global.window = window;
23 | global.document = window.document;
24 | global.navigator = {userAgent: 'node.js'};
25 | copyProps(window, global);
26 |
27 | configure({ adapter: new Adapter() });
28 | }
29 |
30 | function copyProps(src, target) {
31 | const props = Object.getOwnPropertyNames(src)
32 | .filter(prop => typeof target[prop] === 'undefined')
33 | .map(prop => Object.getOwnPropertyDescriptor(src, prop));
34 | Object.defineProperties(target, props);
35 | }
36 |
37 | setUpDomEnvironment('http://localhost:80/');
38 |
39 |
40 |
--------------------------------------------------------------------------------
/les08/server_client_together/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/client/index.jsx',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public'),
10 | libraryTarget: 'var',
11 | library: 'EntryPoint'
12 | },
13 | module: {
14 | rules: [
15 | {
16 | test: /\.jsx$/,
17 | exclude: /node_modules/,
18 | use: {
19 | loader: "babel-loader"
20 | }
21 | }
22 | ]
23 | },
24 | resolve: {
25 | extensions: ['.js', '.jsx']
26 | },
27 | devServer: {
28 | contentBase: './public'
29 | },
30 | optimization: {
31 | minimize: true,
32 | minimizer: [new TerserPlugin({
33 | extractComments: false,
34 | })]
35 | }
36 | };
--------------------------------------------------------------------------------
/les09/authentication/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | NOT FOUND: 404
8 |9 | ERROR: the page you requested in not available. 10 |
11 |What a Cute Cat!!!
14 | 15 |
16 |
17 |
18 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/les10/csrf/index-form-post.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | What a Cute Cat!!!
14 | 15 |
16 |
17 |
18 |
19 |
28 |
29 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/les10/escape/escaped.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | How to represent the symbols of a tag with attribute without
6 | getting them interpreted as HTML tags?
7 |
8 | 9 | 10 | For example: 11 | 12 |
13 | 14 | Foo 15 | 16 |
17 | 18 | vs. 19 | 20 |
21 | 22 | <a href="foo">Foo</a> 23 | 24 | 25 |
26 |
27 |
28 |
29 | 30 | However, what to escape depends on the context: 31 |
32 | 33 |
34 | "<p>"
35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /les10/xss/react-href/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Andrea Arcuri", 3 | "babel": { 4 | "plugins": [ 5 | "@babel/plugin-proposal-class-properties" 6 | ], 7 | "presets": [ 8 | "@babel/react" 9 | ] 10 | }, 11 | "dependencies": { 12 | "react": "16.12.0", 13 | "react-dom": "16.12.0" 14 | }, 15 | "description": "", 16 | "devDependencies": { 17 | "@babel/core": "7.12.10", 18 | "@babel/plugin-proposal-class-properties": "7.12.1", 19 | "@babel/preset-react": "7.12.10", 20 | "babel-loader": "8.2.2", 21 | "webpack": "5.11.1", 22 | "webpack-cli": "4.3.1", 23 | "webpack-dev-server": "3.11.1" 24 | }, 25 | "engines": { 26 | "node": "^14.0.0" 27 | }, 28 | "keywords": [], 29 | "license": "LGPL-3.0", 30 | "main": "index.js", 31 | "name": "xss-react-href", 32 | "scripts": { 33 | "build": "webpack --mode production", 34 | "dev": "webpack serve --open --mode development", 35 | "test": "echo \"Error: no test specified\" && exit 1" 36 | }, 37 | "version": "1.0.0" 38 | } -------------------------------------------------------------------------------- /les10/xss/react-href/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
20 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/les12/connect4-v2/src/client/connect4/opponent-ai.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | export class OpponentAI{
4 |
5 |
6 | playNext(lastInsertedColumn, board){
7 |
8 | const state = board.getBoardState();
9 |
10 | if(state.isGameFinished()){
11 | //nothing to do
12 | return;
13 | }
14 |
15 | /*
16 | Just simulate a delay for the AI, instead of doing
17 | an insertion immediately.
18 | */
19 | const delay = 1000 * Math.random();
20 | setTimeout(() => this.handleNextMove(board), delay);
21 | }
22 |
23 | /*
24 | WARNING:
25 | what happens if a user start a new game before the callback
26 | of the setTimeout is executed?
27 | We would have to handle such case.
28 | */
29 |
30 | handleNextMove(board){
31 |
32 | /*
33 | For simplicity, the "AI" will just choose at random
34 | among the available columns
35 | */
36 | const state = board.getBoardState();
37 |
38 | const options = state.freeColumns();
39 | const chosen = options[Math.floor(options.length * Math.random())];
40 |
41 | const copy = state.copy();
42 | copy.selectColumn(chosen);
43 |
44 | board.setBoardState(copy);
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/les12/connect4-v2/src/client/home.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | export class Home extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | }
8 |
9 | render() {
10 | const userId = this.props.userId;
11 |
12 | return (
13 |
14 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/les12/connect4-v2/src/server/db/users.js:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | Here we "simulate" a database with in-memory Map.
4 | Furthermore, we do not deal with the "proper" handling of
5 | passwords. Passwords should NEVER be saved in plain text,
6 | but rather hashed with secure algorithms like BCrypt.
7 | */
8 |
9 | const users = new Map();
10 |
11 |
12 | function getUser(id){
13 |
14 | return users.get(id);
15 | }
16 |
17 | function verifyUser(id, password){
18 |
19 | const user = getUser(id);
20 |
21 | if(!user){
22 | return false;
23 | }
24 |
25 | return user.password === password;
26 | }
27 |
28 | function createUser(id, password){
29 |
30 | if(getUser(id)){
31 | return false;
32 | }
33 |
34 | const user = {
35 | id: id,
36 | password: password
37 | };
38 |
39 | users.set(id, user);
40 | return true;
41 | }
42 |
43 | function resetAllUsers(){
44 | users.clear();
45 | }
46 |
47 |
48 | module.exports = {getUser, verifyUser, createUser, resetAllUsers};
49 |
--------------------------------------------------------------------------------
/les12/connect4-v2/src/server/online/active-players.js:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | For each active player that is currently online, we need to keep
4 | track of their WS sockets.
5 | */
6 |
7 | const socketToUser = new Map();
8 |
9 | const userToSocket = new Map();
10 |
11 |
12 | function registerSocket(socket, userId){
13 |
14 | socketToUser.set(socket.id, userId);
15 | userToSocket.set(userId, socket);
16 | }
17 |
18 | function removeSocket(socketId){
19 |
20 | const userId = socketToUser.get(socketId);
21 | socketToUser.delete(socketId);
22 | userToSocket.delete(userId);
23 | }
24 |
25 |
26 | function removeUser(userId){
27 |
28 | const socketId = userToSocket.get(userId).id;
29 | userToSocket.delete(userId);
30 | socketToUser.delete(socketId);
31 | }
32 |
33 |
34 | function isActive(userId){
35 | return userToSocket.has(userId);
36 | }
37 |
38 | function getSocket(userId){
39 | return userToSocket.get(userId);
40 | }
41 |
42 | function getUser(socketId){
43 | return socketToUser.get(socketId);
44 | }
45 |
46 | module.exports = {registerSocket, removeSocket, removeUser, isActive, getSocket, getUser};
--------------------------------------------------------------------------------
/les12/connect4-v2/src/server/online/ongoing-matches.js:
--------------------------------------------------------------------------------
1 | const Match = require('../game/match');
2 |
3 |
4 | /*
5 | Map from user id to ongoing match
6 | */
7 | const userIdToMatch = new Map();
8 |
9 | /*
10 | Map from match id to ongoing match
11 | */
12 | const matchIdToMatch = new Map();
13 |
14 |
15 | function startMatch(firstId, secondId){
16 |
17 | const match = new Match(firstId, secondId, deleteMatch);
18 |
19 | console.log("Starting a new match: '"+firstId+"' vs. '"+secondId+"', id = " + match.matchId);
20 |
21 | userIdToMatch.set(firstId, match);
22 | userIdToMatch.set(secondId, match);
23 | matchIdToMatch.set(match.matchId, match);
24 |
25 | match.start();
26 | }
27 |
28 | function deleteMatch(matchId){
29 | const match = matchIdToMatch.get(matchId);
30 | if(!match){
31 | return;
32 | }
33 |
34 | match.playerIds.forEach(id => userIdToMatch.delete(id));
35 | matchIdToMatch.delete(match.matchId);
36 | }
37 |
38 | function forfeit(userId){
39 |
40 | const match = userIdToMatch.get(userId);
41 | if(!match){
42 | return;
43 | }
44 |
45 | match.playerIds.forEach(id => userIdToMatch.delete(id));
46 | matchIdToMatch.delete(match.matchId);
47 |
48 | match.sendForfeit(userId);
49 | }
50 |
51 |
52 | module.exports = {startMatch, forfeit};
--------------------------------------------------------------------------------
/les12/connect4-v2/src/server/online/player-queue.js:
--------------------------------------------------------------------------------
1 | /*
2 | When a user wants to play, it needs an opponent.
3 | So, we need at least 2 players.
4 | A user has to wait until an opponent is available.
5 |
6 | If we always match a user against the first available opponent, then
7 | we would not need a queue, as such queue will at most contain a single user
8 | at any point in time.
9 |
10 | We could be more sophisticated. For example, we could try to match players
11 | with same skills (computed based on number of past victories).
12 | And, so, let some users wait on the queue for some seconds until a better opponent appears,
13 | even if the queue is not empty.
14 | However, to keep it simple, here we match against the first available opponent.
15 | */
16 |
17 | const queue = [];
18 |
19 |
20 | function addUser(id){
21 |
22 | if(queue.includes(id)){
23 | return false;
24 | }
25 |
26 | queue.push(id);
27 | return true;
28 | }
29 |
30 |
31 | function size(){
32 | return queue.length;
33 | }
34 |
35 | function hasUser(id){
36 | return queue.includes(id);
37 | }
38 |
39 | function takeUser(){
40 |
41 | if(queue.length === 0){
42 | return null;
43 | }
44 |
45 | return queue.shift();
46 | }
47 |
48 |
49 | module.exports = {addUser, size, takeUser, hasUser};
50 |
51 |
--------------------------------------------------------------------------------
/les12/connect4-v2/src/server/server.js:
--------------------------------------------------------------------------------
1 | const {app} = require("./app");
2 |
3 | const port = process.env.PORT || 8080;
4 |
5 | app.listen(port, () => {
6 | console.log('Started NodeJS server on port ' + port);
7 | });
8 |
9 |
--------------------------------------------------------------------------------
/les12/connect4-v2/src/server/ws/tokens.js:
--------------------------------------------------------------------------------
1 | const crypto = require("crypto");
2 |
3 | /*
4 | Map from random tokens to userId
5 | */
6 | const tokens = new Map();
7 |
8 |
9 | const randomId = () => {
10 | /*
11 | A byte is composed of 8 bits.
12 | 10 bytes are 80 bits.
13 | There are 2^80 possible numbers, which is a huge amount.
14 | We want to send such bits as a string.
15 | We do it in "hex" format.
16 | A hex is representing 16 values, 0-9 and A-F, using 4 bits (2^4=16).
17 | So, we need 2 hex characters per byte.
18 | This means that 10 random bytes can be encoded with a a string of
19 | length 20 containing only 0-9 and A-F symbols.
20 | */
21 |
22 | return crypto.randomBytes(10).toString('hex');
23 | };
24 |
25 |
26 | /*
27 | For a given user, associate a new random token.
28 | */
29 | const createToken = (userId) =>{
30 |
31 | const t = randomId();
32 |
33 | tokens.set(t, userId);
34 |
35 | return t;
36 | };
37 |
38 |
39 | /*
40 | A token can be used only once.
41 | If a user needs to re-authenticate a WebSocket,
42 | a new token needs to be generated.
43 | */
44 | const consumeToken = (t) => {
45 |
46 | const userId = tokens.get(t);
47 |
48 | tokens.delete(t);
49 |
50 | return userId;
51 | };
52 |
53 |
54 | module.exports = {createToken, consumeToken};
--------------------------------------------------------------------------------
/les12/connect4-v2/src/shared/utils.js:
--------------------------------------------------------------------------------
1 |
2 | function createMatrix (rows, columns, value){
3 | return Array(rows).fill(null).map(() => Array(columns).fill(value));
4 | }
5 |
6 |
7 | function cloneMatrix(matrix){
8 | if(!matrix){
9 | return null;
10 | }
11 | return matrix.map(e => e.slice());
12 | }
13 |
14 |
15 | module.exports = {createMatrix, cloneMatrix};
--------------------------------------------------------------------------------
/les12/connect4-v2/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require("terser-webpack-plugin");
3 |
4 |
5 | module.exports = {
6 | entry: './src/client/index.jsx',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'public')
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.jsx$/,
15 | exclude: /node_modules/,
16 | use: {
17 | loader: "babel-loader"
18 | }
19 | }
20 | ]
21 | },
22 | resolve: {
23 | extensions: ['.js', '.jsx'],
24 | alias: {
25 | ['~']: path.resolve(__dirname + '/src')
26 | }
27 | },
28 | optimization: {
29 | minimize: true,
30 | minimizer: [new TerserPlugin({
31 | extractComments: false,
32 | })]
33 | }
34 | };
35 |
--------------------------------------------------------------------------------
/shared/jest-setup.js:
--------------------------------------------------------------------------------
1 | // Origin: shared/jest-setup.js
2 |
3 | const {configure } = require('enzyme');
4 | const jsdom = require('jsdom');
5 | const Adapter = require('enzyme-adapter-react-16');
6 |
7 |
8 | /*
9 | To be able to use Enzyme with Jest, we need this file, with this
10 | exact name.
11 | Here, we setup a virtual HTML page (on the server) in which our components
12 | will be "mounted" with Enzyme.
13 | JSDOM is used for such virtual pages on the server.
14 | Note the overriding of some global variables to point to JSDOM.
15 | */
16 |
17 | export function setUpDomEnvironment(url) {
18 | const { JSDOM } = jsdom;
19 | const dom = new JSDOM('', {url: url});
20 | const { window } = dom;
21 |
22 | global.window = window;
23 | global.document = window.document;
24 | global.navigator = {userAgent: 'node.js'};
25 | copyProps(window, global);
26 |
27 | configure({ adapter: new Adapter() });
28 | }
29 |
30 | function copyProps(src, target) {
31 | const props = Object.getOwnPropertyNames(src)
32 | .filter(prop => typeof target[prop] === 'undefined')
33 | .map(prop => Object.getOwnPropertyDescriptor(src, prop));
34 | Object.defineProperties(target, props);
35 | }
36 |
37 | setUpDomEnvironment('http://localhost:80/');
38 |
39 |
40 |
--------------------------------------------------------------------------------
/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
29 |
30 | Connect Four Game
16 | 17 |18 | Welcome to the Connect Four Game! In this game, you alternate with 19 | an opponent in adding coins (X or O) into a 6x7 grid. The goal of 20 | the game is to align 4 of your coins, either horizontally, 21 | vertically or diagonally. 22 |
23 |24 | You can play either against an AI, or against other players online. 25 | However, to play online, you need to create an account and be logged 26 | in. 27 |
28 |
31 |
32 | AI Match
33 |
34 | {userId ? (
35 |
36 | Online Match
37 |
38 | ) : (
39 |
42 | Online Match
40 | )}
41 |