added create-react-app

.env

@@ -1,4 +1,4 @@
-PUBLIC_PATH = https://localhost:3000/
+REACT_APP_PUBLIC_PATH = https://localhost:3000/
-API_ADDR = https://alpha-map.vault48.org:3001
+REACT_APP_API_ADDR = https://alpha-map.vault48.org:3001
-OSRM_URL = https://vault48.org:5001/route/v1
+REACT_APP_OSRM_URL = https://vault48.org:5001/route/v1
-OSRM_PROFILE = bike
+REACT_APP_OSRM_PROFILE = bike

.env.example

@@ -1,4 +1,4 @@
-PUBLIC_PATH = https://alpha-map.vault48.org/
+REACT_APP_PUBLIC_PATH = https://alpha-map.vault48.org/
-API_ADDR = https://alpha-map.vault48.org:3001
+REACT_APP_API_ADDR = https://alpha-map.vault48.org:3001
-OSRM_URL = https://vault48.org:5001/route/v1
+REACT_APP_OSRM_URL = https://vault48.org:5001/route/v1
-OSRM_PROFILE = bike
+REACT_APP_OSRM_PROFILE = bike

.eslintrc

@@ -1,72 +0,0 @@
-{
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "plugins": [
-    "react",
-    "jsx-a11y",
-    "import"
-  ],
-  "rules": {
-    "quotes": 1,
-    "comma-dangle": 0,
-    "no-restricted-syntax": 1,
-    "new-cap": 1,
-    "no-continue": 1,
-    "no-underscore-dangle": 0,
-    "global-require": 1,
-    "react/no-multi-comp": 1,
-    "react/jsx-filename-extension": 0,
-    "import/no-unresolved": 1,
-    "import/prefer-default-export": 0,
-    "import/extensions": 1,
-    "no-return-assign": 1,
-    "max-len": 1,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
-    "jsx-a11y/interactive-supports-focus": 0,
-    "arrow-parens": 0,
-    "jsx-a11y/no-autofocus": 0,
-    "react/jsx-closing-tag-location": 0,
-    "prefer-promise-reject-errors": 0,
-    "jsx-a11y/mouse-events-have-key-events": 0,
-    "camelcase": 0,
-    "no-trailing-spaces": 0
-  },
-  "globals": {
-    "document": false,
-    "window": false,
-    "HTMLInputElement": false,
-    "HTMLDivElement": false,
-    "Headers": false,
-    "FormData": false,
-    "WebSocket": true,
-    "Element": true,
-    "localStorage": true,
-    "navigator": true
-  },
-  "env": {},
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "webpack.config.js": {
-          "resolve": {
-            "alias": {
-              "$components": "src/components",
-              "$containers": "src/containers",
-              "$constants": "src/constants",
-              "$sprites": "src/sprites",
-              "$config": "config",
-              "$styles": "src/styles",
-              "$redux": "src/redux",
-              "$utils": "src/utils",
-              "$modules": "src/modules"
-            },
-
-            "extensions": [".js", ".jsx", ".scss"],
-            "modules": ["config", "src", "node_modules"]
-          }
-        }
-      }
-    }
-  }
-}

craco.config.js

@@ -0,0 +1,48 @@
+const CracoAlias = require('craco-alias');
+// const fastRefreshCracoPlugin = require('craco-fast-refresh');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '~': `src`,
+    },
+    output: {
+      publicPath: '/',
+    },
+  },
+  eslint: {
+    enable: false,
+    mode: 'file',
+  },
+  jest: {
+    setupTestFrameworkScriptFile: '<rootDir>/src/setupTests.js',
+    configure: {
+      moduleNameMapper: {
+        '^~/(.*)$': '<rootDir>/src/$1',
+        '^.+\\.scss$': 'identity-obj-proxy',
+      },
+      snapshotSerializers: ['enzyme-to-json/serializer'],
+      moduleFileExtensions: ['js', 'json', 'ts', 'tsx', 'jsx', 'node'],
+      verbose: true,
+      roots: ['<rootDir>/src'],
+      transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+        '^.+\\.ts?$': 'babel-jest',
+        '^.+\\.js?$': 'ts-jest',
+        '^.+\\.jsx?$': 'babel-jest',
+      },
+      preset: 'ts-jest/presets/js-with-ts',
+      testEnvironment: 'node',
+    },
+  },
+  plugins: [
+    // { plugin: fastRefreshCracoPlugin },
+    {
+      plugin: CracoAlias,
+      options: {
+        source: 'tsconfig',
+        tsConfigPath: 'tsconfig.paths.json',
+      },
+    },
+  ],
+};

package.json

@@ -5,105 +5,70 @@
   "description": "Beta Map",
   "main": "./src/js/index.js",
   "scripts": {
-    "start": "NODE_ENV=development webpack-dev-server --mode development --hot --open --inline --progress",
+    "start": "craco start",
-    "build": "NODE_ENV=production webpack --env production --config=webpack.config.js --progress -p",
+    "build": "craco build",
-    "profile": "webpack --json > stats.json"
+    "test": "craco test"
   },
   "author": "Grigory Chervoplyas",
   "license": "ISC",
   "keywords": [],
   "devDependencies": {
-    "@babel/cli": "^7.0.0-rc.1",
-    "@babel/preset-env": "^7.0.0-rc.1",
     "@types/classnames": "^2.2.7",
     "@types/leaflet": "^1.4.3",
     "@types/node": "^11.9.0",
     "@types/ramda": "^0.26.39",
     "@types/react": "16.8.1",
-    "awesome-typescript-loader": "^5.2.1",
+    "@types/react-dom": "^17.0.3",
-    "babel-core": "^6.26.0",
+    "craco": "^0.0.3",
-    "babel-eslint": "^8.2.3",
+    "craco-alias": "^2.2.0"
-    "babel-loader": "^7.1.4",
-    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-ramda": "^2.0.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "css-loader": "^0.28.11",
-    "dotenv-webpack": "^7.0.2",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-import-resolver-webpack": "^0.9.0",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-babel": "^5.0.0",
-    "eslint-plugin-import": "^2.11.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.2.0",
-    "identity-obj-proxy": "^3.0.0",
-    "less-loader": "^4.1.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "style-loader": "^0.21.0",
-    "sw-precache-webpack-plugin": "^0.11.5",
-    "ts-node": "^8.0.1",
-    "typescript": "^3.7.4",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.6.0",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-manifest-plugin": "^2.0.4",
-    "webpack-pwa-manifest": "^4.0.0"
   },
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "^0.21.1",
-    "babel-runtime": "^6.26.0",
-    "body-parser": "^1.18.3",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^0.1.9",
+    "craco-fast-refresh": "^1.0.5",
-    "cookie-parser": "~1.4.3",
     "croppr": "^2.3.1",
-    "debug": "~2.6.9",
     "file-saver": "^2.0.0",
     "gpx-parser-builder": "^1.0.2",
-    "history": "^4.7.2",
-    "http-errors": "~1.6.2",
-    "js-md5": "^0.7.3",
     "leaflet": "^1.6.0",
     "leaflet-editable": "^1.1.0",
     "leaflet-geometryutil": "^0.9.0",
     "leaflet-routing-machine": "^3.2.12",
     "leaflet.markercluster": "^1.4.1",
-    "less": "^3.8.1",
-    "less-middleware": "~2.2.1",
-    "lodash": "^4.17.19",
-    "npm": "^6.14.3",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pt-sans-cyrillic": "0.0.4",
     "raleway-cyrillic": "^4.0.2",
     "ramda": "^0.26.1",
-    "rc-slider": "8.5.0",
+    "rc-slider": "^9.7.2",
-    "react": "16.8.1",
+    "react": "^17.0.2",
-    "react-dom": "16.8.1",
+    "react-dom": "^17.0.2",
-    "react-hot-loader": "^4.1.1",
     "react-infinite-scroller": "^1.2.2",
-    "react-rangeslider": "^2.2.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
+    "react-scripts": "^4.0.3",
     "react-scrollbar": "^0.5.4",
     "reactrangeslider": "^3.0.6",
     "redux": "^4.0.1",
     "redux-persist": "^5.10.0",
     "redux-saga": "^1.0.0",
-    "reduxsauce": "^1.0.0",
-    "scrypt": "^6.0.3",
-    "throttle-debounce": "^2.1.0",
     "tt-react-custom-scrollbars": "^4.2.1-tt2",
     "typeface-pt-sans": "0.0.54",
-    "typesafe-actions": "^3.0.0",
+    "typescript": "^4.2.4",
-    "uuid": "^3.4.0",
+    "uuid": "^3.4.0"
-    "webpack-git-hash": "^1.0.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   }
 }

src/components/Cursor.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Icon } from '~/components/panels/Icon';
-import { MODES } from '~/constants/modes';
-import { STICKERS } from '~/constants/stickers';
-import { StickerIcon } from '~/components/StickerIcon';
-import { connect } from 'react-redux';
-import { selectEditor } from '~/redux/editor/selectors'
-
-const mapStateToProps = state => ({
-  editor: selectEditor
-});
-
-const mapDispatchToProps = {};
-
-class CursorUnconnected extends React.PureComponent<Props, {}> {
-  componentDidMount() {
-    window.addEventListener('mousemove', this.moveCursor);
-  }
-
-  moveCursor = e => {
-    if (!e.clientX || !e.clientY || !this.cursor || !this.cursor.style) return;
-
-    const { clientX, clientY } = e;
-
-    this.cursor.style.transform = `translate3d(${clientX}px, ${clientY}px, 0)`;
-  };
-
-  cursor: HTMLElement = null;
-
-  render() {
-    const {
-      editor: { mode, set, sticker },
-    } = this.props;
-
-    const activeSticker = sticker && set && STICKERS[set] && STICKERS[set].layers[sticker];
-
-    return (
-      <div
-        className="cursor-tooltip desktop-only"
-        ref={el => {
-          this.cursor = el;
-        }}
-      >
-        {mode === MODES.ROUTER && <Icon icon="icon-router" />}
-        {mode === MODES.POLY && <Icon icon="icon-poly" />}
-        {mode === MODES.STICKERS && activeSticker && <StickerIcon sticker={sticker} set={set} />}
-      </div>
-    );
-  }
-}
-
-const Cursor = connect()(CursorUnconnected);
-
-export { Cursor }

src/components/search/MapListDialogHead.tsx

@@ -46,7 +46,7 @@ const MapListDialogHead: FC<Props> = memo(
               onChange={onDistanceChange}
               defaultValue={[0, 10000]}
               value={distance}
-              pushable={25}
+              pushable
               disabled={min >= max}
             />
           ) : (

src/containers/App.tsx

@@ -5,7 +5,6 @@ import { Fills } from '~/components/Fills';
 import { UserPanel } from '~/components/panels/UserPanel';
 import { connect } from 'react-redux';
 
-import { hot } from 'react-hot-loader';
 import { Renderer } from '~/components/renderer/Renderer';
 import { editorHideRenderer, editorSetDialogActive } from '~/redux/editor/actions';
 import { LeftDialog } from '~/containers/LeftDialog';
@@ -60,7 +59,7 @@ const mapStateToProps = ({
     dialog,
     dialog_active,
     renderer,
-    activeSticker: { sticker = null, set = null },
+    activeSticker: { sticker, set },
   },
 }: IState) => ({
   renderer_active: renderer.renderer_active,
@@ -73,6 +72,6 @@ const mapStateToProps = ({
 
 const mapDispatchToProps = { editorHideRenderer, editorSetDialogActive };
 
-const App = connect(mapStateToProps, mapDispatchToProps)(hot(module)(AppUnconnected));
+const App = connect(mapStateToProps, mapDispatchToProps)(AppUnconnected);
 
 export { App };

src/index.tsx

@@ -13,7 +13,7 @@ const { store, persistor } = configureStore();
 
 pushLoaderState(10);
 
-export const Index = () => (
+const Index = () => (
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <App />
@@ -22,14 +22,3 @@ export const Index = () => (
 );
 
 ReactDOM.render(<Index />, document.getElementById('index'));
-
-if (process.env.NODE_ENV && process.env.NODE_ENV !== 'development') {
-  (function() {
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker
-        .register('./service-worker.js', { scope: '/' })
-        .then(() => console.log('Service Worker registered successfully.'))
-        .catch(error => console.log('Service Worker registration failed:', error));
-    }
-  })();
-}

src/utils/map/DomMarker.js

@@ -1,7 +1,7 @@
 import { DivIcon } from 'leaflet';
 
 export const DomMarker = DivIcon.extend({
-  initialize: function (options) {
+  initialize: function (options: any) {
     this.options = options;
   },
 
@@ -15,7 +15,7 @@ export const DomMarker = DivIcon.extend({
 
     this._setIconStyles(element, 'icon');
 
-    return element; 
+    return element;
   }
 });
 

tsconfig.json

@@ -1,30 +1,32 @@
 {
-  "allowSyntheticDefaultImports": true,
+  "extends": "./tsconfig.paths.json",
   "compilerOptions": {
-    "outDir": "./dist/",
-    "sourceMap": true,
-    "noImplicitAny": false,
-    "allowSyntheticDefaultImports": true,
-    "module": "commonjs",
     "target": "es6",
-    "jsx": "react",
+    "lib": [
-    "lib": [ "es2015", "DOM", "es6" ],
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
     "isolatedModules": true,
-    "baseUrl": ".",
+    "noEmit": true,
-    "paths": {
+    "jsx": "react-jsx",
-      "~/*": [ "src/*" ],
+    "noImplicitAny": false
-      "custom_modules/*": [
-        "src/custom_modules/*"
-      ]
-    }
   },
   "include": [
-    "./src/index.tsx",
+    "src"
-    "./backend/**/*",
-    "./custom.d.ts"
   ],
   "exclude": [
-    "./src/_modules/**/*"
+    "node_modules",
+    "**/*.spec.ts"
   ]
 }

tsconfig.paths.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  }
+}

webpack.config.js

@@ -1,164 +0,0 @@
-const webpack = require('webpack');
-
-const HtmlWebPackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const path = require('path');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const WebpackPwaManifest = require('webpack-pwa-manifest');
-const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
-const PWA_CONFIG = require('./src/config/pwa');
-const Dotenv = require('dotenv-webpack');
-
-/* Plugins */
-
-const htmlPlugin = new HtmlWebPackPlugin({
-  template: './src/index.html',
-  filename: './index.html',
-  title: 'Map',
-  hash: false,
-  favicon: 'src/sprites/favicon.png',
-});
-
-const isDevelopment = process.env.NODE_ENV !== 'production';
-
-const miniCssExractPlugin = new MiniCssExtractPlugin({
-  filename: isDevelopment ? '[name].css' : '[name].[hash].css',
-  chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
-});
-
-const devtool = isDevelopment ? 'cheap-module-eval-source-map' : 'source-map';
-
-/* Resolve */
-
-const resolve = {
-  alias: {
-    '~': path.join(__dirname, 'src'),
-  },
-  extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json']
-};
-
-/* Configuration */
-
-module.exports = () => {
-  /* Export */
-  const plugins = [
-    htmlPlugin,
-    new webpack.IgnorePlugin(/^osrm-text-instructions$/, /leaflet-routing-machine$/),
-    miniCssExractPlugin,
-    new webpack.HashedModuleIdsPlugin(),
-    new WebpackPwaManifest(PWA_CONFIG.MANIFEST(path.resolve('./src/sprites/app.png'))),
-    new Dotenv(),
-    new SWPrecacheWebpackPlugin({
-      cacheId: 'my-domain-cache-id',
-      dontCacheBustUrlsMatching: /\.\w{8}\./,
-      filename: 'service-worker.js',
-      minify: true,
-      navigateFallback: `${PWA_CONFIG.PUBLIC_PATH}index.html`,
-      staticFileGlobsIgnorePatterns: [/\.map$/, /manifest\.json$/],
-    }),
-  ];
-
-  return {
-    module: {
-      rules: [
-        {
-          test: /\.css$/,
-          use: [
-            { loader: 'style-loader' },
-            { loader: 'css-loader' },
-          ]
-        },
-        {
-          test: /\.less$/,
-          use: [
-            { loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader },
-            // { loader: 'style-loader' },
-            { loader: 'css-loader' },
-            { loader: 'less-loader' }
-          ]
-        },
-        {
-          test: /\.(ts|tsx|js|jsx)$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader'
-          }
-        },
-        { test: /\.(ts|tsx)?$/, loader: 'awesome-typescript-loader' },
-        {
-          test: /\.(eot|ttf|woff|woff2|otf)$/,
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/'
-            }
-          }
-        },
-        {
-          test: /\.(png|svg)$/,
-          use: {
-            loader: 'file-loader',
-            options: {}
-          }
-        }
-      ]
-    },
-    devtool,
-    resolve,
-    plugins,
-    entry: {
-      app: './src/index.tsx',
-    },
-    output: {
-      publicPath: '/',
-      filename: isDevelopment ? '[name].[hash].js' : '[name].[contenthash].js',
-    },
-    optimization: {
-      splitChunks: {
-        cacheGroups: {
-          // vendor chunk (uncomment if you want all node_modules to be in vendor.js bundle
-          leaflet: {
-            name: 'leaflet',
-            chunks: 'all',
-            test: /node_modules\/leaflet/,
-            priority: 21,
-          },
-          vendor: {
-            name: 'vendor',
-            chunks: 'all',
-            test: /node_modules/,
-            priority: 20,
-            reuseExistingChunk: true,
-          },
-          commons: {
-            name: 'commons',
-            chunks: 'initial',
-            minChunks: 2,
-            minSize: 0,
-            reuseExistingChunk: true,
-          }
-        }
-      },
-      minimizer: [
-        new UglifyJsPlugin({
-          cache: true,
-          parallel: true,
-          sourceMap: true // set to true if you want JS source maps
-        }),
-        new OptimizeCSSAssetsPlugin({})
-      ],
-      occurrenceOrder: true // To keep filename consistent between different modes (for example building only)
-    },
-    devServer: {
-      historyApiFallback: true,
-      port: 8000,
-      // host: '192.168.88.40',
-      contentBase: 'dist',
-      publicPath: '/',
-      hot: true,
-    }
-  };
-};
-