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/context/bookReducer.js

@@ -0,0 +1,33 @@
+export default function bookReducer(state, action) {
+	let readingListCopy = {...state}
+
+	switch (action.type) {
+		case 'init': {
+				if (action.content) {
+					return action.content
+				}
+				return readingListCopy
+			}
+		case 'bookmark': {
+				let { bookIds, books } = readingListCopy
+				const { retrievedBook } = action
+				const retrievedBookId = retrievedBook.id
+				// Delete existing bookmark
+				if (bookIds.includes(retrievedBookId)) {
+					readingListCopy.bookIds = bookIds.filter(id => id !== retrievedBookId) 
+					delete books[retrievedBookId]
+					if (typeof window !== undefined) {
+						localStorage.setItem('Bookmarks', JSON.stringify(readingListCopy))
+					}
+				// Add new bookmark
+				} else {
+					books[retrievedBookId] = retrievedBook
+					bookIds.push(retrievedBookId)
+					if (typeof window !== undefined) {
+						localStorage.setItem('Bookmarks', JSON.stringify(readingListCopy))
+					}
+				}
+				return readingListCopy
+			}
+		}
+	}

app/src/context/globalState.js

@@ -0,0 +1,25 @@
+import React, { useReducer, useEffect } from 'react'
+import bookReducer from './bookReducer'
+
+export const BookmarkContext = React.createContext()
+
+export default function GlobalState({children}) {
+	let [readingList, updateReadingList] = useReducer(bookReducer, {
+		books: {},
+		bookIds: []
+	})
+
+	useEffect(() => {
+		if (typeof window !== undefined) {
+			const retrievedBooks = JSON.parse(localStorage.getItem('Bookmarks'))
+			console.log(retrievedBooks)
+			updateReadingList({type: 'init', content: retrievedBooks})
+		}
+	}, [])
+
+	return (
+		<BookmarkContext.Provider value={{readingList, updateReadingList}}>
+			{children}
+		</BookmarkContext.Provider>
+	)
+}