Updated dependencies. Removed old unsupported plugins. Fixed resulting prettier errors after upgrading to latest version.

frontend/.eslintrc

@@ -1,7 +1,7 @@
 {
 	"parser": "@typescript-eslint/parser",
 	"plugins": [
-		"prettier",
+		"prettier"
 	],
 	"extends": [
 		"react-app",
@@ -16,7 +16,10 @@
 	},
 	"rules": {
 		"prettier/prettier": [
-			"error"
+			"error",
+			{
+				"endOfLine": "auto"
+			}
 		],
 		"@typescript-eslint/ban-ts-comment": [
 			"error",
@@ -72,7 +75,7 @@
 			"warn",
 			{
 				"props": "never",
-				"children": "never",
+				"children": "never"
 			}
 		],
 		"no-restricted-globals": [

frontend/package.json

@@ -3,63 +3,32 @@
 	"version": "3.0.0",
 	"private": true,
 	"dependencies": {
-		"@chakra-ui/react": "^2.2.4",
+		"@chakra-ui/react": "^2.3.7",
 		"@emotion/react": "^11",
-		"@emotion/styled": "^11.9.3",
-		"@testing-library/jest-dom": "5.16.4",
-		"@testing-library/react": "13.3.0",
-		"@types/humps": "^2.0.2",
-		"@types/jest": "28.1.5",
-		"@types/lodash": "4.14.182",
-		"@types/node": "18.0.4",
-		"@types/react": "18.0.15",
-		"@types/react-dom": "18.0.6",
-		"@types/react-router-dom": "5.3.3",
-		"@types/react-table": "^7.7.12",
-		"@types/styled-components": "5.1.25",
-		"@typescript-eslint/eslint-plugin": "^5.30.6",
-		"@typescript-eslint/parser": "^5.30.6",
-		"babel-eslint": "^10.1.0",
-		"classnames": "^2.3.1",
+		"@emotion/styled": "^11.10.5",
+		"classnames": "^2.3.2",
 		"country-flag-icons": "^1.5.5",
-		"date-fns": "2.28.0",
-		"eslint": "^8.19.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-config-react-app": "^7.0.1",
-		"eslint-loader": "^4.0.2",
-		"eslint-plugin-flowtype": "^8.0.3",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jsx-a11y": "^6.6.0",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.30.1",
-		"eslint-plugin-react-hooks": "^4.6.0",
+		"date-fns": "2.29.3",
 		"formik": "^2.2.9",
-		"framer-motion": "^6",
+		"framer-motion": "^7",
 		"humps": "^2.0.1",
-		"jest-date-mock": "1.0.8",
-		"jest-fetch-mock": "3.0.3",
-		"jest-junit": "^14.0.0",
-		"jest-localstorage-mock": "2.4.21",
-		"jest-runner-eslint": "1.0.1",
 		"lodash": "4.17.21",
 		"moment": "2.29.4",
-		"node-sass": "^7.0.1",
-		"prettier": "2.7.1",
+		"node-sass": "^7.0.3",
 		"query-string": "7.1.1",
 		"react": "^18.2.0",
 		"react-async": "10.0.1",
 		"react-dom": "18.2.0",
 		"react-focus-lock": "^2.9.1",
-		"react-icons": "^4.4.0",
-		"react-intl": "^6.0.5",
+		"react-icons": "^4.6.0",
+		"react-intl": "^6.2.1",
 		"react-markdown": "^8.0.3",
-		"react-query": "^3.39.1",
-		"react-router-dom": "^6.3.0",
+		"react-query": "^3.39.2",
+		"react-router-dom": "^6.4.3",
 		"react-scripts": "5.0.1",
 		"react-table": "7.8.0",
-		"rooks": "5.11.8",
-		"tmp": "^0.2.1",
-		"typescript": "^4.7.4"
+		"rooks": "7.4.2",
+		"tmp": "^0.2.1"
 	},
 	"scripts": {
 		"start": "react-scripts start",
@@ -105,7 +74,38 @@
 		}
 	},
 	"devDependencies": {
-		"@formatjs/cli": "^5.0.2",
-		"@types/country-flag-icons": "^1.2.0"
+		"@formatjs/cli": "^5.1.3",
+		"@types/country-flag-icons": "^1.2.0",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react": "13.4.0",
+		"@types/humps": "^2.0.2",
+		"@types/jest": "29.2.2",
+		"@types/lodash": "4.14.188",
+		"@types/node": "18.11.9",
+		"@types/react": "18.0.25",
+		"@types/react-dom": "18.0.8",
+		"@types/react-router-dom": "5.3.3",
+		"@types/react-table": "^7.7.12",
+		"@types/styled-components": "5.1.26",
+		"@typescript-eslint/eslint-plugin": "^5.42.1",
+		"@typescript-eslint/parser": "^5.42.1",
+		"@babel/eslint-parser": "^7.19.1",
+		"typescript": "^4.8.4",
+		"jest-date-mock": "1.0.8",
+		"jest-fetch-mock": "3.0.3",
+		"jest-junit": "^14.0.1",
+		"jest-localstorage-mock": "2.4.22",
+		"jest-runner-eslint": "1.1.0",
+		"eslint": "^8.27.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-config-react-app": "^7.0.1",
+		"eslint-webpack-plugin": "^3.2.0",
+		"eslint-plugin-flowtype": "^8.0.3",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jsx-a11y": "^6.6.1",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-react": "^7.31.10",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"prettier": "2.7.1"
 	}
 }

frontend/src/api/npm/base.ts

@@ -11,8 +11,7 @@ interface BuildUrlArgs {
 function buildUrl({ url, params }: BuildUrlArgs) {
 	const endpoint = url.replace(/^\/|\/$/g, "");
 	const apiParams = params ? `?${queryString.stringify(params)}` : "";
-	const apiUrl = `/api/${endpoint}${apiParams}`;
-	return apiUrl;
+	return `/api/${endpoint}${apiParams}`;
 }
 
 function buildAuthHeader(): Record<string, string> | undefined {

frontend/src/locale/IntlProvider.tsx

@@ -1,9 +1,9 @@
 import { createIntl, createIntlCache } from "react-intl";
 
-import langDe from "./lang/de.json";
-import langEn from "./lang/en.json";
-import langFa from "./lang/fa.json";
-import langList from "./lang/lang-list.json";
+import langDe from "./src/de.json";
+import langEn from "./src/en.json";
+import langFa from "./src/fa.json";
+import langList from "./src/lang-list.json";
 
 // first item of each array should be the language code,
 // not the country code
@@ -54,12 +54,14 @@ const cache = createIntlCache();
 
 const initialMessages = loadMessages(getLocale());
 let intl = createIntl(
+	// @ts-ignore Typescript wants this to be a record
 	{ locale: getLocale(), messages: initialMessages },
 	cache,
 );
 
 const changeLocale = (locale: string): void => {
 	const messages = loadMessages(locale);
+	// @ts-ignore Typescript wants this to be a record
 	intl = createIntl({ locale, messages }, cache);
 	window.localStorage.setItem("locale", locale);
 	document.documentElement.lang = locale;