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" }}>

app/src/components/bookmark.js

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react'
+import { Button } from "react-bootstrap"
+import { BookmarkContext } from '../context/globalState'
+
+export default ({ book }) => {
+	const { updateReadingList, readingList } = useContext(BookmarkContext)
+	const readingListIds = readingList.bookIds
+
+	return (
+		<div onClick={() => updateReadingList({ type: 'bookmark', retrievedBook: book })}>
+			<Button style={{
+				 height: "30px", 
+				 width: "30px", 
+				 marginLeft: "0.25rem", 
+				 display: "grid", 
+				 justifyContent: "center",
+				alignContent: "center" }} 
+				variant={ readingListIds.includes(book.id) ? "success" : "light" 
+		  }>
+				<span>
+					🔖 
+				</span>
+			</Button>
+		</div>
+	)
+}

app/src/components/sidebar.js

@@ -1,10 +1,13 @@
-import React from "react"
+import React, { useContext } from "react"
 import { Nav } from "react-bootstrap"
-import { StaticQuery, graphql } from "gatsby"
+import { StaticQuery, graphql, Link } from "gatsby"
 import "../styles/sidebar.css"
+import { BookmarkContext } from '../context/globalState'
 var slugify = require('slugify')
 
 export default () => {
+	const { readingList } = useContext(BookmarkContext)
+
   return (
     <StaticQuery
       query={graphql`
@@ -26,6 +29,9 @@ export default () => {
           activeKey="/home"
         >
           <div className="sidebar-sticky" role="navigation" aria-label="Sidebar">
+						<div style={{position: "relative", left: "0.9rem", paddingBottom: "0.2rem"}}>
+							<Link to="/readingList">🔖 Reading List ({readingList.bookIds.length})</Link>
+						</div>
             {data.allCategoriesJson.edges.map(function(x, index) {
               return (
                 <Nav.Item key={x.node.name}>