like-gold•6mo ago

Useing hook in mui

onFinish={async (values) => { try { const data = await onFinish({ name: values.name, salesOwnerId: values.salesOwnerId, }); const createdCompany = (data as CreateResponse<Company>)?.data; if ((values.contacts ?? [])?.length > 0) { await createManyMutateAsync({ resource: "contacts", values: values.contacts?.map((contact) => ({ ...contact, companyId: createdCompany.id, salesOwnerId: createdCompany.salesOwner.id, })) ?? [], successNotification: false, }); } go({ to: searchParams.get("to") ?? pathname, query: { companyId: createdCompany.id, to: undefined, }, options: { keepQuery: true, }, type: "replace", }); } catch (error) { Promise.reject(error); } }} using this hook in mui

2 Replies

kapa.ai•6mo ago

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the onFinish hook in a Material-UI (MUI) form with refine, you can follow the example provided. The onFinish function is used to handle form submission and trigger the appropriate mutation. Below is an example of how you can integrate this with MUI:

import React from "react";
import { useForm } from "@refinedev/core";
import { TextField, Button } from "@mui/material";

const MyForm = () => {
    const { onFinish } = useForm({
        resource: "companies",
        action: "create",
    });

    const handleSubmit = async (values) => {
        try {
            const data = await onFinish({
                name: values.name,
                salesOwnerId: values.salesOwnerId,
            });

            const createdCompany = data?.data;

            if ((values.contacts ?? [])?.length > 0) {
                await createManyMutateAsync({
                    resource: "contacts",
                    values: values.contacts?.map((contact) => ({
                        ...contact,
                        companyId: createdCompany.id,
                        salesOwnerId: createdCompany.salesOwner.id,
                    })) ?? [],
                    successNotification: false,
                });
            }

            go({
                to: searchParams.get("to") ?? pathname,
                query: {
                    companyId: createdCompany.id,
                    to: undefined,
                },
                options: {
                    keepQuery: true,
                },
                type: "replace",
            });
        } catch (error) {
            return Promise.reject(error);
        }
    };
return (
        <form onSubmit={handleSubmit}>
            <TextField name="name" label="Name" />
            <TextField name="salesOwnerId" label="Sales Owner ID" />
            {/* Add other form fields as needed */}
            <Button type="submit">Submit</Button>
        </form>
    );
};

export default MyForm;

import React from "react";
import { useForm } from "@refinedev/core";
import { TextField, Button } from "@mui/material";

const MyForm = () => {
    const { onFinish } = useForm({
        resource: "companies",
        action: "create",
    });

    const handleSubmit = async (values) => {
        try {
            const data = await onFinish({
                name: values.name,
                salesOwnerId: values.salesOwnerId,
            });

            const createdCompany = data?.data;

            if ((values.contacts ?? [])?.length > 0) {
                await createManyMutateAsync({
                    resource: "contacts",
                    values: values.contacts?.map((contact) => ({
                        ...contact,
                        companyId: createdCompany.id,
                        salesOwnerId: createdCompany.salesOwner.id,
                    })) ?? [],
                    successNotification: false,
                });
            }

            go({
                to: searchParams.get("to") ?? pathname,
                query: {
                    companyId: createdCompany.id,
                    to: undefined,
                },
                options: {
                    keepQuery: true,
                },
                type: "replace",
            });
        } catch (error) {
            return Promise.reject(error);
        }
    };
return (
        <form onSubmit={handleSubmit}>
            <TextField name="name" label="Name" />
            <TextField name="salesOwnerId" label="Sales Owner ID" />
            {/* Add other form fields as needed */}
            <Button type="submit">Submit</Button>
        </form>
    );
};

export default MyForm;

In this example: - The useForm hook is used to manage the form state and handle the submission. - The handleSubmit function is defined to handle the form submission logic, including calling the onFinish function and handling the response. - The form fields are created using MUI components like TextField and Button. For more information on the useForm hook and its return values, you can refer to the useForm documentation (https://refine.dev/docs/data/hooks/use-form/#onfinish). If you need more details on the useDataGrid hook for handling data grids in MUI, you can refer to the useDataGrid documentation (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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