Waitp 1224 overlay selector desktop #4685
Conversation
| import { get } from '../api'; | ||
| import { EntityCode, ProjectCode } from '../../types'; | ||
|
|
||
| export const useFetchMapOverlays = (projectCode?: ProjectCode, entityCode?: EntityCode) => { |
There was a problem hiding this comment.
I wasn't sure what to call this query hook, but I have another hook in utils called useMapOverlays which means I can't call this the same thing
There was a problem hiding this comment.
I think it would be good to just move all the code from packages/tupaia-web/src/utils/useMapOverlays.ts into this file and name this one useMapOverlays since it is just derived api data with the exception of updateSelectedMapOverlay. You could then put updateSelectedMapOverlay inline in MapOverlayList, make it a stand alone util or keep it with useMapOverlays if you really want.
| ['mapOverlayData', projectCode, entityCode, mapOverlayCode], | ||
| async () => { | ||
| return get( | ||
| `measureData?mapOverlayCode=${mapOverlayCode}&organisationUnitCode=${entityCode}&projectCode=${projectCode}&shouldShowAllParentCountryResults=${ |
There was a problem hiding this comment.
it would be great to use the axios params field here for readability and ease of maintenance.
Also Ethan has re-done the endpoints for the map overlays so this should use legacyMapOverlayReport or report depending on whether or not it is legacy.
There was a problem hiding this comment.
Is that endpoint for fetching the measure data, or for something else?
There was a problem hiding this comment.
yes that's right for measureData
There was a problem hiding this comment.
I'm currently getting an error using this, and it seems to be different to measureData which is for map overlays (is that right?) and reports which I was using for dashboard report data. I'll add this in as part of part 2
There was a problem hiding this comment.
oh yeah it looks like there is a bug in the endpoint so yes that's leave this as is for now
| @media screen and (max-width: ${MOBILE_BREAKPOINT}) { | ||
| display: none; | ||
| } | ||
| `; | ||
|
|
||
| const Legend = styled.div` | ||
| height: 50px; |
There was a problem hiding this comment.
probably should be rems, right?
There was a problem hiding this comment.
It should, but this is just a placeholder so I don't think it's important at this stage
There was a problem hiding this comment.
oh true. I just see px and I jump 😆
| import { Entity } from '../../../types'; | ||
| import { useMapOverlayData } from '../../../api/queries'; | ||
| import { useParams } from 'react-router'; | ||
| import { periodToMoment } from '@tupaia/utils'; |
There was a problem hiding this comment.
just check order of imports here
| import { URL_SEARCH_PARAMS } from '../constants'; | ||
| import { MapOverlayGroup, SingleMapOverlayItem } from '../types'; | ||
|
|
||
| const flattenMapOverlays = (mapOverlayGroups: MapOverlayGroup[] = []): SingleMapOverlayItem[] => { |
There was a problem hiding this comment.
Could we make this mapOverlaysByCode and have it generate a dictionary of the map overlays like below. Then we could just lookup the result below instead of finding it. eg mapOverlaysByCode[selectedOverlayCode]
{
123: {...},
128: {...}
}
* WAITP-1224 initial working selector * WAITP-1244 Tidy up files * Update border radius * Update border radius logic * Tidy ups
* WAITP-1224 initial working selector * WAITP-1244 Tidy up files * Update border radius * Update border radius logic * Tidy ups
Issue WAITP-1224: Map overlay selector on desktop - part 1
Changes:
DesktopMapOverlaySelectorto be fully functionalMapOverlayListfor use across mobile and desktop overlay selectorsuseMapOverlayshook toutilsthat will also return useful map overlay associated infoScreenshots:
No overlays available
Overlays available and selected
