How to Make A Map Generator Using The MERN Stack And TypeScript — Part 6 — Playing with parameters

Let’s wrap this up

Goal

The goal of this part is to build a functional page that has options for seed, n, and rb.

Refactoring

Last time, we just focused on having a working page. That’s great but a bit dirty. Let’s refactor a bit. We’ll start by extracting the fetch function in an api folder.

Create an api folder, and it it add a map.ts

Then add this code:

const API_BASE = "http://localhost:5000/";

export const fetchMap = (): Promise<String> => {
  return new Promise((resolve, reject) => {
    const url = API_BASE + "api/maps/generate?n=10";
    fetch(url, { headers: { "Content-Type": "application/json" } })
      .then((result) => {
        result
          .json()
          .then((json) => resolve(json))
          .catch((error) => reject(error));
      })
      .catch((error) => reject(error));
  });
};

Change the MapRender with this:

const generateImage = useCallback(() => {
    fetchMap()
      .then((map) => {
        updateCanvas(map);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [updateCanvas]);