#Table not showing

30 messages · Page 1 of 1 (latest)

mortal bloom
#

Hey everyone,

I'm currently working on a project where I'm trying to display data for "Mercados" in a dynamic , reusable table. The table is displaying other data like "Sport" and "Region" correctly, but for some reason, the "Mercados" data is not showing up.
I've reproduced the main component in a sandbox, and I'm hoping someone could take a look and help me troubleshoot the issue. Here's the link to the sandbox: https://codesandbox.io/p/sandbox/mercados-pnm3mz

mint ermine
#

most of the types used in your sandbox are missing

#

so kinda hard to try it and figure out what's wrong

#

also, it's supposed to be a React webapp but you are using process.env in the Service.ts?

#

also, I'd ditch axios and use the standard fetch function

#

quite a few return types are missing as well for those methods

# 
const Services = {
  get: {
    getAllSports: () =>
      fetch(`${BASE_URL}/sports`)
        .then((response) => response.json() as Promise<ISportApi>)
        .then((data) => data.data),
    getAllRegions: () =>
      fetch(`${BASE_URL}/regions`)
        .then((response) => response.json() as Promise<IRegionApi>)
        .then((data) => data.data),
    getARegion: (id: number) =>
      fetch(`${BASE_URL}/regions/${id}`)
        .then((response) => response.json() as Promise<unknown>)
        .then((response) => response.data),
    getAllLeagues: () =>
      fetch(`${BASE_URL}/leagues`)
        .then((response) => response.json() as Promise<ILeagueApi>)
        .then((data) => data.data),
    getALeague: (regionId: number, leagueId: number) =>
      fetch(`${BASE_URL}/regions/${regionId}/leagues/${leagueId}`)
        .then((response) => response.json() as Promise<unknown>)
        .then((response) => response.data),
  },
  post: {
    createSport: (createNewSport: IGetAllSports) =>
      fetch(`${BASE_URL}/sports`, {
        method: "POST",
        body: JSON.stringify(createNewSport),
      })
        .then((response) => response.json() as Promise<unknown>)
        .then((response) => response.data),
    createRegion: (createNewRegion: IGetAllRegions) =>
      fetch(`${BASE_URL}/regions`, {
        method: "POST",
        body: JSON.stringify({ ...createNewRegion, abpIds: [] }),
      })
        .then((response) => response.json() as Promise<unknown>)
        .then((response) => response.data),
    createLeague: (regionId: number, createNewLeague: IGetAllLeagues) =>
      fetch(`${BASE_URL}/regions/${regionId}/leagues`, {
        method: "POST",
        body: JSON.stringify(createNewLeague),
      })
        .then((response) => response.json() as Promise<unknown>)
        .then((response) => response.data),
  },
  // ...
# 
  put: {
    editSport: (id: number, editSportData: IGetAllSports) =>
      fetch(`${BASE_URL}/sports/${id}`, {
        method: "PUT",
        body: JSON.stringify(editSportData),
      }).then((response) => response.json() as Promise<unknown>),
    editRegion: (id: number, editRegionData: IGetAllRegions) =>
      fetch(`${BASE_URL}/regions/${id}`, {
        method: "PUT",
        body: JSON.stringify({ ...editRegionData, abpIds: [] }),
      }).then((response) => response.json() as Promise<unknown>),
    editLeague: (
      regionId: number,
      leagueId: number,
      editLeagueData: IGetAllLeagues
    ) =>
      fetch(`${BASE_URL}/regions/${regionId}/leagues/${leagueId}`, {
        method: "PUT",
        body: JSON.stringify(editLeagueData),
      }).then((response) => response.json() as Promise<unknown>),
  },
  delete: {
    deleteSport: (id: number) =>
      fetch(`${BASE_URL}/sports/${id}`, { method: "DELETE" })
        .then((response) => response.json() as Promise<ISportApi>)
        .then((response) => response.data),
    deleteRegion: (id: number) =>
      fetch(`${BASE_URL}/regions/${id}`, { method: "DELETE" })
        .then((response) => response.json() as Promise<IRegionApi>)
        .then((response) => response.data),
    deleteLeague: (regionId: number, leagueId: number) =>
      fetch(`${BASE_URL}/regions/${regionId}/leagues/${leagueId}`, {
        method: "DELETE",
      })
        .then((response) => response.json() as Promise<ILeagueApi>)
        .then((response) => response.data),
  },
};
mortal bloom
#

What types are missing 🤔

mint ermine
#

look for unknown in the snippet above

#

also you could also create custom hooks to fetch the data for you
instead of having the same code in useEffect every time
look up useFetch

mortal bloom
#

I put the types of config props I got from swagger ui but I don't Really know typescript so u might be right

mint ermine
#

welp, It's recommended to learn some TS before trying to use TS 🙃

mortal bloom
#

I have to do my tasks for this sprint ASAP. The sport and leagues ,regions table is working great. I did same thing with Mercados but it not showing up

mint ermine
#

don't think await is allowed inside of a react component

#

or at least not inside of the useEffect hook

# 
// Marcados.tsx
  useEffect(() => {
    Services.get.getAllMarkets().then(setAllMarkets);
  }, []);

// Service.ts
    getAllMarkets: () =>
      fetch(`${BASE_URL}/markets`)
        .then((response) => response.json() as Promise<IMarket[]>),
mortal bloom
#

I changed it but still it's not working

mint ermine
#

define "not working"

#

otherwise I can't help you

#

if I don't know what's wrong

#

make sure it fetches the data correctly

mortal bloom
#

its not showing the table or an error

image.png
mint ermine
#

and you don't have any errors in the console

#

check the requests

#

check the useState value

#

you can install some extension to inspect the react components and their state

mortal bloom
#

what extensio do i need to install?

mint ermine
#

check the react docs, use google, idk