Throughout Tokyo React Javascript Admin Dashboard you will find a few examples of API calls, mocked using Axios.
Below is a simple example of an API call implementation.
1import { useState, useEffect, useCallback } from 'react';
2
3 import { Card } from '@mui/material';
4 import axios from 'src/utils/axios';
5 import useRefMounted from 'src/hooks/useRefMounted';
6
7 import RecentOrdersTable from './RecentOrdersTable';
8
9 function RecentOrders() {
10 const isMountedRef = useRefMounted();
11 const [cryptoOrders, setCryptoOrders] = useState([]);
12
13 const getCryptoOrders = useCallback(async () => {
14 try {
15 const response = await axios.get('/api/crypto-orders');
16
17 if (isMountedRef.current) {
18 setCryptoOrders(response.data.cryptoOrders);
19 }
20 } catch (err) {
21 console.error(err);
22 }
23 }, [isMountedRef]);
24
25 useEffect(() => {
26 getCryptoOrders();
27 }, [getCryptoOrders]);
28
29 return (
30 <Card>
31 <RecentOrdersTable cryptoOrders={cryptoOrders} />
32 </Card>
33 );
34 }
35
36 export default RecentOrders;
37 Using Axios Mock Adapter you can simulate request calls. Check out the example below:
1import { mock } from 'src/utils/axios';
2
3
4mock.onGet('/api/crypto-orders').reply(() => {
5 const cryptoOrders = [
6 {
7 id: '1',
8 orderDetails: 'Fiat Deposit',
9 orderDate: new Date().getTime(),
10 status: 'completed',
11 orderID: 'VUVX709ET7BY',
12 sourceName: 'Bank Account',
13 sourceDesc: '*** 1111',
14 amountCrypto: 34.4565,
15 amount: 56787,
16 cryptoCurrency: 'ETH',
17 currency: '$'
18 },
19 ];
20
21 return [200, { cryptoOrders }];
22});