starting code for the lecture

polito-WA1-AW1-2021 · May 27, 2021 · 9afcdd7 · 9afcdd7
commit 9afcdd7
Show file tree

Hide file tree

Showing 29 changed files with 18,688 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+# dependencies
+node_modules
+
+# misc
+.DS_Store
+Thumbs.db
+Desktop.ini
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,5 @@
+# `react-scores-mini` project
+
+This project contains an example of a React application for showing the scores you got with your exams. It is used to show how to manage login and logout, given a relatively simple React app.
+
+Sample credentials (by using the Express server in the `server` folder): [email protected] (psw: student) and [email protected] (psw: student).
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "react-scores-mini",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^4.6.0",
+    "dayjs": "^1.10.4",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.5.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "proxy": "http://localhost:3001",
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Exam scores app, with React"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>My Exams</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/client/public/logo192.png b/client/public/logo192.png
diff --git a/client/public/logo512.png b/client/public/logo512.png
diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/client/public/robots.txt b/client/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/client/src/API.js b/client/src/API.js
@@ -0,0 +1,32 @@
+/**
+ * All the API calls
+ */
+import Course from './models/Course';
+import Exam from './models/Exam';
+
+const BASEURL = '/api';
+
+async function getAllCourses() {
+  // call: GET /api/courses
+  const response = await fetch(BASEURL + '/courses');
+  const coursesJson = await response.json();
+  if (response.ok) {
+    return coursesJson.map((co) => Course.from(co));
+  } else {
+    throw coursesJson;  // an object with the error coming from the server
+  }
+}
+
+async function getAllExams() {
+  // call: GET /api/exams
+  const response = await fetch(BASEURL + '/exams');
+  const examsJson = await response.json();
+  if (response.ok) {
+    return examsJson.map((ex) => Exam.from(ex));
+  } else {
+    throw examsJson;  // an object with the error coming from the server
+  }
+}
+
+const API = {getAllCourses, getAllExams};
+export default API;
diff --git a/client/src/App.css b/client/src/App.css
@@ -0,0 +1,3 @@
+.App {
+  margin-top: 1em;
+}
diff --git a/client/src/App.js b/client/src/App.js
@@ -0,0 +1,61 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './App.css';
+import { Container, Row, Alert } from 'react-bootstrap';
+import { ExamScores } from './ExamComponents.js';
+import AppTitle from './AppTitle.js';
+import { useEffect, useState } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import API from './API';
+
+function App() {
+  const [exams, setExams] = useState([]);
+  const [courses, setCourses] = useState([]);
+  const [message, setMessage] = useState('');
+
+  useEffect(()=> {
+    const getCourses = async () => {
+        const courses = await API.getAllCourses();
+        setCourses(courses);
+    };
+    getCourses()
+      .catch(err => {
+        setMessage({msg: "Impossible to load your exams! Please, try again later...", type: 'danger'});
+        console.error(err);
+      });
+  }, []);
+
+  useEffect(()=> {
+    const getExams = async () => {
+      const exams = await API.getAllExams();
+      setExams(exams);
+    };
+    if(courses.length) {
+      getExams().catch(err => {
+        setMessage({msg: 'Impossible to load your exams! Please, try again later...', type: 'danger'});
+        console.error(err);
+      });
+    }
+  }, [courses.length]);
+
+  return (<Router>
+    <Container className="App">
+      <Row>
+        <AppTitle/>
+      </Row>
+      {message && <Row>
+         <Alert variant={message.type} onClose={() => setMessage('')} dismissible>{message.msg}</Alert>
+      </Row> }
+
+      <Switch>
+        <Route path="/" render={() =>
+          <Row>
+            <ExamScores exams={exams} courses={courses} />
+          </Row>
+        } />
+
+      </Switch>
+    </Container>
+  </Router>);
+}
+
+export default App;
diff --git a/client/src/AppTitle.js b/client/src/AppTitle.js
@@ -0,0 +1,11 @@
+import { Col } from 'react-bootstrap';
+
+function AppTitle() {
+  return (
+      <Col>
+        <h1>Your Exams</h1>
+      </Col>
+  );
+}
+
+export default AppTitle;
diff --git a/client/src/ExamComponents.js b/client/src/ExamComponents.js
@@ -0,0 +1,47 @@
+import { Col, Table } from 'react-bootstrap';
+import dayjs from 'dayjs';
+
+
+function ExamScores(props) {
+  return <Col>
+    <ExamTable exams={props.exams} courses={props.courses} />
+  </Col>;
+}
+
+function ExamTable(props) {
+
+  return (<>
+    <Table striped bordered>
+      <thead>
+        <tr>
+          <th>Exam</th>
+          <th>Score</th>
+          <th>Date</th>
+        </tr>
+      </thead>
+      <tbody>{
+        props.exams.map((ex) => <ExamRow key={ex.coursecode}
+          exam={ex}
+          examName={props.courses.filter(c => c.coursecode === ex.coursecode)[0].name}
+        />)
+      }
+      </tbody>
+    </Table>
+  </>
+
+  );
+}
+
+function ExamRow(props) {
+  return <tr><ExamRowData exam={props.exam} examName={props.examName} /></tr>
+}
+
+function ExamRowData(props) {
+  return <>
+    <td>{props.examName}</td>
+    <td>{props.exam.score}</td>
+    <td>{dayjs(props.exam.date).format('DD MMM YYYY')}</td>
+  </>;
+}
+
+export {ExamScores};
diff --git a/client/src/icons.js b/client/src/icons.js
@@ -0,0 +1,15 @@
+const iconEdit = <svg className="bi bi-pencil-square" width="1em" height="1em" viewBox="0 0 16 16" fill="orange" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M15.502 1.94a.5.5 0 010 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 01.707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 00-.121.196l-.805 2.414a.25.25 0 00.316.316l2.414-.805a.5.5 0 00.196-.12l6.813-6.814z"/>
+    <path fillRule="evenodd"
+      d="M1 13.5A1.5 1.5 0 002.5 15h11a1.5 1.5 0 001.5-1.5v-6a.5.5 0 00-1 0v6a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-11a.5.5 0 01.5-.5H9a.5.5 0 000-1H2.5A1.5 1.5 0 001 2.5v11z" clipRule="evenodd"/>
+  </svg>;
+
+const iconDelete = <svg className="bi bi-trash" width="1em" height="1em" viewBox="0 0 16 16" fill="red" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/>
+    <path fillRule="evenodd"
+      d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" clipRule="evenodd"/>
+  </svg>;
+
+export { iconDelete, iconEdit };
diff --git a/client/src/index.css b/client/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/client/src/index.js b/client/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/client/src/models/Course.js b/client/src/models/Course.js
@@ -0,0 +1,31 @@
+/**
+ * Object describing a course
+ */
+ class Course {
+  /**
+   * Create a new Course
+   * @param {*} coursecode unique code for the course
+   * @param {*} name full name of the course
+   * @param {*} CFU number of CFU credits
+   */
+  constructor(coursecode, name, CFU) {
+    this.coursecode = coursecode;
+    this.name = name;
+    this.CFU = CFU;
+  }
+
+  /**
+   * Creates a new Course from plain (JSON) objects
+   * @param {*} json a plain object (coming form JSON deserialization)
+   * with the right properties
+   * @return {Course} the newly created object
+   */
+  static from(json) {
+    const course = new Course();
+    delete Object.assign(course, json, {coursecode: json.code}).code;
+    return course;
+  }
+
+}
+
+export default Course;