105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
|
|
import { bookDisplayDesktopElements } from '../constants/book';
|
|
import { MAX_RESULTS_PER_PAGE } from '../constants/pagination';
|
|
|
|
import { Book } from '../scripts/searcher';
|
|
|
|
import DataFilter from './DataFilter';
|
|
|
|
import DesktopDataListElement from './DesktopDataListElement';
|
|
import Paginator from './Paginator';
|
|
|
|
interface IProps {
|
|
books: Book[]
|
|
}
|
|
|
|
const DesktopDataList: React.FC<IProps> = (props) => {
|
|
const { books } = props;
|
|
|
|
const [sortBy, setSortBy] = useState<string>('title')
|
|
const [direction, setDirection] = useState<string>('asc')
|
|
|
|
const [currentIndex, setCurrentIndex] = useState<number>(0)
|
|
|
|
useEffect(() => {
|
|
setCurrentIndex(0)
|
|
}, [books])
|
|
|
|
const getMaxIndex = (): number => {
|
|
const maxIndex = String(books.length / MAX_RESULTS_PER_PAGE)
|
|
const res = books.length > MAX_RESULTS_PER_PAGE ? parseInt(maxIndex) : 1
|
|
|
|
return res
|
|
}
|
|
|
|
const setPreviousIndex = () => {
|
|
if (currentIndex > 0) {
|
|
setCurrentIndex(currentIndex - 1)
|
|
}
|
|
}
|
|
const setNextIndex = () => {
|
|
if (currentIndex < getMaxIndex()) {
|
|
setCurrentIndex(currentIndex + 1)
|
|
}
|
|
}
|
|
|
|
const getCurrentSliceStart = ():number => {
|
|
return currentIndex == 0 ? 0 : currentIndex * MAX_RESULTS_PER_PAGE
|
|
}
|
|
|
|
const getCurrentSliceEnd = ():number => {
|
|
const maxIndex = getMaxIndex()
|
|
return currentIndex == maxIndex ? books.length - 1 : (currentIndex + 1) * MAX_RESULTS_PER_PAGE
|
|
}
|
|
|
|
const handleSorting = (sortingElement: string) => {
|
|
if (sortBy == sortingElement) {
|
|
setDirection(direction == 'asc' ? 'desc' : 'asc')
|
|
} else {
|
|
setSortBy(sortingElement)
|
|
}
|
|
}
|
|
|
|
const sortBooksFunction = (a: any, b: any) => {
|
|
var nameA = a[sortBy].toString().toUpperCase(); // ignore upper and lowercase
|
|
var nameB = b[sortBy].toString().toUpperCase(); // ignore upper and lowercase
|
|
if (nameA < nameB) {
|
|
return -1; //nameA comes first
|
|
}
|
|
if (nameA > nameB) {
|
|
return 1; // nameB comes first
|
|
}
|
|
return 0; // names must be equal
|
|
}
|
|
|
|
const getSortedBooks = (): Book[] => {
|
|
return (direction == 'asc') ? books.sort(sortBooksFunction) : books.sort(sortBooksFunction).reverse()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{books.length > 0 &&
|
|
<DataFilter
|
|
elements={bookDisplayDesktopElements}
|
|
activeFilter={sortBy}
|
|
currentDirection={direction}
|
|
setSortingElement={handleSorting} />}
|
|
|
|
{getSortedBooks().slice(getCurrentSliceStart(), getCurrentSliceEnd()).map((book, key) => {
|
|
return <DesktopDataListElement key={key} book={book} />
|
|
})}
|
|
|
|
{books.length > 0 &&
|
|
<Paginator
|
|
maxIndex={getMaxIndex()}
|
|
setIndex={setCurrentIndex}
|
|
setPrevious={setPreviousIndex}
|
|
setNext={setNextIndex}
|
|
currentIndex={currentIndex} />}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DesktopDataList;
|