Add: styles for the footer and display notifications

ClaytonSiby · Oct 12, 2023 · f990327 · f990327
1 parent 4e287e2
commit f990327
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/components/BookForm/index.tsx b/src/components/BookForm/index.tsx
@@ -26,7 +26,7 @@ const CreateBook = () => {
     console.log(formData)
 
     try {
-      dispatch(addBook(formData))
+      const response: any = await dispatch(addBook(formData))
       setFormData({
         id: '',
         title: '',
@@ -37,6 +37,9 @@ const CreateBook = () => {
         updated_at: '',
       })
 
+      console.log(response)
+
+      alert(`Book creation was a : ${response.payload.message}`)
       window.location.reload()
     } catch (error) {
       console.log(error)
@@ -79,6 +82,7 @@ const CreateBook = () => {
             name="title"
             value={formData.title}
             onChange={handleInputChange}
+            required
           />
         </div>
         <div className="col col-md-6 form-group my-2">
@@ -90,6 +94,7 @@ const CreateBook = () => {
             name="author"
             value={formData.author}
             onChange={handleInputChange}
+            required
           />
         </div>
         <div className="form-group my-2">
@@ -100,6 +105,7 @@ const CreateBook = () => {
             value={formData.categories}
             onChange={handleInputChange}
             multiple={true}
+            required
           >
             <option className="border-bottom border-info py-1 text-info disabled">
               Select Category
@@ -124,6 +130,7 @@ const CreateBook = () => {
               name="description"
               value={formData.description}
               onChange={handleInputChange}
+              required
             ></textarea>
             <label htmlFor="floatingTextarea" className="text-secondary">
               description

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -3,13 +3,19 @@ import React from 'react'
 const Footer = () => {
   return (
     <footer>
-      <div className="navbar bg-info-subtle border-top">
-        <div className="container d-flex justify-content-between">
+      <div className="bg-info-subtle fixed-bottom border-top text-body-tertiary py-2">
+        <div className="container d-flex justify-content-between align-items-center">
           <div>
-            <p>&copy; 2023 Helm BookLibrary. All rights reserved.</p>
+            <small>&copy; 2023 Helm BookLibrary. All rights reserved.</small>
           </div>
           <div>
-            <p>Designed and developed by Clayton Siby</p>
+            <small>&#x1F375;</small>
+          </div>
+          <div>
+            <small>
+              Designed and developed by{' '}
+              <span className="text-info">Clayton Siby</span>
+            </small>
           </div>
         </div>
       </div>