feat(frontend/api): tv request modal (no status. only request)

src/components/Common/Button/index.tsx

@@ -25,7 +25,7 @@ const Button: React.FC<ButtonProps> = ({
   switch (buttonType) {
     case 'primary':
       buttonStyle.push(
-        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700'
+        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 disabled:opacity-50'
       );
       break;
     case 'danger':

src/components/Common/Modal/index.tsx

@@ -1,16 +1,18 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Button, { ButtonType } from '../Button';
 import { useTransition, animated } from 'react-spring';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import LoadingSpinner from '../LoadingSpinner';
+import useClickOutside from '../../../hooks/useClickOutside';
 
 interface ModalProps {
   title?: string;
-  onCancel?: (e: MouseEvent<HTMLElement>) => void;
+  onCancel?: (e?: MouseEvent<HTMLElement>) => void;
   onOk?: (e: MouseEvent<HTMLButtonElement>) => void;
   cancelText?: string;
   okText?: string;
+  okDisabled?: boolean;
   cancelButtonType?: ButtonType;
   okButtonType?: ButtonType;
   visible?: boolean;
@@ -26,6 +28,7 @@ const Modal: React.FC<ModalProps> = ({
   onOk,
   cancelText,
   okText,
+  okDisabled = false,
   cancelButtonType,
   okButtonType,
   children,
@@ -35,11 +38,17 @@ const Modal: React.FC<ModalProps> = ({
   iconSvg,
   loading = false,
 }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  useClickOutside(modalRef, () => {
+    typeof onCancel === 'function' && backgroundClickable
+      ? onCancel()
+      : undefined;
+  });
   useLockBodyScroll(!!visible, disableScrollLock);
   const transitions = useTransition(visible, null, {
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
+    from: { opacity: 0, backdropFilter: 'blur(0px)' },
+    enter: { opacity: 1, backdropFilter: 'blur(3px)' },
+    leave: { opacity: 0, backdropFilter: 'blur(0px)' },
     config: { tension: 500, velocity: 40, friction: 60 },
   });
   const containerTransitions = useTransition(visible && !loading, null, {
@@ -68,15 +77,10 @@ const Modal: React.FC<ModalProps> = ({
               className="fixed top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
               style={props}
               key={key}
-              onClick={
-                typeof onCancel === 'function' && backgroundClickable
-                  ? onCancel
-                  : undefined
-              }
               onKeyDown={(e) => {
                 if (e.key === 'Escape') {
                   typeof onCancel === 'function' && backgroundClickable
-                    ? onCancel
+                    ? onCancel()
                     : undefined;
                 }
               }}
@@ -84,7 +88,10 @@ const Modal: React.FC<ModalProps> = ({
               {loadingTransitions.map(
                 ({ props, item, key }) =>
                   item && (
-                    <animated.div style={props} key={key}>
+                    <animated.div
+                      style={{ ...props, position: 'absolute' }}
+                      key={key}
+                    >
                       <LoadingSpinner />
                     </animated.div>
                   )
@@ -94,13 +101,14 @@ const Modal: React.FC<ModalProps> = ({
                   item && (
                     <animated.div
                       style={props}
-                      className="inline-block align-bottom bg-cool-gray-700 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"
+                      className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6"
                       role="dialog"
                       aria-modal="true"
                       aria-labelledby="modal-headline"
                       key={key}
+                      ref={modalRef}
                     >
-                      <div className="sm:flex sm:items-start">
+                      <div className="sm:flex sm:items-center">
                         {iconSvg && (
                           <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-cool-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
                             {iconSvg}
@@ -115,22 +123,23 @@ const Modal: React.FC<ModalProps> = ({
                               {title}
                             </h3>
                           )}
-                          {children && (
-                            <div className="mt-2">
-                              <p className="text-sm leading-5 text-cool-gray-300">
-                                {children}
-                              </p>
-                            </div>
-                          )}
                         </div>
                       </div>
+                      {children && (
+                        <div className="mt-4">
+                          <p className="text-sm leading-5 text-cool-gray-300">
+                            {children}
+                          </p>
+                        </div>
+                      )}
                       {(onCancel || onOk) && (
-                        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                        <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
                           {typeof onOk === 'function' && (
                             <Button
                               buttonType={okType}
                               onClick={onOk}
                               className="ml-3"
+                              disabled={okDisabled}
                             >
                               {okText ? okText : 'Ok'}
                             </Button>
@@ -139,7 +148,7 @@ const Modal: React.FC<ModalProps> = ({
                             <Button
                               buttonType={cancelType}
                               onClick={onCancel}
-                              className="px-4"
+                              className="ml-3 sm:ml-0 sm:px-4"
                             >
                               {cancelText ? cancelText : 'Cancel'}
                             </Button>

src/components/RequestModal/TvRequestModal.tsx

@@ -0,0 +1,258 @@
+import React, { useState } from 'react';
+import Modal from '../Common/Modal';
+import { useUser } from '../../hooks/useUser';
+import { Permission } from '../../../server/lib/permissions';
+import { defineMessages, useIntl } from 'react-intl';
+import { MediaRequest } from '../../../server/entity/MediaRequest';
+import useSWR from 'swr';
+import { useToasts } from 'react-toast-notifications';
+import axios from 'axios';
+import type { MediaStatus } from '../../../server/constants/media';
+import { TvDetails, SeasonWithEpisodes } from '../../../server/models/Tv';
+
+const messages = defineMessages({
+  requestadmin: 'Your request will be immediately approved.',
+  cancelrequest:
+    'This will remove your request. Are you sure you want to continue?',
+});
+
+interface RequestModalProps {
+  request?: MediaRequest;
+  tmdbId: number;
+  visible?: boolean;
+  onCancel?: () => void;
+  onComplete?: (newStatus: MediaStatus) => void;
+  onUpdating?: (isUpdating: boolean) => void;
+}
+
+const TvRequestModal: React.FC<RequestModalProps> = ({
+  visible,
+  onCancel,
+  onComplete,
+  request,
+  tmdbId,
+  onUpdating,
+}) => {
+  const { addToast } = useToasts();
+  const { data, error } = useSWR<TvDetails>(
+    visible ? `/api/v1/tv/${tmdbId}` : null
+  );
+  const [selectedSeasons, setSelectedSeasons] = useState<number[]>([]);
+  const intl = useIntl();
+  const { hasPermission } = useUser();
+
+  const sendRequest = async () => {
+    if (selectedSeasons.length === 0) {
+      return;
+    }
+    if (onUpdating) {
+      onUpdating(true);
+    }
+    const response = await axios.post<MediaRequest>('/api/v1/request', {
+      mediaId: data?.id,
+      tvdbId: data?.externalIds.tvdbId,
+      mediaType: 'tv',
+      seasons: selectedSeasons,
+    });
+
+    if (response.data) {
+      if (onComplete) {
+        onComplete(response.data.media.status);
+      }
+      addToast(
+        <span>
+          <strong>{data?.name}</strong> succesfully requested!
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+      if (onUpdating) {
+        onUpdating(false);
+      }
+    }
+  };
+
+  const isSelectedSeason = (seasonNumber: number): boolean => {
+    return selectedSeasons.includes(seasonNumber);
+  };
+
+  const toggleSeason = (seasonNumber: number): void => {
+    if (selectedSeasons.includes(seasonNumber)) {
+      setSelectedSeasons((seasons) =>
+        seasons.filter((sn) => sn !== seasonNumber)
+      );
+    } else {
+      setSelectedSeasons((seasons) => [...seasons, seasonNumber]);
+    }
+  };
+
+  const toggleAllSeasons = (): void => {
+    if (
+      data &&
+      selectedSeasons.length >= 0 &&
+      selectedSeasons.length <
+        data?.seasons.filter((season) => season.seasonNumber !== 0).length
+    ) {
+      setSelectedSeasons(
+        data.seasons
+          .filter((season) => season.seasonNumber !== 0)
+          .map((season) => season.seasonNumber)
+      );
+    } else {
+      setSelectedSeasons([]);
+    }
+  };
+
+  const isAllSeasons = (): boolean => {
+    if (!data) {
+      return false;
+    }
+    return (
+      selectedSeasons.length ===
+      data.seasons.filter((season) => season.seasonNumber !== 0).length
+    );
+  };
+
+  const text = hasPermission(Permission.MANAGE_REQUESTS)
+    ? intl.formatMessage(messages.requestadmin)
+    : undefined;
+
+  return (
+    <Modal
+      visible={visible}
+      loading={!data && !error}
+      backgroundClickable
+      onCancel={onCancel}
+      onOk={() => sendRequest()}
+      title={`Request ${data?.name}`}
+      okText={
+        selectedSeasons.length === 0
+          ? 'Select a season'
+          : `Request ${selectedSeasons.length} seasons`
+      }
+      okDisabled={selectedSeasons.length === 0}
+      okButtonType="primary"
+      iconSvg={
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+      }
+    >
+      <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">
+              <table className="min-w-full">
+                <thead>
+                  <tr>
+                    <th className="px-4 py-3 bg-cool-gray-500 w-16">
+                      <span
+                        role="checkbox"
+                        tabIndex={0}
+                        aria-checked={isAllSeasons()}
+                        onClick={() => toggleAllSeasons()}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === 'Space') {
+                            toggleAllSeasons();
+                          }
+                        }}
+                        className="group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className={`${
+                            isAllSeasons() ? 'bg-indigo-500' : 'bg-gray-800'
+                          } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                        ></span>
+                        <span
+                          aria-hidden="true"
+                          className={`${
+                            isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
+                          } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                        ></span>
+                      </span>
+                    </th>
+                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                      Season
+                    </th>
+                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                      # Of Episodes
+                    </th>
+                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                      Status
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-cool-gray-600 divide-y">
+                  {data?.seasons
+                    .filter((season) => season.seasonNumber !== 0)
+                    .map((season) => (
+                      <tr key={`season-${season.id}`}>
+                        <td className="px-4 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-100">
+                          <span
+                            role="checkbox"
+                            tabIndex={0}
+                            aria-checked={isSelectedSeason(season.seasonNumber)}
+                            onClick={() => toggleSeason(season.seasonNumber)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter' || e.key === 'Space') {
+                                toggleSeason(season.seasonNumber);
+                              }
+                            }}
+                            className="group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className={`${
+                                isSelectedSeason(season.seasonNumber)
+                                  ? 'bg-indigo-500'
+                                  : 'bg-gray-800'
+                              } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                            ></span>
+                            <span
+                              aria-hidden="true"
+                              className={`${
+                                isSelectedSeason(season.seasonNumber)
+                                  ? 'translate-x-5'
+                                  : 'translate-x-0'
+                              } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                            ></span>
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-100">
+                          {season.seasonNumber === 0
+                            ? 'Extras'
+                            : `Season ${season.seasonNumber}`}
+                        </td>
+                        <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-200">
+                          {season.episodeCount}
+                        </td>
+                        <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-200">
+                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-400 text-green-800">
+                            Available
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p className="mt-4">{text}</p>
+    </Modal>
+  );
+};
+
+export default TvRequestModal;

src/components/RequestModal/index.tsx

@@ -3,6 +3,7 @@ import useSWR from 'swr';
 import MovieRequestModal from './MovieRequestModal';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { MediaStatus } from '../../../server/constants/media';
+import TvRequestModal from './TvRequestModal';
 
 interface RequestModalProps {
   requestId?: number;
@@ -29,7 +30,16 @@ const RequestModal: React.FC<RequestModalProps> = ({
     requestId ? `/api/v1/request/${requestId}` : null
   );
   if (type === 'tv') {
-    return null;
+    return (
+      <TvRequestModal
+        onComplete={onComplete}
+        onCancel={onCancel}
+        visible={show}
+        request={data}
+        tmdbId={tmdbId}
+        onUpdating={onUpdating}
+      />
+    );
   }
 
   return (