front: add eslint rule to ban React.FC

Author: clarani

front/.eslintrc

@@ -49,7 +49,10 @@
           "LegacyFilterSpecification": {
             "message": "Use ExpressionFilterSpecification instead",
             "fixWith": "ExpressionFilterSpecification"
-          }
+          },
+          "React.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/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/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/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/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/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);
 

front/src/applications/editor/tools/trackEdition/components/TrackEditionLeftPanel.tsx

@@ -25,7 +25,7 @@ import { useAppDispatch } from 'store';
 
 import AttachedRangesItemsList from './AttachedRangesItemsList';
 
-const TrackEditionLeftPanel: React.FC = () => {
+const TrackEditionLeftPanel = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const infraID = useInfraID();

front/src/common/Map/Buttons/ButtonMapInfraErrors.tsx

@@ -12,7 +12,7 @@ interface ButtonMapInfraErrorsProps {
   editorState: EditorState;
 }
 
-const ButtonMapInfraErrors: React.FC<ButtonMapInfraErrorsProps> = ({ editorState }) => {
+const ButtonMapInfraErrors = ({ editorState }: ButtonMapInfraErrorsProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation('translation');
   const [isActive, setIsActive] = useState(true);

front/src/common/Map/MapModalHeader.tsx

@@ -8,7 +8,7 @@ type MapModalHeaderProps = {
   textLight?: boolean;
 };
 
-const MapModalHeader: React.FC<MapModalHeaderProps> = ({ closeAction, title, textLight }) => (
+const MapModalHeader = ({ closeAction, title, textLight }: MapModalHeaderProps) => (
   <div className="d-flex justify-content-between align-items-start">
     <div className={cx('h2', { 'text-light': textLight })}>{title}</div>
     <button

front/src/modules/rollingStock/components/RollingStock2Img.tsx

@@ -10,9 +10,11 @@ import type {
   RollingStockWithLiveries,
 } from 'common/api/osrdEditoastApi';
 
-const RollingStock2Img: React.FC<{
+type RollingStock2ImgProps = {
   rollingStock: RollingStockWithLiveries | LightRollingStockWithLiveries;
-}> = ({ rollingStock }) => {
+};
+
+const RollingStock2Img = ({ rollingStock }: RollingStock2ImgProps) => {
   // as the image is stored in the database and can be fetched only through api (authentication needed),
   // the direct url can not be given to the <img /> directly. Thus the image is fetched, and a new
   // url is generated and stored in imageUrl (then used in <img />).

front/src/stories/IntervalsEditor.stories.tsx

@@ -34,7 +34,7 @@ type IntervalsEditorProps = {
   units: string[];
 };
 
-const IntervalsEditorWrapper: React.FC<IntervalsEditorProps> = (props) => {
+const IntervalsEditorWrapper = (props: IntervalsEditorProps) => {
   const { data, intervalType, selectOptions, totalLength, units = [] } = props;
   const [persistedData, setData] = useState<IntervalItem[]>(
     fixLinearMetadataItems(data.filter(notEmpty), totalLength)