import React, { useEffect, useState } from 'react'; import useSWR from 'swr'; import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces'; import LoadingSpinner from '../Common/LoadingSpinner'; import RequestItem from './RequestItem'; import Header from '../Common/Header'; import Button from '../Common/Button'; import { defineMessages, useIntl } from 'react-intl'; import PageTitle from '../Common/PageTitle'; import { useRouter } from 'next/router'; const messages = defineMessages({ requests: 'Requests', showingresults: 'Showing {from} to {to} of {total} results', resultsperpage: 'Display {pageSize} results per page', next: 'Next', previous: 'Previous', filterAll: 'All', filterPending: 'Pending', filterApproved: 'Approved', filterAvailable: 'Available', filterProcessing: 'Processing', noresults: 'No results.', showallrequests: 'Show All Requests', sortAdded: 'Request Date', sortModified: 'Last Modified', }); type Filter = 'all' | 'pending' | 'approved' | 'processing' | 'available'; type Sort = 'added' | 'modified'; const RequestList: React.FC = () => { const router = useRouter(); const intl = useIntl(); const [currentFilter, setCurrentFilter] = useState('pending'); const [currentSort, setCurrentSort] = useState('added'); const [currentPageSize, setCurrentPageSize] = useState(10); const page = router.query.page ? Number(router.query.page) : 1; const pageIndex = page - 1; const { data, error, revalidate } = useSWR( `/api/v1/request?take=${currentPageSize}&skip=${ pageIndex * currentPageSize }&filter=${currentFilter}&sort=${currentSort}` ); // Restore last set filter values on component mount useEffect(() => { const filterString = window.localStorage.getItem('rl-filter-settings'); if (filterString) { const filterSettings = JSON.parse(filterString); setCurrentFilter(filterSettings.currentFilter); setCurrentSort(filterSettings.currentSort); setCurrentPageSize(filterSettings.currentPageSize); } }, []); // Set fitler values to local storage any time they are changed useEffect(() => { window.localStorage.setItem( 'rl-filter-settings', JSON.stringify({ currentFilter, currentSort, currentPageSize, }) ); }, [currentFilter, currentSort, currentPageSize]); if (!data && !error) { return ; } if (!data) { return ; } const hasNextPage = data.pageInfo.pages > pageIndex + 1; const hasPrevPage = pageIndex > 0; return ( <> {intl.formatMessage(messages.requests)} { setCurrentFilter(e.target.value as Filter); router.push(router.pathname); }} value={currentFilter} className="rounded-r-only" > {intl.formatMessage(messages.filterAll)} {intl.formatMessage(messages.filterPending)} {intl.formatMessage(messages.filterApproved)} {intl.formatMessage(messages.filterProcessing)} {intl.formatMessage(messages.filterAvailable)} { setCurrentSort(e.target.value as Sort); router.push(router.pathname); }} value={currentSort} className="rounded-r-only" > {intl.formatMessage(messages.sortAdded)} {intl.formatMessage(messages.sortModified)} {data.results.map((request) => { return ( revalidate()} /> ); })} {data.results.length === 0 && ( {intl.formatMessage(messages.noresults)} {currentFilter !== 'all' && ( setCurrentFilter('all')} > {intl.formatMessage(messages.showallrequests)} )} )} {data.results.length > 0 && intl.formatMessage(messages.showingresults, { from: pageIndex * currentPageSize + 1, to: data.results.length < currentPageSize ? pageIndex * currentPageSize + data.results.length : (pageIndex + 1) * currentPageSize, total: data.pageInfo.results, strong: function strong(msg) { return {msg}; }, })} {intl.formatMessage(messages.resultsperpage, { pageSize: ( { setCurrentPageSize(Number(e.target.value)); router .push(router.pathname) .then(() => window.scrollTo(0, 0)); }} value={currentPageSize} className="inline short" > 5 10 25 50 100 ), })} router .push(`${router.pathname}?page=${page - 1}`, undefined, { shallow: true, }) .then(() => window.scrollTo(0, 0)) } > {intl.formatMessage(messages.previous)} router .push(`${router.pathname}?page=${page + 1}`, undefined, { shallow: true, }) .then(() => window.scrollTo(0, 0)) } > {intl.formatMessage(messages.next)} > ); }; export default RequestList;
{data.results.length > 0 && intl.formatMessage(messages.showingresults, { from: pageIndex * currentPageSize + 1, to: data.results.length < currentPageSize ? pageIndex * currentPageSize + data.results.length : (pageIndex + 1) * currentPageSize, total: data.pageInfo.results, strong: function strong(msg) { return {msg}; }, })}