mock-api-response-react

import React, { useEffect, useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

import { default as Axios } from "axios";
import MockAdapter from "axios-mock-adapter";
var mock = new MockAdapter(Axios);

const useStyles = makeStyles({
  table: {
    minWidth: 650
  }
});

export const DataTable = () => {
  const classes = useStyles();
  const [records, setRecords] = useState(null);
  useEffect(() => {
    mock.onGet("http://dummy.restapiexample.com/api/v1/employees").reply(200, {
      data: [{ employee_name: "David Barrat" }]
    });

    Axios.get("http://dummy.restapiexample.com/api/v1/employees").then(
      (response: any) => {
        const { data } = response.data;
        setRecords(data);
      }
    );
  }, []);

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell style={{ fontWeight: 800 }}>Employee name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {records?.map((row, id: number) => (
            <TableRow key={id}>
              <TableCell component="th" scope="row">
                {row.employee_name}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};