Final post

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.