Feat/isabels homework

src/App.jsx

@@ -8,61 +8,99 @@ import Search from './components/Search'
 
 const App = () => {
   const [books, setBooks] = useState([])
-  const [filteredBooks, setFilteredBooks] = useState([])
-  const [selectedBook, setSelectedBook] = useState(null)
   const [showPanel, setShowPanel] = useState(false)
+  const [showFaves, setShowFaves] = useState(false)
+  const faveBookIds = JSON.parse(localStorage.getItem('faveBookIds') || '[]')
 
   useEffect(() => {
     const fetchData = async () => {
       const response = await fetch('https://book-club-json.herokuapp.com/books')
       const books = await response.json()
-      setBooks(books)
-      setFilteredBooks(books)
+      setBooks(books.map((book) => ({...book, isFaved: faveBookIds.includes(book.id)})))
     }
 
     fetchData()
   }, [])
 
-  const pickBook = (book) => {
-    setSelectedBook(book)
+  const pickBook = (bookId) => {
+    setBooks((books) => books.map((book) => ({...book, isPicked: book.id === bookId})))
     setShowPanel(true)
   }
 
   const closePanel = () => {
     setShowPanel(false)
   }
 
+  const toggleShowFaves = () => {
+    setShowFaves((showFaves) => !showFaves)
+  }
+
+  const toggleFave = (bookId) => {
+    setBooks((books) => {
+      const updatedBooks = books.map((book) =>
+        book.id === bookId ? {...book, isFaved: !book.isFaved} : book
+      )
+
+      localStorage.setItem(
+        'faveBookIds',
+        JSON.stringify(updatedBooks.filter(({isFaved}) => isFaved).map(({id}) => id))
+      )
+      return updatedBooks
+    })
+  }
+
   const filterBooks = (searchTerm) => {
     const stringSearch = (bookAttribute, searchTerm) =>
       bookAttribute.toLowerCase().includes(searchTerm.toLowerCase())
 
-    if (!searchTerm) {
-      setFilteredBooks(books)
-    } else {
-      setFilteredBooks(
-        books.filter(
-          (book) => stringSearch(book.title, searchTerm) || stringSearch(book.author, searchTerm)
-        )
-      )
-    }
+    setBooks((books) =>
+      books.map((book) => {
+        const isFiltered = !searchTerm
+          ? false
+          : stringSearch(book.title, searchTerm) || stringSearch(book.author, searchTerm)
+          ? false
+          : true
+        return {...book, isFiltered: isFiltered}
+      })
+    )
   }
 
-  const hasFiltered = filteredBooks.length !== books.length
+  const hasFiltered = books.some((book) => book.isFiltered)
+
+  const displayBooks = hasFiltered
+    ? books.filter((book) => !book.isFiltered)
+    : showFaves
+    ? books.filter((book) => book.isFaved)
+    : books
+
+  const selectedBook = books.find((book) => book.isPicked)
 
   return (
     <>
       <GlobalStyle />
       <Header>
-        <Search filterBooks={filterBooks} />
+        <Search
+          filterBooks={filterBooks}
+          toggleShowFaves={toggleShowFaves}
+          showFaves={showFaves}
+          faveBooksLength={faveBookIds.length}
+        />
       </Header>
       <BooksContainer
-        books={filteredBooks}
+        books={displayBooks}
         pickBook={pickBook}
         isPanelOpen={showPanel}
-        title={hasFiltered ? 'Search results' : 'All books'}
+        title={hasFiltered ? 'Search results' : showFaves ? 'Favourite books' : 'All books'}
       />
       <Transition in={showPanel} timeout={300}>
-        {(state) => <DetailPanel book={selectedBook} state={state} closePanel={closePanel} />}
+        {(state) => (
+          <DetailPanel
+            book={selectedBook}
+            state={state}
+            toggleFave={toggleFave}
+            closePanel={closePanel}
+          />
+        )}
       </Transition>
     </>
   )

src/components/Book/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Container, Cover, Title, Author} from './styles'
 
 const Book = ({book, pickBook, isLarge}) => (
-  <Container $isLarge={isLarge} onClick={() => pickBook && pickBook(book)}>
+  <Container $isLarge={isLarge} onClick={() => pickBook && pickBook(book.id)}>
     <Cover src={book.image} alt={`Book cover for ${book.title} by ${book.author}`} />
     <figcaption>
       <Title $isLarge={isLarge}>{book.title}</Title>

src/components/BooksContainer/index.jsx

@@ -1,7 +1,15 @@
 import React, {useRef, useEffect, useState} from 'react'
 import {debounce} from 'lodash-es'
 import Book from '../Book'
-import {Container, H2, BookList} from './styles'
+import {Container, H2, BookList, NoBooksContainer, H3, SadFace, H4} from './styles'
+
+const NoBooksMessage = () => (
+  <NoBooksContainer>
+    <H3>Oh dear!</H3>
+    <SadFace />
+    <H4>There are no books to see here.</H4>
+  </NoBooksContainer>
+)
 
 const BooksContainer = ({books, pickBook, title, isPanelOpen}) => {
   const prevPanelState = useRef(false)
@@ -31,11 +39,15 @@ const BooksContainer = ({books, pickBook, title, isPanelOpen}) => {
   return (
     <Container $isPanelOpen={isPanelOpen} $top={scroll}>
       <H2>{title}</H2>
-      <BookList>
-        {books.map((book) => (
-          <Book key={book.id} book={book} pickBook={pickBook} />
-        ))}
-      </BookList>
+      {books.length > 0 ? (
+        <BookList>
+          {books.map((book) => (
+            <Book key={book.id} book={book} pickBook={pickBook} />
+          ))}
+        </BookList>
+      ) : (
+        <NoBooksMessage />
+      )}
     </Container>
   )
 }

src/components/BooksContainer/styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import {ReactComponent as SadFaceSVG} from '../../assets/sad-face.svg'
 
 export const Container = styled.div`
   background-color: #a7e1f8;
@@ -39,3 +40,32 @@ export const BookList = styled.div`
     grid-column-gap: 20px;
   }
 `
+
+export const NoBooksContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  height: 50vh;
+`
+
+export const H3 = styled.h3`
+  font-size: 34px;
+  margin: 0;
+  @media (max-width: 1000px) {
+    font-size: 30px;
+  }
+`
+
+export const H4 = styled.h4`
+  font-size: 24px;
+  margin: 0;
+  @media (max-width: 1000px) {
+    font-size: 20px;
+  }
+`
+
+export const SadFace = styled(SadFaceSVG)`
+  margin: 20px 0;
+`

src/components/DetailPanel/index.jsx

@@ -1,9 +1,9 @@
 import React, {useRef, useEffect} from 'react'
 import Book from '../Book'
 import {CloseWrapper, Panel, BG, P, Em} from './styles'
-import {Close} from '../../styles'
+import {Close, Button} from '../../styles'
 
-const DetailPanel = ({book, closePanel, state}) => {
+const DetailPanel = ({book, closePanel, state, toggleFave}) => {
   const panelEl = useRef(null)
   const prevBook = useRef(null)
 
@@ -23,6 +23,9 @@ const DetailPanel = ({book, closePanel, state}) => {
         </CloseWrapper>
         {book && (
           <>
+            <Button onClick={() => toggleFave(book.id)} $hasEmoji={true}>
+              {book.isFaved ? '💔 Unfave book' : '❤️ Fave book'}
+            </Button>
             <Book book={book} isLarge={true} />
             <P>{book.description}</P>
             <P>

src/components/DetailPanel/styles.js

@@ -18,7 +18,7 @@ export const Panel = styled.article`
   background-color: #ffe581;
   border-left: 2px solid #000;
   box-sizing: border-box;
-  height: calc(100vh - 82px);
+  height: calc(100vh - 83px);
   width: 660px;
   position: fixed;
   z-index: 2;
@@ -29,10 +29,10 @@ export const Panel = styled.article`
   transition: 300ms;
   right: ${({$state}) => ($state === 'entering' || $state === 'entered' ? 0 : '-660px')};
 
-  @media (max-width: 800px) {
+  @media (max-width: 1000px) {
+    height: calc(100vh - 75px);
     border-left: none;
     width: 100vw;
-    height: calc(100vh - 75px);
     padding: 40px 86px 20px 20px;
     bottom: ${({$state}) => ($state === 'entering' || $state === 'entered' ? 0 : '-100vh')};
     right: unset;
@@ -42,7 +42,7 @@ export const Panel = styled.article`
 export const CloseWrapper = styled(Pill)`
   position: fixed;
   cursor: pointer;
-  top: 120px;
+  top: 130px;
   right: 40px;
   z-index: 4;
   display: ${({$state}) => ($state === 'entered' ? 'flex' : 'none')};
@@ -51,7 +51,7 @@ export const CloseWrapper = styled(Pill)`
     margin-left: -3px;
   }
 
-  @media (max-width: 800px) {
+  @media (max-width: 1000px) {
     top: unset;
     bottom: 20px;
     right: 20px;

src/components/Header/index.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import {HeaderContainer, Logo} from './styles'
+import {HeaderContainer, Logo, RightContainer} from './styles'
 
 const Header = ({children}) => (
   <HeaderContainer>
     <a href="/">
       <Logo title="Book Club logo" />
     </a>
-    {children}
+    <RightContainer>{children}</RightContainer>
   </HeaderContainer>
 )
 

src/components/Header/styles.js

@@ -23,8 +23,14 @@ export const Logo = styled(LogoAsset)`
   width: 270px;
   display: block;
 
-  @media (max-width: 800px) {
+  @media (max-width: 1000px) {
     height: 33px;
-    width: 222px;
+    width: 200px;
   }
 `
+
+export const RightContainer = styled.div`
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+`

src/components/Search/index.jsx

@@ -1,8 +1,17 @@
 import React, {useState, useRef} from 'react'
-import {Input, SearchContainer, Icon, Wrapper} from './styles'
-import {Close} from '../../styles'
+import {Input, SearchContainer, Icon, Wrapper, FaveButtonContainer, Counter} from './styles'
+import {Close, Button} from '../../styles'
 
-const Search = ({filterBooks}) => {
+const FaveButton = ({faveBooksLength, toggleShowFaves, showFaves}) => (
+  <FaveButtonContainer>
+    <Counter>{faveBooksLength}</Counter>
+    <Button onClick={toggleShowFaves} $isHeader={true}>
+      {showFaves ? 'Hide faves' : 'Show faves'}
+    </Button>
+  </FaveButtonContainer>
+)
+
+const Search = ({filterBooks, faveBooksLength, toggleShowFaves, showFaves}) => {
   const inputEl = useRef(null)
   const [showOnDesktop, setShowOnDesktop] = useState(false)
 
@@ -22,6 +31,11 @@ const Search = ({filterBooks}) => {
 
   return (
     <Wrapper>
+      <FaveButton
+        toggleShowFaves={toggleShowFaves}
+        showFaves={showFaves}
+        faveBooksLength={faveBooksLength}
+      />
       <SearchContainer $showOnDesktop={showOnDesktop}>
         <Icon onClick={showSearch} />
         <Input ref={inputEl} type="text" name="search" onChange={handleChange} autoComplete="off" />