From 216447121b686b6d01a31b95ec0c8eb005f6b103 Mon Sep 17 00:00:00 2001 From: TheCatLady <52870424+TheCatLady@users.noreply.github.com> Date: Mon, 25 Oct 2021 11:07:00 -0400 Subject: [PATCH] fix(frontend): use consistent formatting & strings (#2231) * fix(frontend): use consistent formatting & strings * fix(lang): remove duplicated status strings * fix(frontend): reduce height of items in request & issue lists * fix(frontend): issue description textarea label should be a label element * refactor: remove unnecessary reduce * fix: remove small avatar underneath issue comments * fix(frontend): don't hide Pushover app token tip --- .../IssueDetails/IssueComment/index.tsx | 32 ++- src/components/IssueDetails/index.tsx | 242 +++++++++++------- src/components/IssueList/IssueItem/index.tsx | 60 +++-- src/components/IssueList/index.tsx | 4 +- .../IssueModal/CreateIssueModal/index.tsx | 6 +- src/components/ManageSlideOver/index.tsx | 11 +- src/components/RequestCard/index.tsx | 2 +- .../RequestList/RequestItem/index.tsx | 12 +- .../UserNotificationsPushover.tsx | 41 +-- src/i18n/locale/en.json | 30 +-- src/styles/globals.css | 2 +- 11 files changed, 264 insertions(+), 178 deletions(-) diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx index 603616da..1b82ff6c 100644 --- a/src/components/IssueDetails/IssueComment/index.tsx +++ b/src/components/IssueDetails/IssueComment/index.tsx @@ -3,6 +3,7 @@ import { ExclamationIcon } from '@heroicons/react/outline'; import { DotsVerticalIcon } from '@heroicons/react/solid'; import axios from 'axios'; import { Field, Form, Formik } from 'formik'; +import Link from 'next/link'; import React, { useState } from 'react'; import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl'; import ReactMarkdown from 'react-markdown'; @@ -14,11 +15,11 @@ import Modal from '../../Common/Modal'; import Transition from '../../Transition'; const messages = defineMessages({ - postedby: 'Posted by {username} {relativeTime}', - postedbyedited: 'Posted by {username} {relativeTime} (Edited)', + postedby: 'Posted {relativeTime} by {username}', + postedbyedited: 'Posted {relativeTime} by {username} (Edited)', delete: 'Delete Comment', areyousuredelete: 'Are you sure you want to delete this comment?', - validationComment: 'You must provide a message', + validationComment: 'You must enter a message', edit: 'Edit Comment', }); @@ -86,11 +87,15 @@ const IssueComment: React.FC = ({ {intl.formatMessage(messages.areyousuredelete)} - + + + + +
{(belongsToUser || hasPermission(Permission.MANAGE_ISSUES)) && ( @@ -221,7 +226,7 @@ const IssueComment: React.FC = ({
@@ -232,14 +237,15 @@ const IssueComment: React.FC = ({ : messages.postedby, { username: ( - - {comment.user.displayName} - + + {comment.user.displayName} + + ), relativeTime: ( {username}', + openedby: '#{issueId} opened {relativeTime} by {username}', closeissue: 'Close Issue', closeissueandcomment: 'Close with Comment', leavecomment: 'Comment', @@ -43,18 +43,18 @@ const messages = defineMessages({ reopenissue: 'Reopen Issue', reopenissueandcomment: 'Reopen with Comment', issuepagetitle: 'Issue', + playonplex: 'Play on Plex', + play4konplex: 'Play 4K on Plex', openinarr: 'Open in {arr}', - toasteditdescriptionsuccess: 'Edited the issue description successfully!', + openin4karr: 'Open in 4K {arr}', + toasteditdescriptionsuccess: 'Issue description edited successfully!', toasteditdescriptionfailed: 'Something went wrong while editing the issue description.', - toaststatusupdated: 'Updated the issue status successfully!', + toaststatusupdated: 'Issue status updated successfully!', toaststatusupdatefailed: 'Something went wrong while updating the issue status.', - issuetype: 'Issue Type', - mediatype: 'Media Type', + issuetype: 'Type', lastupdated: 'Last Updated', - statusopen: 'Open', - statusresolved: 'Resolved', problemseason: 'Affected Season', allseasons: 'All Seasons', season: 'Season {seasonNumber}', @@ -63,7 +63,7 @@ const messages = defineMessages({ episode: 'Episode {episodeNumber}', deleteissue: 'Delete Issue', deleteissueconfirm: 'Are you sure you want to delete this issue?', - toastissuedeleted: 'Deleted the issue successfully!', + toastissuedeleted: 'Issue deleted successfully!', toastissuedeletefailed: 'Something went wrong while deleting the issue.', nocomments: 'No comments.', unknownissuetype: 'Unknown', @@ -96,8 +96,6 @@ const IssueDetails: React.FC = () => { (opt) => opt.issueType === issueData?.issueType ); - const mediaType = issueData?.media.mediaType; - if (!data && !error) { return ; } @@ -212,7 +210,7 @@ const IssueDetails: React.FC = () => { />
)} -
+
{
{issueData.status === IssueStatus.OPEN && ( - {intl.formatMessage(messages.statusopen)} + {intl.formatMessage(globalMessages.open)} )} {issueData.status === IssueStatus.RESOLVED && ( - {intl.formatMessage(messages.statusresolved)} + {intl.formatMessage(globalMessages.resolved)} )}
@@ -259,27 +257,26 @@ const IssueDetails: React.FC = () => { {intl.formatMessage(messages.openedby, { issueId: issueData.id, - username: issueData.createdBy.displayName, - UserLink: function UserLink(msg) { - return ( -
- - - - - - - - {msg} - - -
- ); - }, + username: ( + + + + + {issueData.createdBy.displayName} + + + + ), relativeTime: ( { />
-
- {intl.formatMessage(messages.mediatype)} - - {intl.formatMessage( - mediaType === MediaType.MOVIE - ? globalMessages.movie - : globalMessages.tvshow - )} - -
{intl.formatMessage(messages.issuetype)} @@ -366,20 +353,66 @@ const IssueDetails: React.FC = () => {
- {hasPermission(Permission.MANAGE_ISSUES) && ( -
- {issueData?.media.serviceUrl && ( +
+ {issueData?.media.plexUrl && ( + + )} + {issueData?.media.serviceUrl && hasPermission(Permission.ADMIN) && ( + + )} + {issueData?.media.plexUrl4k && ( + + )} + {issueData?.media.serviceUrl4k && + hasPermission(Permission.ADMIN) && ( )} -
- )} +
@@ -513,16 +545,6 @@ const IssueDetails: React.FC = () => { )}
-
- {intl.formatMessage(messages.mediatype)} - - {intl.formatMessage( - mediaType === MediaType.MOVIE - ? globalMessages.movie - : globalMessages.tvshow - )} - -
{issueData.media.mediaType === MediaType.TV && ( <>
@@ -565,30 +587,74 @@ const IssueDetails: React.FC = () => {
- {hasPermission(Permission.MANAGE_ISSUES) && ( -
- {issueData?.media.serviceUrl && ( - - )} -
- )} +
+ {issueData?.media.plexUrl && ( + + )} + {issueData?.media.serviceUrl && hasPermission(Permission.ADMIN) && ( + + )} + {issueData?.media.plexUrl4k && ( + + )} + {issueData?.media.serviceUrl4k && hasPermission(Permission.ADMIN) && ( + + )} +
diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx index 25cb758a..8a93c2e6 100644 --- a/src/components/IssueList/IssueItem/index.tsx +++ b/src/components/IssueList/IssueItem/index.tsx @@ -18,11 +18,9 @@ import { issueOptions } from '../../IssueModal/constants'; const messages = defineMessages({ openeduserdate: '{date} by {user}', - allseasons: 'All Seasons', - season: 'Season {seasonNumber}', + seasons: '{seasonCount, plural, one {Season} other {Seasons}}', + episodes: '{episodeCount, plural, one {Episode} other {Episodes}}', problemepisode: 'Affected Episode', - allepisodes: 'All Episodes', - episode: 'Episode {episodeNumber}', issuetype: 'Type', issuestatus: 'Status', opened: 'Opened', @@ -55,7 +53,7 @@ const IssueItem: React.FC = ({ issue }) => { if (!title && !error) { return (
); @@ -69,30 +67,48 @@ const IssueItem: React.FC = ({ issue }) => { (opt) => opt.issueType === issue?.issueType ); - const problemSeasonEpisodeLine = []; + const problemSeasonEpisodeLine: React.ReactNode[] = []; if (!isMovie(title) && issue) { problemSeasonEpisodeLine.push( - issue.problemSeason > 0 - ? intl.formatMessage(messages.season, { - seasonNumber: issue.problemSeason, - }) - : intl.formatMessage(messages.allseasons) + <> + + {intl.formatMessage(messages.seasons, { + seasonCount: issue.problemSeason ? 1 : 0, + })} + + + + {issue.problemSeason > 0 + ? issue.problemSeason + : intl.formatMessage(globalMessages.all)} + + + ); if (issue.problemSeason > 0) { problemSeasonEpisodeLine.push( - issue.problemEpisode > 0 - ? intl.formatMessage(messages.episode, { - episodeNumber: issue.problemEpisode, - }) - : intl.formatMessage(messages.allepisodes) + <> + + {intl.formatMessage(messages.episodes, { + episodeCount: issue.problemEpisode ? 1 : 0, + })} + + + + {issue.problemEpisode > 0 + ? issue.problemEpisode + : intl.formatMessage(globalMessages.all)} + + + ); } } return ( -
+
{title.backdropPath && (
= ({ issue }) => { : `/tv/${issue.media.tmdbId}` } > - + = ({ issue }) => { {problemSeasonEpisodeLine.length > 0 && ( -
- {problemSeasonEpisodeLine.join(' | ')} +
+ {problemSeasonEpisodeLine.map((t, k) => ( + {t} + ))}
)}
@@ -212,7 +230,7 @@ const IssueItem: React.FC = ({ issue }) => { alt="" className="ml-1.5 avatar-sm" /> - + {issue.createdBy.displayName} diff --git a/src/components/IssueList/index.tsx b/src/components/IssueList/index.tsx index 8a2559a1..cabf9ad9 100644 --- a/src/components/IssueList/index.tsx +++ b/src/components/IssueList/index.tsx @@ -94,7 +94,7 @@ const IssueList: React.FC = () => { <>
-
Issues
+
{intl.formatMessage(messages.issues)}
@@ -157,7 +157,7 @@ const IssueList: React.FC = () => {
{data.results.map((issue) => { return ( -
+
); diff --git a/src/components/IssueModal/CreateIssueModal/index.tsx b/src/components/IssueModal/CreateIssueModal/index.tsx index 187fe0e5..2dd4ea8d 100644 --- a/src/components/IssueModal/CreateIssueModal/index.tsx +++ b/src/components/IssueModal/CreateIssueModal/index.tsx @@ -278,10 +278,10 @@ const CreateIssueModal: React.FC = ({
- - {intl.formatMessage(messages.whatswrong)}{' '} + +