How I can use react-toastify promise while posting date using axios

Question

// Want to show spinner while posting and then success/error message using react-toastify Is it possible?

axios.post("/orders.json", order)
      .then((response) => {
        console.log(response.status);
      })
      .catch((error) => {
        console.log(error);
      });

Answer 1

Yes it is possible. You can have a state called isLoading and you can set it to true when you submit a post request and you can check for isLoading before rendering your component like below.

 if(isLoading) {
     return (<Spinner />)
 }

And you can use toast to show success/error message after post method is executed. Like below

 toast.error('Sorry request failed')

or

 toast.success('Request successfull')

But before use toast you have wrap your App component in toast container like below.

 import React from 'react';

 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';

 function App(){
    const notify = () => toast("Wow so easy!");

    return (
       <div>
          <button onClick={notify}>Notify!</button>
          <ToastContainer />
       </div>
    );
  }

Answer 2

This will solve your question.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
toast.configure({
    position: toast.POSITION.BOTTOM_RIGHT
});

export default function App() {
    const [state, setState] = useState({
        loading: true,
        dataArray: []
    });

    const myRequest = async () => {
        try {
            const request = await axios.get(`/generic_data/search_skills`);
            const { error, msg, data } = request.data;
            if (error) throw new Error(msg);
            setState({ ...state, loading: false, dataArray: data });
            toast.success("All good, we have the data");
        } catch (e) {
            toast.error("Upps, someting went wrong");
        }
  };
  
  useEffect(()=>{
    myRequest()
  },[])

    if (state.loading) {
        return "Loading data from server.. this will take long time...";
    }

    return <div>The request has ended. We have the data</div>;
}

Answer 3

import { toast } from "react-toastify";

const promise=axios.post("/orders.json", order)

const res = await toast.promise(promise, {
        pending: "Posting",
        success: "Posted",
        error: "error message",
      });