From 6c4022fb236583ad20d4c4c6693c1339e165b4af Mon Sep 17 00:00:00 2001 From: sct Date: Mon, 7 Dec 2020 11:44:08 +0000 Subject: [PATCH] feat(frontend): add i18n strings for request list and request item --- .../RequestList/RequestItem/index.tsx | 143 +++++++++++------- src/components/RequestList/index.tsx | 55 ++++--- src/components/TvDetails/index.tsx | 4 +- src/i18n/globalMessages.ts | 1 + 4 files changed, 127 insertions(+), 76 deletions(-) diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx index 6714bd06d..f04fd2ef7 100644 --- a/src/components/RequestList/RequestItem/index.tsx +++ b/src/components/RequestList/RequestItem/index.tsx @@ -1,6 +1,11 @@ import React, { useContext } from 'react'; import type { MediaRequest } from '../../../../server/entity/MediaRequest'; -import { useIntl, FormattedDate, FormattedRelativeTime } from 'react-intl'; +import { + useIntl, + FormattedDate, + FormattedRelativeTime, + defineMessages, +} from 'react-intl'; import { useUser, Permission } from '../../../hooks/useUser'; import { LanguageContext } from '../../../context/LanguageContext'; import type { MovieDetails } from '../../../../server/models/Movie'; @@ -13,6 +18,13 @@ import { MediaRequestStatus } from '../../../../server/constants/media'; import Button from '../../Common/Button'; import axios from 'axios'; import globalMessages from '../../../i18n/globalMessages'; +import Link from 'next/link'; + +const messages = defineMessages({ + requestedby: 'Requested by {username}', + seasons: 'Seasons', + notavailable: 'N/A', +}); const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { return (movie as MovieDetails).title !== undefined; @@ -20,9 +32,10 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { interface RequestItemProps { request: MediaRequest; + onDelete: () => void; } -const RequestItem: React.FC = ({ request }) => { +const RequestItem: React.FC = ({ request, onDelete }) => { const intl = useIntl(); const { hasPermission } = useUser(); const { locale } = useContext(LanguageContext); @@ -33,15 +46,26 @@ const RequestItem: React.FC = ({ request }) => { const { data: title, error } = useSWR( `${url}?language=${locale}` ); + const { data: requestData, error: requestError, revalidate } = useSWR< + MediaRequest + >(`/api/v1/request/${request.id}`, { + initialData: request, + }); const modifyRequest = async (type: 'approve' | 'decline') => { const response = await axios.get(`/api/v1/request/${request.id}/${type}`); if (response) { - // revalidate(); + revalidate(); } }; + const deleteRequest = async () => { + await axios.delete(`/api/v1/request/${request.id}`); + + onDelete(); + }; + if (!title && !error) { return ( @@ -50,7 +74,7 @@ const RequestItem: React.FC = ({ request }) => { ); } - if (!title) { + if (!title || !requestData) { return ( @@ -64,23 +88,43 @@ const RequestItem: React.FC = ({ request }) => { noPadding className="w-20 px-4 relative hidden sm:table-cell align-middle" > - + + + + + -

- {isMovie(title) ? title.title : title.name} -

+ + + {isMovie(title) ? title.title : title.name} + +
- Requested by {request.requestedBy.username} + {intl.formatMessage(messages.requestedby, { + username: requestData.requestedBy.username, + })}
- {request.seasons.length > 0 && ( + {requestData.seasons.length > 0 && (
- Seasons - {request.seasons.map((season) => ( + {intl.formatMessage(messages.seasons)} + {requestData.seasons.map((season) => ( {season.seasonNumber} @@ -89,25 +133,24 @@ const RequestItem: React.FC = ({ request }) => { )} - +
- Requested at - +
- Modified by - {request.modifiedBy ? ( + {requestData.modifiedBy ? ( - {request.modifiedBy.username} ( + {requestData.modifiedBy.username} ( @@ -119,7 +162,30 @@ const RequestItem: React.FC = ({ request }) => {
- {request.status === MediaRequestStatus.PENDING && + {requestData.status !== MediaRequestStatus.PENDING && ( + + )} + {requestData.status === MediaRequestStatus.PENDING && hasPermission(Permission.MANAGE_REQUESTS) && ( <> @@ -171,35 +237,6 @@ const RequestItem: React.FC = ({ request }) => { )} - {/*
-
-
- Requested at - - - -
-
-
-
- Modified by - {request.modifiedBy ? ( - - {request.modifiedBy.username} ( - - ) - - ) : ( - N/A - )} -
-
-
*/} ); }; diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx index 69d1e8fe7..4a62237b5 100644 --- a/src/components/RequestList/index.tsx +++ b/src/components/RequestList/index.tsx @@ -6,11 +6,25 @@ 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 } = useSWR( + const { data, error, revalidate } = useSWR( `/api/v1/request?take=10&skip=${pageIndex * 10}` ); if (!data && !error) { @@ -26,14 +40,14 @@ const RequestList: React.FC = () => { return ( <> -
Requests
+
{intl.formatMessage(messages.requests)}
- Media Info - Status - - + {intl.formatMessage(messages.mediaInfo)} + {intl.formatMessage(messages.status)} + {intl.formatMessage(messages.requestedAt)} + {intl.formatMessage(messages.modifiedBy)} @@ -42,6 +56,7 @@ const RequestList: React.FC = () => { revalidate()} /> ); })} @@ -53,19 +68,17 @@ const RequestList: React.FC = () => { >

- Showing - {pageIndex * 10} - to - - {data.results.length < 10 - ? pageIndex * 10 + data.results.length - : pageIndex + 1 * 10} - - of - - {data.pageInfo.results} - - results + {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}; + }, + })}

@@ -74,14 +87,14 @@ const RequestList: React.FC = () => { disabled={!hasPrevPage} onClick={() => setPageIndex((current) => current - 1)} > - Previous + {intl.formatMessage(messages.previous)}
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index 22965a141..6859962b7 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -156,12 +156,12 @@ const TvDetails: React.FC = ({ tv }) => { /> setShowManager(false)} subText={data.name} >

- {intl.formatMessage(messages.manageModalTitle)} + {intl.formatMessage(messages.manageModalRequests)}

    diff --git a/src/i18n/globalMessages.ts b/src/i18n/globalMessages.ts index 7fc65657c..448b2d9cb 100644 --- a/src/i18n/globalMessages.ts +++ b/src/i18n/globalMessages.ts @@ -13,6 +13,7 @@ const globalMessages = defineMessages({ cancel: 'Cancel', approve: 'Approve', decline: 'Decline', + delete: 'Delete', }); export default globalMessages;