Update to React 17

.eslintignore

@@ -10,4 +10,7 @@ coverage
 src/__tests__
 src/assets
 src/config
-src/serviceWorker.js
+src/serviceWorker.js
+
+/.eslintrc.js
+/jest.config.js

.eslintrc.js

@@ -1,22 +1,27 @@
 module.exports = {
-    root: true,
-    parser: '@typescript-eslint/parser',
-    plugins: [
-        '@typescript-eslint',
-    ],
-    parserOptions: {
-        project: './tsconfig.json',
-    },
-    extends: [
-        'airbnb-typescript',
-    ],
-    rules: {
-        "react/jsx-props-no-spreading": 0,
-        "import/no-cycle": 0,
-        "react/destructuring-assignment": 0,
-        "import/prefer-default-export": 0,
-        "react/jsx-one-expression-per-line": 0,
-        "max-len": ["error", {"code": 120}],
-        "react/button-has-type": 0,
-    }
-};
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier",
+  ],
+  rules: {
+    "react/jsx-props-no-spreading": 0,
+    "import/no-cycle": 0,
+    "react/destructuring-assignment": 0,
+    "import/prefer-default-export": 0,
+    "max-len": ["error", { code: 120 }],
+    "react/button-has-type": 0,
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-unused-vars": 1,
+  },
+};

.github/workflows/nodejs.yml

@@ -15,7 +15,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: '12.x'
+        node-version: '18.x'
     - name: Get yarn cache directory path
       id: yarn-cache-dir-path
       run: echo "::set-output name=dir::$(yarn cache dir)"

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "bracketSameLine": false
+}

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.17.1

jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts']
+};

package.json

@@ -3,64 +3,38 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/react-common": "^3.1.3",
-    "@apollo/react-components": "^3.1.3",
-    "@apollo/react-hooks": "^3.1.3",
-    "@apollo/react-testing": "^3.1.3",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/history": "^4.7.5",
-    "@types/jest": "^25.1.4",
-    "@types/node": "^13.9.0",
-    "@types/node-sass": "^4.11.0",
-    "@types/react": "^16.9.23",
-    "@types/react-click-outside": "^3.0.3",
-    "@types/react-dom": "^16.9.5",
-    "@types/react-router-dom": "^5.1.3",
-    "@types/sinon": "^7.5.2",
-    "apollo-cache-inmemory": "^1.6.5",
-    "apollo-client": "^2.6.8",
-    "apollo-link": "^1.2.13",
-    "apollo-link-error": "^1.1.12",
-    "apollo-link-http": "^1.5.16",
+    "@apollo/client": "^3.8.0",
     "apollo-upload-client": "^14.1.3",
     "chroma-js": "^2.1.0",
     "copy-to-clipboard": "^3.3.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
+    "graphql": "^16.7.1",
     "history": "^4.10.1",
     "moment": "^2.24.0",
     "moment-twitter": "^0.2.0",
-    "node-sass": "^4.13.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.12.1",
     "raven-js": "^3.27.2",
     "rc-progress": "^2.5.2",
-    "react": "^16.13.0",
+    "react": "^17.0.2",
     "react-click-outside": "^3.0.1",
-    "react-dom": "^16.13.0",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
+    "react-router-dom": "^5.1.3",
+    "react-scripts": "^5.0.1",
     "react-test-renderer": "^16.13.0",
     "react-toastify": "^5.5.0",
-    "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.88.2",
-    "simple-react-lightbox": "^3.6.5",
-    "typescript": "^3.8.3"
+    "sass": "^1.64.1",
+    "semantic-ui-css": "^2.5.0",
+    "semantic-ui-react": "^2.1.4"
   },
   "scripts": {
     "start": "PORT=9090 react-scripts start",
     "build": "REACT_APP_VERSION=$npm_package_version REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-scripts build && mv build dist",
     "test": "react-scripts test --testPathIgnorePatterns=src/config",
     "eject": "react-scripts eject",
     "lint:check": "eslint ./src --ext .js,.jsx,.ts,.tsx ./",
-    "lint:run": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix"
+    "lint:run": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix",
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -78,15 +52,35 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/enzyme": "^3.10.5",
+    "@types/jest": "^29.5.3",
+    "@types/node": "^13.9.0",
+    "@types/react": "^17.0.2",
+    "@types/react-click-outside": "^3.0.3",
     "@types/react-copy-to-clipboard": "^4.3.0",
-    "@typescript-eslint/eslint-plugin": "^2.19.0",
-    "@typescript-eslint/parser": "^2.23.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-typescript": "^7.0.0",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-router-dom": "^5.1.3",
+    "@types/testing-library__dom": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "enzyme": "^3.11.0",
+    "eslint": "^7.1.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.15.1",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "ts-jest": "^25.2.1"
+    "jest-environment-jsdom": "^29.6.2",
+    "prettier": "^3.0.1",
+    "react-responsive": "^9.0.2",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
+  },
+  "resolutions": {
+    "@types/react": "17.0.2"
   }
 }

src/App.tsx

@@ -1,62 +1,94 @@
-import React from 'react';
-import { Responsive } from 'semantic-ui-react';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import React from "react";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { Router, Route, Switch } from "react-router-dom";
+import * as routes from "./routes";
+import history from "./support/history";
 import {
-  Router, Route, Switch,
-} from 'react-router-dom';
-import * as routes from './routes';
-import history from './support/history';
-import {
-  FinishForgotPasswordPage, ForgotPasswordPage, LoginPage, RegisterPage,
-} from './modules/login';
-import { FeedPage } from './modules/feed';
-import { NotificationsPage } from './modules/notifications';
-import { ResetPasswordPage, UserPage } from './modules/user';
-import { InvitePage, SettingsPage } from './modules/settings';
-import { StatisticsPage } from './modules/statistics';
-import { ChooseTeamPage, CreateTeamPage } from './modules/choose-team';
-import { ManageTeamPage } from './modules/manage-team/ManageTeamPage';
-import AuthenticatedRoute from './components/AuthenticatedRoute';
+  FinishForgotPasswordPage,
+  ForgotPasswordPage,
+  LoginPage,
+  RegisterPage,
+} from "./modules/login";
+import { FeedPage } from "./modules/feed";
+import { NotificationsPage } from "./modules/notifications";
+import { ResetPasswordPage, UserPage } from "./modules/user";
+import { InvitePage, SettingsPage } from "./modules/settings";
+import { StatisticsPage } from "./modules/statistics";
+import { ChooseTeamPage, CreateTeamPage } from "./modules/choose-team";
+import { ManageTeamPage } from "./modules/manage-team/ManageTeamPage";
+import AuthenticatedRoute from "./components/AuthenticatedRoute";
 
 const ToastWrapper = () => (
-  <ToastContainer bodyClassName="toast-body" toastClassName="toast" autoClose={4000} pauseOnHover />
+  <ToastContainer
+    bodyClassName="toast-body"
+    toastClassName="toast"
+    autoClose={4000}
+    pauseOnHover
+  />
 );
 
 function App() {
   return (
     <div>
-      <Responsive>
-        <Router history={history}>
-          <Switch>
-            <Route path={routes.PATH_LOGIN}>
-              <LoginPage />
-            </Route>
-            <AuthenticatedRoute allowNoTeam path={routes.PATH_NOTIFICATIONS} component={NotificationsPage} />
-            <AuthenticatedRoute allowNoTeam path={routes.PATH_USER} component={UserPage} />
-            <AuthenticatedRoute path={routes.PATH_STATISTICS} component={StatisticsPage} />
-            <AuthenticatedRoute allowNoTeam path={routes.PATH_SETTINGS} component={SettingsPage} />
-            <AuthenticatedRoute path={routes.PATH_INVITE} component={InvitePage} />
-            <AuthenticatedRoute allowNoTeam path={routes.PATH_CHOOSE_TEAM} component={ChooseTeamPage} />
-            <AuthenticatedRoute allowNoTeam path={routes.PATH_CREATE_TEAM} component={CreateTeamPage} />
-            <AuthenticatedRoute path={routes.PATH_MANAGE_TEAM} component={ManageTeamPage} />
-            <Route path={routes.PATH_RESET_PASSWORD}>
-              <ResetPasswordPage />
-            </Route>
-            <Route path={routes.PATH_FINISH_RESET_PASSWORD}>
-              <FinishForgotPasswordPage />
-            </Route>
-            <Route path={routes.PATH_FORGOT_PASSWORD}>
-              <ForgotPasswordPage />
-            </Route>
-            <Route path={routes.PATH_REGISTER}>
-              <RegisterPage />
-            </Route>
-            <AuthenticatedRoute path={routes.PATH_FEED} component={FeedPage} />
-          </Switch>
-        </Router>
-        <ToastWrapper />
-      </Responsive>
+      <Router history={history}>
+        <Switch>
+          <Route path={routes.PATH_LOGIN}>
+            <LoginPage />
+          </Route>
+          <AuthenticatedRoute
+            allowNoTeam
+            path={routes.PATH_NOTIFICATIONS}
+            component={NotificationsPage}
+          />
+          <AuthenticatedRoute
+            allowNoTeam
+            path={routes.PATH_USER}
+            component={UserPage}
+          />
+          <AuthenticatedRoute
+            path={routes.PATH_STATISTICS}
+            component={StatisticsPage}
+          />
+          <AuthenticatedRoute
+            allowNoTeam
+            path={routes.PATH_SETTINGS}
+            component={SettingsPage}
+          />
+          <AuthenticatedRoute
+            path={routes.PATH_INVITE}
+            component={InvitePage}
+          />
+          <AuthenticatedRoute
+            allowNoTeam
+            path={routes.PATH_CHOOSE_TEAM}
+            component={ChooseTeamPage}
+          />
+          <AuthenticatedRoute
+            allowNoTeam
+            path={routes.PATH_CREATE_TEAM}
+            component={CreateTeamPage}
+          />
+          <AuthenticatedRoute
+            path={routes.PATH_MANAGE_TEAM}
+            component={ManageTeamPage}
+          />
+          <Route path={routes.PATH_RESET_PASSWORD}>
+            <ResetPasswordPage />
+          </Route>
+          <Route path={routes.PATH_FINISH_RESET_PASSWORD}>
+            <FinishForgotPasswordPage />
+          </Route>
+          <Route path={routes.PATH_FORGOT_PASSWORD}>
+            <ForgotPasswordPage />
+          </Route>
+          <Route path={routes.PATH_REGISTER}>
+            <RegisterPage />
+          </Route>
+          <AuthenticatedRoute path={routes.PATH_FEED} component={FeedPage} />
+        </Switch>
+      </Router>
+      <ToastWrapper />
     </div>
   );
 }