front: clean up code

- move ScenarioExplorer to module/scenario/components - move InfraSelector to module/infra/components - move some Grid, Loader and Notification in their own folder - remove some useless renders (null) - remove requests file
OpenRailAssociation · Jan 11, 2024 · 5647245 · 5647245
1 parent bf6da3d
commit 5647245
Show file tree

Hide file tree

Showing 112 changed files with 458 additions and 565 deletions.
diff --git a/front/src/applications/editor/Editor.tsx b/front/src/applications/editor/Editor.tsx
@@ -10,8 +10,8 @@ import 'common/Map/Map.scss';
 
 import type { EditorSliceActions } from 'reducers/editor';
 import { getIsLoading } from 'reducers/main/mainSelector';
-import { LoaderState } from 'common/Loader';
 import { loadDataModel, updateTotalsIssue } from 'reducers/editor';
+import { LoaderState } from 'common/Loaders';
 import { updateViewport } from 'reducers/map';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import { useSwitchTypes } from 'applications/editor/tools/switchEdition/types';
@@ -268,11 +268,9 @@ const Editor = () => {
                     <button
                       key={id}
                       type="button"
-                      className={cx(
-                        'editor-btn',
-                        'btn-rounded',
-                        isActive && isActive(extendedContext) ? 'active' : ''
-                      )}
+                      className={cx('editor-btn', 'btn-rounded', {
+                        active: isActive && isActive(extendedContext),
+                      })}
                       onClick={() => {
                         if (onClick) {
                           onClick(extendedContext);
@@ -362,15 +360,10 @@ const Editor = () => {
                         <button
                           id={id}
                           type="button"
-                          className={cx(
-                            'editor-btn',
-                            'btn-rounded',
-                            'shadow',
-                            isActive && isActive(editorState) ? 'active' : '',
-                            isBlink && isBlink(editorState, infraID)
-                              ? 'btn-map-infras-blinking'
-                              : ''
-                          )}
+                          className={cx('editor-btn', 'btn-rounded', 'shadow', {
+                            active: isActive && isActive(editorState),
+                            'btn-map-infras-blinking': isBlink && isBlink(editorState, infraID),
+                          })}
                           onClick={clickFunction}
                           disabled={isDisabled && isDisabled(editorState)}
                         >

diff --git a/front/src/applications/editor/components/EntityError.tsx b/front/src/applications/editor/components/EntityError.tsx
@@ -15,7 +15,7 @@ const EntityError: FC<{ entity: EditorEntity; className?: string }> = ({ entity,
   const { data } = osrdEditoastApi.endpoints.getInfraByIdErrors.useQuery(
     {
       // Infra can be undefined, but in this case the query is skipped
-      id: infraID || -1,
+      id: infraID!,
       objectId: entity.properties.id,
     },
     { skip: isNil(infraID) }
@@ -26,7 +26,9 @@ const EntityError: FC<{ entity: EditorEntity; className?: string }> = ({ entity,
     return data?.results && data.results.length > 0;
   }, [infraID, data]);
 
-  return hasError ? (
+  if (!hasError) return null;
+
+  return (
     <div className={cx('entity-errors-linked', className)}>
       <h4>
         <BsExclamationOctagon className="mr-1" />
@@ -38,7 +40,7 @@ const EntityError: FC<{ entity: EditorEntity; className?: string }> = ({ entity,
         ))}
       </div>
     </div>
-  ) : null;
+  );
 };
 
 export default EntityError;
diff --git a/front/src/applications/editor/components/EntitySumUp.tsx b/front/src/applications/editor/components/EntitySumUp.tsx
@@ -6,8 +6,8 @@ import { Dispatch } from 'redux';
 import { TFunction } from 'i18next';
 import cx from 'classnames';
 
-import { LoaderFill } from 'common/Loader';
 import { useInfraID } from 'common/osrdContext';
+import { LoaderFill } from 'common/Loaders';
 import type {
   BufferStopEntity,
   ElectrificationEntity,

diff --git a/front/src/applications/editor/components/InfraErrors/InfraErrorCorrectorModal.tsx b/front/src/applications/editor/components/InfraErrors/InfraErrorCorrectorModal.tsx
@@ -3,12 +3,10 @@ import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
 import { OPERATION_TYPE } from 'applications/editor/tools/types';
-
-import Loader from 'common/Loader';
 import { useInfraID } from 'common/osrdContext';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import { ConfirmModal, useModal } from 'common/BootstrapSNCF/ModalSNCF';
-
+import { Loader } from 'common/Loaders';
 import { saveOperations } from 'reducers/editor';
 
 const InfraErrorCorrectorModal = () => {

diff --git a/front/src/applications/editor/components/InfraErrors/InfraErrorsList.tsx b/front/src/applications/editor/components/InfraErrors/InfraErrorsList.tsx
@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { getEditorIssues } from 'reducers/editor/selectors';
 import { updateFiltersIssue } from 'reducers/editor';
-import { LoaderFill, Spinner } from 'common/Loader';
+import { LoaderFill, Spinner } from 'common/Loaders';
 import OptionsSNCF from 'common/BootstrapSNCF/OptionsSNCF';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import { EDITOAST_TYPES } from '../../tools/types';

diff --git a/front/src/applications/editor/nav.tsx b/front/src/applications/editor/nav.tsx
@@ -9,19 +9,17 @@ import { GoSearch, GoZoomIn, GoZoomOut } from 'react-icons/go';
 import { BsExclamationOctagon, BsSliders2 } from 'react-icons/bs';
 import { isNil } from 'lodash';
 
-import type { Shortcut } from 'utils/hooks/useKeyboardShortcuts';
-
 import LayersModal from 'applications/editor/components/LayersModal';
 import { EDITOAST_TO_LAYER_DICT } from 'applications/editor/tools/types';
 import { SelectionState } from 'applications/editor/tools/selection/types';
 import type { EditorState, EditoastType } from 'applications/editor/tools/types';
 import type { EditorContextType, Tool } from 'applications/editor/tools/editorContextTypes';
 
-import InfraSelectorModal from 'common/InfraSelector/InfraSelectorModal';
 import type { ModalContextType } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
-
-import type { Viewport } from 'reducers/map';
+import { InfraSelectorModal } from 'modules/infra/components/InfraSelector';
 import { editorSliceActions } from 'reducers/editor';
+import type { Viewport } from 'reducers/map';
+import type { Shortcut } from 'utils/hooks/useKeyboardShortcuts';
 
 const ZOOM_DEFAULT = 5;
 const ZOOM_DELTA = 1.5;

diff --git a/front/src/applications/editor/tools/pointEdition/components.tsx b/front/src/applications/editor/tools/pointEdition/components.tsx
@@ -45,7 +45,7 @@ import { getMap } from 'reducers/map/selectors';
 import colors from 'common/Map/Consts/colors';
 import GeoJSONs, { EditorSource, SourcesDefinitionsIndex } from 'common/Map/Layers/GeoJSONs';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
-import { Spinner } from 'common/Loader';
+import { Spinner } from 'common/Loaders';
 import { useInfraID } from 'common/osrdContext';
 
 export const POINT_LAYER_ID = 'pointEditionTool/new-entity';

diff --git a/front/src/applications/editor/tools/rangeEdition/components.tsx b/front/src/applications/editor/tools/rangeEdition/components.tsx
@@ -27,7 +27,7 @@ import type {
 } from 'types';
 import { APPLICABLE_DIRECTIONS } from 'types';
 
-import { LoaderFill } from 'common/Loader';
+import { LoaderFill } from 'common/Loaders';
 import { useInfraID } from 'common/osrdContext';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import CheckboxRadioSNCF from 'common/BootstrapSNCF/CheckboxRadioSNCF';

diff --git a/...c/applications/editor/tools/rangeEdition/electrification/ElectrificationEditionLayers.tsx b/...c/applications/editor/tools/rangeEdition/electrification/ElectrificationEditionLayers.tsx
@@ -142,7 +142,7 @@ export const ElectrificationEditionLayers = () => {
     }
   }, [hoveredItem]);
 
-  const popUps = !isOnModeMove(interactionState.type) ? (
+  const popUps = !isOnModeMove(interactionState.type) && (
     <>
       {hoveredItem?.itemType === 'TrackRangeExtremity' && (
         <Popup
@@ -184,7 +184,7 @@ export const ElectrificationEditionLayers = () => {
           </Popup>
         )}
     </>
-  ) : null;
+  );
 
   return (
     <>

diff --git a/front/src/applications/editor/tools/rangeEdition/speedSection/PslSignCard.tsx b/front/src/applications/editor/tools/rangeEdition/speedSection/PslSignCard.tsx
@@ -98,11 +98,11 @@ const PslSignCard = ({
             type="number"
             id="psl-position-from-the-beginning"
             label={t('Editor.tools.speed-edition.sign-position')}
-            value={roundedPosition.toString() !== '' ? roundedPosition.toString() : ''}
+            value={roundedPosition.toString()}
             onChange={(e) => {
               updateSign(signInfo, {
                 ...sign,
-                position: Number(e.target.value !== '' ? e.target.value : ''),
+                position: Number(e.target.value),
               });
             }}
             min={0}

diff --git a/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx b/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx
@@ -174,7 +174,7 @@ export const SpeedSectionEditionLayers = () => {
     }
   }, [hoveredItem]);
 
-  const popUps = !isOnModeMove(interactionState.type) ? (
+  const popUps = !isOnModeMove(interactionState.type) && (
     <>
       {hoveredItem?.itemType === 'TrackRangeExtremity' && (
         <Popup
@@ -227,7 +227,7 @@ export const SpeedSectionEditionLayers = () => {
           </Popup>
         )}
     </>
-  ) : null;
+  );
 
   return (
     <>

diff --git a/front/src/applications/editor/tools/routeEdition/components/EditRouteMetadata.tsx b/front/src/applications/editor/tools/routeEdition/components/EditRouteMetadata.tsx
@@ -28,7 +28,7 @@ import {
   getRouteGeometryByRouteId,
 } from 'applications/editor/tools/routeEdition/utils';
 
-import { LoaderFill } from 'common/Loader';
+import { LoaderFill } from 'common/Loaders';
 import colors from 'common/Map/Consts/colors';
 import { useInfraID } from 'common/osrdContext';
 import { ConfirmModal } from 'common/BootstrapSNCF/ModalSNCF/ConfirmModal';

diff --git a/front/src/applications/editor/tools/routeEdition/components/EditRoutePath.tsx b/front/src/applications/editor/tools/routeEdition/components/EditRoutePath.tsx
@@ -30,7 +30,7 @@ import {
   getRouteGeometries,
 } from 'applications/editor/tools/routeEdition/utils';
 
-import { LoaderFill } from 'common/Loader';
+import { LoaderFill } from 'common/Loaders';
 import colors from 'common/Map/Consts/colors';
 import { useInfraID } from 'common/osrdContext';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';

diff --git a/front/src/applications/editor/tools/selection/components.tsx b/front/src/applications/editor/tools/selection/components.tsx
@@ -31,12 +31,11 @@ export const SelectionMessages = () => {
   return t(`Editor.tools.select-items.help.${state.selectionState.type}-selection`).toString();
 };
 
-const SelectionZone = ({ newZone }: { newZone?: Zone }) =>
-  newZone ? (
-    <Source type="geojson" data={zoneToFeature(newZone)} key="new-zone">
-      <Layer type="line" paint={{ 'line-color': '#666', 'line-dasharray': [3, 3] }} />
-    </Source>
-  ) : null;
+const SelectionZone = ({ newZone }: { newZone: Zone }) => (
+  <Source type="geojson" data={zoneToFeature(newZone)} key="new-zone">
+    <Layer type="line" paint={{ 'line-color': '#666', 'line-dasharray': [3, 3] }} />
+  </Source>
+);
 
 export const SelectionLayers = () => {
   const {
@@ -78,7 +77,7 @@ export const SelectionLayers = () => {
         issuesSettings={issuesSettings}
         infraID={infraID}
       />
-      <SelectionZone newZone={selectionZone} />
+      {selectionZone && <SelectionZone newZone={selectionZone} />}
       {state.mousePosition && state.selectionState.type === 'single' && state.hovered && (
         <Popup
           className="popup editor-selection"

diff --git a/front/src/applications/editor/tools/switchEdition/components/CustomSchemaField.tsx b/front/src/applications/editor/tools/switchEdition/components/CustomSchemaField.tsx
@@ -1,5 +1,5 @@
 import React, { FC, Suspense, lazy } from 'react';
-import LoaderSNCF from 'common/Loader';
+import { Loader } from 'common/Loaders';
 import { FieldProps } from '@rjsf/core';
 import SchemaField from '@rjsf/core/lib/components/fields/SchemaField';
 import useSwitch from '../useSwitch';
@@ -17,7 +17,7 @@ export const CustomSchemaField: FC<FieldProps> = (props) => {
         <SchemaField {...props} />
         {switchType && (
           <div className="mt-5">
-            <Suspense fallback={<LoaderSNCF />}>
+            <Suspense fallback={<Loader />}>
               <TrackNodeTypeDiagram trackNodeType={switchType.id} />
             </Suspense>
           </div>

diff --git a/front/src/applications/editor/tools/trackEdition/components.tsx b/front/src/applications/editor/tools/trackEdition/components.tsx
@@ -23,7 +23,7 @@ import {
   getEditSpeedSectionState,
 } from 'applications/editor/tools/rangeEdition/utils';
 
-import { Spinner } from 'common/Loader';
+import { Spinner } from 'common/Loaders';
 import colors from 'common/Map/Consts/colors';
 import GeoJSONs from 'common/Map/Layers/GeoJSONs';
 import { useInfraID } from 'common/osrdContext';

diff --git a/front/src/applications/operationalStudies/Home.tsx b/front/src/applications/operationalStudies/Home.tsx
@@ -5,7 +5,7 @@ import ProjectCard from 'modules/project/components/ProjectCard';
 import ProjectCardEmpty from 'modules/project/components/ProjectCardEmpty';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import OptionsSNCF from 'common/BootstrapSNCF/OptionsSNCF';
-import { Spinner } from 'common/Loader';
+import { Spinner } from 'common/Loaders';
 import { useTranslation } from 'react-i18next';
 import {
   PostSearchApiArg,

diff --git a/front/src/applications/operationalStudies/views/ImportTrainSchedule.tsx b/front/src/applications/operationalStudies/views/ImportTrainSchedule.tsx
@@ -3,7 +3,7 @@ import {
   ImportTrainScheduleConfig,
   ImportTrainScheduleTrainsList,
 } from 'modules/trainschedule/components/ImportTrainSchedule';
-import Loader from 'common/Loader';
+import { Loader } from 'common/Loaders';
 import { TrainSchedule } from 'applications/operationalStudies/types';
 import { enhancedEditoastApi } from 'common/api/enhancedEditoastApi';
 import { useDispatch } from 'react-redux';

diff --git a/front/src/applications/operationalStudies/views/Project.tsx b/front/src/applications/operationalStudies/views/Project.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import nextId from 'react-id-generator';
 import StudyCard from 'modules/study/components/StudyCard';
 import StudyCardEmpty from 'modules/study/components/StudyCardEmpty';
-import Loader, { Spinner } from 'common/Loader';
+import { Loader, Spinner } from 'common/Loaders';
 import OptionsSNCF from 'common/BootstrapSNCF/OptionsSNCF';
 import { BiTargetLock } from 'react-icons/bi';
 import { GoPencil } from 'react-icons/go';
@@ -230,22 +230,22 @@ export default function Project() {
                   </div>
                 </div>
               </div>
-              {project.funders || project.budget ? (
+              {(project.funders || (project.budget !== undefined && project.budget !== 0)) && (
                 <div className="project-details-financials">
                   <div className="project-details-financials-infos">
                     <h3>{t('fundedBy')}</h3>
-                    <div>{project.funders}</div>
-                  </div>
-                  <div className="project-details-financials-amount">
-                    <span className="project-details-financials-amount-text">
-                      {t('totalBudget')}
-                    </span>
-                    {project.budget !== undefined && project.budget !== 0
-                      ? budgetFormat(project.budget)
-                      : ''}
+                    {project.funders && <div>{project.funders}</div>}
                   </div>
+                  {project.budget !== undefined && project.budget !== 0 && (
+                    <div className="project-details-financials-amount">
+                      <span className="project-details-financials-amount-text">
+                        {t('totalBudget')}
+                      </span>
+                      {budgetFormat(project.budget)}
+                    </div>
+                  )}
                 </div>
-              ) : null}
+              )}
               <div className="project-details-tags">
                 {project.tags?.map((tag) => (
                   <div className="project-details-tags-tag" key={nextId()}>

diff --git a/front/src/applications/operationalStudies/views/Scenario.tsx b/front/src/applications/operationalStudies/views/Scenario.tsx
@@ -193,7 +193,9 @@ export default function Scenario() {
     []
   );
 
-  return scenario && infraId && timetableId ? (
+  if (!scenario || !infraId || !timetableId) return null;
+
+  return (
     <>
       <NavBarSNCF
         appName={
@@ -353,5 +355,5 @@ export default function Scenario() {
         </div>
       </main>
     </>
-  ) : null;
+  );
 }
diff --git a/front/src/applications/operationalStudies/views/Study.tsx b/front/src/applications/operationalStudies/views/Study.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
 import { useTranslation } from 'react-i18next';
-import Loader, { Spinner } from 'common/Loader';
+import { Loader, Spinner } from 'common/Loaders';
 import nextId from 'react-id-generator';
 import OptionsSNCF from 'common/BootstrapSNCF/OptionsSNCF';
 import ScenarioCard from 'modules/scenario/components/ScenarioCard';
@@ -254,7 +254,7 @@ export default function Study() {
                 )}
               </div>
 
-              {study.service_code || study.business_code || study.budget ? (
+              {(study.service_code || study.business_code || study.budget !== 0) && (
                 <div className="study-details-financials">
                   <div className="study-details-financials-infos">
                     {study.service_code && (
@@ -270,14 +270,14 @@ export default function Study() {
                       </div>
                     )}
                   </div>
-                  {study.budget !== 0 ? (
+                  {study.budget !== 0 && (
                     <div className="study-details-financials-amount">
                       <span className="study-details-financials-amount-text">{t('budget')}</span>
                       {budgetFormat(study.budget)}
                     </div>
-                  ) : null}
+                  )}
                 </div>
-              ) : null}
+              )}
 
               <div className="study-details-footer">
                 <div className="study-details-tags">
@@ -296,9 +296,7 @@ export default function Study() {
           )}
 
           <div className="scenarios-toolbar">
-            <div className="">
-              {t('scenariosCount', { count: scenariosList ? scenariosList.length : 0 })}
-            </div>
+            <div>{t('scenariosCount', { count: scenariosList.length })}</div>
             <div className="flex-grow-1">
               <FilterTextField
                 setFilter={setFilter}