Throughout Tokyo React Typescript 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 import { CryptoOrder } from 'src/models/crypto_order';
7 import RecentOrdersTable from './RecentOrdersTable';
8
9 function RecentOrders() {
10 const isMountedRef = useRefMounted();
11 const [cryptoOrders, setCryptoOrders] = useState<CryptoOrder[]>([]);
12
13 const getCryptoOrders = useCallback(async () => {
14 try {
15 const response = await axios.get<{ cryptoOrders: CryptoOrder[] }>(
16 '/api/crypto-orders'
17 );
18
19 if (isMountedRef.current) {
20 setCryptoOrders(response.data.cryptoOrders);
21 }
22 } catch (err) {
23 console.error(err);
24 }
25 }, [isMountedRef]);
26
27 useEffect(() => {
28 getCryptoOrders();
29 }, [getCryptoOrders]);
30
31 return (
32 <Card>
33 <RecentOrdersTable cryptoOrders={cryptoOrders} />
34 </Card>
35 );
36 }
37
38 export default RecentOrders;
39 Using Axios Mock Adapter you can simulate request calls. Check out the example below:
1import { mock } from 'src/utils/axios';
2import { CryptoOrder } from 'src/models/crypto_order';
3
4mock.onGet('/api/crypto-orders').reply(() => {
5 const cryptoOrders: CryptoOrder[] = [
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});