Update and cleanup

Author: VaclavDanek

.eslintrc.js

@@ -32,15 +32,16 @@ const baseRestrictedImports = {
 }
 
 module.exports = {
+    root: true,
     plugins: ["@typescript-eslint", "react", "react-hooks", "jsx-a11y", "jest", "testing-library", "import"],
     env: {
         amd: true,
         es2022: true,
         browser: true,
+        node: true,
     },
     reportUnusedDisableDirectives: true,
     parserOptions: {
-        parser: "@babel/eslint-parser",
         ecmaVersion: "latest",
         ecmaFeatures: {
             jsx: true,
@@ -249,7 +250,11 @@ module.exports = {
         },
         {
             // JSX A11y - This plugin is being extended because there's an extensive amount of custom options automatically configured. - https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
-            extends: ["plugin:jsx-a11y/recommended"],
+            extends: [
+                "plugin:jsx-a11y/recommended",
+                "plugin:react/recommended",
+                "eslint:recommended",
+            ],
             files: ["*.jsx", "*.tsx"],
             rules: {
                 // React - https://github.com/jsx-eslint/eslint-plugin-react#list-of-supported-rules
@@ -426,11 +431,12 @@ module.exports = {
         "no-class-assign": "error",
         "no-compare-neg-zero": "error",
         "no-cond-assign": "error",
+        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
         "no-const-assign": "error",
         "no-constant-condition": "error",
         "no-constructor-return": "error",
         "no-control-regex": "error",
-        "no-debugger": "warn",
+        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
         "no-dupe-args": "error",
         "no-dupe-class-members": "error",
         "no-dupe-else-if": "error",

.gitignore

@@ -35,3 +35,4 @@ yarn.lock
 tmp/*
 !tmp/readme.md
 webpack-report
+**/__snapshots__/

README.md

@@ -8,7 +8,7 @@ React starter-kit project
 * eslint
 * react-redux with seamless-immutable state
 * reduxsauce
-* react-router
+* react-router-dom
 * axios
 * jest
 * i18n-react
@@ -23,5 +23,8 @@ React starter-kit project
 3. visit [http://localhost:3000](http://localhost:3000/)
 
 ## Build
-1. npm build or yarn build
+1. npm run build or yarn build
 2. go to "dist" folder, located in the root directory
+
+## Test (jest)
+npm test or yarn test

jest.config.js

@@ -1,6 +1,13 @@
 /* eslint-disable no-undef */
 
 module.exports = {
-  rootDir: 'src',
+  rootDir: "src",
   verbose: true,
-}
+  transform: {
+    "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
+  },
+  moduleNameMapper:{
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy" 
+  },
+  testEnvironment: "jsdom"
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-skeleton-app",
+  "name": "react-redux-starter-kit",
   "version": "0.0.1",
   "description": "React starter-kit project",
   "author": "Václav Daněk",
@@ -16,74 +16,77 @@
     "type-check": "tsc"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@redux-devtools/extension": "^3.2.5",
-    "axios": "^1.3.6",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@redux-devtools/extension": "^3.3.0",
+    "axios": "^1.8.4",
     "bootstrap": "5.3.3",
-    "classnames": "^2.2.5",
-    "i18n-react": "^0.7.0",
-    "js-utils": "https://github.com/VaclavDanek/js-utils.git",
+    "classnames": "^2.5.1",
+    "i18next": "^24.2.3",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "js-utils": "github:VaclavDanek/js-utils",
     "loaders.css": "^0.1.2",
-    "moment": "^2.22.1",
+    "moment": "^2.30.1",
     "node-sass": "^9.0.0",
-    "react": "18.3.1",
-    "react-device-detect": "2.2.3",
-    "react-dom": "18.3.1",
+    "react": "^18.3.1",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.4.1",
     "react-loaders": "^3.0.1",
-    "react-redux": "^9.1.2",
-    "react-router-dom": "^6.10.0",
-    "reactstrap": "^9.1.9",
-    "redbox-react": "^1.6.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^6.30.0",
+    "reactstrap": "^9.2.3",
     "redux": "^5.0.1",
     "redux-observable": "^3.0.0-rc.2",
     "redux-thunk": "^3.1.0",
-    "reduxsauce": "^1.2.1",
-    "rxjs": "^7.8.0",
+    "reduxsauce": "^1.3.0",
+    "rxjs": "^7.8.2",
     "seamless-immutable": "^7.1.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/eslint-parser": "^7.21.3",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.21.4",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@types/enzyme": "^3.10.13",
-    "@types/jest": "^29.5.1",
-    "@types/react-dom": "^18.2.1",
-    "@types/seamless-immutable": "^7.1.16",
-    "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^8.9.0",
-    "@typescript-eslint/parser": "^8.9.0",
-    "autoprefixer": "^10.4.13",
-    "babel-loader": "^9.1.2",
+    "@babel/core": "^7.26.10",
+    "@babel/eslint-parser": "^7.27.0",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.16",
+    "@types/jest": "^29.5.14",
+    "@types/react-dom": "^18.3.6",
+    "@types/seamless-immutable": "^7.1.19",
+    "@types/webpack-env": "^1.18.8",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "7.1.2",
-    "eslint": "^9.12.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-testing-library": "^6.3.0",
-    "html-webpack-plugin": "^5.5.1",
-    "jest": "^29.4.3",
-    "mini-css-extract-plugin": "^2.7.2",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.24.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-testing-library": "^6.5.0",
+    "html-webpack-plugin": "^5.6.3",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.3.3",
-    "react-refresh": "^0.14.0",
-    "react-test-renderer": "^18.2.0",
-    "sass-loader": "^16.0.2",
-    "style-loader": "4.0.0",
-    "typescript": "^5.0.4",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^5.80.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.2",
-    "webpack-dashboard": "^3.3.7",
-    "webpack-dev-server": "^5.1.0"
+    "prettier": "^3.5.3",
+    "react-refresh": "^0.14.2",
+    "react-test-renderer": "^18.3.1",
+    "sass-loader": "^16.0.5",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.14",
+    "ts-jest": "^29.3.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.5",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dashboard": "^3.3.8",
+    "webpack-dev-server": "^5.2.1"
   }
 }

src/containers/RootContainer.tsx renamed to src/App.tsx

@@ -1,57 +1,55 @@
-import I18n from 'i18n-react'
 import { Component } from 'react'
 import { connect } from 'react-redux'
+import { compose } from 'redux'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
-import * as config from '../config'
+import { withTranslation } from 'react-i18next'
+import * as config from './config'
 
 // pages
-import { HomePage } from '../pages'
+import { HomePage } from './pages'
 
 // components
-import { Loader, Modals } from '../components'
+import { Loader, Modals } from './components'
 
 // redux
-import { generalActions } from '../redux/generalRedux'
+import { generalActions } from './redux/generalRedux'
 
 // types
-import type { State } from '../store/reducers'
-import type { CustomErrorEvent } from '../types/errorTypes'
-import type { ModalKey } from '../components/Modals'
+import type { ElementType } from 'react'
+import type { WithTranslation } from 'react-i18next'
+import type { State } from './store/reducers'
+import type { CustomErrorEvent } from './types/errorTypes'
+import type { ModalKey } from './components/Modals'
 
 // styles
 import 'bootstrap/scss/bootstrap.scss'
-import '../styles/main.scss'
-import '../styles/mobile.scss'
+import './styles/main.scss'
 
-type RootContainerProps = Readonly<ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps>
+type AppContainerProps = Readonly<WithTranslation & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps>
 
-interface RootContainerState {
+interface AppContainerState {
   hasError?: boolean;
 }
 
-class RootContainer extends Component<RootContainerProps, RootContainerState> {
-  state: RootContainerState = {}
+class AppContainer extends Component<AppContainerProps, AppContainerState> {
+  state: AppContainerState = {}
 
-  constructor(props: RootContainerProps) {
+  constructor(props: AppContainerProps) {
     super(props)
     window.addEventListener('error', this.handleOnError)
   }
 
   static getDerivedStateFromProps(
-    nextProps: RootContainerProps, 
-    prevState: RootContainerState, // eslint-disable-line @typescript-eslint/no-unused-vars
-  ): Partial<RootContainerState> | null {
-    const { redirectUrl, setRedirectUrl } = nextProps
-    if (redirectUrl) { // reset after every redirect
-      setRedirectUrl('')
-    }
+    nextProps: AppContainerProps, 
+    prevState: AppContainerState, // eslint-disable-line @typescript-eslint/no-unused-vars
+  ): Partial<AppContainerState> | null {
     return null
   }
 
-   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  static getDerivedStateFromError(error: Error): Partial<RootContainerState> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  static getDerivedStateFromError(error: Error): Partial<AppContainerState> {
     return { hasError: true }
   }
 
@@ -70,26 +68,18 @@ class RootContainer extends Component<RootContainerProps, RootContainerState> {
   }
 
   handleOnError = (errorEvent?: ErrorEvent | CustomErrorEvent): void => {
-    const { addAlert, onActionFailure, onStopFetching } = this.props
+    const { addAlert, onActionFailure, onStopFetching, t } = this.props
 
     onStopFetching() // just for sure...
     if (errorEvent && !config.ignoredErrorEventMessages.includes(errorEvent.message)) {
       onActionFailure(errorEvent)
       if (process.env.NODE_ENV === 'production' && config.showErrorAlert) {
-        addAlert({ message: I18n.translate('alerts.onGlobalError') as string, type: 'warning' })
+        addAlert({ message: t('alerts.onGlobalError') as string, type: 'warning' })
       }
     }
   }
 
-  handleOnRedirect = (path: string): void => {
-    this.props.setRedirectUrl(path)
-  }
-
-  handleOnReload = (): void => {
-    window.location.reload()
-  }
-
-  handleOnCloseAlert = (index: number): void => {
+  handleCloseAlert = (index: number): void => {
     this.props.removeAlert(index)
   }
 
@@ -98,11 +88,11 @@ class RootContainer extends Component<RootContainerProps, RootContainerState> {
   }
 
   render(): JSX.Element {
-    const { handleOnCloseAlert, handleToggleModal } = this
-    const { alerts, fetching, modals, redirectUrl } = this.props
+    const { handleCloseAlert, handleToggleModal } = this
+    const { alerts, fetching, modals } = this.props
 
     return <>
-      <BrowserRouter basename={config.basename}>
+      <BrowserRouter basename={process.env.NODE_ENV === 'production' ? config.basename : undefined}>
         <Routes>
           <Route
             path='/'
@@ -117,12 +107,11 @@ class RootContainer extends Component<RootContainerProps, RootContainerState> {
             } 
           />
         </Routes>
-        {redirectUrl && <Navigate to={redirectUrl} />}
       </BrowserRouter>
       <Modals
         alerts={alerts}
         modals={modals}
-        onCloseAlert={handleOnCloseAlert}
+        onCloseAlert={handleCloseAlert}
         onToggleModal={handleToggleModal}
       />
       <Loader active={fetching > 0} />
@@ -140,8 +129,10 @@ const mapDispatchToProps = {
   onActionFailure: generalActions.onActionFailure,
   onStopFetching: generalActions.onStopFetching,
   removeAlert: generalActions.removeAlert,
-  setRedirectUrl: generalActions.setRedirectUrl,
   toggleModal: generalActions.toggleModal,
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(RootContainer)
+export default compose<ElementType>(
+  withTranslation(),
+  connect(mapStateToProps, mapDispatchToProps),
+)(AppContainer)