Merge pull request #5 from spencer-rafada/spencer/search-functionality

Search Functionality

package.json

@@ -17,7 +17,8 @@
     "@radix-ui/themes": "^2.0.3",
     "next": "14.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-loader-spinner": "^6.1.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.3.0",

src/app/books/components/BooksContent.tsx

@@ -0,0 +1,22 @@
+'use client'
+import { useSearchProvider } from '@/app/providers/SearchProvider'
+import React from 'react'
+import Loading from './Loading'
+import { Box, Text } from '@radix-ui/themes'
+
+export default function BooksContent() {
+  const { lastSearch, loading } = useSearchProvider()
+  return (
+    <>
+      {loading ? (
+        <Loading />
+      ) : (
+        <Box data-testid='books-header-container'>
+          <Text size='4'>
+            You searched for: <Text weight='bold'>{lastSearch}</Text>
+          </Text>
+        </Box>
+      )}
+    </>
+  )
+}

src/app/books/components/Loading.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { FallingLines } from 'react-loader-spinner'
+import { Box, Flex } from '@radix-ui/themes'
+
+export default function Test() {
+  return (
+    <Flex justify='center' align='center' className='h-full'>
+      <Box data-testid='falling-lines-spinner'>
+        <FallingLines color='#202020' width='100' visible={true} />
+      </Box>
+    </Flex>
+  )
+}

src/app/books/components/__tests__/BooksContent.test.tsx

@@ -0,0 +1,10 @@
+import { screen, render } from '@testing-library/react'
+import BooksContent from '../BooksContent'
+import { useSearchProvider } from '@/app/providers/SearchProvider'
+
+describe('BooksContent', () => {
+  it('should render the message of your queue', () => {
+    render(<BooksContent />)
+    expect(screen.getByTestId('books-header-container')).toBeInTheDocument()
+  })
+})

src/app/books/components/__tests__/Loading.test.tsx

@@ -0,0 +1,9 @@
+import { screen, render } from '@testing-library/react'
+import Loading from '../Loading'
+
+describe('Loading', () => {
+  it('should show the falling lines', () => {
+    render(<Loading />)
+    expect(screen.getByTestId('falling-lines-spinner')).toBeInTheDocument()
+  })
+})

src/app/books/page.tsx

@@ -1,11 +1,16 @@
 import { Metadata } from 'next'
 import React from 'react'
+import BooksContent from './components/BooksContent'
 
 export const metadata: Metadata = {
   title: 'VITLIB | Books',
   description: 'Access all information about a book here',
 }
 
 export default function BooksPage() {
-  return <></>
+  return (
+    <>
+      <BooksContent />
+    </>
+  )
 }

src/app/components/SearchBar/SearchBar.tsx

@@ -6,35 +6,42 @@ import { useRouter } from 'next/navigation'
 import React from 'react'
 
 export default function SearchBar() {
-  const { search, setSearch } = useSearchProvider()
+  const { search, setSearch, getBooks, setLoading } = useSearchProvider()
   const router = useRouter()
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value)
   }
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      router.push('/books')
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    router.push('/books')
+    setLoading(true)
+    try {
+      await getBooks()
+    } catch (error) {
+      console.log(error)
     }
+    setLoading(false)
   }
 
   return (
-    <TextField.Root
-      data-testid='search-bar-container'
-      className='w-10/12 md:w-8/12'
-      size='3'
-      radius='full'
-    >
-      <TextField.Slot>
-        <MagnifyingGlassIcon height='18' width='18' />
-      </TextField.Slot>
-      <TextField.Input
-        placeholder='Search a book...'
-        value={search}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-      />
-    </TextField.Root>
+    <form className='w-10/12 md:w-8/12' onSubmit={onSubmit}>
+      <TextField.Root
+        data-testid='search-bar-container'
+        className='w-full'
+        size='3'
+        radius='full'
+      >
+        <TextField.Slot>
+          <MagnifyingGlassIcon height='18' width='18' />
+        </TextField.Slot>
+        <TextField.Input
+          placeholder='Search a book...'
+          value={search}
+          onChange={onChange}
+        />
+      </TextField.Root>
+    </form>
   )
 }

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import '@radix-ui/themes/styles.css'
 import './globals.css'
-import { Box, Flex, Theme, ThemePanel } from '@radix-ui/themes'
+import { Flex, Theme, ThemePanel } from '@radix-ui/themes'
 import Navbar from './components/Navbar'
 import Footer from './components/Footer'
 import { SearchProvider } from './providers/SearchProvider'