Merge pull request #1004 from Dudrie/fix-things

Fix things

Author: Dudrie

Dockerfile

@@ -28,7 +28,7 @@ RUN pnpm install && pnpm build
 # Create the image which runs the server
 #
 # =============================================
-FROM alpine:3
+FROM alpine:3 as production
 
 # Installs latest Chromium package, NodeJS and pnpm.
 RUN apk add --no-cache \

client/.env

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+BROWSER=none

client/.eslintrc.yml

@@ -0,0 +1,10 @@
+---
+extends:
+  - 'react-app'
+
+rules:
+  'react/display-name': 'off'
+  'react/jsx-no-duplicate-props':
+    - 'warn'
+    - ignoreCase: false
+  'react/prop-types': [ 0 ]

client/.gitignore

@@ -1,4 +1,23 @@
-.build
-build
-web_modules
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

client/README.md

@@ -0,0 +1,53 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more
+information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will
+remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right
+into your project so you have full control over them. All of the commands except `eject` will still work, but they will
+point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you
+shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t
+customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in
+the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

client/craco.config.js

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const CracoAlias = require('craco-alias');
+
+const path = require('path');
+const fs = require('fs');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolvePath = (relativePath) => path.resolve(appDirectory, relativePath);
+
+module.exports = {
+  webpack: {
+    configure: (config, { env: webpackEnv }) => {
+      const isEnvProduction = webpackEnv === 'production';
+      const serverSharedLoader = {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: resolvePath('../server/src/shared'),
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: ['react-app'],
+          customize: require.resolve('babel-preset-react-app/webpack-overrides'),
+          plugins: [
+            [
+              require.resolve('babel-plugin-named-asset-import'),
+              {
+                loaderMap: {
+                  svg: {
+                    ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                  },
+                },
+              },
+            ],
+          ],
+          cacheDirectory: true,
+          cacheCompression: false,
+          compact: isEnvProduction,
+        },
+      };
+
+      config.module.rules.forEach((rule) => {
+        if (typeof rule.oneOf !== 'undefined') {
+          rule.oneOf.splice(rule.oneOf.length - 2, 0, serverSharedLoader);
+        }
+      });
+
+      config.resolve.plugins = config.resolve.plugins.filter(
+        (plugin) => plugin.constructor.name !== 'ModuleScopePlugin'
+      );
+
+      config.output.publicPath = isEnvProduction ? '${ROUTE_PREFIX}' : '/';
+
+      return config;
+    },
+  },
+  plugins: [
+    {
+      plugin: CracoAlias,
+      options: {
+        source: 'tsconfig',
+        baseUrl: './src',
+        tsConfigPath: './tsconfig.extends.json',
+      },
+    },
+  ],
+};

client/package.json

@@ -1,17 +1,19 @@
 {
-  "name": "client",
+  "name": "client-cra",
   "version": "0.1.0",
   "private": true,
+  "main": "src/index.tsx",
+  "proxy": "http://localhost:8080",
   "scripts": {
-    "start": "snowpack dev",
-    "start:reload": "snowpack dev --reload",
-    "build": "snowpack build",
-    "test": "web-test-runner \"src/**/*.test.tsx\"",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "format": "eslint --fix \"src/**/*.ts?(x)\"",
     "eslint:check": "eslint \"src/**/*.ts?(x)\"",
     "prettier:check": "prettier --check \"src/**/*.ts?(x)\"",
     "ts:check": "tsc --project . --noEmit",
-    "ts:check:watch": "tsc --project . --noEmit -w"
+    "ts:check:watch": "tsc --project . --noEmit -w",
+    "eject": "react-scripts eject"
   },
   "dependencies": {
     "@date-io/luxon": "1.3.13",
@@ -28,7 +30,7 @@
     "i18next": "^19.8.3",
     "i18next-sync-fs-backend": "^1.1.1",
     "i18next-xhr-backend": "^3.2.2",
-    "mdi-material-ui": "^6.21.0",
+    "mdi-material-ui": "^6.23.0",
     "notistack": "^1.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -41,36 +43,47 @@
     "yup": "^0.29.3"
   },
   "devDependencies": {
-    "@material-ui/system": "^4.12.1",
+    "@craco/craco": "^7.0.0-alpha.3",
     "@material-ui/utils": "^4.11.2",
-    "@snowpack/plugin-dotenv": "^2.0.5",
-    "@snowpack/plugin-react-refresh": "^2.3.9",
-    "@snowpack/plugin-typescript": "^1.1.0",
-    "@snowpack/plugin-webpack": "^2.3.0",
-    "@snowpack/web-test-runner-plugin": "^0.1.5",
-    "@testing-library/react": "^11.0.0",
+    "@material-ui/system": "^4.12.1",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "@types/chai": "^4.2.13",
     "@types/file-saver": "^2.0.1",
+    "@types/jest": "^27.4.0",
     "@types/papaparse": "^5.2.6",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-window": "^1.8.2",
-    "@types/snowpack-env": "^2.3.3",
     "@types/yup": "^0.29.11",
-    "@web/test-runner": "^0.11.7",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
     "chai": "^4.2.0",
     "core-js": "^3.8.3",
+    "craco-alias": "^3.0.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.5.0",
     "http-proxy": "^1.18.1",
+    "react-dev-utils": "^12.0.0",
+    "react-scripts": "5.0.0",
     "react-transition-group": "^4.4.2",
     "regenerator-runtime": "^0.13.7",
-    "snowpack": "^3.8.3"
+    "simple-pug-loader": "^0.2.1"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

client/plugins/snowpack-prefix-support.js

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+    <meta charset='utf-8' />
+    <link rel='shortcut icon' href='%PUBLIC_URL%/static/favicon.ico' />
+    <meta name='viewport' content='width=device-width, initial-scale=1 shrink-to-fit=no' />
+    <meta name='theme-color' content='#000000' />
+    <link rel='apple-touch-icon' href='%PUBLIC_URL%/static/logo192.png' />
+    <link rel='manifest' href='%PUBLIC_URL%/static/manifest.json' />
+
+    <!--
+        Global variables
+        #{GLOBAL_VARS}
+    -->
+
+    <link rel='preconnect' href='https://fonts.gstatic.com' />
+    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
+    <link
+        rel='stylesheet'
+        href='https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap'
+    />
+
+    <!--
+      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>Tutor Management System</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>