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.

components/CreateBeerPostForm.tsx

@@ -17,19 +17,14 @@ import FormSelect from './ui/forms/FormSelect';
 import FormTextArea from './ui/forms/FormTextArea';
 import FormTextInput from './ui/forms/FormTextInput';
 
-type BeerPostT = z.infer<typeof CreateBeerPostValidationSchema>;
+type CreateBeerPostSchema = z.infer<typeof CreateBeerPostValidationSchema>;
 
 interface BeerFormProps {
-  formType: 'edit' | 'create';
-  // eslint-disable-next-line react/require-default-props
-  defaultValues?: BeerPostT;
-  breweries?: BreweryPostQueryResult[];
-  types?: BeerType[];
+  breweries: BreweryPostQueryResult[];
+  types: BeerType[];
 }
 
-const BeerForm: FunctionComponent<BeerFormProps> = ({
-  formType,
-  defaultValues,
+const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
   breweries = [],
   types = [],
 }) => {
@@ -37,47 +32,30 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<BeerPostT>({
+  } = useForm<CreateBeerPostSchema>({
     resolver: zodResolver(CreateBeerPostValidationSchema),
-    defaultValues: {
-      name: defaultValues?.name,
-      description: defaultValues?.description,
-      abv: defaultValues?.abv,
-      ibu: defaultValues?.ibu,
-    },
   });
 
   const [error, setError] = useState('');
-
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const onSubmit: SubmitHandler<BeerPostT> = async (data) => {
-    setIsSubmitting(true);
-    switch (formType) {
-      case 'create': {
-        try {
-          const response = await sendCreateBeerPostRequest(data);
-          router.push(`/beers/${response.id}`);
-          break;
-        } catch (e) {
-          if (e instanceof Error) {
-            setError(e.message);
-          }
-          break;
-        }
+  const onSubmit: SubmitHandler<CreateBeerPostSchema> = async (data) => {
+    try {
+      setIsSubmitting(true);
+      const response = await sendCreateBeerPostRequest(data);
+      router.push(`/beers/${response.id}`);
+    } catch (e) {
+      if (!(e instanceof Error)) {
+        setError('Something went wrong');
+        return;
       }
-      case 'edit':
-        break;
-      default:
-        break;
+      setError(e.message);
     }
   };
 
   return (
     <form className="form-control" onSubmit={handleSubmit(onSubmit)}>
-      <div className="my-5">
-        {error && <ErrorAlert error={error} setError={setError} />}
-      </div>
+      <div>{error && <ErrorAlert error={error} setError={setError} />}</div>
       <FormInfo>
         <FormLabel htmlFor="name">Name</FormLabel>
         <FormError>{errors.name?.message}</FormError>
@@ -92,8 +70,9 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
           disabled={isSubmitting}
         />
       </FormSegment>
-      {formType === 'create' && breweries.length && (
-        <>
+
+      <div className="flex flex-wrap">
+        <div className="mb-2 w-full md:mb-0 md:w-1/2 md:pr-3">
           <FormInfo>
             <FormLabel htmlFor="breweryId">Brewery</FormLabel>
             <FormError>{errors.breweryId?.message}</FormError>
@@ -112,10 +91,30 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
               message="Pick a brewery"
             />
           </FormSegment>
-        </>
-      )}
+        </div>
+        <div className="mb-2 w-full md:mb-0 md:w-1/2 md:pl-3">
+          <FormInfo>
+            <FormLabel htmlFor="typeId">Type</FormLabel>
+            <FormError>{errors.typeId?.message}</FormError>
+          </FormInfo>
+          <FormSegment>
+            <FormSelect
+              disabled={isSubmitting}
+              formRegister={register('typeId')}
+              error={!!errors.typeId}
+              id="typeId"
+              options={types.map((beerType) => ({
+                value: beerType.id,
+                text: beerType.name,
+              }))}
+              placeholder="Beer type"
+              message="Pick a beer type"
+            />
+          </FormSegment>
+        </div>
+      </div>
 
-      <div className="flex flex-wrap sm:text-xs md:mb-3">
+      <div className="flex flex-wrap 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>
@@ -161,44 +160,13 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
         />
       </FormSegment>
 
-      {formType === 'create' && types.length && (
-        <>
-          <FormInfo>
-            <FormLabel htmlFor="typeId">Type</FormLabel>
-            <FormError>{errors.typeId?.message}</FormError>
-          </FormInfo>
-          <FormSegment>
-            <FormSelect
-              disabled={isSubmitting}
-              formRegister={register('typeId')}
-              error={!!errors.typeId}
-              id="typeId"
-              options={types.map((beerType) => ({
-                value: beerType.id,
-                text: beerType.name,
-              }))}
-              placeholder="Beer type"
-              message="Pick a beer type"
-            />
-          </FormSegment>
-        </>
-      )}
-
-      {!isSubmitting && (
-        <Button type="submit" isSubmitting={isSubmitting}>{`${
-          formType === 'edit'
-            ? `Edit ${defaultValues?.name || 'beer post'}`
-            : 'Create beer post'
-        }`}</Button>
-      )}
-
-      {isSubmitting && (
+      <div className="mt-6">
         <Button type="submit" isSubmitting={isSubmitting}>
-          Submitting
+          {isSubmitting ? 'Submitting...' : 'Submit'}
         </Button>
-      )}
+      </div>
     </form>
   );
 };
 
-export default BeerForm;
+export default CreateBeerPostForm;

components/EditBeerPostForm.tsx

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

components/RegisterUserForm.tsx

@@ -0,0 +1,171 @@
+import sendRegisterUserRequest from '@/requests/sendRegisterUserRequest';
+import CreateUserValidationSchema from '@/services/User/schema/CreateUserValidationSchema';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/router';
+import { FC, useState } from 'react';
+
+import { useForm } 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 FormTextInput from './ui/forms/FormTextInput';
+
+const RegisterUserForm: FC = () => {
+  const router = useRouter();
+  const { reset, register, handleSubmit, formState } = useForm<
+    z.infer<typeof CreateUserValidationSchema>
+  >({ resolver: zodResolver(CreateUserValidationSchema) });
+
+  const { errors } = formState;
+  const [serverResponseError, setServerResponseError] = useState('');
+
+  const onSubmit = async (data: z.infer<typeof CreateUserValidationSchema>) => {
+    try {
+      await sendRegisterUserRequest(data);
+      reset();
+      router.push('/', undefined, { shallow: true });
+    } catch (error) {
+      setServerResponseError(
+        error instanceof Error
+          ? error.message
+          : 'Something went wrong. We could not register your account.',
+      );
+    }
+  };
+  return (
+    <form
+      className="form-control w-full space-y-5"
+      noValidate
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div>
+        {serverResponseError && (
+          <ErrorAlert error={serverResponseError} setError={setServerResponseError} />
+        )}
+      </div>
+      <div>
+        <div className="flex flex-row space-x-3">
+          <div className="w-[50%]">
+            <FormInfo>
+              <FormLabel htmlFor="firstName">First name</FormLabel>
+              <FormError>{errors.firstName?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="firstName"
+                type="text"
+                formValidationSchema={register('firstName')}
+                error={!!errors.firstName}
+                placeholder="first name"
+              />
+            </FormSegment>
+          </div>
+
+          <div className="w-[50%]">
+            <FormInfo>
+              <FormLabel htmlFor="lastName">Last name</FormLabel>
+              <FormError>{errors.lastName?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="lastName"
+                type="text"
+                formValidationSchema={register('lastName')}
+                error={!!errors.lastName}
+                placeholder="last name"
+              />
+            </FormSegment>
+          </div>
+        </div>
+
+        <div className="flex flex-row space-x-3">
+          <div className="w-[50%]">
+            <FormInfo>
+              <FormLabel htmlFor="email">email</FormLabel>
+              <FormError>{errors.email?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="email"
+                type="email"
+                formValidationSchema={register('email')}
+                error={!!errors.email}
+                placeholder="email"
+              />
+            </FormSegment>
+          </div>
+          <div className="w-[50%]">
+            <FormInfo>
+              <FormLabel htmlFor="username">username</FormLabel>
+              <FormError>{errors.username?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="username"
+                type="text"
+                formValidationSchema={register('username')}
+                error={!!errors.username}
+                placeholder="username"
+              />
+            </FormSegment>
+          </div>
+        </div>
+
+        <div className="flex flex-row space-x-3">
+          <div className="w-[50%]">
+            <FormInfo>
+              <FormLabel htmlFor="password">password</FormLabel>
+              <FormError>{errors.password?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="password"
+                type="password"
+                formValidationSchema={register('password')}
+                error={!!errors.password}
+                placeholder="password"
+              />
+            </FormSegment>
+          </div>
+          <div className="w-[50%]">
+            <FormInfo>
+              <FormLabel htmlFor="confirmPassword">confirm password</FormLabel>
+              <FormError>{errors.confirmPassword?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="confirmPassword"
+                type="password"
+                formValidationSchema={register('confirmPassword')}
+                error={!!errors.confirmPassword}
+                placeholder="confirm password"
+              />
+            </FormSegment>
+          </div>
+        </div>
+        <FormInfo>
+          <FormLabel htmlFor="dateOfBirth">Date of birth</FormLabel>
+          <FormError>{errors.dateOfBirth?.message}</FormError>
+        </FormInfo>
+        <FormSegment>
+          <FormTextInput
+            id="dateOfBirth"
+            type="date"
+            formValidationSchema={register('dateOfBirth')}
+            error={!!errors.dateOfBirth}
+            placeholder="date of birth"
+          />
+        </FormSegment>
+        <div className="mt-6 w-full">
+          <Button type="submit">Register User</Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default RegisterUserForm;

components/ui/forms/BeerPostFormPageLayout.tsx

@@ -0,0 +1,28 @@
+import { ReactNode, FC } from 'react';
+import { IconType } from 'react-icons';
+
+interface FormPageLayoutProps {
+  children: ReactNode;
+  headingText: string;
+  headingIcon: IconType;
+}
+
+const FormPageLayout: FC<FormPageLayoutProps> = ({
+  children: FormComponent,
+  headingIcon,
+  headingText,
+}) => {
+  return (
+    <div className="align-center my-20 flex h-fit flex-col items-center justify-center">
+      <div className="w-8/12">
+        <div className="my-4 flex flex-col items-center space-y-1">
+          {headingIcon({ className: 'text-4xl' })}
+          <h1 className="text-3xl font-bold">{headingText}</h1>
+        </div>
+        <div>{FormComponent}</div>
+      </div>
+    </div>
+  );
+};
+
+export default FormPageLayout;

components/ui/forms/Button.tsx

@@ -14,7 +14,7 @@ const Button: FunctionComponent<FormButtonProps> = ({
   // eslint-disable-next-line react/button-has-type
   <button
     type={type}
-    className={`btn btn-primary mt-4 w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+    className={`btn-primary btn w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
   >
     {children}
   </button>