deep-jade•11mo ago

i want to convert useforem to antd

this is my code import { useState } from "react"; import { useGetIdentity } from "@refinedev/core"; import { useForm } from "@refinedev/react-hook-form"; import { FieldValues } from "react-hook-form"; import Form from "components/common/Form"; const CreateProperty = () => { const { data: user } = useGetIdentity({ v3LegacyAuthProviderCompatible: true, }); const [propertyImage, setPropertyImage] = useState({ name: "", url: "" }); const { refineCore: { onFinish, formLoading }, register, handleSubmit, } = useForm(); const handleImageChange = (file: File) => { const reader = (readFile: File) => new Promise<string>((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => resolve(fileReader.result as string); fileReader.readAsDataURL(readFile); }); reader(file).then((result: string) => setPropertyImage({ name: file?.name, url: result }), ); }; const onFinishHandler = async (data: FieldValues) => { if (!propertyImage.name) return alert("Please select an image"); const user = await getIdentity(); await onFinish({ ...data, photo: propertyImage.url, email: user.email, }); }; const getIdentity= async () => { const user = localStorage.getItem("user"); if (user) { return JSON.parse(user); } return null; } return ( <Form type="Create" register={register} onFinish={onFinish} formLoading={formLoading} handleImageChange={handleImageChange} onFinishHandler={onFinishHandler} propertyImage={propertyImage} handleSubmit={handleSubmit} /> ); }; export default CreateProperty; Convert it to { Modal, Form, FormProps, Upload } from "antd";

2 Replies

kapa.ai•11mo ago

Hi @jakshire01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can help you convert your form to use Ant Design's Form component. Here's how you can do it:

import { useState } from "react";
import { useGetIdentity } from "@refinedev/core";
import { useForm } from "@refinedev/antd";
import { Modal, Form, FormProps, Upload } from "antd";

const CreateProperty = () => {
    const { data: user } = useGetIdentity({
        v3LegacyAuthProviderCompatible: true,
    });
    const [propertyImage, setPropertyImage] = useState({ name: "", url: "" });
    const { formProps, saveButtonProps } = useForm();

    const handleImageChange = (file: File) => {
        const reader = (readFile: File) =>
            new Promise<string>((resolve, reject) => {
                const fileReader = new FileReader();
                fileReader.onload = () => resolve(fileReader.result as string);
                fileReader.readAsDataURL(readFile);
            });

        reader(file).then((result: string) =>
            setPropertyImage({ name: file?.name, url: result }),
        );
    };

    const onFinishHandler = async (data: FieldValues) => {
        if (!propertyImage.name) return alert("Please select an image");

        const user  = await getIdentity();

        await formProps.onFinish?.({
            ...data,
            photo: propertyImage.url,
            email: user.email,
        });
    };

    const getIdentity= async () => {
        const user = localStorage.getItem("user");
        if (user) {
          return JSON.parse(user);
        }
        return null;
      }

    return (
        <Modal>
            <Form {...formProps} layout="vertical">
                {/* Your form items go here */}
            </Form>
        </Modal>
    );
};
export default CreateProperty;

import { useState } from "react";
import { useGetIdentity } from "@refinedev/core";
import { useForm } from "@refinedev/antd";
import { Modal, Form, FormProps, Upload } from "antd";

const CreateProperty = () => {
    const { data: user } = useGetIdentity({
        v3LegacyAuthProviderCompatible: true,
    });
    const [propertyImage, setPropertyImage] = useState({ name: "", url: "" });
    const { formProps, saveButtonProps } = useForm();

    const handleImageChange = (file: File) => {
        const reader = (readFile: File) =>
            new Promise<string>((resolve, reject) => {
                const fileReader = new FileReader();
                fileReader.onload = () => resolve(fileReader.result as string);
                fileReader.readAsDataURL(readFile);
            });

        reader(file).then((result: string) =>
            setPropertyImage({ name: file?.name, url: result }),
        );
    };

    const onFinishHandler = async (data: FieldValues) => {
        if (!propertyImage.name) return alert("Please select an image");

        const user  = await getIdentity();

        await formProps.onFinish?.({
            ...data,
            photo: propertyImage.url,
            email: user.email,
        });
    };

    const getIdentity= async () => {
        const user = localStorage.getItem("user");
        if (user) {
          return JSON.parse(user);
        }
        return null;
      }

    return (
        <Modal>
            <Form {...formProps} layout="vertical">
                {/* Your form items go here */}
            </Form>
        </Modal>
    );
};
export default CreateProperty;

In this code, I've replaced the useForm hook from @refinedev/react-hook-form with the useForm hook from @refinedev/antd. This hook returns formProps and saveButtonProps which can be passed to Ant Design's Form and Button components respectively. The onFinish function is now accessed from formProps. Please replace the comment {/* Your form items go here */} with your actual form items. You can refer to the Ant Design Form documentation (https://ant.design/components/form/) for more details on how to structure your form items. Please note that this is a basic conversion and you might need to adjust it based on your specific needs and the exact behavior of your form. Sources: - Refine Ant Design useForm Hook (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/) - Refine Ant Design Create Component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create) - Ant Design Form Component (https://ant.design/components/form/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

i want to convert useforem to antd

Did you find this page helpful?