Mvj 249 flow to typescript conversion

.babelrc

@@ -21,10 +21,7 @@
  "./src"
  ],
  "alias": {
- "$src": "./src",
- "$assets": "./assets",
- "$components": "./src/components",
- "$util": "./src/util"
+ "src": "./src"
  }
  }
  ]

config/paths.js

@@ -45,9 +45,9 @@ module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('dist'),
  appHtml: resolveApp('src/index.html'),
- appIndexJs: resolveApp('src/index.js'),
+ appIndexJs: resolveApp('src/index.ts'),
  appScss: resolveApp('src/main.scss'),
- silentRenewJs: resolveApp('src/silent_renew.js'),
+ silentRenewJs: resolveApp('src/silent_renew.ts'),
  silentRenewHtml: resolveApp('src/silent_renew.html'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),

config/webpack.config.dev.js

@@ -48,17 +48,30 @@ module.exports = {
  },
  resolve: {
  alias: {
- 'react-dom': '@hot-loader/react-dom',
+ 'react-dom': '@hot-loader/react-dom'
  },
  modules: [
- path.join(__dirname, 'src'),
+ path.resolve(__dirname, '../src'),
  'node_modules',
  ],
- extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+ extensions: ['.ts', '.tsx', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+ // Some libraries import Node modules but don't use them in the browser.
+ // Tell Webpack to provide empty mocks for them so importing them works.
+ fallback: {
+ dgram: 'empty',
+ fs: 'empty',
+ net: 'empty',
+ tls: 'empty',
+ }
  },
  module: {
  strictExportPresence: true,
  rules: [
+ {
+ test: /\.tsx?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
  {
  test: /\.(js|jsx)$/,
  loader: 'babel-loader',
@@ -138,16 +151,7 @@ module.exports = {
  contextRegExp: /moment$/,
  }),
  ],
- // Some libraries import Node modules but don't use them in the browser.
- // Tell Webpack to provide empty mocks for them so importing them works.
- resolve: {
- fallback: {
- dgram: 'empty',
- fs: 'empty',
- net: 'empty',
- tls: 'empty',
- }
- },
+
  // Turn off performance hints during development because we don't do any
  // splitting or minification in interest of speed. These warnings become
  // cumbersome.

config/webpack.config.prod.js

@@ -64,14 +64,27 @@ module.exports = {
  },
  resolve: {
  modules: [
- path.join(__dirname, 'src'),
+ path.resolve(__dirname, '../src'),
  'node_modules',
  ],
- extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+ extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx', '.ts', '.tsx'],
+ // Some libraries import Node modules but don't use them in the browser.
+ // Tell Webpack to provide empty mocks for them so importing them works.
+ fallback: {
+ dgram: 'empty',
+ fs: 'empty',
+ net: 'empty',
+ tls: 'empty',
+ }
  },
  module: {
  strictExportPresence: true,
  rules: [
+ {
+ test: /\.tsx?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
  {
  test: /\.(js|jsx)$/,
  loader: 'babel-loader',
@@ -206,15 +219,5 @@ module.exports = {
  },
  extractComments: false,
  })],
- },
- // Some libraries import Node modules but don't use them in the browser.
- // Tell Webpack to provide empty mocks for them so importing them works.
- resolve: {
- fallback: {
- dgram: 'empty',
- fs: 'empty',
- net: 'empty',
- tls: 'empty',
- }
- },
+ }
 };

jsconfig.json

@@ -2,10 +2,7 @@
  "compilerOptions": {
  "baseUrl": ".",
  "paths": {
- "$assets/*": ["./assets/*"],
- "$components/*": ["./src/components/*"],
- "$src/*": ["./src/*"],
- "$util/*": ["./src/util/*"]
+ "src/*": ["./src/*"],
  }
  }
 }

package.json

@@ -2,13 +2,13 @@
  "name": "mvj-ui",
  "version": "1.0.0",
  "description": "City of Helsinki ground rent system UI",
- "main": "src/index.js",
+ "main": "src/index.ts",
  "author": "Jori Lindell <jori.lindell@digia.com>",
  "license": "MIT",
  "nyc": {
  "require": [
  "@babel/register",
- "./src/test.js"
+ "./src/test.ts"
  ],
  "sourceMap": false,
  "instrument": false
@@ -22,8 +22,8 @@
  "compile": "node scripts/compile.js",
  "precommit": "npm-run-all flow lint",
  "prepush": "npm-run-all test",
- "test": "mocha --require @babel/register --require src/test.js \"src/**/*spec.js\"",
- "test:coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha \"src/**/*spec.js\" --exit",
+ "test": "mocha --require @babel/register --require ts-node/register --require tsconfig-paths/register --require src/test.ts \"src/**/*spec.ts\"",
+ "test:coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text --require ts-node/register --require tsconfig-paths/register mocha \"src/**/*spec.ts\" --exit",
  "test:watch": "npm run test -- --watch"
  },
  "dependencies": {
@@ -32,6 +32,7 @@
  "copy-to-clipboard": "^3.2.0",
  "date-fns": "^2.0.0-beta.4",
  "dotenv": "^8.0.0",
+ "file-loader": "^6.2.0",
  "file-saver": "^2.0.5",
  "font-awesome": "^4.7.0",
  "foundation-sites": "6.5.3",
@@ -69,6 +70,8 @@
  "redux-form": "^8.2.5",
  "redux-oidc": "^3.1.4",
  "redux-saga": "^1.0.5",
+ "ts-loader": "^9.5.1",
+ "utility-types": "^3.11.0",
  "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
@@ -81,6 +84,15 @@
  "@babel/preset-react": "^7.23.3",
  "@babel/register": "^7.23.7",
  "@hot-loader/react-dom": "17.0.2",
+ "@istanbuljs/nyc-config-typescript": "^1.0.2",
+ "@types/chai": "^4.3.16",
+ "@types/history": "^5.0.0",
+ "@types/lodash": "^4.17.1",
+ "@types/mocha": "^10.0.6",
+ "@types/react": "^18.3.2",
+ "@types/react-dom": "^18.3.0",
+ "@types/redux-actions": "^2.6.5",
+ "@types/webpack-env": "^1.18.5",
  "babel-loader": "^9.1.3",
  "babel-plugin-istanbul": "^6.1.1",
  "babel-plugin-module-resolver": "^5.0.0",
@@ -99,8 +111,6 @@
  "eslint-plugin-flowtype": "^8.0.3",
  "eslint-plugin-react": "^7.14.3",
  "favicons-webpack-plugin": "^6.0.1",
- "file-loader": "^6.2.0",
- "flow-bin": "^0.227.0",
  "flow-typed": "^3.9.0",
  "fs-extra": "^11.2.0",
  "html-webpack-plugin": "^5.6.0",
@@ -118,6 +128,9 @@
  "sinon-chai": "^3.3.0",
  "style-loader": "^3.3.4",
  "terser-webpack-plugin": "^5.3.10",
+ "ts-node": "^10.9.2",
+ "tsconfig-paths": "^4.2.0",
+ "typescript": "^5.4.5",
  "url": "^0.11.3",
  "url-loader": "^4.1.1",
  "webpack": "^5.9.0",

scripts/start.js

@@ -53,7 +53,7 @@ choosePort(HOST, DEFAULT_PORT)
  }
  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
  const appName = require(paths.appPackageJson).name;
- const useTypeScript = false;
+ const useTypeScript = true;
  const urls = prepareUrls(protocol, HOST, port);
  const devSocket = {
  warnings: warnings =>

src/api/ApiErrorModal.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable */
+import flowRight from "lodash/flowRight";
+import React from "react";
+import { Button } from "react-foundation";
+import { reveal } from "../foundation/reveal";
+import { Sizes } from "../foundation/enums";
+
+const ApiErrorModal = ({
+ data,
+ handleDismiss,
+ isOpen
+}) => <div className="api-error-modal">
+ {data ? <ApiErrorContent data={data} /> : null}
+ <Button className="api-error-modal__close" disabled={!isOpen} size={Sizes.LARGE} onClick={handleDismiss}>Dismiss</Button>
+ </div>;
+
+const ApiErrorList = ({
+ errors
+}) => {
+ const listObjectErrors = (obj: Record<string, any>) => {
+ return <ul>
+ {Object.keys(obj).map(function (key, index) {
+ if (typeof obj[key] === 'object') {
+ return <li key={index}>{key}{listObjectErrors(obj[key])}</li>;
+ }
+
+ return <li key={index}>{key}: {obj[key]}</li>;
+ })}
+ </ul>;
+ };
+
+ return <div className='api-error-modal__error-list'>
+ <h5 className="api-error-modal__error-list-heading">Error list</h5>
+ {listObjectErrors(errors)}
+ </div>;
+};
+
+const ApiErrorStackTrace = ({
+ trace
+}) => <div className="api-error-modal__trace">
+ <h5 className="api-error-modal__trace-heading">Trace</h5>
+ <ol className="api-error-modal__trace-nav">
+ {trace.filter(item => item.file).map((item, index) => <li className="api-error-modal__trace-item" key={index}>
+ <span className="api-error-modal__trace-source">
+ {item.file}({item.line})
+ </span>
+ &nbsp;
+ <span className="api-error-modal__trace-function">
+ {item.class ? `${item.class}::${item.function}` : item.function}
+ </span>
+ </li>)}
+ </ol>
+ </div>;
+
+const ApiErrorContent = ({
+ data
+}) => {
+ return <div className="api-error-modal__content">
+ <h2 className="api-error-modal__title">Server error <small>{data.exception}</small></h2>
+ <div className="api-error-modal__message">{data.message}</div>
+ <div className="api-error-modal__source">{data.source}</div>
+ {data.errors ? <ApiErrorList errors={data.errors} /> : null}
+ {data.trace ? <ApiErrorStackTrace trace={data.trace} /> : null}
+ </div>;
+};
+
+export default flowRight(reveal({
+ name: 'apiError'
+}))(ApiErrorModal);