Skip to content

Commit

Permalink
front: avoid useless query on editor for switch types and infra
Browse files Browse the repository at this point in the history
Fix #6971

Unsubscribe some RTK queries to avoid useless queries, by creating
wrapper for useInfra & useSwitchType.
  • Loading branch information
sim51 authored and SharglutDev committed Jul 2, 2024
1 parent d6f255b commit 0dc83c3
Show file tree
Hide file tree
Showing 11 changed files with 168 additions and 61 deletions.
14 changes: 5 additions & 9 deletions front/src/applications/editor/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,18 @@ import { NEW_ENTITY_ID } from 'applications/editor/data/utils';
import Map from 'applications/editor/Map';
import TOOL_NAMES from 'applications/editor/tools/constsToolNames';
import TOOLS from 'applications/editor/tools/constsTools';
import { useSwitchTypes } from 'applications/editor/tools/switchEdition/types';
import useSwitchTypes from 'applications/editor/tools/switchEdition/useSwitchTypes';
import type { switchProps } from 'applications/editor/tools/switchProps';
import type { CommonToolState } from 'applications/editor/tools/types';
import { centerMapOnObject, selectEntities } from 'applications/editor/tools/utils';
import { osrdEditoastApi, type ObjectType } from 'common/api/osrdEditoastApi';
import type { ObjectType } from 'common/api/osrdEditoastApi';
import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
import { LoaderState } from 'common/Loaders';
import MapButtons from 'common/Map/Buttons/MapButtons';
import MapSearch from 'common/Map/Search/MapSearch';
import { useInfraActions, useInfraID, useOsrdActions } from 'common/osrdContext';
import Tipped from 'common/Tipped';
import useInfra from 'modules/infra/useInfra';
import type { EditorSliceActions } from 'reducers/editor';
import { getEditorState, getInfraLockStatus } from 'reducers/editor/selectors';
import { loadDataModel, updateTotalsIssue } from 'reducers/editor/thunkActions';
Expand All @@ -52,7 +53,7 @@ const Editor = () => {
const isLoading = useSelector(getIsLoading);
const isLocked = useSelector(getInfraLockStatus);
const editorState = useSelector(getEditorState);
const switchTypes = useSwitchTypes(infraID);
const { data: switchTypes } = useSwitchTypes(infraID);
/* eslint-disable @typescript-eslint/no-explicit-any */
const [toolAndState, setToolAndState] = useState<FullTool<any>>({
tool: TOOLS[TOOL_NAMES.SELECTION],
Expand All @@ -65,12 +66,7 @@ const Editor = () => {
}, [setRenderingFingerprint]);

const [isFormSubmited, setIsFormSubmited] = useState(false);
const { data: infra } = osrdEditoastApi.endpoints.getInfraByInfraId.useQuery(
{ infraId: infraID as number },
{
skip: !infraID,
}
);
const { data: infra } = useInfra(infraID);
const { updateInfra } = useInfraActions();

const switchTool = useCallback(
Expand Down
19 changes: 3 additions & 16 deletions front/src/applications/editor/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,18 @@
import React, { useEffect } from 'react';
import React from 'react';

import { Lock } from '@osrd-project/ui-icons';
import { useTranslation } from 'react-i18next';
import { Route, Routes } from 'react-router-dom';

import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
import { ModalProvider } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
import NavBarSNCF from 'common/BootstrapSNCF/NavBarSNCF';
import { useInfraID } from 'common/osrdContext';
import { useCurrentInfra } from 'modules/infra/useInfra';

import Editor from './Editor';

export default function HomeEditorUnplugged() {
const { t } = useTranslation(['home/home', 'referenceMap']);
const infraID = useInfraID();
const [getInfraByInfraId, { data: infra }] =
osrdEditoastApi.endpoints.getInfraByInfraId.useLazyQuery({});

/**
* When infra id changes
* => fetch it
*/
useEffect(() => {
if (infraID) {
getInfraByInfraId({ infraId: infraID });
}
}, [infraID, getInfraByInfraId]);
const { data: infra } = useCurrentInfra();

return (
<ModalProvider>
Expand Down
4 changes: 2 additions & 2 deletions front/src/applications/editor/Map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { LAYER_TO_EDITOAST_DICT, LAYERS_SET } from 'applications/editor/consts';
import type { Layer } from 'applications/editor/consts';
import EditorContext from 'applications/editor/context';
import { getEntity } from 'applications/editor/data/api';
import { useSwitchTypes } from 'applications/editor/tools/switchEdition/types';
import useSwitchTypes from 'applications/editor/tools/switchEdition/useSwitchTypes';
import type { CommonToolState } from 'applications/editor/tools/types';
import type { EditorContextType, ExtendedEditorContextType, Tool } from 'applications/editor/types';
import type { InfraError } from 'common/api/osrdEditoastApi';
Expand Down Expand Up @@ -76,7 +76,7 @@ const MapUnplugged = ({
isHovering: false,
});
const context = useContext(EditorContext) as EditorContextType<CommonToolState>;
const switchTypes = useSwitchTypes(infraID);
const { data: switchTypes } = useSwitchTypes(infraID);
const editorState = useSelector(getEditorState);
const showOSM = useSelector(getShowOSM);
const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import CheckboxRadioSNCF from 'common/BootstrapSNCF/CheckboxRadioSNCF';
import { useInfraID } from 'common/osrdContext';
import Tipped from 'common/Tipped';

import { useSwitchTypes } from '../../switchEdition/types';
import useSwitchTypes from '../../switchEdition/useSwitchTypes';
import type {
AvailableSwitchPositions,
RangeEditionState,
Expand All @@ -34,7 +34,7 @@ const SwitchList: React.FC<SwitchListProps> = ({
availableSwitchesPositions,
}) => {
const infraID = useInfraID();
const switchTypes = useSwitchTypes(infraID);
const { data: switchTypes } = useSwitchTypes(infraID);

/** Switch positions ordered by type for the current infra */
const switchPositionsByType = switchTypes.reduce<AvailableSwitchPositions>(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ const SwitchEditionLayers = () => {
}
);
}
}, [entity?.properties?.ports, infraID]);
}, [entity?.properties?.ports, infraID, switchType]);

return (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,6 @@ const SwitchEditionLeftPanel = () => {
isNew,
} = useSwitch();

if (!switchType || !flatSwitchEntity) {
return null;
}

// Hack to be able to launch the submit event from the rjsf form by using
// the toolbar button instead of the form one.
// See https://github.com/rjsf-team/react-jsonschema-form/issues/500
Expand All @@ -59,6 +55,7 @@ const SwitchEditionLeftPanel = () => {
}
}, [isFormSubmited]);

if (!switchType || !flatSwitchEntity) return null;
return (
<div>
<legend>{t('Editor.tools.switch-edition.switch-type')}</legend>
Expand Down
24 changes: 0 additions & 24 deletions front/src/applications/editor/tools/switchEdition/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import type { Position, Point } from 'geojson';

import type { CommonToolState } from 'applications/editor/tools/types';
import type { EditorEntity } from 'applications/editor/typesEditorEntity';
import { osrdEditoastApi } from 'common/api/osrdEditoastApi';

export const ENDPOINTS = ['BEGIN', 'END'] as const;
export type EndPoint = (typeof ENDPOINTS)[number];
Expand Down Expand Up @@ -66,26 +65,3 @@ export type SwitchEditionState = CommonToolState & {
hoveredPoint: PortEndPointCandidate | null;
};
};

// Client prefered order
const trackNodeTypeOrder = [
'link',
'point_switch',
'crossing',
'single_slip_switch',
'double_slip_switch',
];

export const useSwitchTypes = (infraID: number | undefined) => {
const { data } = osrdEditoastApi.endpoints.getInfraByInfraIdSwitchTypes.useQuery(
{ infraId: infraID as number },
{ skip: !infraID }
);
let orderedData = [] as SwitchType[];
if (data) {
orderedData = ([...data] as SwitchType[]).sort(
(a, b) => trackNodeTypeOrder.indexOf(a.id) - trackNodeTypeOrder.indexOf(b.id)
);
}
return orderedData;
};
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { first, keyBy } from 'lodash';

import EditorContext from 'applications/editor/context';
import { NEW_ENTITY_ID } from 'applications/editor/data/utils';
import { useSwitchTypes } from 'applications/editor/tools/switchEdition/types';
import type {
SwitchEditionState,
SwitchEntity,
} from 'applications/editor/tools/switchEdition/types';
import useSwitchTypes from 'applications/editor/tools/switchEdition/useSwitchTypes';
import {
getSwitchTypeJSONSchema,
switchToFlatSwitch,
Expand All @@ -27,7 +27,7 @@ const useSwitch = () => {

// Retrieve proper data
const infraID = useInfraID();
const switchTypes = useSwitchTypes(infraID);
const { data: switchTypes } = useSwitchTypes(infraID);

const switchTypesDict = useMemo(() => keyBy(switchTypes, 'id'), [switchTypes]);
const switchTypeOptions = useMemo(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { useCallback, useEffect, useState } from 'react';

import { isNil } from 'lodash';

import { osrdEditoastApi } from 'common/api/osrdEditoastApi';

import type { SwitchType } from './types';

// Client prefered order
const trackNodeTypeOrder = [
'link',
'point_switch',
'crossing',
'single_slip_switch',
'double_slip_switch',
];

export default function useSwitchTypes(infraID: number | undefined) {
const [data, setData] = useState<SwitchType[]>([]);
const [getInfraSwitchTypes, { isLoading, error }] =
osrdEditoastApi.endpoints.getInfraByInfraIdSwitchTypes.useLazyQuery({});

const fetch = useCallback(
async (infraId?: number) => {
// reset
setData([]);
try {
if (!isNil(infraId)) {
const resp = getInfraSwitchTypes({ infraId });
const result = await resp.unwrap();
if (result) {
const orderedData = [...result] as SwitchType[];
orderedData.sort(
(a, b) => trackNodeTypeOrder.indexOf(a.id) - trackNodeTypeOrder.indexOf(b.id)
);
setData(orderedData);
} else {
setData([]);
}
resp.unsubscribe();
}
} catch (e) {
console.error(e);
}
},
[getInfraSwitchTypes]
);

useEffect(() => {
fetch(infraID);
}, [infraID, fetch]);

return { data, isLoading, error };
}
52 changes: 51 additions & 1 deletion front/src/applications/editor/tools/switchEdition/utils.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { useCallback, useEffect, useState } from 'react';

import type { Point } from 'geojson';
import type { JSONSchema7 } from 'json-schema';
import { omit, omitBy, without } from 'lodash';
import { isNil, omit, omitBy, without } from 'lodash';

import { NEW_ENTITY_ID } from 'applications/editor/data/utils';
import type { EditorEntity } from 'applications/editor/typesEditorEntity';
import { osrdEditoastApi } from 'common/api/osrdEditoastApi';

import type { SwitchEntity, SwitchType, TrackEndpoint } from './types';

Expand Down Expand Up @@ -106,3 +109,50 @@ export function switchToFlatSwitch(
},
};
}

// Client prefered order
const trackNodeTypeOrder = [
'link',
'point_switch',
'crossing',
'single_slip_switch',
'double_slip_switch',
];

export function useSwitchTypes(infraID: number | undefined) {
const [data, setData] = useState<SwitchType[]>([]);
const [getInfraSwitchTypes, { isLoading, error }] =
osrdEditoastApi.endpoints.getInfraByInfraIdSwitchTypes.useLazyQuery({});

const fetch = useCallback(
async (infraId?: number) => {
// reset
setData([]);
try {
if (!isNil(infraId)) {
const resp = getInfraSwitchTypes({ infraId });
const result = await resp.unwrap();
if (result) {
const orderedData = [...result] as SwitchType[];
orderedData.sort(
(a, b) => trackNodeTypeOrder.indexOf(a.id) - trackNodeTypeOrder.indexOf(b.id)
);
setData(orderedData);
} else {
setData([]);
}
resp.unsubscribe();
}
} catch (e) {
console.error(e);
}
},
[getInfraSwitchTypes]
);

useEffect(() => {
fetch(infraID);
}, [infraID, fetch]);

return { data, isLoading, error };
}
47 changes: 47 additions & 0 deletions front/src/modules/infra/useInfra.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { useCallback, useEffect, useState } from 'react';

import { isNil } from 'lodash';

import type { Infra } from 'common/api/osrdEditoastApi';
import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
import { useInfraID } from 'common/osrdContext';

/**
* Hook to retrieve an infra item by it's id.
* Using RTK `useLazyQuery` does the job but also produces a lot of queries due to its subscription mechanism for updating its cache.
*/
export default function useInfra(infraID?: number) {
const [data, setData] = useState<Infra | null>(null);
const [getInfra, { isLoading, error }] = osrdEditoastApi.endpoints.getInfraByInfraId.useLazyQuery(
{}
);

const fetch = useCallback(
async (infraId?: number) => {
// reset
setData(null);
try {
if (!isNil(infraId)) {
const resp = getInfra({ infraId });
const result = await resp.unwrap();
setData(result || null);
resp.unsubscribe();
}
} catch (e) {
console.error(e);
}
},
[getInfra]
);

useEffect(() => {
fetch(infraID);
}, [infraID, fetch]);

return { data, isLoading, error };
}

export function useCurrentInfra() {
const infraID = useInfraID();
return useInfra(infraID);
}

0 comments on commit 0dc83c3

Please sign in to comment.