Debounce-Axios-CancelToken-React

debounce-axios-cancelToken.js

import React from "react";
// import { Link } from "react-router-dom";
import PlantIcon from '../../images/plant_icon.svg'
import EyeIcon from '../../images/eye_icon.svg'
//import { Row, InputNumber, Slider, Typography } from "antd";
import './Page3.scss';
import { Tag , Typography } from "antd";
import { Button, CircularProgress  } from '@material-ui/core';
import axios from 'axios';
import _ from 'lodash';

import BloomSlider from '../../../custom/BloomSlider/index';
import WealthCard from  '../../common/wealth_card/index';
import InfoCard from '../../common/info_card';

const { Title } = Typography;

const CancelToken = axios.CancelToken;
let source = CancelToken.source();

type DataObjectType = {fund_name: string, amount: number}

interface dataObject {
    emergencyFund ?: DataObjectType,
    wealth ?: DataObjectType[],
    tempFund ?: DataObjectType
}

const Page3: React.FC = () => {

    const [sliderValue, setSLiderValue] = React.useState<number>(25000)
    const [data, setData] =   React.useState<dataObject>({})
    const [loading, setLoading] = React.useState<boolean>(true)

    const deBounced = React.useRef(_.debounce((value: number) => callApi(value), 500))

    React.useEffect(() =>  deBounced.current(sliderValue), [sliderValue])

    const callApi = (value: number) => { 
        source && source.cancel('Operation canceled due to new request.');
        source = CancelToken.source();

        setLoading(true)
        axios.post('http://localhost:5000/dummy', {
            price: value
        }, {
            cancelToken: source.token
        }).then(res => {
            setLoading(false)
            setData(res.data.plan)
        }).catch((err) => {
        if(axios.isCancel(err)){
            console.log('im canceled');
        }
        else{
            console.log('im server response error');
        }
    });
    }

     // You might be able to call API directly here, I haven't tried
    // const [debouncedCallApi] = React.useState(() => _.debounce(() => callApi(), 500));
    
    const EmergencyFund    = data.emergencyFund && <WealthCard title={data.emergencyFund.fund_name} price={data.emergencyFund.amount} />
    const WealthCardArray  = data.wealth && data.wealth.map((e, index) => <WealthCard key={index} title={e.fund_name} price={e.amount} />)
    const TempFund         = data.tempFund && <WealthCard title={data.tempFund.fund_name} price={data.tempFund.amount} />

    return (
        <div className="text-container1">
            <div className="para_invest">

                <p className = "rubik_18px_500">Setting up your Bloom Account</p>
                <p className = "robo_14px_500 color_grey">We need to make an investment of atleast 25,000 so that we can buy all the funds you need</p>


                <div className="acc_activate">
                    <Tag className="acc_activate_border" >
                        <span style ={{padding: '4px 16px', color: '#00c6cd', fontSize: '12px'}} >Account not activated</span>
                    </Tag>
                </div>
                <div className="logoText">
                    <img src={PlantIcon} alt= "doodble_1" />
                    <div className="imageText">
                    <Title className = "rubik_16px_500">How much you want to invest?</Title>
                    <p className = "robo_12px_300 color_grey">As a first time user, you need to invest at least 25k to activate your account</p>
                    </div>
                </div>

                <BloomSlider
                    onChange={num => {
                        setSLiderValue(num);
                    }}
                    min={1}
                    max={100000}  
                    step={1}
                    value={sliderValue}
                    symbol='₹'
                />

                <p style={{textAlign: 'center'}} className="robo_14px_500 color_grey">₹ {sliderValue}</p>
                
                <div className="line"></div>

                { loading ? 
                    <div style={{textAlign: 'center'}}>
                        <CircularProgress />
                    </div> : (
                    <>
                        { TempFund && <InfoCard text="Since the amount is below 25k it will be invested in a temporary fund until you activate your account" />}
                    
                        {EmergencyFund && (
                            <>
                                <div className="logoText">
                                    <img src={EyeIcon} alt= "doodble_1" />
                                    <div className="imageText">
                                        <p className = "rubik_16px_500">{TempFund ? "Bloom Temporary Account" :"Bloom Rainy Day Fund"}</p>
                                        <p className = "robo_18px_bold"><span style={{fontSize: 14}}>₹ </span>15,000 <span style={{fontSize: 14}}> per/mo</span></p>
                                    </div>
                                </div>
                                {EmergencyFund}
                                <div className="line"></div>
                            </>
                        )}

                        <div className="logoText">
                            <img src={EyeIcon} alt= "doodble_1" />
                            <div className="imageText">
                            <p className = "rubik_16px_500">{TempFund ? "Bloom Temporary Account" : "Your Bloom Wealth Account"} </p>
                            <p className = "robo_18px_bold"><span style={{fontSize: 14}}>₹ </span>15,000 <span style={{fontSize: 14}}> per/mo</span></p>
                            </div>
                        </div>

                        {WealthCardArray || TempFund}

                        <div className = "footer">
                            <p className = "robo_14px_500 color_grey">Total savings per month</p>
                            <p className = "robo_24px_bold"><span style={{fontSize: 14}}>₹ </span>30,000 <span style={{fontSize: 14}}> per/mo</span></p>
                        </div>

                        <Button className="btn" variant='contained' fullWidth>
                            <span className="rubk_14px_500" >Let's do this</span>
                        </Button>
                    </>
                )}

            </div>
        </div>
    )
}

export default Page3;