feat(frontend): modal component and basic request hookup (#91)

src/components/Common/Button/index.tsx

@@ -1,7 +1,14 @@
 import React, { ButtonHTMLAttributes } from 'react';
 
+export type ButtonType =
+  | 'default'
+  | 'primary'
+  | 'danger'
+  | 'warning'
+  | 'success';
+
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  buttonType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+  buttonType?: ButtonType;
   buttonSize?: 'default' | 'lg' | 'md' | 'sm';
 }
 
@@ -38,7 +45,7 @@ const Button: React.FC<ButtonProps> = ({
       break;
     default:
       buttonStyle.push(
-        'border-gray-300 leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50'
+        'leading-5 font-medium rounded-md text-gray-200 bg-cool-gray-500 hover:bg-cool-gray-400 hover:text-white focus:border-blue-300 focus:shadow-outline-blue active:text-gray-200 active:bg-cool-gray-400'
       );
   }
 

src/components/Common/Modal/index.tsx

@@ -0,0 +1,143 @@
+import React, { MouseEvent, ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+import Button, { ButtonType } from '../Button';
+import { useTransition, animated } from 'react-spring';
+import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
+
+interface ModalProps {
+  title?: string;
+  onCancel?: (e: MouseEvent<HTMLElement>) => void;
+  onOk?: (e: MouseEvent<HTMLButtonElement>) => void;
+  cancelText?: string;
+  okText?: string;
+  cancelButtonType?: ButtonType;
+  okButtonType?: ButtonType;
+  visible?: boolean;
+  disableScrollLock?: boolean;
+  backgroundClickable?: boolean;
+  iconSvg?: ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({
+  title,
+  onCancel,
+  onOk,
+  cancelText,
+  okText,
+  cancelButtonType,
+  okButtonType,
+  children,
+  visible,
+  disableScrollLock,
+  backgroundClickable = true,
+  iconSvg,
+}) => {
+  useLockBodyScroll(!!visible, disableScrollLock);
+  const transitions = useTransition(visible, null, {
+    from: { opacity: 0 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+    config: { tension: 500, velocity: 40, friction: 60 },
+  });
+  const containerTransitions = useTransition(visible, null, {
+    from: { opacity: 0, transform: 'scale(0.5)' },
+    enter: { opacity: 1, transform: 'scale(1)' },
+    leave: { opacity: 0, transform: 'scale(0.5)' },
+    config: { tension: 500, velocity: 40, friction: 60 },
+  });
+
+  const cancelType = cancelButtonType ?? 'default';
+  const okType = okButtonType ?? 'primary';
+
+  return (
+    <>
+      {transitions.map(
+        ({ props, item, key }) =>
+          item &&
+          ReactDOM.createPortal(
+            <animated.div
+              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
+                    : undefined;
+                }
+              }}
+            >
+              {containerTransitions.map(
+                ({ props, item, key }) =>
+                  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"
+                      role="dialog"
+                      aria-modal="true"
+                      aria-labelledby="modal-headline"
+                      key={key}
+                    >
+                      <div className="sm:flex sm:items-start">
+                        {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}
+                          </div>
+                        )}
+                        <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                          {title && (
+                            <h3
+                              className="text-lg leading-6 font-medium text-white"
+                              id="modal-headline"
+                            >
+                              {title}
+                            </h3>
+                          )}
+                          {children && (
+                            <div className="mt-2">
+                              <p className="text-sm leading-5 text-cool-gray-300">
+                                {children}
+                              </p>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                      {(onCancel || onOk) && (
+                        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                          {typeof onOk === 'function' && (
+                            <Button
+                              buttonType={okType}
+                              onClick={onOk}
+                              className="ml-3"
+                            >
+                              {okText ? okText : 'Ok'}
+                            </Button>
+                          )}
+                          {typeof onCancel === 'function' && (
+                            <Button
+                              buttonType={cancelType}
+                              onClick={onCancel}
+                              className="px-4"
+                            >
+                              {cancelText ? cancelText : 'Cancel'}
+                            </Button>
+                          )}
+                        </div>
+                      )}
+                    </animated.div>
+                  )
+              )}
+            </animated.div>,
+            document.body
+          )
+      )}
+    </>
+  );
+};
+
+export default Modal;

src/components/Discover/index.tsx

@@ -1,8 +1,7 @@
-import React, { useRef } from 'react';
-import useSWR, { useSWRInfinite } from 'swr';
+import React from 'react';
+import useSWR from 'swr';
 import type { MovieResult, TvResult } from '../../../server/models/Search';
 import TitleCard from '../TitleCard';
-import useVerticalScroll from '../../hooks/useVerticalScroll';
 
 interface MovieDiscoverResult {
   page: number;
@@ -18,17 +17,6 @@ interface TvDiscoverResult {
   results: TvResult[];
 }
 
-const getKey = (
-  pageIndex: number,
-  previousPageData: MovieDiscoverResult | null
-) => {
-  if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-    return null;
-  }
-
-  return `/api/v1/discover/movies?page=${pageIndex + 1}`;
-};
-
 const Discover: React.FC = () => {
   const { data: movieData, error: movieError } = useSWR<MovieDiscoverResult>(
     '/api/v1/discover/movies'
@@ -47,12 +35,16 @@ const Discover: React.FC = () => {
         </div>
       </div>
       <div
-        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
+        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
         style={{ height: 295 }}
       >
         {movieData?.results.map((title) => (
-          <div key={title.id} className="px-2 inline-block">
+          <div
+            key={title.id}
+            className="first:px-4 last:px-4 px-2 inline-block"
+          >
             <TitleCard
+              id={title.id}
               image={title.posterPath}
               status={title.request?.status}
               summary={title.overview}
@@ -66,7 +58,10 @@ const Discover: React.FC = () => {
         {!movieData &&
           !movieError &&
           [...Array(10)].map((_item, i) => (
-            <div key={`placeholder-${i}`} className="px-2 inline-block">
+            <div
+              key={`placeholder-${i}`}
+              className="first:px-4 last:px-4 px-2 inline-block"
+            >
               <TitleCard.Placeholder />
             </div>
           ))}
@@ -79,12 +74,16 @@ const Discover: React.FC = () => {
         </div>
       </div>
       <div
-        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-2 -mr-4"
+        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4"
         style={{ height: 295 }}
       >
         {tvData?.results.map((title) => (
-          <div key={title.id} className="px-2 inline-block">
+          <div
+            key={title.id}
+            className="first:px-4 last:px-4 px-2 inline-block"
+          >
             <TitleCard
+              id={title.id}
               image={title.posterPath}
               status={title.request?.status}
               summary={title.overview}
@@ -98,7 +97,10 @@ const Discover: React.FC = () => {
         {!tvData &&
           !tvError &&
           [...Array(10)].map((_item, i) => (
-            <div key={`placeholder-${i}`} className="px-2 inline-block">
+            <div
+              key={`placeholder-${i}`}
+              className="first:px-4 last:px-4 px-2 inline-block"
+            >
               <TitleCard.Placeholder />
             </div>
           ))}

src/components/Search/index.tsx

@@ -89,6 +89,7 @@ const Search: React.FC = () => {
             case 'movie':
               titleCard = (
                 <TitleCard
+                  id={title.id}
                   image={title.posterPath}
                   status={title.request?.status}
                   summary={title.overview}
@@ -102,6 +103,7 @@ const Search: React.FC = () => {
             case 'tv':
               titleCard = (
                 <TitleCard
+                  id={title.id}
                   image={title.posterPath}
                   status={title.request?.status}
                   summary={title.overview}

src/components/TitleCard/index.tsx

@@ -6,8 +6,13 @@ import Unavailable from '../../assets/unavailable.svg';
 import { withProperties } from '../../utils/typeHelpers';
 import Transition from '../Transition';
 import Placeholder from './Placeholder';
+import Modal from '../Common/Modal';
+import { useUser, Permission } from '../../hooks/useUser';
+import axios from 'axios';
+import { MediaRequest } from '../../../server/entity/MediaRequest';
 
 interface TitleCardProps {
+  id: number;
   image?: string;
   summary: string;
   year: string;
@@ -25,6 +30,7 @@ enum MediaRequestStatus {
 }
 
 const TitleCard: React.FC<TitleCardProps> = ({
+  id,
   image,
   summary,
   year,
@@ -32,7 +38,21 @@ const TitleCard: React.FC<TitleCardProps> = ({
   status,
   mediaType,
 }) => {
+  const [currentStatus, setCurrentStatus] = useState(status);
+  const { hasPermission } = useUser();
   const [showDetail, setShowDetail] = useState(false);
+  const [showRequestModal, setShowRequestModal] = useState(false);
+
+  const request = async () => {
+    const response = await axios.post<MediaRequest>('/api/v1/request', {
+      mediaId: id,
+      mediaType,
+    });
+
+    if (response.data) {
+      setCurrentStatus(response.data.status);
+    }
+  };
 
   // Just to get the year from the date
   if (year) {
@@ -46,6 +66,34 @@ const TitleCard: React.FC<TitleCardProps> = ({
         height: 270,
       }}
     >
+      <Modal
+        visible={showRequestModal}
+        backgroundClickable
+        onCancel={() => setShowRequestModal(false)}
+        onOk={() => request()}
+        title={`Request ${title}`}
+        okText="Request"
+        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>
+        }
+      >
+        {hasPermission(Permission.MANAGE_REQUESTS)
+          ? 'Your request will be immediately approved. Do you wish to continue?'
+          : undefined}
+      </Modal>
       <div
         className="titleCard"
         style={{
@@ -71,19 +119,19 @@ const TitleCard: React.FC<TitleCardProps> = ({
               right: '-1px',
             }}
           >
-            {status === MediaRequestStatus.AVAILABLE && (
+            {currentStatus === MediaRequestStatus.AVAILABLE && (
               <Available className="rounded-tr-md" />
             )}
-            {status === MediaRequestStatus.PENDING && (
+            {currentStatus === MediaRequestStatus.PENDING && (
               <Requested className="rounded-tr-md" />
             )}
-            {status === MediaRequestStatus.APPROVED && (
+            {currentStatus === MediaRequestStatus.APPROVED && (
               <Unavailable className="rounded-tr-md" />
             )}
           </div>
 
           <Transition
-            show={!image || showDetail}
+            show={!image || showDetail || showRequestModal}
             enter="transition ease-in-out duration-300 transform opacity-0"
             enterFrom="opacity-0"
             enterTo="opacity-100"
@@ -138,7 +186,10 @@ const TitleCard: React.FC<TitleCardProps> = ({
                       />
                     </svg>
                   </button>
-                  <button className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+                  <button
+                    onClick={() => setShowRequestModal(true)}
+                    className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
+                  >
                     <svg
                       className="w-4 mx-auto"
                       fill="none"