build(front): Upgrade packages.

6 files changed, 131 insertions, 132 deletions

diff --git a/Timeline/ClientApp/.eslintignore b/Timeline/ClientApp/.eslintignore
index 371b5fcb..f29f7466 100644
--- a/Timeline/ClientApp/.eslintignore
+++ b/Timeline/ClientApp/.eslintignore
@@ -3,3 +3,4 @@ node_modules
 dist

 webpack.*.js

 .eslintrc.js

+postcss.config.js

diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index 5ae6a608..84b5b7d5 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -1,115 +1,114 @@
-{
-  "name": "timeline",
-  "version": "0.1.0",
-  "private": true,
-  "homepage": "https://crupest.xyz",
-  "keywords": [],
-  "description": "Timeline app.",
-  "dependencies": {
-    "axios": "^0.20.0",
-    "bootstrap": "^4.5.2",
-    "bootstrap-icons": "^1.0.0",
-    "classnames": "^2.2.6",
-    "clsx": "^1.1.1",
-    "core-js": "^3.6.5",
-    "i18next": "^19.7.0",
-    "i18next-browser-languagedetector": "^6.0.1",
-    "localforage": "^1.9.0",
-    "lodash": "^4.17.20",
-    "pepjs": "^0.5.2",
-    "react": "^16.13.1",
-    "react-bootstrap": "^1.3.0",
-    "react-dom": "^16.13.1",
-    "react-hot-loader": "^4.12.21",
-    "react-i18next": "^11.7.2",
-    "react-inlinesvg": "^2.0.0",
-    "react-responsive": "^8.1.0",
-    "react-router": "^5.2.0",
-    "react-router-bootstrap": "^0.25.0",
-    "react-router-dom": "^5.2.0",
-    "regenerator-runtime": "^0.13.7",
-    "rxjs": "^6.6.2",
-    "workbox-precaching": "^5.1.3",
-    "workbox-routing": "^5.1.3",
-    "workbox-strategies": "^5.1.3",
-    "workbox-window": "^5.1.3",
-    "xregexp": "^4.3.0"
-  },
-  "scripts": {
-    "start": "webpack-dev-server --config ./webpack.config.dev.js",
-    "start:mock": "webpack-dev-server --config ./webpack.config.dev.js --env.TIMELINE_USE_MOCK_BACKEND",
-    "build": "webpack --config ./webpack.config.prod.js",
-    "lint": "eslint src/ --ext .js --ext .jsx --ext .ts --ext .tsx"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
-    "@hot-loader/react-dom": "^16.13.0",
-    "@types/classnames": "^2.2.10",
-    "@types/crypto-js": "^3.1.47",
-    "@types/lodash": "^4.14.161",
-    "@types/node": "^14.6.2",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-responsive": "^8.0.2",
-    "@types/react-router": "^5.1.8",
-    "@types/react-router-bootstrap": "^0.24.5",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/webpack-env": "^1.15.2",
-    "@types/xregexp": "^4.3.0",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
-    "@yarnpkg/pnpify": "^2.2.1",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-transform-builtin-extend": "^1.1.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.1.0",
-    "crypto-js": "^4.0.0",
-    "css-loader": "^4.2.2",
-    "eslint": "^7.7.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-webpack": "^0.12.2",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0",
-    "file-loader": "^6.1.0",
-    "html-webpack-plugin": "^4.4.1",
-    "http-server": "^0.12.3",
-    "mini-css-extract-plugin": "^0.11.0",
-    "pnp-webpack-plugin": "^1.6.4",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.1",
-    "sass": "^1.26.10",
-    "sass-loader": "^10.0.1",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^8.0.3",
-    "typescript": "^4.0.2",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
-    "webpack-chain": "^6.5.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "workbox-webpack-plugin": "^5.1.3"
-  }
-}
+{

+  "name": "timeline",

+  "version": "0.1.0",

+  "private": true,

+  "homepage": "https://crupest.xyz",

+  "keywords": [],

+  "description": "Timeline app.",

+  "dependencies": {

+    "axios": "^0.21.0",

+    "bootstrap": "^4.5.3",

+    "bootstrap-icons": "^1.0.0",

+    "classnames": "^2.2.6",

+    "clsx": "^1.1.1",

+    "core-js": "^3.6.5",

+    "i18next": "^19.8.3",

+    "i18next-browser-languagedetector": "^6.0.1",

+    "localforage": "^1.9.0",

+    "lodash": "^4.17.20",

+    "pepjs": "^0.5.2",

+    "react": "^17.0.1",

+    "react-bootstrap": "^1.4.0",

+    "react-dom": "^17.0.1",

+    "react-hot-loader": "^4.13.0",

+    "react-i18next": "^11.7.3",

+    "react-inlinesvg": "^2.1.1",

+    "react-responsive": "^8.1.0",

+    "react-router": "^5.2.0",

+    "react-router-bootstrap": "^0.25.0",

+    "react-router-dom": "^5.2.0",

+    "regenerator-runtime": "^0.13.7",

+    "rxjs": "^6.6.3",

+    "workbox-precaching": "^5.1.4",

+    "workbox-routing": "^5.1.4",

+    "workbox-strategies": "^5.1.4",

+    "workbox-window": "^5.1.4",

+    "xregexp": "^4.3.0"

+  },

+  "scripts": {

+    "start": "webpack-dev-server --config ./webpack.config.dev.js",

+    "start:mock": "webpack-dev-server --config ./webpack.config.dev.js --env.TIMELINE_USE_MOCK_BACKEND",

+    "build": "webpack --config ./webpack.config.prod.js",

+    "lint": "eslint src/ --ext .js --ext .jsx --ext .ts --ext .tsx"

+  },

+  "browserslist": {

+    "production": [

+      ">0.2%",

+      "not dead",

+      "not op_mini all"

+    ],

+    "development": [

+      "last 1 chrome version",

+      "last 1 firefox version",

+      "last 1 safari version"

+    ]

+  },

+  "devDependencies": {

+    "@babel/core": "^7.12.3",

+    "@babel/plugin-proposal-class-properties": "^7.12.1",

+    "@babel/plugin-proposal-decorators": "^7.12.1",

+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",

+    "@babel/plugin-proposal-optional-chaining": "^7.12.1",

+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",

+    "@babel/preset-env": "^7.12.1",

+    "@babel/preset-react": "^7.12.1",

+    "@babel/preset-typescript": "^7.12.1",

+    "@hot-loader/react-dom": "^17.0.0",

+    "@types/classnames": "^2.2.10",

+    "@types/crypto-js": "^4.0.1",

+    "@types/lodash": "^4.14.162",

+    "@types/node": "^14.14.5",

+    "@types/react": "^16.9.53",

+    "@types/react-dom": "^16.9.8",

+    "@types/react-responsive": "^8.0.2",

+    "@types/react-router": "^5.1.8",

+    "@types/react-router-bootstrap": "^0.24.5",

+    "@types/react-router-dom": "^5.1.6",

+    "@types/webpack-env": "^1.15.3",

+    "@types/xregexp": "^4.3.0",

+    "@typescript-eslint/eslint-plugin": "^4.6.0",

+    "@typescript-eslint/parser": "^4.6.0",

+    "@yarnpkg/pnpify": "^2.3.3",

+    "babel-loader": "^8.1.0",

+    "babel-plugin-transform-builtin-extend": "^1.1.2",

+    "clean-webpack-plugin": "^3.0.0",

+    "copy-webpack-plugin": "^6.2.1",

+    "crypto-js": "^4.0.0",

+    "css-loader": "^5.0.0",

+    "eslint": "^7.12.1",

+    "eslint-config-prettier": "^6.14.0",

+    "eslint-plugin-import": "^2.22.1",

+    "eslint-plugin-prettier": "^3.1.4",

+    "eslint-plugin-react": "^7.21.5",

+    "eslint-plugin-react-hooks": "^4.2.0",

+    "file-loader": "^6.1.1",

+    "html-webpack-plugin": "^4.5.0",

+    "http-server": "^0.12.3",

+    "mini-css-extract-plugin": "^1.2.0",

+    "postcss": "^8.1.4",

+    "postcss-loader": "^4.0.4",

+    "postcss-preset-env": "^6.7.0",

+    "prettier": "^2.1.2",

+    "sass": "^1.27.0",

+    "sass-loader": "^10.0.4",

+    "style-loader": "^2.0.0",

+    "ts-loader": "^8.0.7",

+    "typescript": "^4.0.5",

+    "url-loader": "^4.1.1",

+    "webpack": "^5.2.0",

+    "webpack-chain": "^6.5.1",

+    "webpack-cli": "^4.1.0",

+    "webpack-dev-server": "^3.11.0",

+    "workbox-webpack-plugin": "^5.1.4"

+  }

+}

diff --git a/Timeline/ClientApp/postcss.config.js b/Timeline/ClientApp/postcss.config.js
new file mode 100644
index 00000000..74ee8155
--- /dev/null
+++ b/Timeline/ClientApp/postcss.config.js
@@ -0,0 +1,10 @@
+module.exports = {

+  plugins: [

+    [

+      "postcss-preset-env",

+      {

+        // Options

+      },

+    ],

+  ],

+};

diff --git a/Timeline/ClientApp/src/app/views/login/index.tsx b/Timeline/ClientApp/src/app/views/login/index.tsx
index 265c2172..61b9a525 100644
--- a/Timeline/ClientApp/src/app/views/login/index.tsx
+++ b/Timeline/ClientApp/src/app/views/login/index.tsx
@@ -124,7 +124,7 @@ const LoginPage: React.FC = (_) => {
             type="checkbox"
             checked={rememberMe}
             onChange={(e) => {
-              setRememberMe(e.target.checked);
+              setRememberMe(e.currentTarget.checked);
             }}
             label={t("user.rememberMe")}
           />
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index 327b6833..4db23371 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -105,7 +105,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             <Svg
               src={chevronDownIcon}
               className="text-info icon-button"
-              onClick={(e: Event) => {
+              onClick={(e) => {
                 more.toggle();
                 e.stopPropagation();
               }}
@@ -148,7 +148,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             <Svg
               src={trashIcon}
               className="text-danger icon-button large"
-              onClick={(e: Event) => {
+              onClick={(e) => {
                 toggleDeleteDialog();
                 e.stopPropagation();
               }}
diff --git a/Timeline/ClientApp/webpack.common.js b/Timeline/ClientApp/webpack.common.js
index e13881cb..3779003e 100644
--- a/Timeline/ClientApp/webpack.common.js
+++ b/Timeline/ClientApp/webpack.common.js
@@ -1,6 +1,5 @@
 const path = require("path");

 const HtmlWebpackPlugin = require("html-webpack-plugin");

-const PnpWebpackPlugin = require("pnp-webpack-plugin");

 const postcssPresetEnv = require("postcss-preset-env");

 const Config = require("webpack-chain");

 

@@ -37,9 +36,6 @@ config.module
   .end()

   .use("postcss")

   .loader("postcss-loader")

-  .options({

-    plugins: () => [postcssPresetEnv(/* pluginOptions */)],

-  })

   .end();

 

 config.module

@@ -50,9 +46,6 @@ config.module
   .end()

   .use("postcss")

   .loader("postcss-loader")

-  .options({

-    plugins: () => [postcssPresetEnv(/* pluginOptions */)],

-  })

   .end()

   .use("sass")

   .loader("sass-loader")

@@ -73,18 +66,14 @@ config.resolve.extensions
   .add(".jsx")

   .add(".ts")

   .add(".tsx")

-  .end()

-  .plugin("pnp")

-  .use(PnpWebpackPlugin);

+  .end();

 

 config.resolve.alias.set("@", path.resolve(__dirname, "src/app"));

 

-config.resolveLoader.plugin("pnp").use(PnpWebpackPlugin.moduleLoader(module));

-

 config.output

   .path(path.resolve(__dirname, "dist/"))

-  .filename("[name].[hash].js")

-  .chunkFilename("[name].[hash].js")

+  .filename("[name].[contenthash].js")

+  .chunkFilename("[name].[contenthash].js")

   .publicPath("/");

 

 config.plugin("html").use(HtmlWebpackPlugin, [