Merge pull request #9 from Blockchain-Country/searchbook

Added google books search functionality with modal display results

.github/workflows/ci.yml

@@ -16,6 +16,9 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
+      - name: Clear npm cache
+        run: npm cache clean --force
+
       - name: Cache node_modules
         uses: actions/cache@v3
         with:
@@ -52,6 +55,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
+      - name: List slices directory
+        run: ls -al src/redux/slices
+
       - name: Build the app
         # working-directory: .
         run: npm run build

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

clean/_logs/2024-10-27T16_01_25_773Z-debug-0.log

@@ -0,0 +1,13 @@
+0 verbose cli /Users/kotanton/.nvm/versions/node/v20.15.1/bin/node /Users/kotanton/.nvm/versions/node/v20.15.1/bin/npm
+1 info using [email protected]
+2 info using [email protected]
+3 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/lib/node_modules/npm/npmrc
+4 silly config:load:file:/Users/kotanton/Desktop/projects/book-storage/.npmrc
+5 silly config:load:file:/Users/kotanton/.npmrc
+6 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/etc/npmrc
+7 verbose title npm
+8 verbose argv "--cache" "clean"
+9 verbose logfile logs-max:10 dir:/Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-27T16_01_25_773Z-
+10 verbose logfile /Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-27T16_01_25_773Z-debug-0.log
+11 verbose exit 1
+12 verbose code 1

clean/_logs/2024-10-27T16_03_15_897Z-debug-0.log

@@ -0,0 +1,13 @@
+0 verbose cli /Users/kotanton/.nvm/versions/node/v20.15.1/bin/node /Users/kotanton/.nvm/versions/node/v20.15.1/bin/npm
+1 info using [email protected]
+2 info using [email protected]
+3 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/lib/node_modules/npm/npmrc
+4 silly config:load:file:/Users/kotanton/Desktop/projects/book-storage/.npmrc
+5 silly config:load:file:/Users/kotanton/.npmrc
+6 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/etc/npmrc
+7 verbose title npm
+8 verbose argv "--cache" "clean"
+9 verbose logfile logs-max:10 dir:/Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-27T16_03_15_897Z-
+10 verbose logfile /Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-27T16_03_15_897Z-debug-0.log
+11 verbose exit 1
+12 verbose code 1

clean/_logs/2024-10-27T16_03_49_427Z-debug-0.log

@@ -0,0 +1,13 @@
+0 verbose cli /Users/kotanton/.nvm/versions/node/v20.15.1/bin/node /Users/kotanton/.nvm/versions/node/v20.15.1/bin/npm
+1 info using [email protected]
+2 info using [email protected]
+3 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/lib/node_modules/npm/npmrc
+4 silly config:load:file:/Users/kotanton/Desktop/projects/book-storage/.npmrc
+5 silly config:load:file:/Users/kotanton/.npmrc
+6 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/etc/npmrc
+7 verbose title npm
+8 verbose argv "--cache" "clean"
+9 verbose logfile logs-max:10 dir:/Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-27T16_03_49_427Z-
+10 verbose logfile /Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-27T16_03_49_427Z-debug-0.log
+11 verbose exit 1
+12 verbose code 1

clean/_logs/2024-10-28T22_12_33_556Z-debug-0.log

@@ -0,0 +1,13 @@
+0 verbose cli /Users/kotanton/.nvm/versions/node/v20.15.1/bin/node /Users/kotanton/.nvm/versions/node/v20.15.1/bin/npm
+1 info using [email protected]
+2 info using [email protected]
+3 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/lib/node_modules/npm/npmrc
+4 silly config:load:file:/Users/kotanton/Desktop/projects/book-storage/.npmrc
+5 silly config:load:file:/Users/kotanton/.npmrc
+6 silly config:load:file:/Users/kotanton/.nvm/versions/node/v20.15.1/etc/npmrc
+7 verbose title npm
+8 verbose argv "--cache" "clean"
+9 verbose logfile logs-max:10 dir:/Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-28T22_12_33_556Z-
+10 verbose logfile /Users/kotanton/Desktop/projects/book-storage/clean/_logs/2024-10-28T22_12_33_556Z-debug-0.log
+11 verbose exit 1
+12 verbose code 1

package.json

@@ -7,6 +7,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
+    "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

src/App.css

@@ -18,14 +18,16 @@
   justify-content: space-between;
   width: 80%;
   margin: 0 auto;
+  gap: 20px;
 }
 
 .app-left-column {
   flex: 1;
   flex-basis: 35%;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  align-self: flex-start;
+  /* align-self: flex-start; */
 }
 
 .app-right-column {

src/App.js

@@ -1,6 +1,7 @@
 import './App.css'
 import BookFilter from './components/bookFilters/BookFilter'
-import BookForm from './components/bookForm/BookForm'
+import BookForm from './components/manualBookForm/ManualBookForm'
+import SearchBookForm from './components/searchBookForm/SearchBookForm'
 import BookList from './components/bookList/BookList'
 
 function App() {
@@ -11,6 +12,7 @@ function App() {
       </header>
       <main className="app-main">
         <div className="app-left-column">
+          <SearchBookForm />
           <BookForm />
         </div>
         <div className="app-right-column">

src/App.test.js

@@ -2,10 +2,9 @@ import { screen, fireEvent, within } from '@testing-library/react'
 import { setup } from './setupTests'
 import { createStore } from './redux/store'
 import App from './App'
-import { resetAllFilters } from './redux/slices/FilterSlice'
 
 //App main component:
-let header, bookFormComponent, bookFilterComponent, bookListComponent
+let header, manualBookForm_Component, bookFilter_Component, bookList_Component
 
 // BookForm elements:
 let titleInput, authorInput, submitBookBtn
@@ -35,28 +34,28 @@ describe('App Component Tests', () => {
     resetStore()
     setup(App, store)
 
-    //main component elements:
+    //main components elements:
     header = screen.getByTestId('app_header')
-    bookFormComponent = screen.getByTestId('book_form_component')
-    bookFilterComponent = screen.getByTestId('book_filter_component')
-    bookListComponent = screen.getByTestId('book_list_component')
+    manualBookForm_Component = screen.getByTestId('manualBookForm_component')
+    bookFilter_Component = screen.getByTestId('book_filter_component')
+    bookList_Component = screen.getByTestId('bookList_component')
   })
 
   test('Should render the Header to be in the DOM and should contain text "My Book Storage"', async () => {
     expect(header).toBeInTheDocument()
     expect(header).toHaveTextContent('My Book Storage')
   })
 
-  test('Should render the BookForm component in the DOM', () => {
-    expect(bookFormComponent).toBeInTheDocument()
+  test('Should render the ManualBookForm component in the DOM', () => {
+    expect(manualBookForm_Component).toBeInTheDocument()
   })
 
   test('Should render the BookList component in the DOM', () => {
-    expect(bookListComponent).toBeInTheDocument()
+    expect(bookList_Component).toBeInTheDocument()
   })
 
   test('Should render the BookFilter component in the DOM', () => {
-    expect(bookFilterComponent).toBeInTheDocument()
+    expect(bookFilter_Component).toBeInTheDocument()
   })
 })
 
@@ -65,11 +64,11 @@ describe('App functional Tests', () => {
     resetStore()
     setup(App, store)
 
-    // BookForm elements:
-    titleInput = screen.getByTestId('book_form_title_input')
-    authorInput = screen.getByTestId('book_form_author_input')
-    submitBookBtn = screen.getByTestId('book_form_sbmit_btn')
-    bookListComponent = screen.getByTestId('book_list_component')
+    // ManualBookForm elements:
+    titleInput = screen.getByTestId('manualBookForm_titleInput')
+    authorInput = screen.getByTestId('manualBookForm_aurthorInput')
+    submitBookBtn = screen.getByTestId('manualBookForm_submitBtn')
+    bookList_Component = screen.getByTestId('bookList_component')
     // BookFilter elements:
     filterByTitleInput = screen.getByTestId('filterByTitle_input')
     filterbyAuthorInput = screen.getByTestId('filterByAuthor_input')
@@ -80,7 +79,7 @@ describe('App functional Tests', () => {
     submitNewBook(bookTitleName, bookAuthorName)
 
     // Verify that the book is added to the book list
-    const bookItems = within(bookListComponent).getAllByRole('listitem')
+    const bookItems = within(bookList_Component).getAllByRole('listitem')
     expect(bookItems.length).toEqual(1)
     const newBookTitle = within(bookItems[0]).getByText(bookTitleName)
     expect(newBookTitle).toBeInTheDocument()
@@ -93,19 +92,19 @@ describe('App functional Tests', () => {
     submitNewBook('BookTitle2', 'BookAuthor2')
 
     // Verify two books added to the BookList
-    const bookItems = within(bookListComponent).getAllByRole('listitem')
+    const bookItems = within(bookList_Component).getAllByRole('listitem')
     expect(bookItems.length).toEqual(2)
 
     // Apply TitleFilter
     fireEvent.change(filterByTitleInput, {
-      target: { value: 'BookTitle2' },
+      target: { value: bookTitleName },
     })
 
     // Verify the BookList is filtered and contain one book
-    const filteredBooks = within(bookListComponent).getAllByRole('listitem')
+    const filteredBooks = within(bookList_Component).getAllByRole('listitem')
     expect(filteredBooks.length).toEqual(1)
 
-    const filteredTitleEl = within(filteredBooks[0]).getByText('BookTitle2')
+    const filteredTitleEl = within(filteredBooks[0]).getByText(bookTitleName)
     expect(filteredTitleEl).toBeInTheDocument()
   })
 
@@ -114,19 +113,19 @@ describe('App functional Tests', () => {
     submitNewBook('BookTitle2', 'BookAuthor2')
 
     // Verify two books added to the BookList
-    const bookItems = within(bookListComponent).getAllByRole('listitem')
+    const bookItems = within(bookList_Component).getAllByRole('listitem')
     expect(bookItems.length).toEqual(2)
 
     // Apply AuthorFilter
     fireEvent.change(filterbyAuthorInput, {
-      target: { value: 'BookAuthor2' },
+      target: { value: bookAuthorName },
     })
 
     // Verify the BookList is filtered and contain one book
-    const filteredBooks = within(bookListComponent).getAllByRole('listitem')
+    const filteredBooks = within(bookList_Component).getAllByRole('listitem')
     expect(filteredBooks.length).toEqual(1)
 
-    const filteredAuthorEl = within(filteredBooks[0]).getByText('BookAuthor2')
+    const filteredAuthorEl = within(filteredBooks[0]).getByText(bookAuthorName)
     expect(filteredAuthorEl).toBeInTheDocument()
   })
 
@@ -140,14 +139,14 @@ describe('App functional Tests', () => {
     })
 
     // Verify the BookList is filtered and contain one book
-    const filteredBooks = within(bookListComponent).getAllByRole('listitem')
+    const filteredBooks = within(bookList_Component).getAllByRole('listitem')
     expect(filteredBooks.length).toEqual(1)
 
     fireEvent.click(clearAllFiltersBtn)
 
     // Verify the BookList to contain two books
     const booksListAfterFilterReset =
-      within(bookListComponent).getAllByRole('listitem')
+      within(bookList_Component).getAllByRole('listitem')
     expect(booksListAfterFilterReset.length).toEqual(2)
   })
 })

src/components/bookFilters/BookFilter.js

@@ -6,7 +6,7 @@ import {
   selectTitleFilter,
   selectAuthorFilter,
   resetAllFilters,
-} from '../../redux/slices/FilterSlice'
+} from '../../redux/slices/filterSlice'
 
 const BookFilter = () => {
   const dispatch = useDispatch()
@@ -31,7 +31,7 @@ const BookFilter = () => {
         <div className="filter-group">
           <input
             type="text"
-            placeholder="filter by title..."
+            placeholder="Filter by title..."
             value={filterTitle}
             onChange={handleTitleFilter}
             data-testid="filterByTitle_input"
@@ -40,7 +40,7 @@ const BookFilter = () => {
         <div className="filter-group">
           <input
             type="text"
-            placeholder="filter by author..."
+            placeholder="Filter by author..."
             value={filterAuthor}
             onChange={handleAuthorFilter}
             data-testid="filterByAuthor_input"