fascinating-indigo•2y ago

How to set the success pop up message on front end?

When I succesfull submit I would like the pop up message. const handleAddEmployee = async (values: EmployeeValues) => { setLoading(true); try { const response = await axios.post('http://localhost:8080/api/v1/users/invite', { name: values.name, surname: values.surname, email: values.email, parentUserID: identity.userid, });
if (response.status === 201) { console.log('Invitation sent successfully'); console. navigate("/employees/create");
} else { console.log('Failed to send invitation'); } } catch (error) { console.error(error); } finally { setLoading(false); } };

12 Replies

kapa.ai•2y ago

Hi @acidias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- To show a success notification after successfully submitting the form, you can use the useForm hook from refine with the successNotification property. However, the code you provided is not using refine, and it's using axios directly for API calls. If you want to integrate refine into your code, you can follow these steps: 1. Wrap your application with the NotificationProvider from refine. This is required for notifications to work. 2. Use the useForm hook with the successNotification property to customize the success notification. Here's an example of how to use the useForm hook with a custom success notification:

import { useForm } from "@refinedev/core";

const { formLoading, onFinish } = useForm({
  successNotification: (data, values, resource) => {
    return {
      message: `Employee invitation sent successfully to ${data.email}`,
      description: "Success with no errors",
      type: "success",
    };
  },
});

import { useForm } from "@refinedev/core";

const { formLoading, onFinish } = useForm({
  successNotification: (data, values, resource) => {
    return {
      message: `Employee invitation sent successfully to ${data.email}`,
      description: "Success with no errors",
      type: "success",
    };
  },
});

However, since your code is not using refine, you can use a third-party library like Ant Design's notification (https://ant.design/components/notification/) or React Toastify (https://fkhadra.github.io/react-toastify/introduction/) to show a success notification after the form is submitted successfully. For example, using Ant Design's notification: 1. Install Ant Design: npm install antd 2. Import the notification component:

import { notification } from "antd";

import { notification } from "antd";

3. Show the success notification after the form is submitted successfully: ```javascript const handleAddEmployee = async (values: EmployeeValues) => { setLoading(true); try { const response = await axios.post("http://localhost:8080/api/v1/users/invite", { name: values.name, surname: values.surname, email: values.email, parentUserID: identity.userid, });

Notification - Ant Design

React-toastify | React-Toastify

!Financial Contributors on Open Collective !Travis (.org)

kapa.ai•2y ago

if (response.status === 201) { console.log("Invitation sent successfully"); notification.success({ message: "Invitation sent successfully", description: Employee invitation sent successfully to ${values.email}, }); navigate("/employees/create"); } else { console.log("Failed to send invitation"); } } catch (error) { console.error(error); } finally { setLoading(false); } };

``

This will show a success notification when the form is submitted successfully.
----------------------

Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon: ----------------------

kapa.ai•2y ago

<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below

metropolitan-bronze•2y ago

Which UI library are you using?

fascinating-indigoOP•2y ago

I'm using refine.

metropolitan-bronze•2y ago

headless or with MUI or ant design or similar ?

fascinating-indigoOP•2y ago

I have installed mui but pankod as well. Mui i'm using for icons

import React, { useState } from "react";
import { useGetIdentity } from "@pankod/refine-core";
import { FieldValue, FieldValues, useForm } from "@pankod/refine-react-hook-form";
import { useNavigate } from "@pankod/refine-react-router-v6";

import Form from "components/common/Form";

const CreateBuildingPlan = () => {
  const navigate = useNavigate();
  const { data: user } = useGetIdentity();
...
  const { refineCore: { onFinish, formLoading }, register, handleSubmit } = useForm();

 ...
  
  const onFinishHandler = async (data: FormData) => {
    const filteredImages = buildingPlanImages.filter((image) => image.name !== "");
    await onFinish({ ...data, images: filteredImages, email: user.email });
  };
  return (
    <Form
      type="Create"
      register={register}
      onFinish={onFinish}
      formLoading={formLoading}
      handleSubmit={handleSubmit}
      handleImageChange={handleImageChange}
      onFinishHandler={onFinishHandler}
      buildingPlanImages={buildingPlanImages}
    />
  );
};
export default CreateBuildingPlan;

import React, { useState } from "react";
import { useGetIdentity } from "@pankod/refine-core";
import { FieldValue, FieldValues, useForm } from "@pankod/refine-react-hook-form";
import { useNavigate } from "@pankod/refine-react-router-v6";

import Form from "components/common/Form";

const CreateBuildingPlan = () => {
  const navigate = useNavigate();
  const { data: user } = useGetIdentity();
...
  const { refineCore: { onFinish, formLoading }, register, handleSubmit } = useForm();

 ...
  
  const onFinishHandler = async (data: FormData) => {
    const filteredImages = buildingPlanImages.filter((image) => image.name !== "");
    await onFinish({ ...data, images: filteredImages, email: user.email });
  };
  return (
    <Form
      type="Create"
      register={register}
      onFinish={onFinish}
      formLoading={formLoading}
      handleSubmit={handleSubmit}
      handleImageChange={handleImageChange}
      onFinishHandler={onFinishHandler}
      buildingPlanImages={buildingPlanImages}
    />
  );
};
export default CreateBuildingPlan;

` Here I'm getting the popup message. I'm just not sure I must to add the onFinishHandler to Form? and create interface props?

metropolitan-bronze•2y ago

i'm confused. are you trying to customize notification on useForm ? you can customize like this https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#successnotification If you want to open notification in any time in any component you can do that like this: https://refine.dev/docs/api-reference/core/hooks/useNotification/

fascinating-indigoOP•2y ago

Not customize. just to show it up In the createBuildingPlan it is showing. (followed tutorial) But on the AddEmployee I have console log, but the little popup message not showing

metropolitan-bronze•2y ago

https://refine.dev/docs/api-reference/core/hooks/useNotification/ but you can't use outside react component

fascinating-indigoOP•2y ago

Thank you. I managed to use the toastify. with that it is very easy 🙂

How to set the success pop up message on front end?

Did you find this page helpful?