feat(frontend): added more localized strings

src/components/RequestModal/MovieRequestModal.tsx

@@ -19,6 +19,16 @@ const messages = defineMessages({
     'Your request will be immediately approved. Do you wish to continue?',
   cancelrequest:
     'This will remove your request. Are you sure you want to continue?',
+  requestSuccess: '<strong>{title}</strong> successfully requested!',
+  requestCancel: 'Request for <strong>{title}</strong> cancelled',
+  requesttitle: 'Request {title}',
+  close: 'Close',
+  cancel: 'Cancel Request',
+  cancelling: 'Cancelling...',
+  pendingrequest: 'Pending request for {title}',
+  requesting: 'Requesting...',
+  request: 'Request',
+  requestfrom: 'There is currently a pending request from {username}',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -62,7 +72,12 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       }
       addToast(
         <span>
-          <strong>{data?.title}</strong> succesfully requested!
+          {intl.formatMessage(messages.requestSuccess, {
+            title: data?.title,
+            strong: function strong(msg) {
+              return <strong>{msg}</strong>;
+            },
+          })}
         </span>,
         { appearance: 'success', autoDismiss: true }
       );
@@ -84,7 +99,12 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       }
       addToast(
         <span>
-          <strong>{data?.title}</strong> request cancelled!
+          {intl.formatMessage(messages.cancelrequest, {
+            title: data?.title,
+            strong: function strong(msg) {
+              return <strong>{msg}</strong>;
+            },
+          })}
         </span>,
         { appearance: 'success', autoDismiss: true }
       );
@@ -109,15 +129,22 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         onCancel={onCancel}
         onOk={isOwner ? () => cancelRequest() : undefined}
         okDisabled={isUpdating}
-        title={`Pending request for ${data?.title}`}
-        okText={isUpdating ? 'Cancelling...' : 'Cancel Request'}
+        title={intl.formatMessage(messages.pendingrequest, {
+          title: data?.title,
+        })}
+        okText={
+          isUpdating
+            ? intl.formatMessage(messages.cancelling)
+            : intl.formatMessage(messages.cancel)
+        }
         okButtonType={'danger'}
-        cancelText="Close"
+        cancelText={intl.formatMessage(messages.close)}
         iconSvg={<DownloadIcon className="w-6 h-6" />}
         {...props}
       >
-        There is currently a pending request from{' '}
-        <strong>{activeRequest.requestedBy.username}</strong>.
+        {intl.formatMessage(messages.requestfrom, {
+          username: activeRequest.requestedBy.username,
+        })}
       </Modal>
     );
   }
@@ -129,8 +156,12 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       onCancel={onCancel}
       onOk={sendRequest}
       okDisabled={isUpdating}
-      title={`Request ${data?.title}`}
-      okText={isUpdating ? 'Requesting...' : 'Request'}
+      title={intl.formatMessage(messages.requesttitle)}
+      okText={
+        isUpdating
+          ? intl.formatMessage(messages.requesting)
+          : intl.formatMessage(messages.request)
+      }
       okButtonType={'primary'}
       iconSvg={<DownloadIcon className="w-6 h-6" />}
       {...props}

src/components/RequestModal/TvRequestModal.tsx

@@ -14,11 +14,25 @@ import {
 import { TvDetails, SeasonWithEpisodes } from '../../../server/models/Tv';
 import type SeasonRequest from '../../../server/entity/SeasonRequest';
 import Badge from '../Common/Badge';
+import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
   requestadmin: 'Your request will be immediately approved.',
   cancelrequest:
     'This will remove your request. Are you sure you want to continue?',
+  requestSuccess: '<strong>{title}</strong> successfully requested!',
+  requestCancel: 'Request for <strong>{title}</strong> cancelled',
+  requesttitle: 'Request {title}',
+  requesting: 'Requesting...',
+  requestseasons:
+    'Request {seasonCount} {seasonCount, plural, one {Season} other {Seasons}}',
+  selectseason: 'Select season(s)',
+  season: 'Season',
+  numberofepisodes: '# of Episodes',
+  status: 'Status',
+  seasonnumber: 'Season {number}',
+  extras: 'Extras',
+  notrequested: 'Not Requested',
 });
 
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -61,7 +75,12 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       }
       addToast(
         <span>
-          <strong>{data?.name}</strong> succesfully requested!
+          {intl.formatMessage(messages.requestSuccess, {
+            title: data?.name,
+            strong: function strong(msg) {
+              return <strong>{msg}</strong>;
+            },
+          })}
         </span>,
         { appearance: 'success', autoDismiss: true }
       );
@@ -177,11 +196,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       backgroundClickable
       onCancel={onCancel}
       onOk={() => sendRequest()}
-      title={`Request ${data?.name}`}
+      title={intl.formatMessage(messages.requesttitle, { title: data?.name })}
       okText={
         selectedSeasons.length === 0
-          ? 'Select a season'
-          : `Request ${selectedSeasons.length} seasons`
+          ? intl.formatMessage(messages.selectseason)
+          : intl.formatMessage(messages.requestseasons, {
+              seasonCount: selectedSeasons.length,
+            })
       }
       okDisabled={selectedSeasons.length === 0}
       okButtonType="primary"
@@ -238,13 +259,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                       </span>
                     </th>
                     <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      Season
+                      {intl.formatMessage(messages.season)}
                     </th>
                     <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      # Of Episodes
+                      {intl.formatMessage(messages.numberofepisodes)}
                     </th>
                     <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      Status
+                      {intl.formatMessage(messages.status)}
                     </th>
                   </tr>
                 </thead>
@@ -303,39 +324,55 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-100">
                             {season.seasonNumber === 0
-                              ? 'Extras'
-                              : `Season ${season.seasonNumber}`}
+                              ? intl.formatMessage(messages.extras)
+                              : intl.formatMessage(messages.seasonnumber, {
+                                  number: season.seasonNumber,
+                                })}
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-200">
                             {season.episodeCount}
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-200">
                             {!seasonRequest && !mediaSeason && (
-                              <Badge>Not Requested</Badge>
+                              <Badge>
+                                {intl.formatMessage(messages.notrequested)}
+                              </Badge>
                             )}
                             {!mediaSeason &&
                               seasonRequest?.status ===
                                 MediaRequestStatus.PENDING && (
-                                <Badge badgeType="warning">Pending</Badge>
+                                <Badge badgeType="warning">
+                                  {intl.formatMessage(globalMessages.pending)}
+                                </Badge>
                               )}
                             {!mediaSeason &&
                               seasonRequest?.status ===
                                 MediaRequestStatus.APPROVED && (
-                                <Badge badgeType="danger">Unavailable</Badge>
+                                <Badge badgeType="danger">
+                                  {intl.formatMessage(
+                                    globalMessages.unavailable
+                                  )}
+                                </Badge>
                               )}
                             {!mediaSeason &&
                               seasonRequest?.status ===
                                 MediaRequestStatus.AVAILABLE && (
-                                <Badge badgeType="success">Available</Badge>
+                                <Badge badgeType="success">
+                                  {intl.formatMessage(globalMessages.available)}
+                                </Badge>
                               )}
                             {mediaSeason?.status ===
                               MediaStatus.PARTIALLY_AVAILABLE && (
                               <Badge badgeType="success">
-                                Partially Available
+                                {intl.formatMessage(
+                                  globalMessages.partiallyavailable
+                                )}
                               </Badge>
                             )}
                             {mediaSeason?.status === MediaStatus.AVAILABLE && (
-                              <Badge badgeType="success">Available</Badge>
+                              <Badge badgeType="success">
+                                {intl.formatMessage(globalMessages.available)}
+                              </Badge>
                             )}
                           </td>
                         </tr>