Refactor api requests and components out of pages

components/ui/forms/Button.tsx

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

components/ui/forms/FormError.tsx

@@ -3,8 +3,6 @@ import { FunctionComponent } from 'react';
 // import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 /**
- * Component for a styled form error message.
- *
  * @example
  *   <FormError>Something went wrong!</FormError>;
  */

components/ui/forms/FormInfo.tsx

@@ -1,10 +1,16 @@
 import { FunctionComponent, ReactNode } from 'react';
 
-/** A container for both the form error and form label. */
 interface FormInfoProps {
-  children: Array<ReactNode> | ReactNode;
+  children: [ReactNode, ReactNode];
 }
 
+/**
+ * @example
+ *   <FormInfo>
+ *     <FormLabel htmlFor="name">Name</FormLabel>
+ *     <FormError>{errors.name?.message}</FormError>
+ *   </FormInfo>;
+ */
 const FormInfo: FunctionComponent<FormInfoProps> = ({ children }) => (
   <div className="flex justify-between">{children}</div>
 );

components/ui/forms/FormLabel.tsx

@@ -5,9 +5,13 @@ interface FormLabelProps {
   children: string;
 }
 
+/**
+ * @example
+ *   <FormLabel htmlFor="name">Name</FormLabel>;
+ */
 const FormLabel: FunctionComponent<FormLabelProps> = ({ htmlFor, children }) => (
   <label
-    className="block uppercase tracking-wide text-sm sm:text-xs font-extrabold my-1"
+    className="my-1 block text-sm font-extrabold uppercase tracking-wide sm:text-xs"
     htmlFor={htmlFor}
   >
     {children}

components/ui/forms/FormSelect.tsx

@@ -10,6 +10,29 @@ interface FormSelectProps {
   message: string;
 }
 
+/**
+ * @example
+ *   <FormSelect
+ *     options={[
+ *       { value: '1', text: 'One' },
+ *       { value: '2', text: 'Two' },
+ *       { value: '3', text: 'Three' },
+ *     ]}
+ *     id="test"
+ *     formRegister={register('test')}
+ *     error={true}
+ *     placeholder="Test"
+ *     message="Select an option"
+ *   />;
+ *
+ * @param props
+ * @param props.options The options to display in the select.
+ * @param props.id The id of the select.
+ * @param props.formRegister The form register hook from react-hook-form.
+ * @param props.error Whether or not the select has an error.
+ * @param props.placeholder The placeholder text for the select.
+ * @param props.message The message to display when no option is selected.
+ */
 const FormSelect: FunctionComponent<FormSelectProps> = ({
   options,
   id,
@@ -20,7 +43,7 @@ const FormSelect: FunctionComponent<FormSelectProps> = ({
 }) => (
   <select
     id={id}
-    className={`select select-bordered block w-full rounded-lg ${
+    className={`select-bordered select block w-full rounded-lg ${
       error ? 'select-error' : ''
     }`}
     placeholder={placeholder}

components/ui/forms/FormTextArea.tsx

@@ -7,21 +7,36 @@ interface FormTextAreaProps {
   error: boolean;
   id: string;
   rows: number;
-  className?: string;
 }
 
+/**
+ * @example
+ *   <FormTextArea
+ *     id="test"
+ *     formValidationSchema={register('test')}
+ *     error={true}
+ *     placeholder="Test"
+ *     rows={5}
+ *   />;
+ *
+ * @param props
+ * @param props.placeholder The placeholder text for the textarea.
+ * @param props.formValidationSchema The form register hook from react-hook-form.
+ * @param props.error Whether or not the textarea has an error.
+ * @param props.id The id of the textarea.
+ * @param props.rows The number of rows to display in the textarea.
+ */
 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  ${
+    className={`textarea-bordered textarea m-0 w-full  resize-none rounded-lg border border-solid bg-clip-padding transition ease-in-out  ${
       error ? 'textarea-error' : ''
     }`}
     {...formValidationSchema}
@@ -29,9 +44,4 @@ const FormTextArea: FunctionComponent<FormTextAreaProps> = ({
   />
 );
 
-FormTextArea.defaultProps = {
-  placeholder: '',
-  className: '',
-};
-
 export default FormTextArea;

components/ui/forms/FormTextInput.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/require-default-props */
 import { FunctionComponent } from 'react';
-import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
+import { UseFormRegisterReturn } from 'react-hook-form';
 
 interface FormInputProps {
   placeholder?: string;
@@ -12,6 +12,25 @@ interface FormInputProps {
   height?: string;
 }
 
+/**
+ * @example
+ *   <FormTextInput
+ *     placeholder="Lorem Ipsum Lager"
+ *     formValidationSchema={register('name')}
+ *     error={!!errors.name}
+ *     type="text"
+ *     id="name"
+ *   />;
+ *
+ * @param param0 The props for the FormTextInput component
+ * @param param0.placeholder The placeholder text for the input
+ * @param param0.formValidationSchema The validation schema for the input, provided by
+ *   react-hook-form.
+ * @param param0.error Whether or not the input has an error.
+ * @param param0.type The input type (email, password, text, date).
+ * @param param0.id The id of the input.
+ * @param param0.height The height of the input.
+ */
 const FormTextInput: FunctionComponent<FormInputProps> = ({
   placeholder = '',
   formValidationSchema,
@@ -23,7 +42,7 @@ const FormTextInput: FunctionComponent<FormInputProps> = ({
     id={id}
     type={type}
     placeholder={placeholder}
-    className={`input w-full transition ease-in-out rounded-lg input-bordered ${
+    className={`input-bordered input w-full rounded-lg transition ease-in-out ${
       error ? 'input-error' : ''
     }`}
     {...formValidationSchema}