How to make API call (CRUD) on React JS

Question

I'm using Sb-Admin-React. I need to make API call (CRUD) on this framework (Sb-Admin-React), but I have no idea to make it.

May there's anyone can help me to make it out. Thanks

Answer 1

apiService.tsx

import axios from "axios";
import { store } from '../redux/store'
import { USER_LOGOUT } from '../redux/action'

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
const NODE_API_BASE_URL = import.meta.env.VITE_NODE_API_BASE_URL;


axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.post['Content-Type'] = 'application/json'

export const getCall = async (path, data, token = null, headers = {}) => {
    try {
        const res = await axios.get(API_BASE_URL + path, {
            headers: {
                Authorization: token ? `Bearer ${token}` : "",
                ...headers
            },
            params: data
        })

        if (res?.data?.code != 200) {
            if ([401, 403]?.includes(res?.data?.code)) {
                // alert(JSON.stringify(res))
                localStorage.removeItem('user')
                localStorage.removeItem('roles')
                localStorage.removeItem('permissions')
                store.dispatch(USER_LOGOUT())
                logout_cleaner()
            }
            return res?.data
        } else {
            return res?.data;
        }

    } catch (error) {
        console.log("error", error);
        return {};
    }
};

export const putCall = async (path, data, token = null, headers = {}) => {
    try {
        const res = await axios.put(API_BASE_URL + path, data, {
            headers: {
                Authorization: token ? `Bearer ${token}` : "",
                ...headers
            },
        });
        if (res?.data?.code != 200) {
            if ([401, 403]?.includes(res?.data?.code)) {
                localStorage.removeItem('user');
                localStorage.removeItem('roles');
                localStorage.removeItem('permissions');
                store.dispatch(USER_LOGOUT());
                logout_cleaner();
            }
            return res?.data;
        } else {
            return res?.data;
        }
    } catch (error) {
        console.log("error", error);
        return {};
    }
};


export const postCall = async (path, data, token = null, headers = {}) => {
    try {
        // alert(path+' '+token)
        const res = await axios.post(API_BASE_URL + path, data, {
            headers: {
                Authorization: token ? `Bearer ${token}` : "",
                ...headers
            },
        });
        if (res?.data?.code != 200) {
            if ([401, 403]?.includes(res?.data?.code)) {
                // alert(JSON.stringify(res))
                localStorage.removeItem('user')
                localStorage.removeItem('roles')
                localStorage.removeItem('permissions')
                store.dispatch(USER_LOGOUT())
                logout_cleaner()
            }
            return res?.data
        } else {
            return res?.data;
        }

    } catch (error) {
        console.log("error", error);
        return {};
    }
};

Call

const getFilterList = async () => {
        const response = await getCall(HANDSET_USER_FILTER_DATA, null, props?.user?.access_token)
        if (response?.code === 200) {
            setFormData((prev) => ({
                ...prev,
                filter: { ...prev.filter, list: { ...prev.filter?.list, ...response?.data } }
            }))
        }
    }

const handleSubmit = async (e: any) => {
        if (e && e.preventDefault) {
            e.preventDefault();
        }
        formData?.form?.submit?.loading
        setFormData((prev) => ({ ...prev, form: { ...prev?.form, submit: { ...prev?.form?.submit, loading: true } } }))

        const request = { ...formData?.form?.data, id: formData?.form?.data?.id }
        let response;
        if (formData?.form?.data?.id) {
            response = await putCall(UPDATE_HANDSET_USER, request, props.user.access_token)
        }
        else {
            response = await postCall(CREATE_HANDSET_USER, request, props.user.access_token)
        }
        if (response?.code === 200) {
            getTableData(null, { ...formData?.filter?.data, page: formData?.table?.paginator?.current_page, sort:formData?.table?.sort  })
            formClear()
            toast.success(response?.message?.[0])
            closeDialog()
            setFormData((prev) => ({ ...prev, form: { ...prev?.form, submit: { ...prev?.form?.submit, loading: false } } }))
        } else {
            toast.error(response?.message?.[0])
            setFormData((prev) => ({ ...prev, form: { ...prev?.form, submit: { ...prev?.form?.submit, loading: false } } }))
        }
    }

Answer 2

Isomorphic fetch is already included in Sb-Admin-React.

You can make your regular API calls with fetch. It should look something like:

 fetch(apiUrl, {
    method: method,
    headers: headersIfAny,
    body: theDataToSend
  })
  .then(response => /* do something with response */)
  .catch(err => /* do something with err */);

You can go through Isomorphic Fetch readme for more info