Refactor feed into a component.

app/gatsby-node.js

@@ -2,18 +2,46 @@ const fs = require("fs")
 const categories = JSON.parse(fs.readFileSync("src/data/categories.json"))
 
 function createSlug (categoryName) {
-    const categoryNameLower = categoryName.toLowerCase();
-    return categoryNameLower.replace(" ", "-");
+    categoryName = categoryName.toLowerCase();
+    categoryName = categoryName.replace(/ /g, "-");
+    categoryName = categoryName.replace(/,/g, "");
+    return categoryName;
 };
 
-exports.createPages = ({ actions }) => {
+exports.createPages = async function ({ actions, graphql }) {
   const { createPage } = actions
-  categories.forEach(category => {
+  categories.forEach(async function(category) {
+    const data = await graphql(`query categoryBooksQuery($categoryName: String) {
+        allBooksJson(
+            filter: {
+                category: {
+                    eq: $categoryName
+                }
+            }
+        ){
+          edges {
+            node {
+              id
+              title
+              url
+              rating
+              author
+              year
+              category
+            }
+          }
+        }
+      }
+    `,
+    {categoryName: category.name})
+      
     createPage({
         path: createSlug(category.name),
         component: require.resolve("./src/templates/categoryTemplate.js"),
         context: {
-            categoryName: category.name
+            categoryName: category.name,
+            data: data,
+            limit: null,
         },
       })
     })

app/src/components/feed.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Nav } from "react-bootstrap";
+import { StaticQuery, graphql } from "gatsby"
+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;
+        }
+    })
+};

app/src/components/sidebar.js

@@ -3,6 +3,13 @@ import { Nav } from "react-bootstrap";
 import { StaticQuery, graphql } from "gatsby"
 import '../styles/sidebar.css'
 
+function createSlug (categoryName) {
+    categoryName = categoryName.toLowerCase();
+    categoryName = categoryName.replace(/ /g, "-");
+    categoryName = categoryName.replace(/,/g, "");
+    return categoryName;
+};
+
 export default () => {
     return (
         <StaticQuery
@@ -20,16 +27,16 @@ export default () => {
             render={data => (
                 <Nav className="col-md-12 d-none d-md-block bg-light sidebar"
                     activeKey="/home"
-                    onSelect={selectedKey => alert(`selected ${selectedKey}`)}
                 >
-                    <div className="sidebar-sticky"></div>
+                    <div className="sidebar-sticky">
                     {data.allCategoriesJson.edges.map(function (x, index) {
                         return (
                             <Nav.Item>
-                                <Nav.Link href="/home">{x.node.name}</Nav.Link>
+                                <Nav.Link href={createSlug(x.node.name)}>{x.node.name}</Nav.Link>
                             </Nav.Item>
                         )
                     })}
+                    </div>
                 </Nav>
             )}
         />

app/src/data/categories.json

@@ -1,12 +1,12 @@
 [
     {
-        "name": "Startups and Business"
+        "name": "🚀 Startups and Business"
     },
     {
-        "name": "Philosophy and Psychology"
+        "name": "☯️ Philosophy and Psychology"
     },
     {
-        "name": "Autobiographies and Biographies"
+        "name": "👩🏾 Autobiographies and Biographies"
     },
     {
         "name": "History"

app/src/pages/index.js

@@ -6,17 +6,18 @@ 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";
 
-function myFunction(setEnd, end) {
+function myFunction(setMaximumBooksToShow, maximumBooksToShow) {
   if (document.documentElement.clientHeight+document.documentElement.scrollTop>=document.documentElement.scrollHeight) {
-    setEnd(end+12)
+    setMaximumBooksToShow(maximumBooksToShow + 12)
   }
 }
 
 export default ({data}) => {
-  let [end, setEnd] = useState(12);
+  let [maximumBooksToShow, setMaximumBooksToShow] = useState(12);
   useEffect(()=>{
-    window.document.onscroll = () => myFunction(setEnd, end);
+    window.document.onscroll = () => myFunction(setMaximumBooksToShow, maximumBooksToShow);
   })  
   return (
     <Layout>
@@ -27,15 +28,7 @@ export default ({data}) => {
             <SideBar />
           </Col>
           <Col>
-              {data.allBooksJson.edges.map(function(x, index) {
-                  if(index<end){
-                    return (
-                      <BookCard book={x.node} key={x.node.id} />
-                    )
-                  }else{
-                    return null;
-                  }
-              })}
+              <BookFeed data={data} limit={maximumBooksToShow} />
           </Col>
         </Row>
       </Container>

app/src/templates/categoryTemplate.js

@@ -1,14 +1,30 @@
-import React from "react";
-import { Link } from "gatsby";
+import React, { useState, useEffect } from "react"
+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";
 
 const basicTemplate = props => {
     const { pageContext } = props
-    const { categoryName } = pageContext
+    const { categoryName, books } = pageContext
   
     return (
-        <div>
-            {categoryName}
-        </div>
+    <Layout>
+      <SEO title="Home" />
+      <Container fluid>
+        <Row>
+          <Col xs={2}>
+            <SideBar />
+          </Col>
+          <Col>
+              <BookFeed books={books} categoryName={categoryName} />
+          </Col>
+        </Row>
+      </Container>
+    </Layout>
     )
 }
 export default basicTemplate