-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
No change of filters behavior. - move all filter states in useFilterTrainSchedules - move useFilterTrainSchedules in Timetable component - remove useEffects in the custom hook in favor of useMemos - remove displayedTimetableItems state and reuse the filtered array from the custom hook - group the filters to a single object to facilitate the props drilling - rename some ref to train schedule in timetable item Signed-off-by: SharglutDev <[email protected]>
- Loading branch information
1 parent
4a0d36b
commit 3176332
Showing
7 changed files
with
178 additions
and
193 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
front/src/modules/trainschedule/components/Timetable/useFilterTimetableItems.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { useMemo, useState } from 'react'; | ||
|
|
||
| import { uniq } from 'lodash'; | ||
|
|
||
| import { useDebounce } from 'utils/helpers'; | ||
|
|
||
| import type { | ||
| ScheduledPointsHonoredFilter, | ||
| TimetableFilters, | ||
| TimetableItemResult, | ||
| ValidityFilter, | ||
| } from './types'; | ||
| import { extractTagCode, keepItem } from './utils'; | ||
|
|
||
| /** | ||
| * Hook filtering a timetable items array depending on some filters | ||
| * @param timetableItems the timetable's items | ||
| * @returns all filters, their setters, the unique speed limit tags among all items and the filtered timetable items | ||
| */ | ||
| const useFilterTimetableItems = ( | ||
| timetableItems: TimetableItemResult[] | ||
| ): TimetableFilters & { filteredTimetableItems: TimetableItemResult[] } => { | ||
| const [nameLabelFilter, setNameLabelFilter] = useState(''); | ||
| const [rollingStockFilter, setRollingStockFilter] = useState(''); | ||
| const [validityFilter, setValidityFilter] = useState<ValidityFilter>('both'); | ||
| const [scheduledPointsHonoredFilter, setScheduledPointsHonoredFilter] = | ||
| useState<ScheduledPointsHonoredFilter>('both'); | ||
| const [selectedTags, setSelectedTags] = useState<Set<string | null>>(new Set()); | ||
|
|
||
| const debouncedNameLabelFilter = useDebounce(nameLabelFilter, 500); | ||
| const debouncedRollingstockFilter = useDebounce(rollingStockFilter, 500); | ||
|
|
||
| const uniqueTags = useMemo( | ||
| () => uniq(timetableItems.map((timetableItem) => extractTagCode(timetableItem.speedLimitTag))), | ||
| [timetableItems] | ||
| ); | ||
|
|
||
| const filteredTimetableItems: TimetableItemResult[] = useMemo( | ||
| () => | ||
| timetableItems.filter((timetableItem) => { | ||
| if (!keepItem(timetableItem, debouncedNameLabelFilter)) return false; | ||
|
|
||
| // Apply validity filter | ||
| if (validityFilter !== 'both') { | ||
| if (validityFilter === 'valid' && !timetableItem.isValid) return false; | ||
| if (validityFilter === 'invalid' && timetableItem.isValid) return false; | ||
| } | ||
|
|
||
| // Apply scheduled points honored filter | ||
| if (scheduledPointsHonoredFilter !== 'both') { | ||
| if (!timetableItem.isValid) { | ||
| return false; | ||
| } | ||
| const { scheduledPointsNotHonored } = timetableItem; | ||
| if ( | ||
| (scheduledPointsHonoredFilter === 'honored' && scheduledPointsNotHonored) || | ||
| (scheduledPointsHonoredFilter === 'notHonored' && !scheduledPointsNotHonored) | ||
| ) { | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| // Apply tag filter | ||
| if ( | ||
| selectedTags.size > 0 && | ||
| !selectedTags.has(extractTagCode(timetableItem.speedLimitTag)) | ||
| ) { | ||
| return false; | ||
| } | ||
|
|
||
| // Apply rolling stock filter | ||
| if (debouncedRollingstockFilter) { | ||
| const { | ||
| detail = '', | ||
| family = '', | ||
| reference = '', | ||
| series = '', | ||
| subseries = '', | ||
| } = timetableItem.rollingStock?.metadata || {}; | ||
| if ( | ||
| ![detail, family, reference, series, subseries].some((v) => | ||
| v.toLowerCase().includes(debouncedRollingstockFilter.toLowerCase()) | ||
| ) | ||
| ) | ||
| return false; | ||
| } | ||
|
|
||
| return true; | ||
| }), | ||
| [ | ||
| timetableItems, | ||
| debouncedNameLabelFilter, | ||
| debouncedRollingstockFilter, | ||
| validityFilter, | ||
| scheduledPointsHonoredFilter, | ||
| selectedTags, | ||
| ] | ||
| ); | ||
|
|
||
| return { | ||
| filteredTimetableItems, | ||
| uniqueTags, | ||
| nameLabelFilter, | ||
| setNameLabelFilter, | ||
| rollingStockFilter, | ||
| setRollingStockFilter, | ||
| validityFilter, | ||
| setValidityFilter, | ||
| scheduledPointsHonoredFilter, | ||
| setScheduledPointsHonoredFilter, | ||
| selectedTags, | ||
| setSelectedTags, | ||
| }; | ||
| }; | ||
|
|
||
| export default useFilterTimetableItems; |
Oops, something went wrong.