Merge pull request #5 from AsumVictor/ft-styling

Milestone 5: Styling
AsumVictor · Jul 28, 2023 · 028d6d8 · 028d6d8
2 parents a7a7857 + e23c676
commit 028d6d8
Show file tree

Hide file tree

Showing 16 changed files with 401 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -56,9 +56,9 @@ Book Haven is a comprehensive and user-friendly Books-store app developed to cat
 
 - Responsive Design: BookWorld is built with a responsive design, ensuring a seamless and visually appealing experience across various devices, including desktops, tablets, and smartphones.
 
- <!-- ## Live demo <a name="key-features"></a>
+  ## Live demo <a name="key-features"></a>
 
-I have deployed the project of github. [Click to view the live version of my project](https://aiasum-todo.netlify.app/)  -->
+I have deployed the project of github. [Click to view the live version of my project](https://iabookhaven.onrender.com) 
 
 ## 💻 Getting Started <a name="getting-started"></a>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
     "big.js": "^6.2.1",
+    "lottie-react": "^2.4.0",
     "nanoid": "^4.0.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,14 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <title>AiAsum | BookHaven</title>
+    <meta property="og:title" content="Asum Victor's Book Store App | Organize, Track Reading Focus & Chapters Read" />
+    <meta property="og:description" content="Discover Asum Victor's Book Store App - Effortlessly organize your book collection, track reading progress, and know the number of chapters read. Join our reading revolution today!" />
+    <meta property="og:url" content="https://iabookhaven.onrender.com" />
+    <meta name="author" content="Asum Victor" />
+    <meta property="og:type" content="website" />  
+    <link rel="canonical" href="https://iabookhaven.onrender.com" />
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/src/App.js b/src/App.js
@@ -5,6 +5,7 @@ import { ToastContainer } from 'react-toastify';
 import { Books, Categories } from './Routes';
 import 'react-toastify/dist/ReactToastify.css';
 import { fetchBooks } from './redux/book/bookSlice';
+import Header from './components/Navigation';
 
 function App() {
   const dispatch = useDispatch();
@@ -15,11 +16,13 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Books />} />
-        <Route path="/categories" element={<Categories />} />
+        <Route element={<Header />}>
+          <Route path="/" element={<Books />} />
+          <Route path="/categories" element={<Categories />} />
+        </Route>
       </Routes>
       <ToastContainer
-        position="top-center"
+        position="bottom-right"
         autoClose={5000}
         hideProgressBar={false}
         newestOnTop={false}
@@ -28,7 +31,7 @@ function App() {
         pauseOnFocusLoss
         draggable
         pauseOnHover
-        theme="light"
+        theme="colored"
       />
     </BrowserRouter>
   );

diff --git a/src/assets/animation_json/deleting.json b/src/assets/animation_json/deleting.json
@@ -0,0 +1 @@
+{"v":"5.7.4","fr":24,"ip":0,"op":21,"w":24,"h":24,"nm":"T_V2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"cover/trash_version2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":2,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[-7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[-7]},{"t":12,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[12,5.3,0],"to":[0,-0.133,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":2,"s":[12,4.5,0],"to":[0,0,0],"ti":[0,-0.133,0]},{"t":6,"s":[12,5.3,0]}],"ix":2,"l":2},"a":{"a":0,"k":[8.5,3.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.829,0],[0,0],[0,-0.829],[0,0],[0,0],[0,0]],"o":[[0,0],[0.828,0],[0,0],[0,0],[0,0],[0,-0.829]],"v":[[-1,-1.5],[1,-1.5],[2.5,0],[2.5,1.5],[-2.5,1.5],[-2.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[8.5,2.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.552,0],[0,0],[0,-0.552],[0.553,0],[0,0],[0,0.552]],"o":[[0,0],[0.553,0],[0,0.552],[0,0],[-0.552,0],[0,-0.552]],"v":[[-6.5,-1],[6.5,-1],[7.5,0],[6.5,1],[-6.5,1],[-7.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[8.5,5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"can/trash_version2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[12,15.867,0],"ix":2,"l":2},"a":{"a":0,"k":[8,7,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.5,1],[15.5,1]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-0.362,-2.895],[0.362,2.895]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[4.705,7.395],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[8,4.5],[8,10.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.362,-2.895],[-0.362,2.895]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[11.362,7.395],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0.828,0],[0,0],[0,0.828]],"o":[[0,0],[0,0],[0,0.828],[0,0],[-0.829,0],[0,0]],"v":[[-6.5,-6],[6.5,-6],[6.5,4.5],[5,6],[-5,6],[-6.5,4.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[8,7],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":2,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0}],"markers":[]}
diff --git a/src/assets/animation_json/empty.json b/src/assets/animation_json/empty.json
diff --git a/src/components/Book.js b/src/components/Book.js
@@ -1,23 +1,105 @@
-/* eslint-disable no-unused-vars */
-import React from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import Lottie from 'lottie-react';
 import { removeBook } from '../redux/book/bookSlice';
+import ProgressBar from './Progressbar';
+import deleteAnim from '../assets/animation_json/deleting.json';
 
-const Book = ({ id, title, author }) => {
+const Book = ({
+  id, title, author, currentChapter, progress, category,
+}) => {
   const dispatch = useDispatch();
-  const handleRemove = (id) => {
+  const { deletedSuccess } = useSelector((state) => state.book);
+
+  const [click, setClick] = useState(false);
+  const handleRemove = () => {
+    setClick(true);
     dispatch(removeBook(id));
   };
 
   return (
-    <div className="border-b-4">
-      <h3>{title}</h3>
-      <p>
-        By
-        {author}
-      </p>
-      <button type="button" className="px-3 py-1 bg-red-400" onClick={() => handleRemove(id)}> Remove Book </button>
+    <div
+      className={`book ${
+        click && deletedSuccess && 'deleted'
+      } w-full bg-white relative hover:border-_blue border rouned-md grid 730px:grid-cols-2 gap-y-5 pb-3`}
+    >
+      <div
+        className={`${
+          click ? 'opacity-20' : ''
+        }  px-2 md:px-6 pt-4 py-2 flex flex-col gap-3`}
+      >
+        <h3 className="font-bold text-gray-500">{category}</h3>
+        <h3 className="font-extrabold text-3xl text-black capitalize">
+          {title}
+        </h3>
+        <p className="-mt-4 font-semibold text-_textBlue capitalize">
+          {author}
+        </p>
+        <div className="w-10/12 py-2 850px:w-10/12 1059px:w-7/12 grid grid-cols-3 mt-5">
+          <div className="h-[1cm] flex items-center justify-start col-span-1 border-r-2 border-gray-200">
+            <button type="button" className="text-_blue text-[18px]">
+              Comment
+            </button>
+          </div>
+          <div className="h-[1cm] flex items-center justify-center col-span-1 border-r-2 border-gray-200">
+            <button
+              type="button"
+              className="text-_blue text-[18px]"
+              onClick={() => handleRemove(id)}
+            >
+              Remove
+            </button>
+          </div>
+          <div className="h-[1cm] flex items-center justify-center col-span-1 border-r-2 border-gray-200">
+            <button type="button" className="text-_blue text-[18px]">
+              Edit
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className={`${click && 'opacity-20'} grid grid-cols-2`}>
+        <div className=" col-span-1 flex items-center justify-center">
+          <div className="w-full h-[3.5cm] flex items-center justify-center 850px:gap-2  border-r-2 border-r-gray-300 pr-2 gap-0">
+            <ProgressBar
+              progress={Math.ceil(progress * 63)}
+              classAddtion="max-730px:scale-[0.6]"
+            />
+            <h3 className="flex flex-col text-center max-730px:-ml-4">
+              <span className="font-bold text-xl 850px:text-2xl 1060px:text-3xl">
+                {Math.ceil(progress * 100)}
+                %
+              </span>
+              <span className="text-gray-500 semi-semibold 850px:text-[16px] 1060px:text-xl">
+                Completed
+              </span>
+            </h3>
+          </div>
+        </div>
+        <div className=" col-span-1 flex px-2 850px:px-10 justify-center flex-col">
+          <h3 className="text-[16px] 850px:text-[20px] text-gray-500">
+            CURRENT CHAPTER
+          </h3>
+          <h3 className="text-[18px] font-semibold text-black">
+            Chapter
+            {' '}
+            {currentChapter}
+          </h3>
+          <button
+            type="button"
+            className="bg-_blue text-white py-2 text-[16px] 850px:text-xl rounded-md mt-4"
+          >
+            UPDATE PROGRESS
+          </button>
+        </div>
+      </div>
+
+      {click && (
+        <div className="absolute h-full w-full top-0 left-0 bg-[rgba(0,0,0,0.1)] flex- items-center justify-center flex flex-col">
+          <Lottie animationData={deleteAnim} className="w-[2cm]" />
+          <p className="text-xl font-semibold">Deleting...</p>
+        </div>
+      )}
     </div>
   );
 };
@@ -26,11 +108,17 @@ Book.propTypes = {
   title: PropTypes.string,
   author: PropTypes.string,
   id: PropTypes.string.isRequired,
+  progress: PropTypes.number,
+  category: PropTypes.number,
+  currentChapter: PropTypes.number,
 };
 
 Book.defaultProps = {
+  category: 'Others',
   title: 'Book title',
   author: 'Unknown Author',
+  progress: 0,
+  currentChapter: 1,
 };
 
 export default Book;
diff --git a/src/components/Books.js b/src/components/Books.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import Lottie from 'lottie-react';
 import Book from './Book';
 import Form from './Form';
+import emptyAnim from '../assets/animation_json/empty.json';
 
 const Books = () => {
   const {
@@ -12,9 +14,10 @@ const Books = () => {
 
   if (isLoading) {
     return (
-      <>
-        <h1>LOADING BOOKS...</h1>
-      </>
+      <div className="w-full  h-[80%] flex-col flex justify-center items-center">
+        <div className="spinner" />
+        <h1>Loading...</h1>
+      </div>
     );
   }
 
@@ -30,15 +33,27 @@ const Books = () => {
   }
 
   return (
-    <div>
-      {books.map((book) => (
-        <Book
-          key={book.id}
-          id={book.id}
-          title={book.title}
-          author={book.author}
-        />
-      ))}
+    <div className="px-3 md:px-10 w-full mt-10 flex flex-col gap-5">
+      {books && books.length < 1 ? (
+        <>
+          <div className="w-full flex-col flex justify-center items-center">
+            <Lottie animationData={emptyAnim} />
+            <p className="text-xl font-semibold">Empty Bookstore</p>
+          </div>
+        </>
+      ) : (
+        books.map((book) => (
+          <Book
+            key={book.id}
+            id={book.id}
+            title={book.title}
+            author={book.author}
+            currentChapter={book.currentChapter}
+            progress={book.progress}
+            category={book.category}
+          />
+        ))
+      )}
       <Form />
     </div>
   );