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
kapa.ai10mo 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
kapa.ai10mo ago
<@418995770205929473> kapa.ai is still learning and improving, please let us know how it did by reacting below