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/pages/index.js

@@ -18,11 +18,13 @@ function myFunction(setMaximumBooksToShow, maximumBooksToShow) {
 }
 
 export default ({ data }) => {
-  let [maximumBooksToShow, setMaximumBooksToShow] = useState(12)
+	let [maximumBooksToShow, setMaximumBooksToShow] = useState(12)
+
   useEffect(() => {
     window.document.onscroll = () =>
       myFunction(setMaximumBooksToShow, maximumBooksToShow)
-  })
+	})
+	
   return (
     <Layout>
       <SEO title="Home" />

app/src/pages/readingList.js

@@ -0,0 +1,36 @@
+import React, { useContext } from "react"
+import { Link } from "gatsby"
+import { Container, Row, Col } from "react-bootstrap"
+import SideBar from "../components/sidebar"
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+import Bookcard from "../components/bookcard"
+import { BookmarkContext } from "../context/globalState"
+
+const ReadingList = () => {
+	const { readingList } = useContext(BookmarkContext)
+
+	return (
+		<Layout>
+			<SEO title="Reading list" />
+			<Container fluid>
+					<Row>
+						<Col xs={2}>
+							<SideBar />
+						</Col>
+						<Col>
+							<h2>Your reading list</h2>
+							<Link to="/">Go back to the homepage</Link>
+							{ 
+								readingList.bookIds.map(bookId => {
+									return <Bookcard book={readingList.books[bookId]} key={bookId} />
+								}) 
+							}
+						</Col>
+					</Row>
+				</Container>
+			<p>Reading List</p>
+		</Layout>
+)}
+
+export default ReadingList