import axios from "axios"; import { Field, Form, Formik } from "formik"; import { DogDto } from "../../dto/dogs/dog.dto"; import { calculateDiffInMonths, calculateDiffInYears, } from "../../lib/time.library"; import ErrorMessage from "../utils/forms/error-message.component"; import Spinner from "../utils/spinner.component"; import * as Yup from "yup"; import SubmitButton from "../utils/forms/submit-button.component"; const DogProfileSchema = Yup.object().shape({}); export default function DogProfile({ dog }: { dog: DogDto }) { return ( <div> <div> <div> <div>Dog{"'"}s picture</div> <span></span> </div> <div> <div> Upload {dog.name} {"'"}s photo </div> <div> <button>Upload photo</button> </div> </div> </div> <Formik initialValues={{ name: dog.name, breed: dog.breed, age_years: calculateDiffInYears(new Date(), new Date(dog.birthDate)), age_months: calculateDiffInMonths( new Date(), new Date(dog.birthDate) ), }} onSubmit={async (values, actions) => { axios .patch(`/api/dogs/${dog.id}`, values) .then((res) => actions.setStatus({ status: true, message: "Changes were saved successfully.", }) ) .catch((e) => actions.setStatus({ status: true, message: e.message }) ) .finally(() => actions.setSubmitting(false)); }} validationSchema={DogProfileSchema} > {({ isSubmitting, status }) => ( <Form> <Field name="name" type="text" placeholder="Name" /> <ErrorMessage name="name" /> <Field name="breed" type="text" placeholder="Breed" /> <ErrorMessage name="breed" /> <Field name="age_years" type="number" placeholder="Age (years)" /> <ErrorMessage name="age_years" /> <Field name="age_months" type="number" placeholder="Age (months)" /> <ErrorMessage name="age_months" /> {status && <>{status.message}</>} <SubmitButton isSubmitting={isSubmitting} /> </Form> )} </Formik> </div> ); }