import React, { ReactElement, useState } from 'react';
import { NextPageWithLayout } from '../_app';
import AccountLayout from '@/components/sheardComponent/AccountLayout';
import Pagetitle from '@/components/sheardComponent/Pagetitle';
import { useSession } from 'next-auth/react';
import * as yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { useToast } from '@/hooks/useToast';
import useAxiosPrivate from '@/hooks/useAxiosPrivate';
import { api_routes } from '@/helper/routes';
import { ErrorMessage } from '@hookform/error-message';
import Head from 'next/head';
const schema = yup
.object({
name: yup.string().required(),
email: yup.string().email().required(),
phone: yup
.string()
.required()
.min(10, "Must be exactly 10 digits")
.max(10, "Must be exactly 10 digits"),
})
.required();
const ProfilePage:NextPageWithLayout = () => {
const { data } = useSession();
const [loading, setLoading] = useState(false);
const {toastSuccess, toastError} = useToast();
const axiosPrivate = useAxiosPrivate();
const {
handleSubmit,
register,
setError,
getValues,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
values:{
email: data ? data.user.email : '',
name: data ? data.user.name : '',
phone: data ? data.user.phone : ''
}
});
const onSubmit = async (data: any) => {
setLoading(true);
try {
const response = await axiosPrivate.post(api_routes.profile_update, {...getValues()});
toastSuccess(response.data.message);
} catch (error: any) {
if (error?.response?.data?.message) {
toastError(error?.response?.data?.message);
}
if (error?.response?.data?.errors?.name) {
setError("name", {
type: "server",
message: error?.response?.data?.errors?.name[0],
});
}
if (error?.response?.data?.errors?.email) {
setError("email", {
type: "server",
message: error?.response?.data?.errors?.email[0],
});
}
if (error?.response?.data?.errors?.phone) {
setError("phone", {
type: "server",
message: error?.response?.data?.errors?.phone[0],
});
}
} finally {
setLoading(false);
}
};
return (
<>
JAP - Profile
My Profile
);
};
ProfilePage.getLayout = function getLayout(page: ReactElement) {
return (
{page}
)
}
export default ProfilePage;