Code cleanup

.prettierrc

@@ -1,4 +1,20 @@
 {
   "tabWidth": 2,
-  "useTabs": false
+  "useTabs": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "react",
+    "@mui/material",
+    "@mui/material/(.*)",
+    "@mui/icons-material",
+    "@mui-icons",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]",
+    "^[.]/[^./]",
+    "^[.]/[^./]/(.*)$",
+    "^[.]/",
+    "<INTERNAL_MODULES>"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

eslint.config.mjs

@@ -18,6 +18,14 @@ export default [...compat.extends("eslint:recommended", "plugin:react/recommende
         react,
     },
 
+    settings: {
+      react: {
+        version: 'detect' // Or specify the exact version, e.g., '18.0'
+      }
+    },
+
+    files: ["**/*.jsx"],
+
     languageOptions: {
         globals: {
             ...globals.browser,
@@ -32,4 +40,4 @@ export default [...compat.extends("eslint:recommended", "plugin:react/recommende
     rules: {
         "react/prop-types": "off",
     },
-}];
+}];

package.json

@@ -50,6 +50,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-chained-backend": "^4.6.2",
     "i18next-http-backend": "^2.6.1",
+    "jscodeshift": "^17.1.2",
     "jwt-decode": "^4.0.0",
     "konva": "^9.3.15",
     "lodash": "^4.17.21",
@@ -91,6 +92,7 @@
     "@playwright/test": "^1.47.2",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/eslint-plugin-query": "^5.61.6",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
     "@types/node": "^22.7.2",
     "babel-loader": "^9.2.1",
     "concurrently": "^9.0.1",
@@ -115,6 +117,7 @@
     "webpack-merge": "^5.9.0"
   },
   "lint-staged": {
-    "src/**/*.{js,css,md,jsx}": "prettier --write"
+    "src/**/*.{js,css,md}": ["prettier --write"],
+    "src/**/*.jsx": ["jscodeshift", "prettier --write"]
   }
 }

src/components/Feedback/Feedback.jsx

@@ -1,20 +1,23 @@
 import * as React from "react";
 import { useState } from "react";
-import QuestionAnswerOutlinedIcon from "@mui/icons-material/QuestionAnswerOutlined";
+
 import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
+import Fab from "@mui/material/Fab";
+import Fade from "@mui/material/Fade";
+import IconButton from "@mui/material/IconButton";
 import Paper from "@mui/material/Paper";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import Slide from "@mui/material/Slide";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
 import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Typography from "@mui/material/Typography";
-import TextField from "@mui/material/TextField";
-import Fab from "@mui/material/Fab";
+
 import CloseIcon from "@mui/icons-material/Close";
-import IconButton from "@mui/material/IconButton";
-import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
-import { Fade } from "@mui/material";
-import Slide from "@mui/material/Slide";
+import QuestionAnswerOutlinedIcon from "@mui/icons-material/QuestionAnswerOutlined";
+
 import LoadingButton from "@mui/lab/LoadingButton";
+import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 
 const Feedback = () => {
   const keyword = i18nLoadNamespace("components/FeedBack");

src/components/MainContent/index.jsx

@@ -1,21 +1,26 @@
 import React from "react";
-import MainContentMenuTopMenuItems from "../NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems";
-import ScrollTop from "../Shared/ScrollTop/ScrollTop";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { Button, Fab, Snackbar } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+
+import Button from "@mui/material/Button";
+import Fab from "@mui/material/Fab";
+import Snackbar from "@mui/material/Snackbar";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
 import { KeyboardArrowUp } from "@mui/icons-material";
-import MySnackbar from "../MySnackbar/MySnackbar";
+
+import { canUserSeeTool } from "../../constants/tools";
+import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers";
 import {
   cleanError,
   cleanErrorNetwork,
 } from "../../redux/reducers/errorReducer";
-import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers";
 import Feedback from "../Feedback/Feedback";
-import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
-import { canUserSeeTool } from "../../constants/tools";
-import { useDispatch, useSelector } from "react-redux";
+import MySnackbar from "../MySnackbar/MySnackbar";
+import MainContentMenuTopMenuItems from "../NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems";
 import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace";
-import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
+import ScrollTop from "../Shared/ScrollTop/ScrollTop";
 
 /**
  *

src/components/NavBar/DrawerItem/DrawerItem.jsx

@@ -1,16 +1,18 @@
 import React, { useEffect } from "react";
-import { Container } from "@mui/material";
-import Fade from "@mui/material/Fade";
 import { useDispatch, useSelector } from "react-redux";
 import { Route, Routes, useLocation } from "react-router-dom";
-import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { getclientId } from "../../Shared/GoogleAnalytics/MatomoAnalytics";
+
+import Container from "@mui/material/Container";
+import Fade from "@mui/material/Fade";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
 import { useTrackPageView } from "../../../Hooks/useAnalytics";
-import { selectTopMenuItem } from "../../../redux/reducers/navReducer";
+import { TOOL_GROUPS, toolsHome } from "../../../constants/tools";
 import { TOP_MENU_ITEMS } from "../../../constants/topMenuItems";
+import { selectTopMenuItem } from "../../../redux/reducers/navReducer";
 import { selectTool } from "../../../redux/reducers/tools/toolReducer";
-import { TOOL_GROUPS, toolsHome } from "../../../constants/tools";
+import { getclientId } from "../../Shared/GoogleAnalytics/MatomoAnalytics";
+import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
 
 /**
  *

src/components/NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems.jsx

@@ -1,13 +1,15 @@
-import { Route, Routes, useLocation } from "react-router-dom";
-import { Container } from "@mui/material";
-import Fade from "@mui/material/Fade";
 import React, { useEffect } from "react";
-import DrawerItem from "../DrawerItem/DrawerItem";
 import { useDispatch, useSelector } from "react-redux";
+import { Route, Routes, useLocation } from "react-router-dom";
+
+import Container from "@mui/material/Container";
+import Fade from "@mui/material/Fade";
+
 import { useTrackPageView } from "../../../Hooks/useAnalytics";
 import { toolsHome } from "../../../constants/tools";
 import { TOP_MENU_ITEMS } from "../../../constants/topMenuItems";
 import { selectTopMenuItem } from "../../../redux/reducers/navReducer";
+import DrawerItem from "../DrawerItem/DrawerItem";
 
 /**
  * Represents the group of tools to display and their tabs in the ToolsMenu

src/components/NavItems/About/About.jsx

@@ -1,27 +1,31 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Grid2, Paper } from "@mui/material";
+
 import Box from "@mui/material/Box";
-import CustomTile from "../../Shared/CustomTitle/CustomTitle";
-import europeImage from "./images/logo_EUh2020_horizontal.png";
-import itiImage from "./images/iti.jpg";
-import afpImage from "./images/Logo-AFP-384.png";
-import afcnLogo from "./images/afcn_logo.png";
-import arijLogo from "./images/arij_logo.png";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import Grid2 from "@mui/material/Grid2";
+import Link from "@mui/material/Link";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+
+import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+
 import {
   toggleHumanRightsCheckBox,
   toggleUnlockExplanationCheckBox,
 } from "../../../redux/actions";
-import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
-import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
-import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
 import {
   toggleAnalyticsCheckBox,
   toggleState,
 } from "../../../redux/reducers/cookiesReducers";
+import CustomTile from "../../Shared/CustomTitle/CustomTitle";
+import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
+import afpImage from "./images/Logo-AFP-384.png";
+import afcnLogo from "./images/afcn_logo.png";
+import arijLogo from "./images/arij_logo.png";
+import itiImage from "./images/iti.jpg";
+import europeImage from "./images/logo_EUh2020_horizontal.png";
 
 const About = () => {
   const classes = useMyStyles();

src/components/NavItems/Assistant/Assistant.jsx

@@ -1,39 +1,37 @@
 import React, { useEffect, useState } from "react";
-
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardHeader from "@mui/material/CardHeader";
+import Grid2 from "@mui/material/Grid2";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+
+import { Close } from "@mui/icons-material";
+
+import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+import { setError } from "redux/reducers/errorReducer";
+
+import { ROLES } from "../../../constants/roles.jsx";
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  Grid2,
-  IconButton,
-  Typography,
-} from "@mui/material";
+  cleanAssistantState,
+  setUrlMode,
+  submitInputUrl,
+} from "../../../redux/actions/tools/assistantActions";
 import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
-
 import AssistantCheckStatus from "./AssistantCheckResults/AssistantCheckStatus";
+import AssistantNEResult from "./AssistantCheckResults/AssistantNEResult";
 import AssistantFileSelected from "./AssistantFileSelected";
 import AssistantIntroduction from "./AssistantIntroduction";
+import AssistantCredSignals from "./AssistantScrapeResults/AssistantCredibilitySignals";
 import AssistantLinkResult from "./AssistantScrapeResults/AssistantLinkResult";
 import AssistantMediaResult from "./AssistantScrapeResults/AssistantMediaResult";
-import AssistantNEResult from "./AssistantCheckResults/AssistantNEResult";
 import AssistantSCResults from "./AssistantScrapeResults/AssistantSCResults";
 import AssistantTextResult from "./AssistantScrapeResults/AssistantTextResult";
-import AssistantUrlSelected from "./AssistantUrlSelected";
 import AssistantWarnings from "./AssistantScrapeResults/AssistantWarnings";
-import AssistantCredSignals from "./AssistantScrapeResults/AssistantCredibilitySignals";
-import { ROLES } from "../../../constants/roles.jsx";
-
-import {
-  cleanAssistantState,
-  setUrlMode,
-  submitInputUrl,
-} from "../../../redux/actions/tools/assistantActions";
-import { setError } from "redux/reducers/errorReducer";
-import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
-import { Close } from "@mui/icons-material";
+import AssistantUrlSelected from "./AssistantUrlSelected";
 
 const Assistant = () => {
   // styles, language, dispatch, params

src/components/NavItems/Assistant/AssistantApiHandlers/useAssistantApi.jsx

@@ -47,7 +47,10 @@ export default function assistantApiCalls() {
   const callNamedEntityService = async (text, lang) => {
     const namedEntityResult = await axios.post(
       assistantEndpoint + "gcloud/named-entity",
-      { content: text, lang: lang },
+      {
+        content: text,
+        lang: lang,
+      },
     );
 
     return namedEntityResult.data;

src/components/NavItems/Assistant/AssistantCheckResults/AssistantCheckStatus.jsx

@@ -1,17 +1,20 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
+import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { IconButton } from "@mui/material";
-import Typography from "@mui/material/Typography";
-import { setStateExpanded } from "../../../../redux/actions/tools/assistantActions";
-import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+import IconButton from "@mui/material/IconButton";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
-import { Alert } from "@mui/material";
+import Typography from "@mui/material/Typography";
+
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+
+import { setStateExpanded } from "../../../../redux/actions/tools/assistantActions";
 import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";
 
 const AssistantCheckStatus = () => {

src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx

@@ -1,30 +1,26 @@
 import React, { useState } from "react";
+import { Trans } from "react-i18next";
 import { useSelector } from "react-redux";
+//import ReactWordcloud from "react-wordcloud";
+import { TagCloud } from "react-tagcloud";
 
-import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Card from "@mui/material/Card";
-import { CardHeader, Grid2, ListItemButton, Tooltip } from "@mui/material";
 import CardContent from "@mui/material/CardContent";
-import Collapse from "@mui/material/Collapse";
-import Divider from "@mui/material/Divider";
-import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import CardHeader from "@mui/material/CardHeader";
+import Grid2 from "@mui/material/Grid2";
 import LinearProgress from "@mui/material/LinearProgress";
-import Typography from "@mui/material/Typography";
 import Link from "@mui/material/Link";
-import ListItem from "@mui/material/ListItem";
-import List from "@mui/material/List";
-import ListItemText from "@mui/material/ListItemText";
+import Tooltip from "@mui/material/Tooltip";
+
 import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
-//import ReactWordcloud from "react-wordcloud";
-import { TagCloud } from "react-tagcloud";
-import { select } from "d3-selection";
-import "tippy.js/dist/tippy.css";
-import "tippy.js/animations/scale.css";
+
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+import "tippy.js/animations/scale.css";
+import "tippy.js/dist/tippy.css";
+
 import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";
-import { Trans } from "react-i18next";
 import {
   TransHtmlDoubleLinkBreak,
   TransNamedEntityRecogniserLink,
@@ -38,10 +34,6 @@ const AssistantNEResult = () => {
   const neResultCount = useSelector((state) => state.assistant.neResultCount);
   const neLoading = useSelector((state) => state.assistant.neLoading);
 
-  const [selectedIndex, setSelectedIndex] = useState(null);
-  const handleCollapse = (index) => {
-    index === selectedIndex ? setSelectedIndex(null) : setSelectedIndex(index);
-  };
   const [visibleCategories, setVisibleCategories] = useState(
     neResult.reduce((acc, key) => {
       acc[key.category.toLowerCase()] = false;

src/components/NavItems/Assistant/AssistantCheckResults/DbkfMediaResults.jsx

@@ -1,15 +1,16 @@
 import React from "react";
+import { useSelector } from "react-redux";
 
 import Box from "@mui/material/Box";
-import { DuoOutlined } from "@mui/icons-material";
-import ImageIconOutlined from "@mui/icons-material/Image";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
 
-import { useSelector } from "react-redux";
+import { DuoOutlined } from "@mui/icons-material";
+import ImageIconOutlined from "@mui/icons-material/Image";
+
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 
 const DbkfMediaResults = () => {