Merge pull request #19 from Blockchain-Country/regroupfiles

renamed and restructured files and folders, created Input component

src/App.css

@@ -24,7 +24,7 @@
   width: 65%;
 }
 
-[data-testid='search_section'],
+[data-testid='search_book_section'],
 [data-testid='manualAddBook_section'],
 [data-testid='filters_section'],
 [data-testid='bookList_section'] {
@@ -53,7 +53,7 @@
     gap: 1rem;
   }
 
-  [data-testid='search_section'],
+  [data-testid='search_book_section'],
   [data-testid='manualAddBook_section'],
   [data-testid='filters_section'],
   [data-testid='bookList_section'] {

src/App.js

@@ -1,8 +1,8 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import BookFilter from './components/bookFilters/BookFilter'
-import ManualBookForm from './components/manualBookForm/ManualBookForm'
-import SearchBookForm from './components/searchBookForm/SearchBookForm'
-import BookList from './components/bookList/BookList'
+import FilterSection from './components/filterSection/FilterSection'
+import ManualAddBookSection from './components/manualAddBookSection/ManualAddBookSection'
+import SearchBookSection from './components/searchBookSection/SearchBookSection'
+import BookListSection from './components/BookListSection/BookListSection'
 import Header from './components/header/Header'
 import Login from './components/login/Login'
 import Error from './components/error/Error'
@@ -25,12 +25,12 @@ function App() {
               element={
                 <>
                   <div data-testid="app_left_column">
-                    <SearchBookForm data-testid="search_section" />
-                    <ManualBookForm data-testid="manualAddBook_section" />
+                    <SearchBookSection data-testid="search_book_section" />
+                    <ManualAddBookSection data-testid="manualAddBook_section" />
                   </div>
                   <div data-testid="app_right_column">
-                    <BookFilter data-testid="filters_section" />
-                    <BookList data-testid="bookList_section" />
+                    <FilterSection data-testid="filters_section" />
+                    <BookListSection data-testid="bookList_section" />
                   </div>
                 </>
               }

src/App.test.js

@@ -4,12 +4,15 @@ import { createStore } from './redux/store'
 import App from './App'
 
 //App main component:
-let header, manualBookForm_Component, bookFilter_Component, bookList_Component
+let header,
+  manualAddBookSection_component,
+  filterSection_component,
+  bookListSection_component
 
 // BookForm elements:
 let titleInput, authorsInput, submitBookBtn
 
-// BookFilter elements:
+// FilterSection elements:
 let filterByTitleInput, filterbyAuthorsInput, clearAllFiltersBtn
 
 const bookTitleName = 'BookTitle1'
@@ -36,26 +39,26 @@ describe('App Component Tests', () => {
 
     //main components elements:
     header = screen.getByTestId('header_container')
-    manualBookForm_Component = screen.getByTestId('manualAddBook_section')
-    bookFilter_Component = screen.getByTestId('filters_section')
-    bookList_Component = screen.getByTestId('bookList_section')
+    manualAddBookSection_component = screen.getByTestId('manualAddBook_section')
+    filterSection_component = screen.getByTestId('filters_section')
+    bookListSection_component = screen.getByTestId('bookList_section')
   })
 
   test('Should render the Header to be in the DOM and should contain text "My Books Storage"', async () => {
     expect(header).toBeInTheDocument()
     expect(header).toHaveTextContent('My Books Storage')
   })
 
-  test('Should render the ManualBookForm component in the DOM', () => {
-    expect(manualBookForm_Component).toBeInTheDocument()
+  test('Should render the ManualAddBookSection component in the DOM', () => {
+    expect(manualAddBookSection_component).toBeInTheDocument()
   })
 
-  test('Should render the BookList component in the DOM', () => {
-    expect(bookList_Component).toBeInTheDocument()
+  test('Should render the BookListSection component in the DOM', () => {
+    expect(bookListSection_component).toBeInTheDocument()
   })
 
-  test('Should render the BookFilter component in the DOM', () => {
-    expect(bookFilter_Component).toBeInTheDocument()
+  test('Should render the FilterSection component in the DOM', () => {
+    expect(filterSection_component).toBeInTheDocument()
   })
 })
 
@@ -64,22 +67,24 @@ describe('App functional Tests', () => {
     resetStore()
     setup(App, store)
 
-    // ManualBookForm elements:
+    // ManualAddBookSection form elements:
+    console.log('Screen: ', screen)
+
     titleInput = screen.getByTestId('manualAddBook_input_title')
     authorsInput = screen.getByTestId('manualAddBook_input_author')
     submitBookBtn = screen.getByTestId('manualAddBook_submit_btn')
-    bookList_Component = screen.getByTestId('bookList_section')
-    // BookFilter elements:
+    bookListSection_component = screen.getByTestId('bookList_section')
+    // FilterSection elements:
     filterByTitleInput = screen.getByTestId('filter_title_input')
     filterbyAuthorsInput = screen.getByTestId('filter_author_input')
     clearAllFiltersBtn = screen.getByTestId('filter_clear_btn')
   })
 
-  test('Should Submit a new book to the BookList component', () => {
+  test('Should Submit a new book to the BookListSection', () => {
     submitNewBook(bookTitleName, bookAuthorName)
 
     // Verify that the book is added to the book list
-    const bookItems = within(bookList_Component).getAllByRole('listitem')
+    const bookItems = within(bookListSection_component).getAllByRole('listitem')
     expect(bookItems.length).toEqual(1)
     const newBookTitle = within(bookItems[0]).getByText(bookTitleName)
     expect(newBookTitle).toBeInTheDocument()
@@ -92,7 +97,7 @@ describe('App functional Tests', () => {
     submitNewBook('BookTitle2', 'BookAuthor2')
 
     // Verify two books added to the BookList
-    const bookItems = within(bookList_Component).getAllByRole('listitem')
+    const bookItems = within(bookListSection_component).getAllByRole('listitem')
     expect(bookItems.length).toEqual(2)
 
     // Apply TitleFilter
@@ -101,7 +106,9 @@ describe('App functional Tests', () => {
     })
 
     // Verify the BookList is filtered and contain one book
-    const filteredBooks = within(bookList_Component).getAllByRole('listitem')
+    const filteredBooks = within(bookListSection_component).getAllByRole(
+      'listitem'
+    )
     expect(filteredBooks.length).toEqual(1)
 
     const filteredTitleEl = within(filteredBooks[0]).getByText(bookTitleName)
@@ -113,7 +120,7 @@ describe('App functional Tests', () => {
     submitNewBook('BookTitle2', 'BookAuthor2')
 
     // Verify two books added to the BookList
-    const bookItems = within(bookList_Component).getAllByRole('listitem')
+    const bookItems = within(bookListSection_component).getAllByRole('listitem')
     expect(bookItems.length).toEqual(2)
 
     // Apply AuthorFilter
@@ -122,7 +129,9 @@ describe('App functional Tests', () => {
     })
 
     // Verify the BookList is filtered and contain one book
-    const filteredBooks = within(bookList_Component).getAllByRole('listitem')
+    const filteredBooks = within(bookListSection_component).getAllByRole(
+      'listitem'
+    )
     expect(filteredBooks.length).toEqual(1)
 
     const filteredAuthorEl = within(filteredBooks[0]).getByText(bookAuthorName)
@@ -139,14 +148,17 @@ describe('App functional Tests', () => {
     })
 
     // Verify the BookList is filtered and contain one book
-    const filteredBooks = within(bookList_Component).getAllByRole('listitem')
+    const filteredBooks = within(bookListSection_component).getAllByRole(
+      'listitem'
+    )
     expect(filteredBooks.length).toEqual(1)
 
     fireEvent.click(clearAllFiltersBtn)
 
     // Verify the BookList to contain two books
-    const booksListAfterFilterReset =
-      within(bookList_Component).getAllByRole('listitem')
+    const booksListAfterFilterReset = within(
+      bookListSection_component
+    ).getAllByRole('listitem')
     expect(booksListAfterFilterReset.length).toEqual(2)
   })
 })

src/components/bookList/BookList.jsx → src/components/BookListSection/BookListSection.jsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux'
-import Book from '../book/Book'
-import './BookList.css'
+import Book from './book/Book'
+import './BookListSection.css'
 import {
   selectBook,
   deleteBook,
@@ -12,7 +12,7 @@ import {
 } from '../../redux/slices/filterSlice'
 import { setError } from '../../redux/slices/errorSlice'
 
-const BookList = ({ 'data-testid': testId }) => {
+const BookListSection = ({ 'data-testid': testId }) => {
   const dispatch = useDispatch()
   const books = useSelector(selectBook)
   const titleFilter = useSelector(selectTitleFilter)
@@ -62,4 +62,4 @@ const BookList = ({ 'data-testid': testId }) => {
   )
 }
 
-export default BookList
+export default BookListSection

src/components/bookList/BookList.test.js → src/components/BookListSection/BookListSection.test.js

@@ -1,7 +1,7 @@
 import { within, fireEvent } from '@testing-library/react'
 import { v4 as uuidv4 } from 'uuid'
 import { setup } from '../../setupTests'
-import BookList from '../../components/bookList/BookList'
+import BookListSection from './BookListSection'
 import { createStore } from '../../redux/store'
 
 const bookTitleName = 'Test Book Title'
@@ -16,7 +16,7 @@ describe('BookList Component Tests', () => {
     })
 
     // Render the BookList component with the mock store
-    const { container } = setup(BookList, mockedStore)
+    const { container } = setup(BookListSection, mockedStore)
 
     const noBooksSign = within(container).getByTestId('bookList_emptyMsg')
     expect(noBooksSign).toBeInTheDocument()
@@ -29,7 +29,7 @@ describe('BookList Component Tests', () => {
     })
 
     // Render the BookList component with the updated store
-    const { container } = setup(BookList, mockedStore)
+    const { container } = setup(BookListSection, mockedStore)
 
     const noBooksSign = within(container).queryByTestId('bookList_emptyMsg')
     expect(noBooksSign).toBeNull()
@@ -45,7 +45,7 @@ describe('BookList Component Tests', () => {
       books: [{ title: bookTitleName, authors: bookAuthorName, id: bookId }],
     })
 
-    const { container } = setup(BookList, mockedStore)
+    const { container } = setup(BookListSection, mockedStore)
 
     const bookItems = within(container).getByTestId(
       `bookList_item id=${bookId}`
@@ -70,7 +70,7 @@ describe('BookList Component Tests', () => {
       ],
     })
 
-    const { container } = setup(BookList, mockedStore)
+    const { container } = setup(BookListSection, mockedStore)
 
     const bookItems = within(container).getByTestId(
       `bookList_item id=${bookId}`

src/components/book/Book.jsx → src/components/BookListSection/book/Book.jsx

@@ -1,7 +1,7 @@
 import { TbStar } from 'react-icons/tb'
 import { TbStarFilled } from 'react-icons/tb'
 import './Book.css'
-import Button from '../common/button/Button'
+import Button from '../../common/button/Button'
 
 const Book = ({
   book,

src/components/common/button/Button.jsx

@@ -13,16 +13,12 @@ const Button = ({
     <button
       type={type}
       onClick={onClick}
-      className={`componentButton ${className}`}
+      className="componentButton"
       data-testid={testId}
       disabled={disabled}
       aria-busy={disabled}
     >
-      {disabled ? (
-        <RiLoader2Line className="buttonSpinner" data-testid="search_spinner" />
-      ) : (
-        text
-      )}
+      {disabled ? <RiLoader2Line data-testid="search_spinner" /> : text}
     </button>
   )
 }

src/components/common/input/Input.css

@@ -0,0 +1,7 @@
+.component_input {
+  width: 90%;
+  padding: 0.5rem 1rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin: 0.5rem;
+}

src/components/common/input/Input.jsx

@@ -0,0 +1,28 @@
+import './Input.css'
+
+const Input = ({
+  type,
+  name,
+  placeholder,
+  value,
+  onChange,
+  disabled = false,
+  'data-testid': testId,
+}) => {
+  return (
+    <>
+      <input
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        className="component_input"
+        data-testid={testId}
+      ></input>
+    </>
+  )
+}
+
+export default Input

src/components/bookFilters/BookFilter.css → src/components/filterSection/FilterSection.css

@@ -13,15 +13,6 @@ div[data-testid='filter_author_wrapper'] {
   flex: 1;
 }
 
-input[data-testid='filter_title_input'],
-input[data-testid='filter_author_input'] {
-  width: 90%;
-  padding: 0.5rem 1rem;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  margin: 0.5rem;
-}
-
 @media screen and (max-width: 650px) {
   div[data-testid='filter_container'] {
     flex-direction: column;

src/components/bookFilters/BookFilter.jsx → src/components/filterSection/FilterSection.jsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux'
-import './BookFilter.css'
+import './FilterSection.css'
 import {
   setTitleFilter,
   setAuthorsFilter,
@@ -8,6 +8,7 @@ import {
   resetAllFilters,
 } from '../../redux/slices/filterSlice'
 import Button from '../common/button/Button'
+import Input from '../common/input/Input'
 
 const BookFilter = ({ 'data-testid': testId }) => {
   const dispatch = useDispatch()
@@ -38,22 +39,22 @@ const BookFilter = ({ 'data-testid': testId }) => {
     <section data-testid={testId}>
       <div data-testid="filter_container">
         <div data-testid="filter_title_wrapper">
-          <input
+          <Input
             type="text"
             placeholder="Filter by title..."
             value={filterTitle}
             onChange={handleTitleFilter}
             data-testid="filter_title_input"
-          ></input>
+          ></Input>
         </div>
         <div data-testid="filter_author_wrapper">
-          <input
+          <Input
             type="text"
             placeholder="Filter by author(s)..."
             value={filterAuthors}
             onChange={handleAuthorsFilter}
             data-testid="filter_author_input"
-          ></input>
+          ></Input>
         </div>
         <Button
           text="Clear All Filters"

src/components/bookFilters/BookFilters.test.js → src/components/filterSection/FilterSection.test.js

@@ -8,11 +8,11 @@ const authorsFilterStr = 'authors'
 
 let filterByTitleInput, filterbyAuthorsInput, clearAllFiltersBtn
 
-describe('BookFilter Component Tests', () => {
+describe('FilterSection Component Tests', () => {
   beforeEach(() => {
     setup(App, store)
 
-    // BookFilter elements:
+    // FilterSection elements:
     filterByTitleInput = screen.getByTestId('filter_title_input')
     filterbyAuthorsInput = screen.getByTestId('filter_author_input')
     clearAllFiltersBtn = screen.getByTestId('filter_clear_btn')