refactor(lang): use global strings where appropriate and remove unused strings (#1265)

src/components/RequestList/RequestItem/index.tsx

@@ -1,34 +1,30 @@
+import axios from 'axios';
+import Link from 'next/link';
 import React, { useContext, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
-import type { MediaRequest } from '../../../../server/entity/MediaRequest';
-import { useIntl, FormattedRelativeTime, defineMessages } from 'react-intl';
-import { useUser, Permission } from '../../../hooks/useUser';
-import { LanguageContext } from '../../../context/LanguageContext';
-import type { MovieDetails } from '../../../../server/models/Movie';
-import type { TvDetails } from '../../../../server/models/Tv';
+import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
-import Badge from '../../Common/Badge';
-import StatusBadge from '../../StatusBadge';
 import {
   MediaRequestStatus,
   MediaStatus,
 } from '../../../../server/constants/media';
-import Button from '../../Common/Button';
-import axios from 'axios';
+import type { MediaRequest } from '../../../../server/entity/MediaRequest';
+import type { MovieDetails } from '../../../../server/models/Movie';
+import type { TvDetails } from '../../../../server/models/Tv';
+import { LanguageContext } from '../../../context/LanguageContext';
+import { Permission, useUser } from '../../../hooks/useUser';
 import globalMessages from '../../../i18n/globalMessages';
-import Link from 'next/link';
-import { useToasts } from 'react-toast-notifications';
-import RequestModal from '../../RequestModal';
-import ConfirmButton from '../../Common/ConfirmButton';
+import Badge from '../../Common/Badge';
+import Button from '../../Common/Button';
 import CachedImage from '../../Common/CachedImage';
+import ConfirmButton from '../../Common/ConfirmButton';
+import RequestModal from '../../RequestModal';
+import StatusBadge from '../../StatusBadge';
 
 const messages = defineMessages({
   seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
-  all: 'All',
-  notavailable: 'N/A',
   failedretry: 'Something went wrong while retrying the request.',
-  areyousure: 'Are you sure?',
-  status: 'Status',
   requested: 'Requested',
   modified: 'Modified',
   modifieduserdate: '{date} by {user}',
@@ -218,7 +214,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   {title.seasons.filter((season) => season.seasonNumber !== 0)
                     .length === request.seasons.length ? (
                     <span className="mr-2 uppercase">
-                      <Badge>{intl.formatMessage(messages.all)}</Badge>
+                      <Badge>{intl.formatMessage(globalMessages.all)}</Badge>
                     </span>
                   ) : (
                     <div className="flex overflow-x-scroll hide-scrollbar flex-nowrap">
@@ -236,7 +232,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
           <div className="z-10 flex flex-col justify-center w-full pr-4 mt-4 ml-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
             <div className="card-field">
               <span className="card-field-name">
-                {intl.formatMessage(messages.status)}
+                {intl.formatMessage(globalMessages.status)}
               </span>
               {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
                 MediaStatus.UNKNOWN ||
@@ -349,7 +345,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
             hasPermission(Permission.MANAGE_REQUESTS) && (
               <ConfirmButton
                 onClick={() => deleteRequest()}
-                confirmText={intl.formatMessage(messages.areyousure)}
+                confirmText={intl.formatMessage(globalMessages.areyousure)}
                 className="w-full"
               >
                 <svg

src/components/RequestList/index.tsx

@@ -1,27 +1,17 @@
+import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 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 globalMessages from '../../i18n/globalMessages';
 import Button from '../Common/Button';
-import { defineMessages, useIntl } from 'react-intl';
+import Header from '../Common/Header';
+import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
-import { useRouter } from 'next/router';
+import RequestItem from './RequestItem';
 
 const messages = defineMessages({
   requests: 'Requests',
-  showingresults:
-    'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> 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',
@@ -114,19 +104,19 @@ const RequestList: React.FC = () => {
               className="rounded-r-only"
             >
               <option value="all">
-                {intl.formatMessage(messages.filterAll)}
+                {intl.formatMessage(globalMessages.all)}
               </option>
               <option value="pending">
-                {intl.formatMessage(messages.filterPending)}
+                {intl.formatMessage(globalMessages.pending)}
               </option>
               <option value="approved">
-                {intl.formatMessage(messages.filterApproved)}
+                {intl.formatMessage(globalMessages.approved)}
               </option>
               <option value="processing">
-                {intl.formatMessage(messages.filterProcessing)}
+                {intl.formatMessage(globalMessages.processing)}
               </option>
               <option value="available">
-                {intl.formatMessage(messages.filterAvailable)}
+                {intl.formatMessage(globalMessages.available)}
               </option>
             </select>
           </div>
@@ -175,7 +165,7 @@ const RequestList: React.FC = () => {
       {data.results.length === 0 && (
         <div className="flex flex-col items-center justify-center w-full py-24 text-white">
           <span className="text-2xl text-gray-400">
-            {intl.formatMessage(messages.noresults)}
+            {intl.formatMessage(globalMessages.noresults)}
           </span>
           {currentFilter !== 'all' && (
             <div className="mt-4">
@@ -197,7 +187,7 @@ const RequestList: React.FC = () => {
           <div className="hidden lg:flex lg:flex-1">
             <p className="text-sm">
               {data.results.length > 0 &&
-                intl.formatMessage(messages.showingresults, {
+                intl.formatMessage(globalMessages.showingresults, {
                   from: pageIndex * currentPageSize + 1,
                   to:
                     data.results.length < currentPageSize
@@ -212,7 +202,7 @@ const RequestList: React.FC = () => {
           </div>
           <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
             <span className="items-center -mt-3 text-sm truncate sm:mt-0">
-              {intl.formatMessage(messages.resultsperpage, {
+              {intl.formatMessage(globalMessages.resultsperpage, {
                 pageSize: (
                   <select
                     id="pageSize"
@@ -247,7 +237,7 @@ const RequestList: React.FC = () => {
                   .then(() => window.scrollTo(0, 0))
               }
             >
-              {intl.formatMessage(messages.previous)}
+              {intl.formatMessage(globalMessages.previous)}
             </Button>
             <Button
               disabled={!hasNextPage}
@@ -259,7 +249,7 @@ const RequestList: React.FC = () => {
                   .then(() => window.scrollTo(0, 0))
               }
             >
-              {intl.formatMessage(messages.next)}
+              {intl.formatMessage(globalMessages.next)}
             </Button>
           </div>
         </nav>