lib/Mind-Expanding-Books
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add useMemo and 3 more sortBy options

Browse Source
This commit is contained in:
Gal Elmalah
2020-10-11 22:07:15 +03:00
committed by Vishnu Ks
parent e1962883f6
commit 8cd6ba59d7
2 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/components/feed.js
View File

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

31
app/src/components/sortByDropdown.js
View File

@@ -2,12 +2,22 @@ import React from 'react';
import { Dropdown } from 'react-bootstrap'; import { Dropdown } from 'react-bootstrap';
export const compareFunctions = { export const compareFunctions = {
title: ({ node: bookOne }, { node: bookTwo }) => bookOne.title.localeCompare(bookTwo.title), title_a_z: ({ node: bookOne }, { node: bookTwo }) => bookOne.title.localeCompare(bookTwo.title),
year: ({ node: bookOne }, { node: bookTwo }) => Number(bookTwo.year) - Number(bookOne.year), title_z_a: ({ node: bookOne }, { node: bookTwo }) => bookTwo.title.localeCompare(bookOne.title),
rating: ({ node: bookOne }, { node: bookTwo }) => Number(bookTwo.rating) - Number(bookOne.rating), 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 }) => ( export default ({ sortBy, onSortByItemClick }) => (
<div className="mb-2"> <div className="mb-2">
@@ -19,14 +29,11 @@ export default ({ sortBy, onSortByItemClick }) => (
</Dropdown.Toggle> </Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
{FIELDS_TO_SORT_BY {FIELDS_TO_SORT_BY.map((field) => (
.map((field) => ( <Dropdown.Item onClick={() => onSortByItemClick(field)}>
<Dropdown.Item {field.label}
onClick={() => onSortByItemClick(field)} </Dropdown.Item>
> ))}
{field}
</Dropdown.Item>
))}
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</div> </div>