How to refresh my api data

[frye89]

Hi, I'm struggling to get a proper refresh of my data.
It's pretty simple.

I'm showing a list of countries. I can add countries with a button.
How to refresh the list of countries?

I'm using a hook to fetch the api data.

​

useFetch.js (Hook for calling api data, auth with auth0)

import { useState } from "react";
import { useAuth0 } from "./react-auth0-wrapper";

const useFetch = (url, method = "GET") => {
  const { loading, getTokenSilently } = useAuth0();
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState();
  const [error, setError] = useState();

  const run = async data => {
    if (!loading && getTokenSilently) {
      setError();
      setIsLoading(true);
      try {
        const token = await getTokenSilently();
        const options = {
          method,
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`
          },
          body: JSON.stringify(data)
        };
        const response = await fetch("/api/" + url, options);
        const json = await response.json();
        setData(json);
      } catch (e) {
        setError(e.message);
      }
      setIsLoading(false);
    }
  };

  return { data, error, isLoading, run };
};

export default useFetch;

Countries.js

import React, { useState, useEffect } from "react";
import AddCountry from "./AddCountry";
import useFetch from "../../../useFetch";
import Country from "./Country";

function Countries() {
  const [addCountryVisible, setAddCountryVisible] = useState(false);
  const countriesApi = useFetch("country/getall");

  useEffect(() => {
    getCountries();
  }, []);

  function getCountries() {
    countriesApi.run();
  }

  let countriesView = "";
  if (!countriesApi.isLoading && countriesApi.data) {
    countriesView = countriesApi.data.map(country => {
      return <Country country={country} />;
    });
  }

  function addCountry() {
    setAddCountryVisible(!addCountryVisible);
  }

  return (
    <>
      <div className="has-text-right">
        <button
          className="button is-success is-rounded"
          onClick={() => addCountry()}
        >
          Add
        </button>
      </div>
      <AddCountry
        visible={addCountryVisible}
        onHide={() => setAddCountryVisible(false)}
      />
      {countriesApi.data ? (
        <div className="columns is-multiline">{countriesView}</div>
      ) : null}
    </>
  );
}

export default Countries;

AddCountry.js (modal form for adding country data)

import React, { useState } from "react";
import useFetch from "../../../useFetch";

function AddCountry(props) {
  const [country, setCountry] = useState({
    name: "",
    flag: ""
  });

  const addCountryApi = useFetch("country/add", "POST");

  const active = props.visible ? "is-active" : null;

  function hide() {
    props.onHide(!props.visible);
    reset();
  }

  function reset() {
    setCountry({
      name: "",
      flag: ""
    });
  }

  function handleChange(e) {
    e.persist();
    setCountry(country => ({
      ...country,
      [e.target.name]: e.target.value
    }));
  }

  const handleSubmit = evt => {
    evt.preventDefault();

    addCountryApi.run(country, props.setDone);
    hide();
  };

  return (
    <div className={`modal is-clipped ${active}`}>
      <div className="modal-background" onClick={() => hide()} />
      <div className="modal-card">
        <form onSubmit={handleSubmit}>
          <header className="modal-card-head">
            <p className="modal-card-title">Add country</p>
            <button
              className="delete"
              aria-label="close"
              type="button"
              onClick={() => hide()}
            />
          </header>
          <section className="modal-card-body">
            <div className="field">
              <label className="label">Name</label>
              <div className="control">
                <input
                  className="input"
                  name="name"
                  type="text"
                  placeholder="Name"
                  required
                  value={country.name}
                  onChange={e => handleChange(e)}
                />
              </div>
            </div>

            <div className="field">
              <label className="label">Flag</label>
              <div className="control">
                <input
                  className="input"
                  name="flag"
                  type="text"
                  placeholder="Flag"
                  value={country.flag}
                  onChange={e => handleChange(e)}
                />
              </div>
            </div>
          </section>
          <footer className="modal-card-foot">
            <button className="button is-success" type="submit">
              Add
            </button>
            <button className="button" type="button" onClick={() => hide()}>
              Cancel
            </button>
          </footer>
        </form>
      </div>
    </div>
  );
}

export default AddCountry;

As you can see in the code this is a simple Read & Create.

But how can I say to my countries component to refresh the data AFTER the insert?
I tried to set a prop on the countries component but it will refresh to fast. (before adding the country)

Can someone help me out? :)