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', }); const RequestList: React.FC = () => { const intl = useIntl(); const [pageIndex, setPageIndex] = useState(0); const { data, error, revalidate } = useSWR( `/api/v1/request?take=10&skip=${pageIndex * 10}` ); if (!data && !error) { return ; } if (!data) { return ; } const hasNextPage = data.pageInfo.pages > pageIndex + 1; const hasPrevPage = pageIndex > 0; return ( <> {intl.formatMessage(messages.requests)} {intl.formatMessage(messages.mediaInfo)} {intl.formatMessage(messages.status)} {intl.formatMessage(messages.requestedAt)} {intl.formatMessage(messages.modifiedBy)} {data.results.map((request) => { return ( revalidate()} /> ); })} {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}; }, })}