How to create a refresh button with 4 different data end points in React?-CodePudding

I created a table on(table.js) with 4 different endpoints(app.js) I would like to add a refresh button that will refresh the data when clicked on. How would I do that with 4 different endpoints? I did try the interval but it refreshed the whole page. This is my App.file where the data was fetched from.

  function App() {
  const [feed, setFeed] = useState([]);
  const [feedol, setFeedol] = useState([]);
  const [jsonData, setJsonData] = useState([]);
  const [azureData, setAzureData] = useState([]);

  useEffect(() => {
  fetch("/feed").then((response) =>
   response.json().then((data) => {
     setFeed(data);
   })
   );
  }, []);
   useEffect(() => {
   fetch("/feed_ol").then((response) =>
   response.json().then((data) => {
      setFeedol(data);
    })
   );
  }, []);

  useEffect(() => {
  fetch("/json_data").then((response) =>
    response.json().then((data) => {
    setJsonData(data["archive"][0]);
    })
  );
  }, []);

    useEffect(() => {
    fetch("/azure_data").then((response) =>
    response.json().then((data) => {
    setAzureData(data);
    })
  );
 }, []);

   
  Table.js

  import React from "react";
  import { Card, Container } from "react-bootstrap";
  import { BsArrowClockwise } from "react-icons/bs";
  import Cards from "./Cards";

  import "./tables.css";
   export const Tables = ({ feed, feedol, jsonData, azureData, refresh 
 }) => {
   return (
    <Container>
    <Cards />
     <Card className="table-card">
      <Card.Header>
         {" "}
        <button type="button" className=" refresh-button" onClick= 
        {}>
        {" "}
        <BsArrowClockwise />
       </button>{" "}
       OneLogin Outages{" "}
       </Card.Header>
       <Card.Body>
        <table className="table table-bordered">
           <thead>
           <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
            <tr>
             <td>{feedol.title}</td>
             <td>{feedol.link}</td>
             <td>{feedol.updated}</td>
             </tr>
            <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
            </tr>
            <tr>
            <td>{jsonData.service_name}</td>
            <td>{jsonData.summary}</td>
            <td>{jsonData.date}</td>
          </tr>
          </tbody>
        </table>
       </Card.Body>
       </Card>
      <Cards />
      <Card className="table-card">
       <Card.Header> Unifi Outages </Card.Header>
       <Card.Body>
         <table className="table table-bordered">
           <thead>
             <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{feed.title}</td>
            <td>{feed.link}</td>
            <td>{feed.updated}</td>
          </tr>
          <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
          </tr>
          <tr>
            <td>{azureData.title}</td>
            <td>{azureData.link}</td>
            <td>{azureData.updated}</td>
            </tr>
           </tbody>
         </table>
        </Card.Body>
        </Card>
       </Container>
           );
            };

CodePudding user response：

It doesn't matter how complex the refresh is, put it all in one function:

const App = () => {

  const fetchAndSet = () => {
    // all the fetch and sets
  }

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

  return <Table refresh={fetchAndSet} />;
}

CodePudding user response：

If your fetch action depends on a click, do not use useEffect as useEffect is intended to be used to synchronize state.


const URLS = {
  feed: '/feed',
  feedol: '/feed_ol',
  jsonData: '/json_data',
  azureData: '/azure_data'
}

function App() {


  const [data, setData] = useState({
    feed: [],
    feedol: [],
    jsonData: [],
    azureData: []

  })

  //reusable function
  const handleFetch = (type) => {
     fetch(URLS[type]).then((response) =>
       response.json().then((data) => {
         setData(d => ({
           ...d, [type]: data
        }));
      })
   }
   
  //Table.js

  import React from "react";
  import { Card, Container } from "react-bootstrap";
  import { BsArrowClockwise } from "react-icons/bs";
  import Cards from "./Cards";

  import "./tables.css";
   export const Tables = ({ feed, feedol, jsonData, azureData, handleFetch
 }) => {
   return (
    <Container>
    <Cards />
     <Card className="table-card">
      <Card.Header>
         {" "}
        <button type="button" className=" refresh-button" onClick={
          () => {Object.keys(URLS).map(handleFetch)}
        }>
        {" "}
        <BsArrowClockwise />
       </button>{" "}
       OneLogin Outages{" "}
       </Card.Header>
       <Card.Body>
        <table className="table table-bordered">
           <thead>
           <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
            <tr>
             <td>{feedol.title}</td>
             <td>{feedol.link}</td>
             <td>{feedol.updated}</td>
             </tr>
            <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
            </tr>
            <tr>
            <td>{jsonData.service_name}</td>
            <td>{jsonData.summary}</td>
            <td>{jsonData.date}</td>
          </tr>
          </tbody>
        </table>
       </Card.Body>
       </Card>
      <Cards />
      <Card className="table-card">
       <Card.Header> Unifi Outages </Card.Header>
       <Card.Body>
         <table className="table table-bordered">
           <thead>
             <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{feed.title}</td>
            <td>{feed.link}</td>
            <td>{feed.updated}</td>
          </tr>
          <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
          </tr>
          <tr>
            <td>{azureData.title}</td>
            <td>{azureData.link}</td>
            <td>{azureData.updated}</td>
            </tr>
           </tbody>
         </table>
        </Card.Body>
        </Card>
       </Container>
  );
};