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";
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";
