Install eslint and prettier.

app/src/components/bookcard.js

@@ -1,25 +1,30 @@
 import PropTypes from "prop-types"
 import React from "react"
-import StarRatings from 'react-star-ratings';
-import { Card, Row, Col } from 'react-bootstrap';
+import StarRatings from "react-star-ratings"
+import { Card, Row, Col } from "react-bootstrap"
 
 const BookCard = ({ book }) => (
-  <Card style={{ width: '44rem', height: '12rem' }}>
+  <Card style={{ width: "44rem", height: "12rem" }}>
     <Row>
       <Col>
-        <Card.Img variant="side" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg" />
+        <Card.Img
+          variant="side"
+          src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg"
+        />
       </Col>
       <Col>
         <Card.Body>
           <Card.Title>{book.title}</Card.Title>
           <StarRatings
-          rating={ parseFloat(book.rating) }
-          numberOfStars={5}
-          starDimension="18px"
-          starSpacing="1px"
-          starRatedColor="#fa604a"
-        />
-          <Card.Subtitle className="mb-2 text-muted">{book.author}</Card.Subtitle>
+            rating={parseFloat(book.rating)}
+            numberOfStars={5}
+            starDimension="18px"
+            starSpacing="1px"
+            starRatedColor="#fa604a"
+          />
+          <Card.Subtitle className="mb-2 text-muted">
+            {book.author}
+          </Card.Subtitle>
         </Card.Body>
       </Col>
     </Row>

app/src/components/feed.js

@@ -1,18 +1,16 @@
-import React from "react";
-import { Nav } from "react-bootstrap";
+import React from "react"
+import { Nav } from "react-bootstrap"
 import { StaticQuery, graphql } from "gatsby"
-import '../styles/sidebar.css'
+import "../styles/sidebar.css"
 import BookCard from "../components/bookcard"
 
-export default ({data, limit}) => {
-    return data.allBooksJson.edges.map(function(x, index) {
-        console.log(index, limit)
-        if(!limit || index < limit){
-            return (
-              <BookCard book={x.node} key={x.node.id} />
-            )
-        } else {
-            return null;
-        }
-    })
-};
+export default ({ data, limit }) => {
+  return data.allBooksJson.edges.map(function(x, index) {
+    console.log(index, limit)
+    if (!limit || index < limit) {
+      return <BookCard book={x.node} key={x.node.id} />
+    } else {
+      return null
+    }
+  })
+}

app/src/components/header.js

@@ -4,17 +4,17 @@ import React from "react"
 
 const Header = ({ siteTitle }) => (
   <header className="my-1 bg-red">
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
+    <h1 style={{ margin: 0 }}>
+      <Link
+        to="/"
+        style={{
+          color: `white`,
+          textDecoration: `none`,
+        }}
+      >
+        {siteTitle}
+      </Link>
+    </h1>
   </header>
 )
 

app/src/components/layout.js

@@ -11,7 +11,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
 import "./layout.css"
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css"
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`

app/src/components/sidebar.js

@@ -1,45 +1,48 @@
-import React from "react";
-import { Nav } from "react-bootstrap";
+import React from "react"
+import { Nav } from "react-bootstrap"
 import { StaticQuery, graphql } from "gatsby"
-import '../styles/sidebar.css'
+import "../styles/sidebar.css"
 
-function createSlug (categoryName) {
-    categoryName = categoryName.toLowerCase();
-    categoryName = categoryName.replace(/ /g, "-");
-    categoryName = categoryName.replace(/,/g, "");
-    return categoryName;
-};
+function createSlug(categoryName) {
+  categoryName = categoryName.toLowerCase()
+  categoryName = categoryName.replace(/ /g, "-")
+  categoryName = categoryName.replace(/,/g, "")
+  return categoryName
+}
 
 export default () => {
-    return (
-        <StaticQuery
-            query={graphql`query CategoryQuery {
-                allCategoriesJson {
-                  edges {
-                    node {
-                      id
-                      name
-                    }
-                  }
-                }
+  return (
+    <StaticQuery
+      query={graphql`
+        query CategoryQuery {
+          allCategoriesJson {
+            edges {
+              node {
+                id
+                name
               }
-            `}
-            render={data => (
-                <Nav className="col-md-12 d-none d-md-block bg-light sidebar"
-                    activeKey="/home"
-                >
-                    <div className="sidebar-sticky">
-                    {data.allCategoriesJson.edges.map(function (x, index) {
-                        return (
-                            <Nav.Item>
-                                <Nav.Link href={createSlug(x.node.name)}>{x.node.name}</Nav.Link>
-                            </Nav.Item>
-                        )
-                    })}
-                    </div>
-                </Nav>
-            )}
-        />
-    );
-};
-
+            }
+          }
+        }
+      `}
+      render={data => (
+        <Nav
+          className="col-md-12 d-none d-md-block bg-light sidebar"
+          activeKey="/home"
+        >
+          <div className="sidebar-sticky">
+            {data.allCategoriesJson.edges.map(function(x, index) {
+              return (
+                <Nav.Item>
+                  <Nav.Link href={createSlug(x.node.name)}>
+                    {x.node.name}
+                  </Nav.Link>
+                </Nav.Item>
+              )
+            })}
+          </div>
+        </Nav>
+      )}
+    />
+  )
+}

app/src/data/categories.json

@@ -1,56 +1,56 @@
 [
-    {
-        "name": "🚀 Startups and Business"
-    },
-    {
-        "name": "☯️ Philosophy and Psychology"
-    },
-    {
-        "name": "👩🏾 Autobiographies and Biographies"
-    },
-    {
-        "name": "History"
-    },
-    {
-        "name": "Evolution, Science and Medicine"
-    },
-    {
-        "name": "Logic and Problem Solving"
-    },
-    {
-        "name": "Politics"
-    },
-    {
-        "name": "Economics"
-    },
-    {
-        "name": "Gender"
-    },
-    {
-        "name": "Sexuality"
-    },
-    {
-        "name": "Education"
-    },
-    {
-        "name": "Writing"
-    },
-    {
-        "name": "Theater and Film"
-    },
-    {
-        "name": "Fiction"
-    },
-    {
-        "name": "Health"
-    },
-    {
-        "name": "Travel"
-    },
-    {
-        "name": "Language"
-    },
-    {
-        "name": "Nature"
-    }
-]
+  {
+    "name": "🚀 Startups and Business"
+  },
+  {
+    "name": "☯️ Philosophy and Psychology"
+  },
+  {
+    "name": "👩🏾 Autobiographies and Biographies"
+  },
+  {
+    "name": "History"
+  },
+  {
+    "name": "Evolution, Science and Medicine"
+  },
+  {
+    "name": "Logic and Problem Solving"
+  },
+  {
+    "name": "Politics"
+  },
+  {
+    "name": "Economics"
+  },
+  {
+    "name": "Gender"
+  },
+  {
+    "name": "Sexuality"
+  },
+  {
+    "name": "Education"
+  },
+  {
+    "name": "Writing"
+  },
+  {
+    "name": "Theater and Film"
+  },
+  {
+    "name": "Fiction"
+  },
+  {
+    "name": "Health"
+  },
+  {
+    "name": "Travel"
+  },
+  {
+    "name": "Language"
+  },
+  {
+    "name": "Nature"
+  }
+]

app/src/pages/index.js

@@ -1,24 +1,29 @@
 import React, { useState, useEffect } from "react"
-import { graphql } from 'gatsby'
+import { graphql } from "gatsby"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import BookCard from "../components/bookcard"
-import SideBar from "../components/sidebar";
-import {Container, Row, Col} from 'react-bootstrap';
-import BookFeed from "../components/feed";
+import SideBar from "../components/sidebar"
+import { Container, Row, Col } from "react-bootstrap"
+import BookFeed from "../components/feed"
 
 function myFunction(setMaximumBooksToShow, maximumBooksToShow) {
-  if (document.documentElement.clientHeight+document.documentElement.scrollTop>=document.documentElement.scrollHeight) {
+  if (
+    document.documentElement.clientHeight +
+      document.documentElement.scrollTop >=
+    document.documentElement.scrollHeight
+  ) {
     setMaximumBooksToShow(maximumBooksToShow + 12)
   }
 }
 
-export default ({data}) => {
-  let [maximumBooksToShow, setMaximumBooksToShow] = useState(12);
-  useEffect(()=>{
-    window.document.onscroll = () => myFunction(setMaximumBooksToShow, maximumBooksToShow);
-  })  
+export default ({ data }) => {
+  let [maximumBooksToShow, setMaximumBooksToShow] = useState(12)
+  useEffect(() => {
+    window.document.onscroll = () =>
+      myFunction(setMaximumBooksToShow, maximumBooksToShow)
+  })
   return (
     <Layout>
       <SEO title="Home" />
@@ -28,7 +33,7 @@ export default ({data}) => {
             <SideBar />
           </Col>
           <Col>
-              <BookFeed data={data} limit={maximumBooksToShow} />
+            <BookFeed data={data} limit={maximumBooksToShow} />
           </Col>
         </Row>
       </Container>
@@ -36,19 +41,20 @@ export default ({data}) => {
   )
 }
 
-export const query = graphql`query MyQuery {
-  allBooksJson {
-    edges {
-      node {
-        id
-        title
-        url
-        rating
-        author
-        year
-        category
+export const query = graphql`
+  query MyQuery {
+    allBooksJson {
+      edges {
+        node {
+          id
+          title
+          url
+          rating
+          author
+          year
+          category
+        }
       }
     }
   }
-}
 `

app/src/styles/sidebar.css

@@ -1,27 +1,27 @@
 .sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    min-height: 100vh !important;
-    padding: 48px 0 0;
-    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  min-height: 100vh !important;
+  padding: 48px 0 0;
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
 }
-#sidebar-wrapper{
-    min-height: 100vh !important;
-    width: 100vw;
-    margin-left: -1rem;
-    -webkit-transition: margin .25s ease-out;
-    -moz-transition: margin .25s ease-out;
-    -o-transition: margin .25s ease-out;
-    transition: margin .25s ease-out;
+#sidebar-wrapper {
+  min-height: 100vh !important;
+  width: 100vw;
+  margin-left: -1rem;
+  -webkit-transition: margin 0.25s ease-out;
+  -moz-transition: margin 0.25s ease-out;
+  -o-transition: margin 0.25s ease-out;
+  transition: margin 0.25s ease-out;
 }
 #sidebar-wrapper .sidebar-heading {
-    padding: 0.875rem 1.25rem;
-    font-size: 1.2rem;
+  padding: 0.875rem 1.25rem;
+  font-size: 1.2rem;
 }
 
 #page-content-wrapper {
-    min-width: 0;
-    width: 100%;
-}
+  min-width: 0;
+  width: 100%;
+}

app/src/templates/categoryTemplate.js

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from "react"
-import { graphql } from 'gatsby'
+import { graphql } from "gatsby"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
-import SideBar from "../components/sidebar";
-import {Container, Row, Col} from 'react-bootstrap';
-import BookFeed from "../components/feed";
+import SideBar from "../components/sidebar"
+import { Container, Row, Col } from "react-bootstrap"
+import BookFeed from "../components/feed"
 
 const basicTemplate = props => {
-    const { pageContext } = props
-    const { categoryName, books } = pageContext
-  
-    return (
+  const { pageContext } = props
+  const { categoryName, books } = pageContext
+
+  return (
     <Layout>
       <SEO title="Home" />
       <Container fluid>
@@ -20,11 +20,11 @@ const basicTemplate = props => {
             <SideBar />
           </Col>
           <Col>
-              <BookFeed books={books} categoryName={categoryName} />
+            <BookFeed books={books} categoryName={categoryName} />
           </Col>
         </Row>
       </Container>
     </Layout>
-    )
+  )
 }
 export default basicTemplate