mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 10:42:08 +00:00
Add edit beer post, 500 page, and redirectIfLoggedIn getServerSideProps.
Implement edit beer post functionality. Register, edit and create beer post forms are now using the same layout found in components/ui/forms/BeerPostFormPageLayout. All forms are now extracted into their own components and are now found in components. Added redirectIfLoggedIn getServerSidesProp fn for login and register pages.
This commit is contained in:
141
components/EditBeerPostForm.tsx
Normal file
141
components/EditBeerPostForm.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import sendEditBeerPostRequest from '@/requests/sendEditBeerPostRequest';
|
||||
import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { FC, useState } from 'react';
|
||||
import { useForm, SubmitHandler } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import ErrorAlert from './ui/alerts/ErrorAlert';
|
||||
import Button from './ui/forms/Button';
|
||||
import FormError from './ui/forms/FormError';
|
||||
import FormInfo from './ui/forms/FormInfo';
|
||||
import FormLabel from './ui/forms/FormLabel';
|
||||
import FormSegment from './ui/forms/FormSegment';
|
||||
import FormTextArea from './ui/forms/FormTextArea';
|
||||
import FormTextInput from './ui/forms/FormTextInput';
|
||||
|
||||
type EditBeerPostSchema = z.infer<typeof EditBeerPostValidationSchema>;
|
||||
|
||||
interface EditBeerPostFormProps {
|
||||
previousValues: EditBeerPostSchema;
|
||||
}
|
||||
|
||||
const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
|
||||
const router = useRouter();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<EditBeerPostSchema>({
|
||||
resolver: zodResolver(EditBeerPostValidationSchema),
|
||||
defaultValues: previousValues,
|
||||
});
|
||||
|
||||
const [error, setError] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const onSubmit: SubmitHandler<EditBeerPostSchema> = async (data) => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
await sendEditBeerPostRequest(data);
|
||||
router.push(`/beers/${data.id}`);
|
||||
} catch (e) {
|
||||
setIsSubmitting(false);
|
||||
if (!(e instanceof Error)) {
|
||||
setError('Something went wrong');
|
||||
return;
|
||||
}
|
||||
setError(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="form-control" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="my-5">
|
||||
{error && <ErrorAlert error={error} setError={setError} />}
|
||||
</div>
|
||||
<FormInfo>
|
||||
<FormLabel htmlFor="name">Name</FormLabel>
|
||||
<FormError>{errors.name?.message}</FormError>
|
||||
</FormInfo>
|
||||
<FormSegment>
|
||||
<FormTextInput
|
||||
placeholder="Lorem Ipsum Lager"
|
||||
formValidationSchema={register('name')}
|
||||
error={!!errors.name}
|
||||
type="text"
|
||||
id="name"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</FormSegment>
|
||||
|
||||
<div className="flex flex-wrap sm:text-xs md:mb-3">
|
||||
<div className="mb-2 w-full md:mb-0 md:w-1/2 md:pr-3">
|
||||
<FormInfo>
|
||||
<FormLabel htmlFor="abv">ABV</FormLabel>
|
||||
<FormError>{errors.abv?.message}</FormError>
|
||||
</FormInfo>
|
||||
<FormTextInput
|
||||
disabled={isSubmitting}
|
||||
placeholder="12"
|
||||
formValidationSchema={register('abv', { valueAsNumber: true })}
|
||||
error={!!errors.abv}
|
||||
type="text"
|
||||
id="abv"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2 w-full md:mb-0 md:w-1/2 md:pl-3">
|
||||
<FormInfo>
|
||||
<FormLabel htmlFor="ibu">IBU</FormLabel>
|
||||
<FormError>{errors.ibu?.message}</FormError>
|
||||
</FormInfo>
|
||||
<FormTextInput
|
||||
disabled={isSubmitting}
|
||||
placeholder="52"
|
||||
formValidationSchema={register('ibu', { valueAsNumber: true })}
|
||||
error={!!errors.ibu}
|
||||
type="text"
|
||||
id="lastName"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormInfo>
|
||||
<FormLabel htmlFor="description">Description</FormLabel>
|
||||
<FormError>{errors.description?.message}</FormError>
|
||||
</FormInfo>
|
||||
<FormSegment>
|
||||
<FormTextArea
|
||||
disabled={isSubmitting}
|
||||
placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
|
||||
error={!!errors.description}
|
||||
formValidationSchema={register('description')}
|
||||
id="description"
|
||||
rows={8}
|
||||
/>
|
||||
</FormSegment>
|
||||
|
||||
<div className="mt-6 flex w-full space-x-6">
|
||||
<div className="w-3/6">
|
||||
<Link
|
||||
className={`btn-primary btn w-full rounded-xl ${
|
||||
isSubmitting ? 'loading' : ''
|
||||
}`}
|
||||
href={`/beers/${previousValues.id}`}
|
||||
>
|
||||
Discard Changes
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="w-3/6">
|
||||
<Button type="submit" isSubmitting={isSubmitting}>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditBeerPostForm;
|
||||
Reference in New Issue
Block a user