Well this is the final post for me.
I create a draft pr after talking with the repo owner, our conversation can be found here issue.
The pr can be found here.
I originally planed to finish before Monday but I wanted to wait for code owner to do a pr but since I don't have infinite time for this assignment now I created a draft.
The implementation turned out a little different from what I originally planed here is what I have done:
I originally had a very bad approach since I did not read the code in detail and was working on an old version of the code base, it was basically doing copy of fetchSelectedRegionGeometry where I would send "farce to true, and used a use state that would replace the map and not just add a button.
const fetchSelectedRegionGeometry = async (force = true) => {
if (selectedRegion.id !== null && selectedRegion.id !== 0) {
const response = await fetchRegionGeometry(selectedRegion.id, selectedHierarchy.hierarchyId, force);
if (response) {
return response.geometry;
} else {
return null;
}
}
}
// and
<div>
{hasGeometryData ? (
<div ref={mapContainer} style={{ width: '100%', height: '400px' }} />
) : (
<Button onClick={handleGetGeometry}>Get Geometry</Button>
)}
</div>
When I create a draft I had not linter so I asked around for the code owener and he told me that I forgot to pull new changes, yes this was a dumb mistake that wasted my time since I was working on an old file anyways I learned my mistake and id a rebaseing.
This set back allowed me to rething my logic and understand the code better
here are the changes that make the work shorter and better:
const fetchSelectedRegionGeometry = async (force = false) => {
const cacheIndex = regionGeometryCache.current.findIndex(
const cacheIndex = regionGeometryCache.current.findIndex(
(item) => item.id === selectedRegion.id && item.hierarchyId === selectedHierarchy.hierarchyId,
(item) => item.id === selectedRegion.id && item.hierarchyId === selectedHierarchy.hierarchyId,
);
);
// Check if the geometry for the selected region is already in the cache
// Check if the geometry for the selected region is already in the cache
if (cacheIndex !== -1) {
if (cacheIndex !== -1 && !force) {
return regionGeometryCache.current[cacheIndex].geometry;
return regionGeometryCache.current[cacheIndex].geometry;
}
}
// and
const handleForceGeometryFetch = async () => {
await fetchSelectedRegionGeometry(true);
initializeMap();
};
return (
<div>
{!fetchSelectedRegionGeometry() && (
<Button onClick={handleForceGeometryFetch}>Fetch Geometry</Button>
)}
<div ref={mapContainer} style={{ width: '100%', height: '400px' }} />
</div>
);
I realized I could simply set "force" to true, and it would be automatically passed. I included it in the fetch and created a function to retrieve the fetch status and display the button.
I will await reviews and make further changes if necessary, but I believe this will be my final post for the course as the term has ended.
Top comments (0)