front: add eslint rule to ban React.FC

Co-authored-by: Simon Ser <[email protected]>

Author: clarani

front/.eslintrc

@@ -49,7 +49,11 @@
           "LegacyFilterSpecification": {
             "message": "Use ExpressionFilterSpecification instead",
             "fixWith": "ExpressionFilterSpecification"
-          }
+          },
+          "React.FC": "Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
+          "FC": "Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
+          "React.FunctionComponent": "Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
+          "React.FunctionalComponent": "Preact specific, useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177"
         }
       }
     ],

front/src/applications/editor/components/EntityError.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import cx from 'classnames';
 import { isNil, uniqueId } from 'lodash';
@@ -11,7 +11,7 @@ import { useInfraID } from 'common/osrdContext';
 
 import { InfraErrorLine } from './InfraErrors';
 
-const EntityError: FC<{ entity: EditorEntity; className?: string }> = ({ entity, className }) => {
+const EntityError = ({ entity, className }: { entity: EditorEntity; className?: string }) => {
   const { t } = useTranslation();
   const infraID = useInfraID();
   const { data } = osrdEditoastApi.endpoints.getInfraByInfraIdErrors.useQuery(

front/src/applications/editor/components/EntitySumUp.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState, Fragment } from 'react';
 
 import cx from 'classnames';
 import type { TFunction } from 'i18next';
@@ -299,16 +299,16 @@ function getSumUpContent(
   );
 }
 
-const EntitySumUp: FC<
-  {
-    classes?: Partial<typeof DEFAULT_CLASSES>;
-    status?: string;
-    error?: InfraError;
-  } & (
-    | { entity: EditorEntity; id?: undefined; objType?: undefined }
-    | { id: string; objType: EditoastType; entity?: undefined }
-  )
-> = ({ entity, id, objType, classes, status, error }) => {
+type EntitySumUpProps = {
+  classes?: Partial<typeof DEFAULT_CLASSES>;
+  status?: string;
+  error?: InfraError;
+} & (
+  | { entity: EditorEntity; id?: undefined; objType?: undefined }
+  | { id: string; objType: EditoastType; entity?: undefined }
+);
+
+const EntitySumUp = ({ entity, id, objType, classes, status, error }: EntitySumUpProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const infraID = useInfraID();

front/src/applications/editor/components/ForceRemount.tsx

@@ -1,9 +1,8 @@
-import React, { type FC, type ReactNode, useEffect, useState } from 'react';
+import React, { type ReactNode, useEffect, useState } from 'react';
 
-const ForceRemount: FC<{ fingerprint: string; renderChildren: () => ReactNode }> = ({
-  fingerprint,
-  renderChildren,
-}) => {
+type ForceRemountProps = { fingerprint: string; renderChildren: () => ReactNode };
+
+const ForceRemount = ({ fingerprint, renderChildren }: ForceRemountProps) => {
   const [skipRender, setSkipRender] = useState(false);
 
   useEffect(() => {

front/src/applications/editor/components/InfraErrors/InfraError.tsx

@@ -8,15 +8,13 @@ import InfraErrorDescription from './InfraErrorDescription';
 import InfraErrorIcon from './InfraErrorIcon';
 import InfraErrorTypeLabel from './InfraErrorTypeLabel';
 
+type InfraErrorBoxProps = PropsWithChildren<{ error: InfraError; index?: number }>;
+
 /**
  * A component that display an infra error.
  * If index is provided, we display it with `#` on the left
  */
-export const InfraErrorBox: React.FC<PropsWithChildren<{ error: InfraError; index?: number }>> = ({
-  error,
-  index,
-  children,
-}) => (
+export const InfraErrorBox = ({ error, index, children }: InfraErrorBoxProps) => (
   <div className="management-item-content">
     <div className="management-item-symbol">
       <InfraErrorIcon error={error} />
@@ -34,7 +32,7 @@ export const InfraErrorBox: React.FC<PropsWithChildren<{ error: InfraError; inde
   </div>
 );
 
-export const InfraErrorLine: React.FC<{ error: InfraError }> = ({ error }) => (
+export const InfraErrorLine = ({ error }: { error: InfraError }) => (
   <div>
     <span className={cx('font-weight-bold', error.is_warning ? 'text-warning' : 'text-danger')}>
       <InfraErrorTypeLabel error={error} />

front/src/applications/editor/components/InfraErrors/InfraErrorDescription.tsx

@@ -1,13 +1,11 @@
-import type React from 'react';
-
 import { useTranslation } from 'react-i18next';
 
 import type { InfraError } from 'common/api/osrdEditoastApi';
 
 /**
  * A component that display an infra error description.
  */
-const InfraErrorDescription: React.FC<{ error: InfraError }> = ({ error }) => {
+const InfraErrorDescription = ({ error }: { error: InfraError }) => {
   const { t } = useTranslation();
   const i18nKey = `Editor.infra-errors.error-type.${error.error_type}.description`;
   return t(i18nKey, error);

front/src/applications/editor/components/InfraErrors/InfraErrorIcon.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React from 'react';
 
 import cx from 'classnames';
 import type { IconBaseProps } from 'react-icons';
@@ -12,7 +12,7 @@ import type { InfraError } from 'common/api/osrdEditoastApi';
 interface InfraErrorIconProps extends IconBaseProps {
   error: InfraError;
 }
-const InfraErrorIcon: FC<InfraErrorIconProps> = ({ error, ...props }) =>
+const InfraErrorIcon = ({ error, ...props }: InfraErrorIconProps) =>
   error.is_warning ? (
     <BsFillExclamationTriangleFill {...props} className={cx('text-warning', props.className)} />
   ) : (

front/src/applications/editor/components/InfraErrors/InfraErrorMapControl.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import { Alert } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
@@ -16,10 +16,12 @@ import useKeyboardShortcuts from 'utils/hooks/useKeyboardShortcuts';
 
 import InfraErrorsModal from './InfraErrorsModal';
 
-const InfraErrorMapControl: FC<{
+type InfraErrorMapControlProps = {
   mapRef: MapRef;
   switchTool: EditorContextType['switchTool'];
-}> = ({ mapRef, switchTool }) => {
+};
+
+const InfraErrorMapControl = ({ mapRef, switchTool }: InfraErrorMapControlProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const { register } = useKeyboardShortcuts();

front/src/applications/editor/components/InfraErrors/InfraErrorTypeLabel.tsx

@@ -1,13 +1,11 @@
-import type React from 'react';
-
 import { useTranslation } from 'react-i18next';
 
 import type { InfraError } from 'common/api/osrdEditoastApi';
 
 /**
  * A component that display an infra error type label.
  */
-const InfraErrorTypeLabel: React.FC<{ error: InfraError }> = ({ error }) => {
+const InfraErrorTypeLabel = ({ error }: { error: InfraError }) => {
   const { t } = useTranslation();
   return t(`Editor.infra-errors.error-type.${error.error_type}.name`);
 };

front/src/applications/editor/components/InfraErrors/InfraErrorsList.tsx

@@ -29,7 +29,7 @@ interface InfraErrorsListProps {
   onErrorClick: (infraId: number, item: InfraError) => void | Promise<void>;
 }
 
-const InfraErrorsList: React.FC<InfraErrorsListProps> = ({ infraID, onErrorClick }) => {
+const InfraErrorsList = ({ infraID, onErrorClick }: InfraErrorsListProps) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const [total, setTotal] = useState<number | null>(null);

front/src/applications/editor/components/InfraErrors/InfraErrorsModal.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React from 'react';
 
 import { useTranslation } from 'react-i18next';
 
@@ -12,7 +12,7 @@ interface InfraErrorsModalProps {
   onErrorClick: (infraId: number, item: InfraError) => void | Promise<void>;
 }
 
-const InfraErrorsModal: FC<InfraErrorsModalProps> = ({ onErrorClick }) => {
+const InfraErrorsModal = ({ onErrorClick }: InfraErrorsModalProps) => {
   const { t } = useTranslation();
   const infraID = useInfraID();
 

front/src/applications/editor/components/LayersModal.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import {
   groupBy,
@@ -70,12 +70,7 @@ type LayersModalProps = {
   onChange: (args: { newLayers: Set<Layer> }) => void;
 };
 
-const LayersModal: FC<LayersModalProps> = ({
-  initialLayers,
-  selection,
-  frozenLayers,
-  onChange,
-}) => {
+const LayersModal = ({ initialLayers, selection, frozenLayers, onChange }: LayersModalProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const { layersSettings } = useSelector(getMap);

front/src/applications/editor/components/LinearMetadata/FormBeginEndWidget.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { WidgetProps } from '@rjsf/utils';
 
-export const FormBeginEndWidget: React.FC<WidgetProps> = (props) => {
+export const FormBeginEndWidget = (props: WidgetProps) => {
   const { id, value, required, readonly, onChange, options, schema } = props;
   return (
     <div>
@@ -24,4 +24,5 @@ export const FormBeginEndWidget: React.FC<WidgetProps> = (props) => {
     </div>
   );
 };
+
 export default FormBeginEndWidget;

front/src/applications/editor/components/LinearMetadata/FormComponent.tsx

@@ -34,7 +34,7 @@ import HelpModal from './HelpModal';
 import { LinearMetadataTooltip } from './tooltip';
 import 'common/IntervalsDataViz/style.scss';
 
-const IntervalEditorComponent: React.FC<FieldProps> = (props) => {
+const IntervalEditorComponent = (props: FieldProps) => {
   const { name, formContext, formData, schema, onChange, registry } = props;
   const { openModal, closeModal } = useModal();
   const { t } = useTranslation();
@@ -414,7 +414,7 @@ const IntervalEditorComponent: React.FC<FieldProps> = (props) => {
   );
 };
 
-export const FormComponent: React.FC<FieldProps> = (props) => {
+export const FormComponent = (props: FieldProps) => {
   const { name, formContext, schema, registry } = props;
   const Fields = getDefaultRegistry().fields;
 

front/src/applications/editor/components/LinearMetadata/FormLineStringLength.tsx

@@ -5,9 +5,8 @@ import cx from 'classnames';
 import { toNumber } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
-export const FormLineStringLength: React.FC<WidgetProps> = (props) => {
+export const FormLineStringLength = ({ id, value, required, onChange }: WidgetProps) => {
   const { t } = useTranslation();
-  const { id, value, required, onChange } = props;
 
   const [length, setLength] = useState<number>(toNumber(value));
 

front/src/applications/editor/components/LinearMetadata/HelpModal.tsx

@@ -1,10 +1,10 @@
-import React, { type FC } from 'react';
+import React from 'react';
 
 import { useTranslation } from 'react-i18next';
 
 import { Modal } from 'common/BootstrapSNCF/ModalSNCF';
 
-const HelpModal: FC = () => {
+const HelpModal = () => {
   const { t } = useTranslation();
 
   return (

front/src/applications/editor/tools/pointEdition/components/CustomFlagSignalCheckbox.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import type { WidgetProps } from '@rjsf/utils';
 
-const CustomFlagSignalCheckbox: React.FC<WidgetProps> = (props) => {
-  const { schema, onChange, title, value } = props;
+const CustomFlagSignalCheckbox = ({ schema, onChange, title, value }: WidgetProps) => {
   const FLAG_NAME = 'flag-signal-parameter';
 
   return (

front/src/applications/editor/tools/pointEdition/components/CustomPosition.tsx

@@ -4,25 +4,22 @@ import type { WidgetProps } from '@rjsf/utils';
 
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
 
-const CustomPosition: React.FC<WidgetProps> = (props) => {
-  const { schema, onChange, title, value } = props;
-  const POINT_NAME = 'point-parameter';
+const POINT_NAME = 'point-parameter';
 
-  return (
-    <div key={`${POINT_NAME}-${schema.description}`}>
-      <p>{title}</p>
-      <InputSNCF
-        name={POINT_NAME}
-        id={`${POINT_NAME}-${schema.description}`}
-        value={value}
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
-        type="number"
-        min={0}
-      />
-    </div>
-  );
-};
+const CustomPosition = ({ schema, onChange, title, value }: WidgetProps) => (
+  <div key={`${POINT_NAME}-${schema.description}`}>
+    <p>{title}</p>
+    <InputSNCF
+      name={POINT_NAME}
+      id={`${POINT_NAME}-${schema.description}`}
+      value={value}
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+      type="number"
+      min={0}
+    />
+  </div>
+);
 
 export default CustomPosition;

front/src/applications/editor/tools/rangeEdition/speedSection/SpeedInput.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, type InputHTMLAttributes, useEffect, useState } from 'react';
+import React, { type InputHTMLAttributes, useEffect, useState } from 'react';
 
 import { isNumber } from 'lodash';
 
@@ -8,12 +8,12 @@ function msToKmhString(msSpeed: number | undefined): string {
   return isNumber(msSpeed) ? msToKmh(msSpeed).toFixed(2) : '';
 }
 
-const SpeedInput: FC<
-  {
-    msSpeed: number | undefined;
-    onChange: (newMsSpeed: number | undefined) => void;
-  } & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'>
-> = ({ msSpeed, onChange, ...attrs }) => {
+type SpeedInputProps = {
+  msSpeed: number | undefined;
+  onChange: (newMsSpeed: number | undefined) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'>;
+
+const SpeedInput = ({ msSpeed, onChange, ...attrs }: SpeedInputProps) => {
   const [kmhSpeed, setKmhSpeed] = useState<string>(msToKmhString(msSpeed));
 
   useEffect(() => {

front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionMetadataForm.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { cloneDeep, isEmpty, isEqual, map, size } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -32,7 +32,7 @@ const getNewSpeedLimitTag = (
 
 type SpeedSectionMetadataFormProps = { speedLimitTags: string[] };
 
-const SpeedSectionMetadataForm: FC<SpeedSectionMetadataFormProps> = ({ speedLimitTags }) => {
+const SpeedSectionMetadataForm = ({ speedLimitTags }: SpeedSectionMetadataFormProps) => {
   const { t } = useTranslation();
   const {
     state: { entity, error },

front/src/applications/editor/tools/rangeEdition/speedSection/SwitchList.tsx

@@ -26,13 +26,13 @@ type SwitchListProps = {
   availableSwitchesPositions: AvailableSwitchPositions;
 };
 
-const SwitchList: React.FC<SwitchListProps> = ({
+const SwitchList = ({
   selectedSwitches,
   unselectSwitch,
   setSwitchSelection,
   /** possible positions based on the routes found */
   availableSwitchesPositions,
-}) => {
+}: SwitchListProps) => {
   const infraID = useInfraID();
   const { data: switchTypes } = useSwitchTypes(infraID);