diff --git a/hat/assets/js/apps/Iaso/domains/orgUnits/components/OrgUnitsFilters.tsx b/hat/assets/js/apps/Iaso/domains/orgUnits/components/OrgUnitsFilters.tsx index 1fc1821f9f..67e1b088d7 100644 --- a/hat/assets/js/apps/Iaso/domains/orgUnits/components/OrgUnitsFilters.tsx +++ b/hat/assets/js/apps/Iaso/domains/orgUnits/components/OrgUnitsFilters.tsx @@ -81,10 +81,7 @@ export const OrgUnitFilters: FunctionComponent = ({ locationLimit, setLocationLimit, }) => { - const classes: Record = useStyles(); - const { formatMessage }: { formatMessage: IntlFormatMessage } = - useSafeIntl(); - const currentUser = useCurrentUser(); + // STATES const [dataSourceId, setDataSourceId] = useState( currentSearch?.source ? parseInt(currentSearch?.source, 10) : undefined, ); @@ -99,19 +96,15 @@ export const OrgUnitFilters: FunctionComponent = ({ const [initialOrgUnitId, setInitialOrgUnitId] = useState< string | undefined >(currentSearch?.levels); - const [filters, setFilters] = useState>(currentSearch); const [showAdvancedSettings, setShowAdvancedSettings] = useState(false); - const { data: initialOrgUnit } = useGetOrgUnit(initialOrgUnitId); - - useSkipEffectOnMount(() => { - setInitialOrgUnitId(currentSearch?.levels); - }, [currentSearch?.levels]); + const [filters, setFilters] = useState>(currentSearch); + // STATES + // DATA + const { data: initialOrgUnit } = useGetOrgUnit(initialOrgUnitId); const { data: dataSources, isFetching: isFetchingDataSources } = useGetDataSources(true); - - const getVersionLabel = useGetVersionLabel(dataSources); const { data: projects, isFetching: isFetchingProjects } = useGetProjectsDropDown(); const { data: groups, isFetching: isFetchingGroups } = useGetGroups({ @@ -120,51 +113,71 @@ export const OrgUnitFilters: FunctionComponent = ({ }); const { data: orgUnitTypes, isFetching: isFetchingOrgUnitTypes } = useGetOrgUnitTypesDropdownOptions(projectId); - - const instancesOptions = useInstancesOptions(); - const { data: validationStatusOptions, isLoading: isLoadingValidationStatusOptions, } = useGetOrgUnitValidationStatus(true); - const handleChange = (key, value) => { - const newFilters: Record = { - ...filters, - }; - if (key === 'version') { - setSourceVersionId(parseInt(value, 10)); - } - if (key === 'source') { - setInitialOrgUnitId(undefined); - setSourceVersionId(undefined); - setDataSourceId(parseInt(value, 10)); - delete newFilters.levels; - delete newFilters.orgUnitParentId; - } - if (key === 'levels') { - setInitialOrgUnitId(value); - } - if (key === 'project') { - setInitialOrgUnitId(undefined); - newFilters.orgUnitTypeId = undefined; - setProjectId(parseInt(value, 10)); - } - if ((!value || value === '') && newFilters[key]) { - delete newFilters[key]; - } else { - newFilters[key] = value; - } - if (newFilters.source && newFilters.version) { - delete newFilters.source; - } - setFilters(newFilters); - const tempSearches: [Record] = [...searches]; - tempSearches[searchIndex] = newFilters; - setSearches(tempSearches); - }; - const currentColor = filters?.color - ? `#${filters.color}` - : getChipColors(searchIndex); + // DATA + + const getNewSourceVersionId = useCallback( + (newDataSourceId: number) => { + const dataSource = dataSources?.find( + src => src?.original?.id === newDataSourceId, + ); + const versions = dataSource?.original?.versions || []; + return ( + dataSource?.original?.default_version?.id || + (versions.length > 0 + ? versions[versions.length - 1]?.id + : undefined) + ); + }, + [dataSources], + ); + + // EVENTS + const handleChange = useCallback( + (key, value) => { + const newFilters: Record = { + ...filters, + }; + if (key === 'version') { + setSourceVersionId(parseInt(value, 10)); + } + if (key === 'source') { + setInitialOrgUnitId(undefined); + const newDataSourceId = parseInt(value, 10); + const newSourceVersionId = + getNewSourceVersionId(newDataSourceId); + setSourceVersionId(newSourceVersionId); + newFilters.version = newSourceVersionId?.toString(); + setDataSourceId(newDataSourceId); + delete newFilters.levels; + delete newFilters.orgUnitParentId; + } + if (key === 'levels') { + setInitialOrgUnitId(value); + } + if (key === 'project') { + setInitialOrgUnitId(undefined); + newFilters.orgUnitTypeId = undefined; + setProjectId(parseInt(value, 10)); + } + if ((!value || value === '') && newFilters[key]) { + delete newFilters[key]; + } else { + newFilters[key] = value; + } + if (newFilters.source && newFilters.version) { + delete newFilters.source; + } + setFilters(newFilters); + const tempSearches: [Record] = [...searches]; + tempSearches[searchIndex] = newFilters; + setSearches(tempSearches); + }, + [filters, searches, searchIndex, setSearches, getNewSourceVersionId], + ); const handleLocationLimitChange = useCallback( (key: string, value: number) => { @@ -172,6 +185,31 @@ export const OrgUnitFilters: FunctionComponent = ({ }, [setLocationLimit], ); + // EVENTS + + const currentColor = filters?.color + ? `#${filters.color}` + : getChipColors(searchIndex); + + // HOOKS + const currentUser = useCurrentUser(); + const instancesOptions = useInstancesOptions(); + const getVersionLabel = useGetVersionLabel(dataSources); + const classes: Record = useStyles(); + const { formatMessage }: { formatMessage: IntlFormatMessage } = + useSafeIntl(); + // HOOKS + + // USE EFFECTS + useSkipEffectOnMount(() => { + setInitialOrgUnitId(currentSearch?.levels); + }, [currentSearch?.levels]); + + useSkipEffectOnMount(() => { + if (filters !== currentSearch) { + setFilters(currentSearch); + } + }, [currentSearch]); // Splitting this effect from the one below, so we can use the deps array useEffect(() => { @@ -194,15 +232,7 @@ export const OrgUnitFilters: FunctionComponent = ({ }, [dataSourceId, dataSources, filters?.version]); useEffect(() => { - // if no dataSourceId or sourceVersionId are provided, use the default from user - if ( - !dataSourceId && - !sourceVersionId && - !filters?.version && - currentUser?.account?.default_version?.data_source?.id && - !filters?.group - ) { - // TO-DO => IA-1491 when coming from groups page, we need to prefill source and version from the selected group ! + if (!dataSourceId) { setDataSourceId( filters?.source ?? currentUser?.account?.default_version?.data_source?.id, @@ -211,36 +241,15 @@ export const OrgUnitFilters: FunctionComponent = ({ filters?.version ?? currentUser?.account?.default_version?.id, ); } + if (dataSourceId && !sourceVersionId) { + const newSourceVersionId = getNewSourceVersionId(dataSourceId); + setSourceVersionId(newSourceVersionId); + } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - // Set the version to the dataSources default version when changing source, or the first version if no default is set - useEffect(() => { - if (dataSourceId) { - const dataSource = dataSources?.find( - src => src?.original?.id === dataSourceId, - ); - if ( - dataSource && - !dataSource.original?.versions.find( - version => version.id === sourceVersionId, - ) - ) { - const selectedVersion = - dataSource.original?.default_version?.id || - dataSource.original?.versions[ - dataSource.original.versions.length - 1 - ]?.id; - setSourceVersionId(selectedVersion); - } - } - }, [dataSourceId, sourceVersionId, dataSources]); + // USE EFFECTS - useSkipEffectOnMount(() => { - if (filters !== currentSearch) { - setFilters(currentSearch); - } - }, [currentSearch]); const versionsDropDown = useMemo(() => { if (!dataSources || !dataSourceId) return []; return (