fix(frontend): status badge Unavailable renamed to Requested

closes #374

src/components/MovieDetails/index.tsx

@@ -23,7 +23,6 @@ import {
   MediaRequestStatus,
 } from '../../../server/constants/media';
 import RequestModal from '../RequestModal';
-import Badge from '../Common/Badge';
 import ButtonWithDropdown from '../Common/ButtonWithDropdown';
 import axios from 'axios';
 import SlideOver from '../Common/SlideOver';
@@ -36,9 +35,9 @@ import RTAudRotten from '../../assets/rt_aud_rotten.svg';
 import type { RTRating } from '../../../server/api/rottentomatoes';
 import Error from '../../pages/_error';
 import Head from 'next/head';
-import globalMessages from '../../i18n/globalMessages';
 import ExternalLinkBlock from '../ExternalLinkBlock';
 import { sortCrewPriority } from '../../utils/creditHelpers';
+import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
   releasedate: 'Release Date',
@@ -217,21 +216,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
           <div className="mb-2">
-            {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
-              <Badge badgeType="success">
-                {intl.formatMessage(globalMessages.available)}
-              </Badge>
-            )}
-            {data.mediaInfo?.status === MediaStatus.PROCESSING && (
-              <Badge badgeType="danger">
-                {intl.formatMessage(globalMessages.unavailable)}
-              </Badge>
-            )}
-            {data.mediaInfo?.status === MediaStatus.PENDING && (
-              <Badge badgeType="warning">
-                {intl.formatMessage(globalMessages.pending)}
-              </Badge>
-            )}
+            <StatusBadge status={data.mediaInfo?.status} />
           </div>
           <h1 className="text-2xl lg:text-4xl">
             {data.title}{' '}

src/components/RequestModal/TvRequestModal.tsx

@@ -223,13 +223,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
       }
     >
       <div className="flex flex-col">
-        <div className="-mx-4 sm:mx-0 overflow-auto max-h-96">
-          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-            <div className="shadow overflow-hidden sm:rounded-lg">
+        <div className="-mx-4 overflow-auto sm:mx-0 max-h-96">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <div className="overflow-hidden shadow sm:rounded-lg">
               <table className="min-w-full">
                 <thead>
                   <tr>
-                    <th className="px-4 py-3 bg-gray-500 w-16">
+                    <th className="w-16 px-4 py-3 bg-gray-500">
                       <span
                         role="checkbox"
                         tabIndex={0}
@@ -240,7 +240,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                             toggleAllSeasons();
                           }
                         }}
-                        className="group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none"
+                        className="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none"
                       >
                         <span
                           aria-hidden="true"
@@ -256,13 +256,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                         ></span>
                       </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">
+                    <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
                       {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">
+                    <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
                       {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">
+                    <th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
                       {intl.formatMessage(messages.status)}
                     </th>
                   </tr>
@@ -279,7 +279,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                       );
                       return (
                         <tr key={`season-${season.id}`}>
-                          <td className="px-4 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-100">
+                          <td className="px-4 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
                             <span
                               role="checkbox"
                               tabIndex={0}
@@ -320,17 +320,17 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                               ></span>
                             </span>
                           </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-100">
+                          <td className="px-6 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
                             {season.seasonNumber === 0
                               ? 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">
+                          <td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
                             {season.episodeCount}
                           </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-200">
+                          <td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
                             {!seasonRequest && !mediaSeason && (
                               <Badge>
                                 {intl.formatMessage(messages.notrequested)}
@@ -346,10 +346,8 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                             {!mediaSeason &&
                               seasonRequest?.status ===
                                 MediaRequestStatus.APPROVED && (
-                                <Badge badgeType="danger">
-                                  {intl.formatMessage(
-                                    globalMessages.unavailable
-                                  )}
+                                <Badge badgeType="primary">
+                                  {intl.formatMessage(globalMessages.requested)}
                                 </Badge>
                               )}
                             {!mediaSeason &&

src/components/StatusBadge/index.tsx

@@ -5,36 +5,40 @@ import { useIntl } from 'react-intl';
 import globalMessages from '../../i18n/globalMessages';
 
 interface StatusBadgeProps {
-  status: MediaStatus;
+  status?: MediaStatus;
 }
 
 const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
   const intl = useIntl();
 
-  return (
-    <>
-      {status === MediaStatus.AVAILABLE && (
+  switch (status) {
+    case MediaStatus.AVAILABLE:
+      return (
         <Badge badgeType="success">
           {intl.formatMessage(globalMessages.available)}
         </Badge>
-      )}
-      {status === MediaStatus.PARTIALLY_AVAILABLE && (
+      );
+    case MediaStatus.PARTIALLY_AVAILABLE:
+      return (
         <Badge badgeType="success">
           {intl.formatMessage(globalMessages.partiallyavailable)}
         </Badge>
-      )}
-      {status === MediaStatus.PROCESSING && (
-        <Badge badgeType="danger">
-          {intl.formatMessage(globalMessages.unavailable)}
+      );
+    case MediaStatus.PROCESSING:
+      return (
+        <Badge badgeType="primary">
+          {intl.formatMessage(globalMessages.requested)}
         </Badge>
-      )}
-      {status === MediaStatus.PENDING && (
+      );
+    case MediaStatus.PENDING:
+      return (
         <Badge badgeType="warning">
           {intl.formatMessage(globalMessages.pending)}
         </Badge>
-      )}
-    </>
-  );
+      );
+    default:
+      return null;
+  }
 };
 
 export default StatusBadge;

src/components/TvDetails/index.tsx

@@ -19,7 +19,6 @@ import { useUser, Permission } from '../../hooks/useUser';
 import { TvDetails as TvDetailsType } from '../../../server/models/Tv';
 import { MediaStatus } from '../../../server/constants/media';
 import RequestModal from '../RequestModal';
-import Badge from '../Common/Badge';
 import ButtonWithDropdown from '../Common/ButtonWithDropdown';
 import axios from 'axios';
 import SlideOver from '../Common/SlideOver';
@@ -32,11 +31,11 @@ import RTAudFresh from '../../assets/rt_aud_fresh.svg';
 import RTAudRotten from '../../assets/rt_aud_rotten.svg';
 import type { RTRating } from '../../../server/api/rottentomatoes';
 import Head from 'next/head';
-import globalMessages from '../../i18n/globalMessages';
 import { ANIME_KEYWORD_ID } from '../../../server/api/themoviedb';
 import ExternalLinkBlock from '../ExternalLinkBlock';
 import { sortCrewPriority } from '../../utils/creditHelpers';
 import { Crew } from '../../../server/models/common';
+import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
   firstAirDate: 'First Air Date',
@@ -237,26 +236,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
           <div className="mb-2">
-            {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
-              <Badge badgeType="success">
-                {intl.formatMessage(globalMessages.available)}
-              </Badge>
-            )}
-            {data.mediaInfo?.status === MediaStatus.PARTIALLY_AVAILABLE && (
-              <Badge badgeType="success">
-                {intl.formatMessage(globalMessages.partiallyavailable)}
-              </Badge>
-            )}
-            {data.mediaInfo?.status === MediaStatus.PROCESSING && (
-              <Badge badgeType="danger">
-                {intl.formatMessage(globalMessages.unavailable)}
-              </Badge>
-            )}
-            {data.mediaInfo?.status === MediaStatus.PENDING && (
-              <Badge badgeType="warning">
-                {intl.formatMessage(globalMessages.pending)}
-              </Badge>
-            )}
+            <StatusBadge status={data.mediaInfo?.status} />
           </div>
           <h1 className="text-2xl lg:text-4xl">
             <span>{data.name}</span>

src/i18n/globalMessages.ts

@@ -5,6 +5,7 @@ const globalMessages = defineMessages({
   partiallyavailable: 'Partially Available',
   processing: 'Processing',
   unavailable: 'Unavailable',
+  requested: 'Requested',
   pending: 'Pending',
   declined: 'Declined',
   approved: 'Approved',

src/i18n/locale/en.json

@@ -380,6 +380,7 @@
   "i18n.partiallyavailable": "Partially Available",
   "i18n.pending": "Pending",
   "i18n.processing": "Processing…",
+  "i18n.requested": "Requested",
   "i18n.tvshows": "Series",
   "i18n.unavailable": "Unavailable",
   "pages.internalServerError": "{statusCode} - Internal Server Error",