feat(frontend): implement resources forms

frontend/src/components/Form/Input.tsx

@@ -2,30 +2,29 @@ import { InputHTMLAttributes } from "react";
 import { UseFormRegister } from "react-hook-form";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    label: string;
-    name: string;
-    register: UseFormRegister<any>;
-    errorMessage?: string
+  label: string;
+  name: string;
+  register: UseFormRegister<any>;
+  errorMessage?: string;
 }
 
 const Input: React.FC<InputProps> = ({ label, name, register, errorMessage, ...otherOptions }) => {
+  return (
+    <>
+      <label htmlFor={name} className="block text-sm font-medium leading-6 text-gray-900">
+        {label}
+      </label>
+      <div className="mt-2">
+        <input
+          {...otherOptions}
+          {...register(name)}
+          id={name}
+          className="block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        />
+        <p className="text-red-500 text-xs italic">{errorMessage}</p>
+      </div>
+    </>
+  );
+};
 
-    return (
-        <div className="sm:col-span-3">
-            <label htmlFor={name} className="block text-sm font-medium leading-6 text-gray-900">
-                {label}
-            </label>
-            <div className="mt-2">
-                <input
-                    {...otherOptions}
-                    {...register(name)}
-                    id={name}
-                    className="block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                />
-                <p className="text-red-500 text-xs italic">{errorMessage}</p>
-            </div>
-        </div>
-    )
-}
-
-export default Input
+export default Input;

frontend/src/index.tsx

@@ -1,16 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import {
-  createBrowserRouter,
-  RouterProvider,
-} from "react-router-dom";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import Books from 'pages/Books/Books';
-import Authors from 'pages/Authors/Authors';
-import Layout from 'components/Layout';
+import Books from "pages/Books/Books";
+import Authors from "pages/Authors/Authors";
+import Layout from "components/Layout";
 
-import './index.css';
-import AuthorCreate from 'pages/Authors/AuthorCreate';
+import "./index.css";
+import AuthorCreate from "pages/Authors/AuthorCreate";
+import BookCreate from "pages/Books/BookCreate";
 
 const router = createBrowserRouter([
   {
@@ -21,27 +19,26 @@ const router = createBrowserRouter([
         path: "",
         element: <Books />,
       },
+      {
+        path: "books/create",
+        element: <BookCreate />,
+      },
       {
         path: "authors",
         element: <Authors />,
-
       },
       {
         path: "authors/create",
         element: <AuthorCreate />,
-      }
-    ]
+      },
+    ],
   },
-
 ]);
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
-

frontend/src/pages/Authors/AuthorCreate.tsx

@@ -1,11 +1,8 @@
-import AuthorForm from "components/AuthorForm";
+import AuthorForm from "pages/Authors/AuthorForm";
 import React from "react";
 
-
 const AuthorCreate: React.FC = () => {
-    return (
-        <AuthorForm />
-    )
-}
+  return <AuthorForm />;
+};
 
-export default AuthorCreate
+export default AuthorCreate;

frontend/src/pages/Authors/AuthorForm.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { AuthorFormCreate } from "types/author";
+import Input from "../../components/Form/Input";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import AuthorSchema from "../../components/Schemas/AuthorSchema";
+import Form, { FormMessage } from "../../components/Form/Form";
+import ManagementService from "services/managementService";
+
+const managementService = new ManagementService();
+
+const AuthorForm: React.FC = () => {
+  const messageInitialState = { value: "", isError: false };
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState<FormMessage>(messageInitialState);
+  const {
+    register,
+    handleSubmit,
+    reset,
+
+    formState: { errors },
+  } = useForm({ resolver: yupResolver(AuthorSchema) });
+
+  const onSubmit: SubmitHandler<AuthorFormCreate> = async (data: AuthorFormCreate) => {
+    setIsLoading(true);
+    const author = await managementService.createAuthor(data);
+    if (author) onReset();
+    setMessage({
+      value: author ? "Author created with success" : "It wasn't possible to create the author, try again",
+      isError: author === undefined,
+    });
+    setIsLoading(false);
+  };
+
+  const onReset = () => {
+    setMessage(messageInitialState);
+    reset(undefined);
+  };
+
+  return (
+    <Form
+      onSubmit={handleSubmit(onSubmit)}
+      onReset={onReset}
+      title="Author Creation"
+      description="Enter the author details"
+      message={message}
+      isLoading={isLoading}
+    >
+      <>
+        <div className="sm:col-span-3">
+          <Input label="Author name" name="name" register={register} errorMessage={errors.name?.message} />
+        </div>
+        <div className="sm:col-span-3">
+          <Input label="Email address" name="email" register={register} errorMessage={errors.email?.message} />
+        </div>
+        <div className="sm:col-span-3">
+          <Input
+            label="Nationality"
+            name="nationality"
+            register={register}
+            errorMessage={errors.nationality?.message}
+          />
+        </div>
+        <div className="sm:col-span-3">
+          <Input label="Birth date" name="birthDate" register={register} errorMessage={errors.birthDate?.message} />
+        </div>
+      </>
+    </Form>
+  );
+};
+
+export default AuthorForm;

frontend/src/pages/Books/BookCreate.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import BookForm from "./BookForm";
+
+const BookCreate: React.FC = () => {
+  return <BookForm />;
+};
+
+export default BookCreate;