import React, { 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 Table from '../Common/Table'; import Button from '../Common/Button'; import { defineMessages, useIntl } from 'react-intl'; const messages = defineMessages({ requests: 'Requests', mediaInfo: 'Media Info', status: 'Status', requestedAt: 'Requested At', modifiedBy: 'Last Modified By', showingresults: 'Showing {from} to {to} of {total} results', next: 'Next', previous: 'Previous', filterAll: 'All', filterPending: 'Pending', filterApproved: 'Approved', noresults: 'No results.', showallrequests: 'Show All Requests', sortAdded: 'Request Date', sortModified: 'Last Modified', }); type Filter = 'all' | 'approved' | 'pending'; type Sort = 'added' | 'modified'; const RequestList: React.FC = () => { const intl = useIntl(); const [pageIndex, setPageIndex] = useState(0); const [currentFilter, setCurrentFilter] = useState('pending'); const [currentSort, setCurrentSort] = useState('added'); const { data, error, revalidate } = useSWR( `/api/v1/request?take=10&skip=${ pageIndex * 10 }&filter=${currentFilter}&sort=${currentSort}` ); if (!data && !error) { return ; } if (!data) { return ; } const hasNextPage = data.pageInfo.pages > pageIndex + 1; const hasPrevPage = pageIndex > 0; return ( <> {intl.formatMessage(messages.requests)} { setPageIndex(0); setCurrentFilter(e.target.value as Filter); }} onBlur={(e) => { setPageIndex(0); setCurrentFilter(e.target.value as Filter); }} value={currentFilter} className="flex-1 block w-full py-2 pl-3 pr-10 text-base leading-6 text-white bg-gray-700 border-gray-500 rounded-r-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" > {intl.formatMessage(messages.filterAll)} {intl.formatMessage(messages.filterPending)} {intl.formatMessage(messages.filterApproved)} { setPageIndex(0); setCurrentSort(e.target.value as Sort); }} onBlur={(e) => { setPageIndex(0); setCurrentSort(e.target.value as Sort); }} value={currentSort} className="flex-1 block w-full py-2 pl-3 pr-10 text-base leading-6 text-white bg-gray-700 border-gray-500 rounded-r-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" > {intl.formatMessage(messages.sortAdded)} {intl.formatMessage(messages.sortModified)} {intl.formatMessage(messages.mediaInfo)} {intl.formatMessage(messages.status)} {intl.formatMessage(messages.requestedAt)} {intl.formatMessage(messages.modifiedBy)} {data.results.map((request) => { return ( revalidate()} /> ); })} {data.results.length === 0 && ( {intl.formatMessage(messages.noresults)} {currentFilter !== 'all' && ( setCurrentFilter('all')} > {intl.formatMessage(messages.showallrequests)} )} )} {intl.formatMessage(messages.showingresults, { from: pageIndex * 10, to: data.results.length < 10 ? pageIndex * 10 + data.results.length : (pageIndex + 1) * 10, total: data.pageInfo.results, strong: function strong(msg) { return {msg}; }, })} setPageIndex((current) => current - 1)} > {intl.formatMessage(messages.previous)} setPageIndex((current) => current + 1)} > {intl.formatMessage(messages.next)} > ); }; export default RequestList;
{intl.formatMessage(messages.showingresults, { from: pageIndex * 10, to: data.results.length < 10 ? pageIndex * 10 + data.results.length : (pageIndex + 1) * 10, total: data.pageInfo.results, strong: function strong(msg) { return {msg}; }, })}