Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 6 Next »

Here we focus on how we are going move away from the static data to network data

5 files modified

npm install 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

const   JSON_SERVER = 'http://localhost:3000';
export const   EP_SALES    = '/sale';


export const   REMOTE_HOST = JSON_SERVER;

salesConnections.js

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` });
    }
    catch (e) {
      setGetError(`Data not available from server: ${e.message}`)
      return ({ error: `Data not available from server: ${e.message}` });
    }
  };

Network.jsx

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;
  • No labels