Styling bookstore

package.json

@@ -9,12 +9,15 @@
     "gitignore": "^0.7.0",
     "prop-types": "^15.8.1",
     "react": "^18.0.0",
+    "react-circular-progressbar": "^2.0.4",
     "react-dom": "^18.0.0",
+    "react-icons": "^4.3.1",
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.1",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },

src/components/AddNewBook.js

@@ -1,25 +1,46 @@
 import React, { useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 import { useDispatch } from 'react-redux';
-import { addBook } from '../redux/Books/books';
+import { v4 as uuidv4 } from 'uuid';
+import { postBook } from '../redux/Books/books';
 
 const AddNewBook = () => {
   const [inputValues, setInputValues] = useState({
-    booktitle: '',
+    title: '',
+    author: '',
+    id: '',
     category: '',
   });
   const dispatch = useDispatch();
+  const [errorMsg, setError] = useState('');
 
   const submitBookToStore = (e) => {
     e.preventDefault();
     const id = uuidv4();
-    const { booktitle, category } = inputValues;
+    const { title, author, category } = inputValues;
     const newBook = {
-      booktitle,
       id,
+      title,
+      author,
       category,
     };
-    dispatch(addBook(newBook));
+
+    if (newBook.title.trim().length === 0) {
+      setError('Please add Book title to submit...');
+      setInputValues(newBook);
+    } else if (newBook.category === '') {
+      setError('Please select Book Category to submit...');
+      setInputValues(newBook);
+    } else {
+      setError('');
+      dispatch(postBook(newBook));
+      setInputValues({
+        title: '',
+        author: '',
+        id: '',
+        category: '',
+      });
+      document.querySelector('.add-book-section').reset();
+    }
   };
 
   const onChange = (e) => {
@@ -30,24 +51,37 @@ const AddNewBook = () => {
   };
 
   return (
-    <form className="add-book-section" onSubmit={submitBookToStore}>
-      <h1>ADD NEW BOOK</h1>
-      <input
-        type="text"
-        placeholder="Book title"
-        name="booktitle"
-        onChange={onChange}
-        required
-      />
-      <select placeholder="categories" name="category" onChange={onChange} required>
-        <option>Category</option>
-        <option value="Romance">Romance</option>
-        <option value="Documentary">Documentary</option>
-        <option value="Fiction">Fiction</option>
-        <option value="Crime">Crime</option>
-      </select>
-      <button type="submit" onClick={submitBookToStore}>Add Book</button>
-    </form>
+    <>
+      <div className="hr" />
+      <form className="add-book-section d_flex" onSubmit={submitBookToStore}>
+        <h1>ADD NEW BOOK</h1>
+        <div className="add-book d_flex">
+          <input
+            type="text"
+            placeholder="Book title"
+            name="title"
+            onChange={onChange}
+            required
+          />
+          <input
+            type="text"
+            placeholder="Author"
+            name="author"
+            onChange={onChange}
+            required
+          />
+          <select name="category" onChange={onChange} required>
+            <option value="" hidden>Category</option>
+            <option value="Romance">Romance</option>
+            <option value="Documentary">Documentary</option>
+            <option value="Fiction">Fiction</option>
+            <option value="Crime">Crime</option>
+          </select>
+          <button type="submit" onClick={submitBookToStore}>Add Book</button>
+        </div>
+        <small>{errorMsg}</small>
+      </form>
+    </>
   );
 };
 

src/components/BookItem.js

@@ -1,35 +1,68 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
-import { removeBook } from '../redux/Books/books';
+import { CircularProgressbar } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+import { deleteBook } from '../redux/Books/books';
 
 const BookItem = ({ book }) => {
   const {
-    booktitle, id, category,
+    title, author, id, category,
   } = book;
   const dispatch = useDispatch();
 
+  const HandleRemove = () => {
+    dispatch(deleteBook(id));
+  };
+
+  const chapterVal = Math.round(Math.random() * 20);
+
   return (
-    <li key={id}>
-      <p>
-        Book:
-        {' '}
-        { booktitle }
-      </p>
-      <p>
-        Category:
-        {' '}
-        {category}
-      </p>
-      <button type="button" onClick={() => dispatch(removeBook(id))}>Remove</button>
+    <li key={id} className="d_flex">
+      <div className="firsCol">
+        <p className="category">{category}</p>
+        <p className="title">{ title }</p>
+        <p className="Author" required>{ author }</p>
+        <div className="firsCol-btns">
+          <button type="button">Comment</button>
+          <button type="button" onClick={HandleRemove}>Remove</button>
+          <button type="button">Edit</button>
+        </div>
+      </div>
+      <ul className="secondCol d_flex">
+        <li>
+          <div style={{ width: 100, height: 100 }}>
+            <CircularProgressbar value={Math.round((chapterVal / 20) * 100)} />
+          </div>
+        </li>
+        <li>
+          <p className="percentageVal">
+            {Math.round((chapterVal / 20) * 100)}
+            %
+          </p>
+          <p className="completed">completed</p>
+        </li>
+        <li>
+          <div className="lastCol">
+            <p className="currChapter">CURRENT CHAPTER</p>
+            <p id="chapter">
+              Chapter
+              {' '}
+              {chapterVal}
+            </p>
+            <button type="button">UPDATE PROGRESS</button>
+          </div>
+        </li>
+      </ul>
     </li>
   );
 };
 
 BookItem.propTypes = {
   book: PropTypes.shape(
     {
-      booktitle: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      author: PropTypes.string.isRequired,
       id: PropTypes.string.isRequired,
       category: PropTypes.string.isRequired,
     },

src/components/Books.js

@@ -1,21 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getBooksList } from '../redux/Books/books';
 import BookItem from './BookItem';
 
-const Books = ({ bookList }) => (
-  <ul className="books-list-section">
-    {bookList.map((book) => (
-      <BookItem key={book.id} book={book} />
-    ))}
-  </ul>
-);
+const Books = () => {
+  const dispatch = useDispatch();
+  const booksList = useSelector((state) => state.booksReducer);
 
-Books.propTypes = {
-  bookList: PropTypes.arrayOf(PropTypes.shape(
-    {
-      id: PropTypes.string.isRequired,
-    },
-  )).isRequired,
+  useEffect(() => {
+    dispatch(getBooksList());
+  }, [dispatch]);
+
+  return (
+    <ul className="books-list-section">
+      {booksList
+        ? booksList.map((book) => (
+          <BookItem key={book.id} book={book} />
+        ))
+        : 'Loading...'}
+    </ul>
+  );
 };
 
 export default Books;

src/components/CategoryPage.js

@@ -1,9 +1,17 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { checkStatus } from '../redux/Categories/categories';
 
-const CategoryPage = () => (
-  <div>
-    <h1>Under construction!!</h1>
-  </div>
-);
+const CategoryPage = () => {
+  const Category = useSelector((state) => state.categoryReducer);
+  const dispatch = useDispatch();
+  const handleClick = () => dispatch(checkStatus());
+  return (
+    <div>
+      <button onClick={handleClick} type="button"> Check status</button>
+      <h1>{Category}</h1>
+    </div>
+  );
+};
 
 export default CategoryPage;

src/components/Navbar.js

@@ -1,14 +1,26 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { FaUserAlt } from 'react-icons/fa';
 
 const Navbar = () => (
-  <nav className="navigation">
-    <h1>Bookstore CMS</h1>
-    <ul>
-      <li><Link to="/">BOOKS</Link></li>
-      <li><Link to="/categories">CATEGORIES</Link></li>
-    </ul>
-  </nav>
+  <div className="navigation_container">
+    <nav className="navigation d_flex">
+      <ul className="d_flex">
+        <li><h1><Link to="/">Bookstore CMS</Link></h1></li>
+        <li><Link to="/">BOOKS</Link></li>
+        <li><Link to="/categories">CATEGORIES</Link></li>
+      </ul>
+      <span className="user-profile-wrapper d_flex">
+        <FaUserAlt style={{
+          color: '#0290ff',
+          height: '15px',
+          cursor: 'pointer',
+          transition: 'all ease-in 300ms',
+        }}
+        />
+      </span>
+    </nav>
+  </div>
 );
 
 export default Navbar;