Merge branch 'using-react' into devel

client/src/reportWebVitals.ts

+
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+            getCLS(onPerfEntry);
+            getFID(onPerfEntry);
+            getFCP(onPerfEntry);
+            getLCP(onPerfEntry);
+            getTTFB(onPerfEntry);
+        });
+    }
+};
+
+export default reportWebVitals;
+

client/src/service-worker.ts

+/// <reference lib="webworker" />
+/* eslint-disable no-restricted-globals */
+
+import {clientsClaim} from 'workbox-core';
+import {ExpirationPlugin} from 'workbox-expiration';
+import {precacheAndRoute, createHandlerBoundToURL} from 'workbox-precaching';
+import {registerRoute} from 'workbox-routing';
+import {StaleWhileRevalidate} from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope;
+
+clientsClaim();
+
+// Precache all of the assets generated by the build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in the service worker file,
+// even if you decide not to use precaching.
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with the index.html shell.
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+    // Return false to exempt requests from being fulfilled by index.html.
+    ({request, url}: {request: Request; url: URL}) => {
+        // If this isn't a navigation, skip.
+        if (request.mode !== 'navigate') {
+            return false;
+        }
+
+        // If this is a URL that starts with /_, skip.
+        if (url.pathname.startsWith('/_')) {
+            return false;
+        }
+
+        // If this looks like a URL for a resource, because it contains
+        // a file extension, skip.
+        if (url.pathname.match(fileExtensionRegexp)) {
+            return false;
+        }
+
+        // Return true to signal that we want to use the handler.
+        return true;
+    },
+    createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+);
+
+// An example runtime caching route for requests that aren't handled by the
+// precache, in this case same-origin .png requests like those from in public/
+registerRoute(
+    // Add in any other file extensions or routing criteria as needed.
+    ({url}) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+    // Customize this strategy as needed, e.g., by changing to CacheFirst.
+    new StaleWhileRevalidate({
+        cacheName: 'images',
+        plugins: [
+            // Ensure that once this runtime cache reaches a maximum size the
+            // least-recently used images are removed.
+            new ExpirationPlugin({maxEntries: 50}),
+        ],
+    })
+);
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+        self.skipWaiting();
+    }
+});
+

client/src/serviceWorkerRegistration.ts

+
+const isLocalhost = Boolean(
+    window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+);
+
+type Config = {
+    onSuccess?: (registration: ServiceWorkerRegistration) => void;
+    onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+        // The URL constructor is available in all browsers that support SW.
+        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+        if (publicUrl.origin !== window.location.origin) {
+            // Our service worker won't work if PUBLIC_URL is on a different origin
+            // from what our page is served on. This might happen if a CDN is used to
+            // serve assets
+            return;
+        }
+
+        window.addEventListener('load', () => {
+            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+            if (isLocalhost) {
+                // This is running on localhost. Let's check if a service worker still exists or not.
+                checkValidServiceWorker(swUrl, config);
+            } else {
+                // Is not localhost. Just register service worker
+                registerValidSW(swUrl, config);
+            }
+        });
+    }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+    navigator.serviceWorker
+        .register(swUrl)
+        .then((registration) => {
+            registration.onupdatefound = () => {
+                const installingWorker = registration.installing;
+                if (installingWorker == null) {
+                    return;
+                }
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === 'installed') {
+                        if (navigator.serviceWorker.controller) {
+                            // At this point, the updated precached content has been fetched,
+                            // but the previous service worker will still serve the older
+                            // content until all client tabs are closed.
+                            console.log(
+                                'New content is available and will be used when all ' +
+                                'tabs for this page are closed.'
+                            );
+
+                            // Execute callback
+                            if (config && config.onUpdate) {
+                                config.onUpdate(registration);
+                            }
+                        } else {
+                            // At this point, everything has been precached.
+                            // It's the perfect time to display a
+                            // "Content is cached for offline use." message.
+                            console.log('Content is cached for offline use.');
+
+                            // Execute callback
+                            if (config && config.onSuccess) {
+                                config.onSuccess(registration);
+                            }
+                        }
+                    }
+                };
+            };
+        })
+        .catch((error) => {
+            console.error('Error during service worker registration:', error);
+        });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl, {
+        headers: {'Service-Worker': 'script'},
+    })
+        .then((response) => {
+            // Ensure service worker exists, and that we really are getting a JS file.
+            const contentType = response.headers.get('content-type');
+            if (
+                response.status === 404 ||
+                (contentType != null && contentType.indexOf('javascript') === -1)
+            ) {
+                // No service worker found. Probably a different app. Reload the page.
+                navigator.serviceWorker.ready.then((registration) => {
+                    registration.unregister().then(() => {
+                        window.location.reload();
+                    });
+                });
+            } else {
+                // Service worker found. Proceed as normal.
+                registerValidSW(swUrl, config);
+            }
+        })
+        .catch(() => {
+            console.log('No internet connection found. App is running in offline mode.');
+        });
+}
+
+export function unregister() {
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.ready
+            .then((registration) => {
+                registration.unregister();
+            })
+            .catch((error) => {
+                console.error(error.message);
+            });
+    }
+}
+

client/src/setupTests.ts

+
+import '@testing-library/jest-dom';
+

client/src/styles/functions.scss

+@function toRem($px) {
+    @return ($px / 16)+0rem;
+}
+
+@function getFrom($map, $key) {
+    @each $keyValue, $returnValue in $map {
+        @if $keyValue == $key {
+            @return $returnValue;
+        }
+    }
+    @return null;
+}
+
+@function hoverify($color) {
+    @return color.scale-color($color, $lightness: +5%, $hue: +5%); 
+}

client/src/styles/mixins.scss

+@use 'functions.scss'as fn;
+@use 'settings.scss'as s;
+
+@mixin breakpoint($bp) {
+    @if type-of($bp)==string {
+        $bp: fn.getFrom(s.$breakpoints, $bp);
+    } @else {
+        $bp: $bp + 0px;
+    }
+    
+
+    @media screen and (min-width: $bp) {
+        @content;
+    }
+}

client/src/styles/settings.scss

+
+// Colors
+$primary: #AC42FF;
+$secondary: #F15154;
+$accent: #7DEFFF;
+$light: #f0f0f0;
+$dark: #1f1f1f;
+
+$white: #fff;
+$black: #000;
+
+$colors: (
+   'primary': $primary,
+   'secondary': $secondary,
+   'light': $light,
+   'dark': $dark
+);
+
+$linear-gradient: linear-gradient(to top, $primary, $secondary);
+$radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, $secondary 100%);
+
+$body-color: #3A5255;
+$body-font: 'Poppins', sans-serif;
+
+// Typography
+$weight-light: 300;
+$weight-regular: 400;
+$weight-medium: 500;
+$weight-semi-bold: 600;
+$weight-bold: 700;
+
+// Breakpoints
+$breakpoints: (
+    'small': 480px,
+    'medium': 860px,
+    'large': 1400px,
+    'xlarge': 1640px
+);
+
+// General
+$transition: 300ms ease;
+

client/tsconfig.json

+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "baseUrl": "src"
+    },
+    "include": [
+        "src"
+    ]
+}

server/.gitignore

+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# database
+*.db
+*.sqlite3
+

server/jest.config.json

+{
+    "roots": [
+        "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+        "src/**/*.{js,jsx,ts,tsx}",
+        "!src/**/*.d.ts"
+    ],
+    "setupFilesAfterEnv": [
+        "<rootDir>/src/setupTests.ts"
+    ],
+    "testMatch": [
+        "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+        "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+        "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "transformIgnorePatterns": [
+        "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$"
+    ],
+    "moduleFileExtensions": [
+        "web.js",
+        "js",
+        "web.ts",
+        "ts",
+        "web.tsx",
+        "tsx",
+        "json",
+        "web.jsx",
+        "jsx",
+        "node"
+    ]
+}

server/knexfile.ts

+
+module.exports = {
+    development: {
+        client: "sqlite3",
+        connection: {
+            filename: "./dev.sqlite3"
+        }
+    },
+    staging: {
+        client: "postgresql",
+        connection: {
+            database: "my_db",
+            user: "username",
+            password: "password"
+        },
+        pool: {
+            min: 2,
+            max: 10
+        },
+        migrations: {
+            tableName: "knex_migrations"
+        }
+    },
+    production: {
+        client: "postgresql",
+        connection: {
+            database: "my_db",
+            user: "username",
+            password: "password"
+        },
+        pool: {
+            min: 2,
+            max: 10
+        },
+        migrations: {
+            tableName: "knex_migrations"
+        }
+    }
+};
+

server/migrations/0000_initial.ts

+
+import { Knex } from "knex";
+
+export async function up(database: Knex): Promise<void> {
+    return database.schema
+        .createTable('users', table => {
+            table.uuid('id').notNullable().primary();
+            table.string('user_name').unique().notNullable();
+            table.string('passwd_hash', 60).notNullable();
+            table.text('email');
+            table.text('real_name');
+        })
+        .createTable('teams', table => {
+            table.uuid('id').notNullable().primary();
+            table.text('name').notNullable();
+        })
+        .createTable('team_members', table => {
+            table.uuid('user_id').notNullable().references('users.id');
+            table.uuid('team_id').notNullable().references('teams.id');
+            table.primary(['user_id', 'team_id']);
+            table.uuid('role_id').notNullable().references('roles.id');
+        })
+        .createTable('roles', table => {
+            table.uuid('id').notNullable().primary();
+            table.uuid('team_id').notNullable().references('teams.id');
+            table.text('name').notNullable();
+        })
+        .createTable('projects', table => {
+            table.uuid('id').notNullable().primary();
+            table.text('name').notNullable();
+        })
+        .createTable('team_projects', table => {
+            table.uuid('project_id').notNullable().references('projects.id');
+            table.uuid('team_id').notNullable().references('teams.id');
+            table.primary(['project_id', 'team_id']);
+        })
+        .createTable('tasks', table => {
+            table.uuid('id').notNullable().primary();
+            table.uuid('project_id').notNullable().references('projects.id');
+            table.text('name').notNullable();
+            table.text('text').notNullable();
+            table.enum('status', [ 'open', 'closed', 'suspended' ]).notNullable();
+        })
+        .createTable('task_requirements', table => {
+            table.uuid('task_id').notNullable().references('tasks.id');
+            table.uuid('role_id').notNullable().references('users.id');
+            table.primary(['task_id', 'role_id']);
+            table.integer('time').notNullable();
+        })
+        .createTable('task_assignees', table => {
+            table.uuid('user_id').notNullable().references('users.id');
+            table.uuid('task_id').notNullable().references('tasks.id');
+            table.primary(['user_id', 'task_id']);
+            table.integer('time').notNullable();
+            table.boolean('assigned').notNullable();
+            table.boolean('working').notNullable();
+        })
+        .createTable('comments', table => {
+            table.uuid('id').notNullable().primary();
+            table.uuid('task_id').notNullable().references('tasks.id');
+            table.uuid('user_id').notNullable().references('users.id');
+            table.text('text').notNullable();
+        });
+}
+
+export async function down(database: Knex): Promise<void> {
+    return database.schema
+        .dropTable('comments')
+        .dropTable('task_assignees')
+        .dropTable('task_requirements')
+        .dropTable('tasks')
+        .dropTable('team_projects')
+        .dropTable('projects')
+        .dropTable('roles')
+        .dropTable('team_members')
+        .dropTable('teams')
+        .dropTable('users');
+}
+

server/package.json

+{
+    "name": "ryoko",
+    "version": "0.1.0",
+    "description": "Ryoko is a project planning tool build with developers in mind",
+    "repository": "https://gitlab.inf.unibz.it/Roland.Bernard/wie_202021_csbillero11.git/",
+    "author": "Roland Bernard <rolbernard@unibz.it>",
+    "license": "MIT",
+    "private": true,
+    "main": "src/index.ts",
+    "dependencies": {
+        "express": "^4.17.1",
+        "knex": "^0.95.4",
+        "sqlite3": "^5.0.2",
+        "uuid": "^8.3.2"
+    },
+    "scripts": {
+        "start": "nodemon src/index.ts",
+        "build": "tsc --project .",
+        "test": "jest --watch --config ./jest.config.json"
+    },
+    "devDependencies": {
+        "@types/express": "^4.17.11",
+        "@types/jest": "^26.0.22",
+        "@types/node": "^14.14.37",
+        "jest": "^26.6.3",
+        "nodemon": "^2.0.7",
+        "ts-jest": "^26.5.4",
+        "ts-node": "^9.1.1",
+        "typescript": "^4.2.4"
+    }
+}

server/src/database.ts

+
+import knex from 'knex';
+
+const database = knex({
+    client: 'sqlite3',
+    connection: {
+        filename: './database.db'
+    }
+});
+database.migrate.latest();
+
+export default function getDatabase() {
+    return database;
+}
+

server/src/index.test.ts

+
+test('dummy test case', () => {
+    expect(true).toEqual(true);
+});
+

server/src/index.ts

+
+import express from 'express';
+
+const app = express();
+const PORT = 8000;
+app.get('/', (_, res) => res.send('Hello world!'));
+
+app.listen(PORT, () => {
+    console.log(`[server] Server is running at https://localhost:${PORT}`);
+});
+

server/src/setupTests.ts

+
+// Setup the testing environment right here
+

server/tsconfig.json

+{
+    "compilerOptions": {
+        "target": "es6",
+        "lib": [
+        ],
+        "module": "commonjs",
+        "rootDir": "src",
+        "outDir": "build",
+        "esModuleInterop": true,
+        "strict": true
+    },
+    "include": [
+        "src"
+    ]
+}