sort by functionallity

app/src/components/feed.js

@@ -1,19 +1,31 @@
-import React from "react"
-import { Nav } from "react-bootstrap"
-import { StaticQuery, graphql } from "gatsby"
-import "../styles/sidebar.css"
-import BookCard from "../components/bookcard"
+import React from 'react';
+import '../styles/sidebar.css';
+import BookCard from './bookcard';
+import SortByDropdown, { FIELDS_TO_SORT_BY, compareFunctions } from './sortByDropdown';
 
 export default ({ data, limit }) => {
-  return data.allBooksJson.edges.map(function(x, index) {
-    const book = x.node;
-    if (!limit || index < limit) {
-      if(!book.description || book.description.length < 10) {
+  const [sortBy, setSortBy] = React.useState(FIELDS_TO_SORT_BY[0]);
+
+  const getSortedBooks = () => data.allBooksJson.edges
+    .slice(0, limit || data.allBooksJson.edges.length)
+    .sort(compareFunctions[sortBy]);
+
+  const handleSortByItemClick = (field) => {
+    setSortBy(field);
+  };
+  return (
+    <>
+      <SortByDropdown sortBy={sortBy} onSortByItemClick={handleSortByItemClick} />
+      {getSortedBooks().map((x, index) => {
+        const book = x.node;
+        if (!limit || index < limit) {
+          if (!book.description || book.description.length < 10) {
+            return null;
+          }
+          return <BookCard book={book} key={book.id} />;
+        }
         return null;
-      }
-      return <BookCard book={book} key={book.id} />
-    } else {
-      return null
-    }
-  })
-}
+      })}
+    </>
+  );
+};

app/src/components/sortByDropdown.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Dropdown } from 'react-bootstrap';
+
+export const compareFunctions = {
+  title: ({ node: bookOne }, { node: bookTwo }) => bookOne.title.localeCompare(bookTwo.title),
+  year: ({ node: bookOne }, { node: bookTwo }) => bookTwo.year - bookOne.year,
+  rating: ({ node: bookOne }, { node: bookTwo }) => bookTwo.rating - bookOne.rating,
+};
+
+export const FIELDS_TO_SORT_BY = ['rating', 'year', 'title'];
+
+export default ({ sortBy, onSortByItemClick }) => (
+  <div className="mb-2">
+    <Dropdown>
+      <Dropdown.Toggle variant="outline">
+        Sort By:
+        {' '}
+        {sortBy}
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        {FIELDS_TO_SORT_BY
+          .map((field) => (
+            <Dropdown.Item
+              onClick={() => onSortByItemClick(field)}
+            >
+              {field}
+            </Dropdown.Item>
+          ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  </div>
+);

app/src/pages/index.js

@@ -19,6 +19,7 @@ function myFunction(setMaximumBooksToShow, maximumBooksToShow) {
 
 export default ({ data }) => {
   let [maximumBooksToShow, setMaximumBooksToShow] = useState(12)
+  console.log({data})
   useEffect(() => {
     window.document.onscroll = () =>
       myFunction(setMaximumBooksToShow, maximumBooksToShow)
@@ -44,7 +45,7 @@ export const query = graphql`
   query MyQuery {
     allBooksJson(
       sort: {
-        fields: [rating]
+        fields: [title]
         order: DESC
       }
     ) {

app/src/templates/categoryTemplate.js

@@ -11,7 +11,7 @@ import BookFeed from "../components/feed"
 const basicTemplate = props => {
   const { pageContext } = props
   const { categoryName, data } = pageContext
-
+  console.log({data, categoryName})
   return (
     <Layout>
       <SEO title="Home" />