add book link. Redirect to amazon store

Author: thecoder93

src/components/Book/Book.tsx

@@ -1,5 +1,6 @@
 import { IBook } from "../../interface/IBook";
 import './Book.css';
+import BookLink from "./BookLink";
 
 const Book = ({
   listBook,
@@ -18,15 +19,15 @@ const Book = ({
       ) : (
         listBook.map((book: IBook) => (
           <div className="book-list">
-            <a href="/#" target="_blank" className="book-link">
+            <BookLink bookLink={book.buy_links} >
               <img
                 src={book.book_image}
                 width="213"
                 height="271"
                 alt={book.title}
                 className="book-img"
               />
-            </a>
+            </BookLink>
             <div>
               <a href="/#" target="_blank" className="book-link" data-testid="title-book">
                 {book.title}

src/components/Book/BookLink.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const BookLink = (props: any) => {
+
+  return (
+    <>
+      {props.bookLink.length !== 0 ? (
+        <a href={props.bookLink[0].url} target="_blank" className="book-link">
+          {props.children}
+        </a>
+      ) : (
+         props.children 
+      )}
+    </>
+  );
+}
+
+export default BookLink

src/components/Book/__test__/Book.test.tsx

@@ -3,14 +3,11 @@ import { IBook } from '../../../interface/IBook';
 import Book from '../Book';
 
 describe("Book list", () => {
+    
+    let fakeBooks: IBook[];
 
-    test('renders "no book" when the are no book', () => {
-        const {getByText} = render(<Book listBook={[]} category={"Fiction"}/>)
-        expect(getByText(/No book/i)).toBeInTheDocument();
-    })
-
-     test('should render list of books', () => {
-        const fakeBooks: IBook[] = [
+    beforeEach(() => {
+        fakeBooks  = [
             {
               author: "Clive Cussler and Justin Scott",
               contributor: "by Clive Cussler and Justin Scott",
@@ -19,11 +16,20 @@ describe("Book list", () => {
               primary_isbn10: "0698406427",
               publisher: "Putnam",
               rank: 1,
+              buy_links: [{name: "Amazon", url: "www.example.com"}],
               book_image: "https://storage.googleapis.com/du-prd/books/images/9781501110375.jpg",
               title: "THE GANGSTER",
               weeks_on_list: "34"
             }
           ];
+      });
+
+    test('renders "no book" when the are no book', () => {
+        const {getByText} = render(<Book listBook={[]} category={"Fiction"}/>)
+        expect(getByText(/No book/i)).toBeInTheDocument();
+    })
+
+     test('should render list of books', () => {
 
         const {getAllByTestId} = render(<Book listBook={fakeBooks} category={"Fiction"}/>);
         const titleBook = getAllByTestId('title-book').map(title => title.textContent);
@@ -32,5 +38,8 @@ describe("Book list", () => {
         expect(titleBook).toEqual(fakeTitleBook);
       });
 
-
+    test('should redirect to amazon link', () => {
+       render(<Book listBook={fakeBooks} category={"Fiction"} />)
+       expect(document.querySelector("a")?.getAttribute("href")).toBe("www.example.com")
+    })
 });

src/interface/IBook.tsx

@@ -3,11 +3,16 @@ export interface IBook {
     contributor?: string;
     description?: string;
     book_image?: string;
-    buy_links?: string[];
+    buy_links?: BuyLinks[];
     primary_isbn13?: string;
     primary_isbn10?: string;
     publisher?: string;
     rank?: number;
     title?: string;
     weeks_on_list?: string;
 }
+
+interface BuyLinks {
+    name: string;
+    url: string
+}