-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from spencer-rafada/spencer/book-list
Book List and Book Component
- Loading branch information
Showing
14 changed files
with
1,196 additions
and
38 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| 'use client' | ||
| import { useWindowSize } from '@/app/hooks/useWindowSize' | ||
| import { Box, Card, Flex, Inset, Link, Text } from '@radix-ui/themes' | ||
| import Image from 'next/image' | ||
| import NextLink from 'next/link' | ||
| import React from 'react' | ||
| import { Rating } from 'react-simple-star-rating' | ||
|
|
||
| export default function BookComponent({ book }: { book: any }) { | ||
| const windowSize = useWindowSize() | ||
|
|
||
| if (windowSize.width <= 768) { | ||
| return ( | ||
| <Card | ||
| className='w-20 xs:w-32' | ||
| asChild | ||
| data-testid='book-component-mobile' | ||
| > | ||
| <NextLink | ||
| href={`/books/${book.editions.docs?.[0]?.key?.replace( | ||
| '/books/', | ||
| '' | ||
| )}`} | ||
| passHref | ||
| > | ||
| <Inset clip='padding-box'> | ||
| <picture> | ||
| <img | ||
| src={`https://covers.openlibrary.org/w/olid/${book.key.replace( | ||
| '/works/', | ||
| '' | ||
| )}-M.jpg`} | ||
| alt={`${book.title} cover`} | ||
| style={{ | ||
| display: 'block', | ||
| objectFit: 'cover', | ||
| width: '100%', | ||
| height: '140px', | ||
| backgroundImage: | ||
| 'url(https://www.nipponniche.com/wp-content/uploads/2021/04/fentres-pdf.jpeg)', | ||
| backgroundSize: 'cover', | ||
| backgroundPosition: 'center center', | ||
| }} | ||
| /> | ||
| </picture> | ||
| </Inset> | ||
| </NextLink> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <Card asChild variant='classic'> | ||
| <NextLink | ||
| href={`/books/${book.editions.docs?.[0]?.key?.replace('/books/', '')}`} | ||
| passHref | ||
| > | ||
| <Flex gap='5'> | ||
| <Flex | ||
| direction='column' | ||
| gap='1' | ||
| data-testid='book-cover-container' | ||
| align='center' | ||
| > | ||
| <Image | ||
| src={`https://covers.openlibrary.org/w/olid/${book.key.replace( | ||
| '/works/', | ||
| '' | ||
| )}-M.jpg`} | ||
| alt={`${book.title} cover`} | ||
| width={150} | ||
| height={120} | ||
| style={{ | ||
| backgroundImage: | ||
| 'url(https://www.nipponniche.com/wp-content/uploads/2021/04/fentres-pdf.jpeg)', | ||
| backgroundSize: '100%', | ||
| backgroundPosition: 'center center', | ||
| }} | ||
| /> | ||
| </Flex> | ||
| <Flex direction='column' gap='1'> | ||
| <Text | ||
| size={{ initial: '3', md: '5' }} | ||
| weight='medium' | ||
| data-testid='book-title' | ||
| > | ||
| {book.title} | ||
| </Text> | ||
| <Text data-testid='book-author' size='4'> | ||
| {book.author_name} | ||
| </Text> | ||
| <Box> | ||
| <Text data-testid='book-publisher'> | ||
| Published by: {book.editions?.docs?.[0]?.publisher?.[0]},{' '} | ||
| </Text> | ||
| <Text data-testid='book-publish-date'> | ||
| {book.editions?.docs?.[0]?.publish_date?.[0]} -{' '} | ||
| </Text> | ||
| <Text data-testid='book-language'> | ||
| {book.editions?.docs?.[0]?.language?.[0].toUpperCase()} | ||
| </Text> | ||
| </Box> | ||
| {book.editions?.docs?.[0]?.isbn && ( | ||
| <Box data-testid='book-isbn'> | ||
| <Text size='2'>ISBN: </Text> | ||
| {book.editions?.docs?.[0]?.isbn?.map( | ||
| (isbn: string, key: any) => { | ||
| return ( | ||
| <span key={key}> | ||
| <Link color='blue' size='2' underline='always' asChild> | ||
| <NextLink | ||
| href={`https://www.google.com/search?q=${isbn}`} | ||
| passHref | ||
| > | ||
| {isbn} | ||
| </NextLink> | ||
| </Link>{' '} | ||
| </span> | ||
| ) | ||
| } | ||
| )} | ||
| </Box> | ||
| )} | ||
| {book.ratings_average && ( | ||
| <Box data-testid='book-ratings-container'> | ||
| <Rating | ||
| initialValue={book.ratings_average} | ||
| readonly | ||
| size={25} | ||
| SVGclassName='inline-block' | ||
| allowFraction | ||
| /> | ||
| </Box> | ||
| )} | ||
| </Flex> | ||
| </Flex> | ||
| </NextLink> | ||
| </Card> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Box, Text } from '@radix-ui/themes' | ||
| import React from 'react' | ||
|
|
||
| export default function BooksHeader({ lastSearch }: { lastSearch: string }) { | ||
| return ( | ||
| <Box data-testid='books-header-container' className='mb-6'> | ||
| <Text size='4'> | ||
| You searched for: <Text weight='bold'>{lastSearch}</Text> | ||
| </Text> | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| 'use client' | ||
| import { useWindowSize } from '@/app/hooks/useWindowSize' | ||
| import { Box, Card, Flex } from '@radix-ui/themes' | ||
| import React, { Suspense, lazy } from 'react' | ||
|
|
||
| const BookComponent = lazy(() => import('./BookComponent')) | ||
|
|
||
| export default function BooksList({ books }: { books: Array<Object> }) { | ||
| const windowSize = useWindowSize() | ||
| return ( | ||
| <Flex | ||
| data-testid='books-list-container' | ||
| direction={windowSize.width <= 768 ? 'row' : 'column'} | ||
| justify={windowSize.width <= 768 ? 'center' : 'start'} | ||
| gap='3' | ||
| wrap='wrap' | ||
| > | ||
| {books.length > 0 ? ( | ||
| books.map((book: any, key) => { | ||
| return ( | ||
| <Suspense key={key} fallback={<Card size='5'></Card>}> | ||
| <BookComponent book={book} /> | ||
| </Suspense> | ||
| ) | ||
| }) | ||
| ) : ( | ||
| <Box className='h-dvh max-h-full' data-testid='no-book-message'> | ||
| <Card className='italic'>No books found.</Card> | ||
| </Box> | ||
| )} | ||
| </Flex> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.