scaffold create/edit beer form, scaffold beer page

components/BeerForm.tsx

@@ -0,0 +1,192 @@
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
+
+import { FunctionComponent } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+// import { useNavigate } from 'react-router-dom';
+// import createBeerPost from '../api/beerPostRoutes/createBeerPost';
+// import getAllBreweryPosts from '../api/breweryPostRoutes/getAllBreweryPosts';
+
+// import BreweryPostI from '../types/BreweryPostI';
+// import isValidUuid from '../util/isValidUuid';
+import Button from './ui/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 FormSelect from './ui/forms/FormSelect';
+import FormTextArea from './ui/forms/FormTextArea';
+import FormTextInput from './ui/forms/FormTextInput';
+
+interface IFormInput {
+  name: string;
+  description: string;
+  type: string;
+  abv: number;
+  ibu: number;
+  breweryId: string;
+}
+
+interface BeerFormProps {
+  type: 'edit' | 'create';
+  // eslint-disable-next-line react/require-default-props
+  defaultValues?: IFormInput;
+  breweries?: BreweryPostQueryResult[];
+}
+const BeerForm: FunctionComponent<BeerFormProps> = ({
+  type,
+  defaultValues,
+  breweries = [],
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<IFormInput>({
+    defaultValues: {
+      name: defaultValues?.name,
+      description: defaultValues?.description,
+      abv: defaultValues?.abv,
+      ibu: defaultValues?.ibu,
+    },
+  });
+
+  // const navigate = useNavigate();
+
+  const nameValidationSchema = register('name', {
+    required: 'Beer name is required.',
+  });
+  const breweryValidationSchema = register('breweryId', {
+    required: 'Brewery name is required.',
+  });
+  const abvValidationSchema = register('abv', {
+    required: 'ABV is required.',
+    valueAsNumber: true,
+    max: { value: 50, message: 'ABV must be less than 50%.' },
+    min: {
+      value: 0.1,
+      message: 'ABV must be greater than 0.1%',
+    },
+    validate: (abv) => !Number.isNaN(abv) || 'ABV is invalid.',
+  });
+  const ibuValidationSchema = register('ibu', {
+    required: 'IBU is required.',
+    min: {
+      value: 2,
+      message: 'IBU must be greater than 2.',
+    },
+    valueAsNumber: true,
+    validate: (ibu) => !Number.isNaN(ibu) || 'IBU is invalid.',
+  });
+
+  const onSubmit: SubmitHandler<IFormInput> = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <form className="form-control" onSubmit={handleSubmit(onSubmit)}>
+      <FormInfo>
+        <FormLabel htmlFor="name">Name</FormLabel>
+        <FormError>{errors.name?.message}</FormError>
+      </FormInfo>
+      <FormSegment>
+        <FormTextInput
+          placeholder="Lorem Ipsum Lager"
+          formValidationSchema={nameValidationSchema}
+          error={!!errors.name}
+          type="text"
+          id="name"
+        />
+      </FormSegment>
+      {type === 'create' && breweries.length && (
+        <>
+          <FormInfo>
+            <FormLabel htmlFor="breweryId">Brewery</FormLabel>
+            <FormError>{errors.breweryId?.message}</FormError>
+          </FormInfo>
+          <FormSegment>
+            <FormSelect
+              formRegister={breweryValidationSchema}
+              error={!!errors.breweryId}
+              id="breweryId"
+              options={breweries.map((brewery) => ({
+                value: brewery.id,
+                text: brewery.name,
+              }))}
+              placeholder="Brewery"
+              message="Pick a brewery"
+            />
+          </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
+            placeholder="12"
+            formValidationSchema={abvValidationSchema}
+            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
+            placeholder="52"
+            formValidationSchema={ibuValidationSchema}
+            error={!!errors.ibu}
+            type="text"
+            id="lastName"
+          />
+        </div>
+      </div>
+
+      <FormInfo>
+        <FormLabel htmlFor="description">Description</FormLabel>
+        <FormError>{errors.description?.message}</FormError>
+      </FormInfo>
+      <FormSegment>
+        <FormTextArea
+          placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
+          error={!!errors.description}
+          formValidationSchema={register('description', {
+            required: 'Beer description is required.',
+          })}
+          id="description"
+          rows={8}
+        />
+      </FormSegment>
+
+      <FormInfo>
+        <FormLabel htmlFor="type">Type</FormLabel>
+        <FormError>{errors.type?.message}</FormError>
+      </FormInfo>
+      <FormSegment>
+        <FormTextInput
+          placeholder="Lagered Ale"
+          error={!!errors.type}
+          formValidationSchema={register('type', {
+            required: 'Beer type is required.',
+          })}
+          id="type"
+          type="text"
+        />
+      </FormSegment>
+
+      <Button type="submit">{`${
+        type === 'edit'
+          ? `Edit ${defaultValues?.name || 'beer post'}`
+          : 'Create beer post'
+      } `}</Button>
+    </form>
+  );
+};
+
+export default BeerForm;

components/Layout.tsx

@@ -7,7 +7,7 @@ const Layout: FC<{ children: ReactNode }> = ({ children }) => {
       <header className="top-0">
         <Navbar />
       </header>
-      <div className="top-0 h-full flex-1 animate-in fade-in">{children}</div>
+      <div className="animate-in fade-in top-0 h-full flex-1">{children}</div>
     </div>
   );
 };

components/ui/Button.tsx

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+
+interface FormButtonProps {
+  children: string;
+  type: 'button' | 'submit' | 'reset';
+  className?: string;
+}
+
+const Button: FunctionComponent<FormButtonProps> = ({ children, type, className }) => (
+  // eslint-disable-next-line react/button-has-type
+  <button type={type} className="btn-primary btn mt-4 w-full rounded-xl">
+    {children}
+  </button>
+);
+
+Button.defaultProps = {
+  className: '',
+};
+
+export default Button;

components/ui/forms/FormError.tsx

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Component for a styled form error message.
+ *
+ * @example
+ *   <FormError>Something went wrong!</FormError>;
+ */
+const FormError: FunctionComponent<{ children: string | undefined }> = ({ children }) =>
+  children ? (
+    <div
+      className="my-1 h-3 text-xs font-semibold italic text-error-content"
+      role="alert"
+    >
+      {children}
+    </div>
+  ) : null;
+export default FormError;

components/ui/forms/FormInfo.tsx

@@ -0,0 +1,12 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+/** A container for both the form error and form label. */
+interface FormInfoProps {
+  children: Array<ReactNode> | ReactNode;
+}
+
+const FormInfo: FunctionComponent<FormInfoProps> = ({ children }) => (
+  <div className="flex justify-between">{children}</div>
+);
+
+export default FormInfo;

components/ui/forms/FormLabel.tsx

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+
+interface FormLabelProps {
+  htmlFor: string;
+  children: string;
+}
+
+const FormLabel: FunctionComponent<FormLabelProps> = ({ htmlFor, children }) => (
+  <label
+    className="block uppercase tracking-wide text-sm sm:text-xs font-extrabold my-1"
+    htmlFor={htmlFor}
+  >
+    {children}
+  </label>
+);
+
+export default FormLabel;

components/ui/forms/FormSegment.tsx

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+
+/** A container for both the form error and form label. */
+interface FormInfoProps {
+  children: Array<JSX.Element> | JSX.Element;
+}
+
+const FormSegment: FunctionComponent<FormInfoProps> = ({ children }) => (
+  <div className="mb-2">{children}</div>
+);
+
+export default FormSegment;

components/ui/forms/FormSelect.tsx

@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormSelectProps {
+  options: ReadonlyArray<{ value: string; text: string }>;
+  id: string;
+  formRegister: UseFormRegisterReturn<string>;
+  error: boolean;
+  placeholder: string;
+  message: string;
+}
+
+const FormSelect: FunctionComponent<FormSelectProps> = ({
+  options,
+  id,
+  error,
+  formRegister,
+  placeholder,
+  message,
+}) => (
+  <select
+    id={id}
+    className={`select select-bordered block w-full rounded-lg ${
+      error ? 'select-error' : ''
+    }`}
+    placeholder={placeholder}
+    {...formRegister}
+  >
+    <option value="">{message}</option>
+    {options.map(({ value, text }) => (
+      <option key={value} value={value}>
+        {text}
+      </option>
+    ))}
+  </select>
+);
+
+export default FormSelect;

components/ui/forms/FormTextArea.tsx

@@ -0,0 +1,37 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormTextAreaProps {
+  placeholder?: string;
+  formValidationSchema: UseFormRegisterReturn<string>;
+  error: boolean;
+  id: string;
+  rows: number;
+  className?: string;
+}
+
+const FormTextArea: FunctionComponent<FormTextAreaProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  id,
+  rows,
+  className,
+}) => (
+  <textarea
+    id={id}
+    placeholder={placeholder}
+    className={`${className} textarea textarea-bordered w-full resize-none  rounded-lg bg-clip-padding border border-solid transition ease-in-out m-0  ${
+      error ? 'textarea-error' : ''
+    }`}
+    {...formValidationSchema}
+    rows={rows}
+  />
+);
+
+FormTextArea.defaultProps = {
+  placeholder: '',
+  className: '',
+};
+
+export default FormTextArea;

components/ui/forms/FormTextInput.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable react/require-default-props */
+import { FunctionComponent } from 'react';
+import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormInputProps {
+  placeholder?: string;
+  formValidationSchema: UseFormRegisterReturn<string>;
+  error: boolean;
+  // eslint-disable-next-line react/require-default-props
+  type: 'email' | 'password' | 'text' | 'date';
+  id: string;
+  height?: string;
+}
+
+const FormTextInput: FunctionComponent<FormInputProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  type,
+  id,
+}) => (
+  <input
+    id={id}
+    type={type}
+    placeholder={placeholder}
+    className={`input w-full transition ease-in-out rounded-lg input-bordered ${
+      error ? 'input-error' : ''
+    }`}
+    {...formValidationSchema}
+  />
+);
+
+export default FormTextInput;