refactor(frontend): use absolute (aliased) imports over relative impo…

…rts (#1136)

* fix: add vite alias @ for src dir

* refactor(frontend): replace all relative imports with @ alias

* build: add lint command to package.json (eslint)

* build: add @ alias to tsconfig for type imports

* refactor: fix all linting errors from eslint

* fix: browser console errors incorrect React usage

* fix: add axios interceptor withCredentials, plus API const

* refactor: fix remaining relative imports

src/frontend/package.json

@@ -7,7 +7,8 @@
     "build:start": "cd dist && PORT=8080 npx serve",
     "start": "env-cmd -f .env.dev vite dev",
     "start:live": "vite dev",
-    "test": "vitest tests/"
+    "test": "vitest tests/",
+    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx src"
   },
   "license": "GPL-3.0-only",
   "author": {

src/frontend/src/App.jsx

@@ -1,14 +1,17 @@
+import axios from 'axios';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { RouterProvider } from 'react-router-dom';
-import { store, persistor } from './store/Store';
 import { Provider } from 'react-redux';
-import routes from './routes';
 import { PersistGate } from 'redux-persist/integration/react';
-import './index.css';
+
+import { store, persistor } from '@/store/Store';
+import routes from '@/routes';
+import environment from '@/environment';
+
+import '@/index.css';
 import 'ol/ol.css';
 import 'react-loading-skeleton/dist/skeleton.css';
-import environment from './environment';
 
 // Added Fix of Console Error of MUI Issue
 const consoleError = console.error;
@@ -26,6 +29,32 @@ console.error = function filterWarnings(msg, ...args) {
   }
 };
 
+const GlobalInit = () => {
+  useEffect(() => {
+    axios.interceptors.request.use(
+      (config) => {
+        // Do something before request is sent
+
+        // const excludedDomains = ['xxx', 'xxx'];
+        // const urlIsExcluded = excludedDomains.some((domain) => config.url.includes(domain));
+        // if (!urlIsExcluded) {
+        //   config.withCredentials = true;
+        // }
+
+        config.withCredentials = true;
+
+        return config;
+      },
+      (error) =>
+        // Do something with request error
+        Promise.reject(error),
+    );
+    return () => {};
+  }, []);
+
+  return null; // Renders nothing
+};
+
 const SentryInit = () => {
   useEffect(() => {
     if (import.meta.env.MODE === 'development') {
@@ -105,6 +134,7 @@ ReactDOM.render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <RouterProvider router={routes} />
+      <GlobalInit />
       <MatomoTrackingInit />
       <SentryInit />
     </PersistGate>

src/frontend/src/api/CreateProjectService.ts

@@ -1,13 +1,13 @@
 import axios from 'axios';
-import { CreateProjectActions } from '../store/slices/CreateProjectSlice';
+import { CreateProjectActions } from '@/store/slices/CreateProjectSlice';
 import {
   ProjectDetailsModel,
   FormCategoryListModel,
   OrganisationListModel,
-} from '../models/createproject/createProjectModel';
-import { CommonActions } from '../store/slices/CommonSlice';
+} from '@/models/createproject/createProjectModel';
+import { CommonActions } from '@/store/slices/CommonSlice';
 import { ValidateCustomFormResponse } from 'store/types/ICreateProject';
-import { task_split_type } from '../types/enums';
+import { task_split_type } from '@/types/enums';
 
 const CreateProjectService: Function = (
   url: string,

src/frontend/src/api/Files.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import CoreModules from '../shared/CoreModules';
+import CoreModules from '@/shared/CoreModules';
 
 export const ProjectFilesById = (url, taskId) => {
   const [loading, setLoading] = useState(true);

src/frontend/src/api/HomeService.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
-import { HomeActions } from '../store/slices/HomeSlice';
-import { HomeProjectCardModel } from '../models/home/homeModel';
-import environment from '../environment';
+import { HomeActions } from '@/store/slices/HomeSlice';
+import { HomeProjectCardModel } from '@/models/home/homeModel';
+import environment from '@/environment';
 
 export const HomeSummaryService: Function = (url: string) => {
   return async (dispatch) => {

src/frontend/src/api/OrganisationService.ts

@@ -1,8 +1,8 @@
 import axios from 'axios';
-import { HomeProjectCardModel } from '../models/home/homeModel';
-import { GetOrganisationDataModel, OrganisationModal } from '../models/organisation/organisationModel';
-import { CommonActions } from '../store/slices/CommonSlice';
-import { OrganisationAction } from '../store/slices/organisationSlice';
+import { HomeProjectCardModel } from '@/models/home/homeModel';
+import { GetOrganisationDataModel, OrganisationModal } from '@/models/organisation/organisationModel';
+import { CommonActions } from '@/store/slices/CommonSlice';
+import { OrganisationAction } from '@/store/slices/organisationSlice';
 
 function appendObjectToFormData(formData, object) {
   for (const [key, value] of Object.entries(object)) {

src/frontend/src/api/Project.js

@@ -1,7 +1,7 @@
-import { ProjectActions } from '../store/slices/ProjectSlice';
-import CoreModules from '../shared/CoreModules';
-import environment from '../environment';
-import { task_priority_str } from '../types/enums';
+import { ProjectActions } from '@/store/slices/ProjectSlice';
+import CoreModules from '@/shared/CoreModules';
+import environment from '@/environment';
+import { task_priority_str } from '@/types/enums';
 
 export const ProjectById = (existingProjectList, projectId) => {
   return async (dispatch) => {

src/frontend/src/api/ProjectTaskStatus.js

@@ -1,9 +1,9 @@
-import { ProjectActions } from '../store/slices/ProjectSlice';
+import { ProjectActions } from '@/store/slices/ProjectSlice';
 import { easeIn, easeOut } from 'ol/easing';
-import { HomeActions } from '../store/slices/HomeSlice';
-import CoreModules from '../shared/CoreModules';
-import { CommonActions } from '../store/slices/CommonSlice';
-import { task_priority_str } from '../types/enums';
+import { HomeActions } from '@/store/slices/HomeSlice';
+import CoreModules from '@/shared/CoreModules';
+import { CommonActions } from '@/store/slices/CommonSlice';
+import { task_priority_str } from '@/types/enums';
 
 const UpdateTaskStatus = (url, style, existingData, currentProjectId, feature, map, view, taskId, body) => {
   return async (dispatch) => {

src/frontend/src/api/Submission.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { SubmissionActions } from '../store/slices/SubmissionSlice';
+import { SubmissionActions } from '@/store/slices/SubmissionSlice';
 
 export const SubmissionService: Function = (url: string) => {
   return async (dispatch) => {

src/frontend/src/api/SubmissionService.ts

@@ -1,6 +1,6 @@
-import CoreModules from '../shared/CoreModules';
-import { ProjectActions } from '../store/slices/ProjectSlice';
-// import { HomeProjectCardModel } from '../models/home/homeModel';
+import CoreModules from '@/shared/CoreModules';
+import { ProjectActions } from '@/store/slices/ProjectSlice';
+// import { HomeProjectCardModel } from '@/models/home/homeModel';
 
 export const ProjectSubmissionService: Function = (url: string) => {
   return async (dispatch) => {

src/frontend/src/api/index.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const API = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
+});

src/frontend/src/api/task.ts

@@ -1,5 +1,5 @@
-import CoreModules from '../shared/CoreModules';
-import { CommonActions } from '../store/slices/CommonSlice';
+import CoreModules from '@/shared/CoreModules';
+import { CommonActions } from '@/store/slices/CommonSlice';
 
 export const fetchInfoTask: Function = (url: string) => {
   return async (dispatch) => {

src/frontend/src/components/Activities.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import IconButtonCard from '../utilities/IconButtonCard';
-import environment from '../environment';
+import IconButtonCard from '@/utilities/IconButtonCard';
+import environment from '@/environment';
 import { easeIn, easeOut } from 'ol/easing';
-import CoreModules from '../shared/CoreModules';
-import AssetModules from '../shared/AssetModules';
+import CoreModules from '@/shared/CoreModules';
+import AssetModules from '@/shared/AssetModules';
 //Activity Model to be display in Activities panel
 const Activities = ({ history, defaultTheme, mapDivPostion, map, view, state, params }) => {
   const index = state.projectTaskBoundries.findIndex((project) => project.id == environment.decode(params.id));

src/frontend/src/components/ActivitiesPanel.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import BasicCard from '../utilities/BasicCard';
-import Activities from '../components/Activities';
-import environment from '../environment';
-import CoreModules from '../shared/CoreModules';
-import AssetModules from '../shared/AssetModules';
+import BasicCard from '@/utilities/BasicCard';
+import Activities from '@/components/Activities';
+import environment from '@/environment';
+import CoreModules from '@/shared/CoreModules';
+import AssetModules from '@/shared/AssetModules';
 
 const Search = AssetModules.styled('div')(({ theme }) => ({
   position: 'relative',

src/frontend/src/components/DialogTaskActions.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import environment from '../environment';
-import ProjectTaskStatus from '../api/ProjectTaskStatus';
-import MapStyles from '../hooks/MapStyles';
-import CoreModules from '../shared/CoreModules';
-import { CommonActions } from '../store/slices/CommonSlice';
-import { task_priority_str } from '../types/enums';
+import environment from '@/environment';
+import ProjectTaskStatus from '@/api/ProjectTaskStatus';
+import MapStyles from '@/hooks/MapStyles';
+import CoreModules from '@/shared/CoreModules';
+import { CommonActions } from '@/store/slices/CommonSlice';
+import { task_priority_str } from '@/types/enums';
 
 export default function Dialog({ taskId, feature, map, view }) {
   // const featureStatus = feature.id_ != undefined ? feature.id_.replace("_", ",").split(',')[1] : null;

src/frontend/src/components/GenerateBasemap.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import CoreModules from '../shared/CoreModules';
-import AssetModules from '../shared/AssetModules';
-import environment from '../environment';
-import { DownloadTile, GenerateProjectTiles, GetTilesList } from '../api/Project';
+import CoreModules from '@/shared/CoreModules';
+import AssetModules from '@/shared/AssetModules';
+import environment from '@/environment';
+import { DownloadTile, GenerateProjectTiles, GetTilesList } from '@/api/Project';
 
 const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectInfo }) => {
   const dispatch = CoreModules.useAppDispatch();

src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/ClusterLayer.js

@@ -8,9 +8,9 @@ import Fill from 'ol/style/Fill';
 import { Cluster, OSM as OSMSource } from 'ol/source';
 import { Text, Circle, Icon } from 'ol/style';
 import VectorSource from 'ol/source/Vector';
-import { hexToRgba } from '../../../MapComponent/OpenLayersComponent/helpers/styleUtils';
 import SelectCluster from 'ol-ext/interaction/SelectCluster';
-import MarkerIcon from '../../../../assets/images/red_marker.png';
+import { hexToRgba } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
+import MarkerIcon from '@/assets/images/red_marker.png';
 
 function setAsyncStyle(style, feature, getIndividualStyle) {
   const styleCache = {};
@@ -202,8 +202,8 @@ const ClusterLayer = ({
             font: '15px Times New Roman',
           }),
         });
-        return style;
         fillColor = '#96bfff';
+        return style;
       } else {
         return;
       }

src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js

@@ -8,8 +8,8 @@ import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
 import GeoJSON from 'ol/format/GeoJSON';
 import { Vector as VectorSource } from 'ol/source';
 import OLVectorLayer from 'ol/layer/Vector';
-import { defaultStyles, getStyles } from '../helpers/styleUtils';
-import { isExtentValid } from '../helpers/layerUtils';
+import { defaultStyles, getStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
+import { isExtentValid } from '@/components/MapComponent/OpenLayersComponent/helpers/layerUtils';
 import { Draw, Modify, Snap, Select, defaults as defaultInteractions } from 'ol/interaction.js';
 import { getArea } from 'ol/sphere';
 import { valid } from 'geojson-validation';

src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer.js

@@ -6,8 +6,8 @@ import VectorTileSource from 'ol/source/VectorTile';
 import { transformExtent } from 'ol/proj';
 import Stroke from 'ol/style/Stroke';
 import Style from 'ol/style/Style';
-import { getStyles, defaultStyles } from '../helpers/styleUtils';
-import { isExtentValid } from '../helpers/layerUtils';
+import { getStyles, defaultStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
+import { isExtentValid } from '@/components/MapComponent/OpenLayersComponent/helpers/layerUtils';
 
 const selectElement = 'singleselect';
 

src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/index.js

@@ -1,4 +1,4 @@
-export { default as VectorTileLayer } from './VectorTileLayer';
+export { default as VectorTileLayer } from '@/components/MapComponent/OpenLayersComponent/Layers/VectorTileLayer';
 
-export { default as VectorLayer } from './VectorLayer';
-export { default as ClusterLayer } from './ClusterLayer';
+export { default as VectorLayer } from '@/components/MapComponent/OpenLayersComponent/Layers/VectorLayer';
+export { default as ClusterLayer } from '@/components/MapComponent/OpenLayersComponent/Layers/ClusterLayer';

src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx

@@ -34,4 +34,6 @@ MapContainer.propTypes = {
   mapInstance: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
 };
 
+MapContainer.displayName = 'MapContainer';
+
 export default MapContainer;

src/frontend/src/components/MapComponent/OpenLayersComponent/index.js

@@ -1,3 +1,3 @@
-export { default as MapContainer } from './MapContainer';
+export { default as MapContainer } from '@/components/MapComponent/OpenLayersComponent/MapContainer';
 
-export { default as useOLMap } from './useOLMap';
+export { default as useOLMap } from '@/components/MapComponent/OpenLayersComponent/useOLMap';

src/frontend/src/components/MapDescriptionComponents.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import CustomizedMenus from '../utilities/CustomizedMenus';
-import CoreModules from '../shared/CoreModules';
+import CustomizedMenus from '@/utilities/CustomizedMenus';
+import CoreModules from '@/shared/CoreModules';
 
 const MapDescriptionComponents = ({ type, state, defaultTheme }) => {
   const descriptionData = [

src/frontend/src/components/MapLegends.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import CoreModules from '../shared/CoreModules';
-import AssetModules from '../shared/AssetModules';
+import CoreModules from '@/shared/CoreModules';
+import AssetModules from '@/shared/AssetModules';
 
 const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatus }) => {
   const MapDetails = [

src/frontend/src/components/OpenLayersMap.jsx

@@ -1,27 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import DialogTaskActions from '../components/DialogTaskActions';
+import DialogTaskActions from '@/components/DialogTaskActions';
 import '../styles/home.scss';
-import CoreModules from '../shared/CoreModules';
+import CoreModules from '@/shared/CoreModules';
 import Control from 'ol/control/Control';
-import locationImg from '../assets/images/location.png';
-import accDownImg from '../assets/images/acc-down.png';
-import accUpImg from '../assets/images/acc-up.png';
-import gridIcon from '../assets/images/grid.png';
-import QrcodeComponent from './QrcodeComponent';
+import locationImg from '@/assets/images/location.png';
+import accDownImg from '@/assets/images/acc-down.png';
+import accUpImg from '@/assets/images/acc-up.png';
+import gridIcon from '@/assets/images/grid.png';
+import QrcodeComponent from '@/components/QrcodeComponent';
 import * as ol from 'ol';
 import { Point } from 'ol/geom';
 import Vector from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { transform } from 'ol/proj';
 import { Icon, Style } from 'ol/style';
-import LocationImage from '../assets/images/location.png';
-import AssetModules from '../shared/AssetModules';
-import { Modal } from '../components/common/Modal';
-import Button from './common/Button';
-import { ProjectActions } from '../store/slices/ProjectSlice';
-import TaskSectionModal from './ProjectDetails/TaskSectionPopup';
+import LocationImage from '@/assets/images/location.png';
+import AssetModules from '@/shared/AssetModules';
+import { Modal } from '@/components/common/Modal';
+import Button from '@/components/common/Button';
+import { ProjectActions } from '@/store/slices/ProjectSlice';
+import TaskSectionModal from '@/components/ProjectDetails/TaskSectionPopup';
 import VectorLayer from 'ol/layer/Vector';
-import WindowDimension from '../hooks/WindowDimension';
+import WindowDimension from '@/hooks/WindowDimension';
 
 let currentLocationLayer = null;
 const OpenLayersMap = ({

src/frontend/src/components/ProjectDetails/MapControlComponent.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import AssetModules from '../../shared/AssetModules';
+import AssetModules from '@/shared/AssetModules';
 import VectorLayer from 'ol/layer/Vector';
-import CoreModules from '../../shared/CoreModules.js';
-import { ProjectActions } from '../../store/slices/ProjectSlice';
+import CoreModules from '@/shared/CoreModules.js';
+import { ProjectActions } from '@/store/slices/ProjectSlice';
 
 const MapControlComponent = ({ map }) => {
   const btnList = [

src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import ActivitiesPanel from '../ActivitiesPanel';
-import CoreModules from '../../shared/CoreModules';
+import ActivitiesPanel from '@/components/ActivitiesPanel';
+import CoreModules from '@/shared/CoreModules';
 
 const MobileActivitiesContents = ({ map, mainView, mapDivPostion }) => {
   const params = CoreModules.useParams();

src/frontend/src/components/ProjectDetails/MobileFooter.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import AssetModules from '../../shared/AssetModules.js';
-import CoreModules from '../../shared/CoreModules';
-import { ProjectActions } from '../../store/slices/ProjectSlice';
+import AssetModules from '@/shared/AssetModules.js';
+import CoreModules from '@/shared/CoreModules';
+import { ProjectActions } from '@/store/slices/ProjectSlice';
 
 const MobileFooter = () => {
   const dispatch = CoreModules.useAppDispatch();