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); } };
kapa.ai
kapa.ai373d 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
kapa.ai373d 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, });
kapa.ai
kapa.ai373d 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
kapa.ai373d ago
<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
eastern-cyan
eastern-cyan373d ago
Which UI library are you using?
flat-fuchsia
flat-fuchsia373d ago
I'm using refine.
rare-sapphire
rare-sapphire373d ago
headless or with MUI or ant design or similar ?
flat-fuchsia
flat-fuchsia373d 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?
eastern-cyan
eastern-cyan373d 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/
flat-fuchsia
flat-fuchsia373d 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
eastern-cyan
eastern-cyan373d ago
flat-fuchsia
flat-fuchsia373d ago
Thank you. I managed to use the toastify. with that it is very easy 🙂
More Posts
How to adding Resource type?I managed to work with current resources. However I have a list: EmployeeList, where I have create ohow to make POST api request by click on Save ButtonI have to call this POST api "users/edit/:id" with refine inferencer above API config contain dyndo i need to create another project for the front end of my project?I created a project, Nextjs, MaterialUI and Supabase… When i go to localhiost 3000, it just gives mefetch datai want to fetch a specific resource . I used useMany but it is required to add ids and I do not wantHow do I create a fronted It’s justHow do I create a fronted??? It’s just giving me the client side and no real FrontEnd paceReferring component’s local state inside MUI’s DataGridSo I’m noticing that the renderCell function of a column cannot refer the updated value of the curreSave modifications to a relationshipIn my edit page for posts, I pull in the authors information. I want to save any changes to the authCustom data-provider for same resource and "useTable" for different http requestsI need to build a custom data provider for fetching data from my API. My use case requires me to shoHow to re-run useDataGrid?Hi, I have a use case wherein I want to re-fetch the rows of my table on a button click (after updatHow can i get the action in a component that receives useModalForm props?I have a component that shows as a drawer an receives useModalFrom props. how can i know the action?multiple menu entries pointing to the same resourceIs possible to have in the sidebar multiple items pointing to the same resource but changing the queuseUpdateMany to update different ids with different data for each iduseUpdateMany({resource:'', ids:IdArray, values: what to give here ?}) id1 has different value than hi am using refine firebase as the datahi, am using refine-firebase as the data provider but meta populate is not workingHow can I split on more lines the sidebar item text?I want to split the label: 'Gestione Terreno' on two lines so that it will be fully visible on the swhat's the best way to check status/debug live provider updates? (MUI/Supabase)I am using the builtin live provider and having very intermittent success with live events showing uHello I m studying if Refine is a goodHello, I'm studying if Refine is a good option for an internal admin panel I'm creating. This applicHow to set the pagination for server side paginationI have set my backend to accommodate _start and _end query for the select method, but from the datagfirestore listenerHow do I setup firestore listener for document snapshots retrieved from firestore in my data provideMUIhow can I import MuiThemeProvider in refine , where I tried to import it but it is not working !Referencing theme algorithm in other filesI'm trying to change the color of my logo depending on the selected theme algorithm. I want to check