ERA-11239: track styles: patrol tracks (2) #1251
Conversation
| @@ -1,7 +1,7 @@ | |||
| { | |||
| "patrolTrackLegend": { | |||
| "icon": "Icon for {{title}}", | |||
There was a problem hiding this comment.
Two updates in the translations file:
- Simplify the item description since it was taking too much space unnecessarily
- Add the "Patrol: " prefix to the item title
| @@ -12,6 +12,7 @@ | |||
| flex-wrap: wrap; | |||
| height: var(--legend-height); | |||
| line-height: normal; | |||
| margin-bottom: 0.5rem; | |||
There was a problem hiding this comment.
Add gap between the heatmap legend and the patrol track legend:
| @@ -33,7 +34,7 @@ const PatrolFilter = ({ className }) => { | |||
| const containerRef = useRef(null); | |||
| const { t } = useTranslation('filters', { keyPrefix: 'patrolFilters' }); | |||
| const dispatch = useDispatch(); | |||
| const patrolStore = useSelector((state) => state.data.patrolStore); | |||
| const patrolsFeedMappedFromStore = useSelector(selectPatrolsFeedMappedFromStore); | |||
There was a problem hiding this comment.
Use the new selector that gets the response of the latest patrol feed request with the filtering params, and maps them to their patrol store objects, filtering the ones that are not defined, to calculate the total feed count:
| length: `${patrolData.trackData ? length(patrolData.trackData.track).toFixed(2): 0.00}km`, | ||
| }), | ||
| icon: <DasIcon className={styles.itemIcon} iconId={iconId} title={t('icon', { title })} type="events" />, | ||
| description: `${patrolData.trackData ? length(patrolData.trackData.track).toFixed(2): 0.00}km`, |
There was a problem hiding this comment.
Use the new translation for the item title and remove the unnecessary translation for the description, leave just the distance.
|
|
||
| const onItemClick = useCallback((id) => navigate(id), [navigate]); | ||
| const patrolsFeedMappedFromStore = useSelector(selectPatrolsFeedMappedFromStore); |
There was a problem hiding this comment.
Again, use the new selector to get the array of patrol objects that should be rendered in the patrol feed. These consider the latest response from the patrols feed request using the configured filters:
| import cloneDeep from 'lodash/cloneDeep'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
|
|
||
| import { fetchPatrols } from '../../ducks/patrols'; | ||
| import { fetchPatrolsFeed } from '../../ducks/patrols'; |
There was a problem hiding this comment.
The only logical change in this file is rename the old fetchPatrols to fetchPatrolsFeed (more explicit) but I did a bit of refactoring to clean an unnecessay useCallback.
| @@ -313,3 +274,49 @@ export const patrolTracksReducer = (state = INITIAL_PATROL_TRACKS_STATE, { type, | |||
|
|
|||
| return state; | |||
| }; | |||
|
|
|||
| // Actions | |||
There was a problem hiding this comment.
Rename and refactor the fetchPatrols method, now called fetchPatrolsFeed, and add back the reducer I removed (original cause of the feed issue) but in a cleaner way. Not storing the whole Axios response, but just the mapped ids of the patrols.
| @@ -68,6 +68,7 @@ const rootReducer = combineReducers({ | |||
| data: combineReducers({ | |||
| baseLayers: baseLayersReducer, | |||
| eventStore: eventStoreReducer, | |||
| patrolsFeed: patrolsFeedReducer, | |||
There was a problem hiding this comment.
Add back the clean version of the patrols reducer, now called patrolsFeed which is more explicit. Remember that the patrolStore reducer will have many patrols, but they don't correspond to the applied filters. This reducer contains the latest response of the patrols feed request, storing an array of the ids of the patrols that should be rendered in the feed. Those ids need to be resolved using the patrolStore.
| @@ -111,6 +112,12 @@ export const selectPatrolLeadersWithLastPosition = createSelector( | |||
| }) : null | |||
| ); | |||
|
|
|||
| export const selectPatrolsFeedMappedFromStore = createSelector( | |||
There was a problem hiding this comment.
The new selector that maps the patrols feed stored in the new reducer to their patrol objects in the patrol store.
What does this PR do?
During QA process, @AlanCalvillo found out the following issues that are fixed here:
Relevant link(s)
ERA-11239
Where / how to start reviewing (optional)
See the comments added in each file explaining the fix to the listed issues.