| Info |
|---|
Here we focus on how we are going move away from the static data to network data |
5 files modified
npm install --save axios
...
Keep the endpoints in a separate file so we don’t have any machine numbers in the code
...
SalesHistory.jsx
...
Code that’s needed
endpoints.js
| Code Block | ||
|---|---|---|
| ||
const JSON_SERVER = 'http://localhost:3000';
export const EP_SALES = '/sale';
export const REMOTE_HOST = JSON_SERVER; |
salesConnections.js
| Code Block | ||
|---|---|---|
| ||
import axios from 'axios';
import { REMOTE_HOST, EP_SALES } from './endpoints';
export const getSales = async (setGetError) => {
try {
const res = await axios.get(REMOTE_HOST + EP_SALES);
return res.data.length ? ({ sales: res.data }) : ({ error: `There are no todos stored` }); |
SalesHistory.jsx
...
}
catch (e) {
setGetError(`Data not available from server: ${e.message}`)
return ({ error: `Data not available from server: ${e.message}` });
}
}; |
Network.jsx
| Code Block | ||
|---|---|---|
| ||
import React, { useState, useEffect } from 'react';
import { Modal } from 'react-bootstrap';
import './salesConnections'
import { getSales } from './salesConnections';
const Network = ({setDataStore}) =>
{
const [getError, setGetError] = useState(``);
// const [postError, setPostError] = useState(``);
// const [putError, setPutError] = useState(``);
useEffect(() => {
const getData = async () => {
let data = await getSales(setGetError);
setDataStore( data );
}
getData();
}, []);
return (
<>
{getError && <Modal handleClose={() => setGetError(``)} message={getError} />}
</>
)
}
export default Network; |