Feature added: Mark to read (#252)

* Rendered a static reading list button to each bookcard component

* Attached click listener to bookmark button to log book data

* Clicking bookmark button saves book information to a localStorage array

* Updated card height to account for button

* Updated saveBookToLocalStorage function to use objects instead of arrays

* Can now toggle books in and out of localStorage

* Reverted previous 4 commits so that data isn't directly written to localStorage

* Created a sidebar link to reading list

* Added placeholder bookmarks page

* Bookmark button now updates state in index.js

* Initialized context API

* Wrote a reducer function to handle bookmark state changes

* Configured reducer to add books in and out of state

* Reading list is now preserved between state AND localStorage when changing categories

* Fixed some code format issues

* Rendered saved books in reading list component

* Toggle apperance of bookmark button

* Hacky fix for positioning of reading list sidebar link

* Adjusted style and alignment of bookmark button

* Added check to determine if window is defined in useEffect

* Exported the gatsby-ssr API

app/src/components/bookcard.js

@@ -4,6 +4,7 @@ import StarRatings from "react-star-ratings"
 import { Card, Row, Col } from "react-bootstrap"
 
 import AmazonURL from "../components/amazonurl"
+import Bookmark from "../components/bookmark"
 import GoodReadsImage from "../components/goodreadsimage"
 
 const truncateContent = (content) => {
@@ -14,7 +15,7 @@ const truncateContent = (content) => {
 };
 
 const BookCard = ({ book }) => (
-  <Card style={{ width: "44rem", height: "18rem", marginBottom: "15px" }}>
+  <Card style={{ width: "44rem", height: "23rem", marginBottom: "15px" }}>
     <Row aria-label={book.title}>
       <Col xs={3}>
         <Card.Img
@@ -44,6 +45,7 @@ const BookCard = ({ book }) => (
               <div style= {{ width: "30px", height: "30px" }}>
                 <a href={book.url} ><GoodReadsImage /></a>
               </div>
+								<Bookmark book={book} />
             </div>
           </Card.Subtitle>
           <p style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}>