add useMemo and 3 more sortBy options

app/src/components/feed.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-filename-extension */
 import React from 'react';
 import '../styles/sidebar.css';
 import BookCard from './bookcard';
@@ -6,13 +7,14 @@ import SortByDropdown, { FIELDS_TO_SORT_BY, compareFunctions } from './sortByDro
 export default ({ data, limit }) => {
   const [sortBy, setSortBy] = React.useState(FIELDS_TO_SORT_BY[0]);
 
-  const getSortedBooks = () => [...data.allBooksJson.edges]
-    .sort(compareFunctions[sortBy]);
+  const sortedBooks = React.useMemo(() => [...data.allBooksJson.edges]
+    .sort(compareFunctions[sortBy.value]),
+  [sortBy]);
 
   return (
     <>
-      <SortByDropdown sortBy={sortBy} onSortByItemClick={setSortBy} />
-      {getSortedBooks().map((x, index) => {
+      <SortByDropdown sortBy={sortBy.label} onSortByItemClick={setSortBy} />
+      {sortedBooks.map((x, index) => {
         const book = x.node;
         if (!limit || index < limit) {
           if (!book.description || book.description.length < 10) {

app/src/components/sortByDropdown.js

@@ -2,12 +2,22 @@ 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 }) => Number(bookTwo.year) - Number(bookOne.year),
-  rating: ({ node: bookOne }, { node: bookTwo }) => Number(bookTwo.rating) - Number(bookOne.rating),
+  title_a_z: ({ node: bookOne }, { node: bookTwo }) => bookOne.title.localeCompare(bookTwo.title),
+  title_z_a: ({ node: bookOne }, { node: bookTwo }) => bookTwo.title.localeCompare(bookOne.title),
+  year_descending: ({ node: bookOne }, { node: bookTwo }) => Number(bookTwo.year) - Number(bookOne.year),
+  year_ascending: ({ node: bookOne }, { node: bookTwo }) => Number(bookOne.year) - Number(bookTwo.year),
+  rating_descending: ({ node: bookOne }, { node: bookTwo }) => Number(bookTwo.rating) - Number(bookOne.rating),
+  rating_ascending: ({ node: bookOne }, { node: bookTwo }) => Number(bookOne.rating) - Number(bookTwo.rating),
 };
 
-export const FIELDS_TO_SORT_BY = ['rating', 'year', 'title'];
+export const FIELDS_TO_SORT_BY = [
+  { label: 'Rating, high to low', value: 'rating_descending' },
+  { label: 'Rating, low to high', value: 'rating_ascending' },
+  { label: 'Publication year, new to old', value: 'year_descending' },
+  { label: 'Publication year, old to new', value: 'year_ascending' },
+  { label: 'Title, A-Z', value: 'title_a_z' },
+  { label: 'Title, Z-A', value: 'title_z_a' },
+];
 
 export default ({ sortBy, onSortByItemClick }) => (
   <div className="mb-2">
@@ -19,14 +29,11 @@ export default ({ sortBy, onSortByItemClick }) => (
       </Dropdown.Toggle>
 
       <Dropdown.Menu>
-        {FIELDS_TO_SORT_BY
-          .map((field) => (
-            <Dropdown.Item
-              onClick={() => onSortByItemClick(field)}
-            >
-              {field}
-            </Dropdown.Item>
-          ))}
+        {FIELDS_TO_SORT_BY.map((field) => (
+          <Dropdown.Item onClick={() => onSortByItemClick(field)}>
+            {field.label}
+          </Dropdown.Item>
+        ))}
       </Dropdown.Menu>
     </Dropdown>
   </div>