From 73ce24a37bda3713e8cedc44e1ed065bdbc4ee4f Mon Sep 17 00:00:00 2001 From: sct Date: Wed, 16 Sep 2020 16:14:34 +0000 Subject: [PATCH] feat(frontend): title detail (movie) initial version --- src/components/MovieDetails/index.tsx | 270 ++++++++++++++++++++++++++ src/components/TitleCard/index.tsx | 47 ++--- src/pages/movie/[movieId].tsx | 32 +++ tailwind.config.js | 1 + 4 files changed, 328 insertions(+), 22 deletions(-) create mode 100644 src/components/MovieDetails/index.tsx create mode 100644 src/pages/movie/[movieId].tsx diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx new file mode 100644 index 00000000..5193546e --- /dev/null +++ b/src/components/MovieDetails/index.tsx @@ -0,0 +1,270 @@ +import React, { useState } from 'react'; +import type { MovieDetails as MovieDetailsType } from '../../../server/models/Movie'; +import useSWR from 'swr'; +import { useRouter } from 'next/router'; +import { useToasts } from 'react-toast-notifications'; +import Button from '../Common/Button'; +import MovieRequestModal from '../RequestModal/MovieRequestModal'; +import type { MediaRequest } from '../../../server/entity/MediaRequest'; +import axios from 'axios'; + +interface MovieDetailsProps { + movie?: MovieDetailsType; +} + +enum MediaRequestStatus { + PENDING = 1, + APPROVED, + DECLINED, + AVAILABLE, +} + +const MovieDetails: React.FC = ({ movie }) => { + const router = useRouter(); + const { addToast } = useToasts(); + const [showRequestModal, setShowRequestModal] = useState(false); + const [showCancelModal, setShowCancelModal] = useState(false); + const { data, error, revalidate } = useSWR( + `/api/v1/movie/${router.query.movieId}`, + { + initialData: movie, + } + ); + + const request = async () => { + const response = await axios.post('/api/v1/request', { + mediaId: data?.id, + mediaType: 'movie', + }); + + if (response.data) { + revalidate(); + addToast( + + {data?.title} succesfully requested! + , + { appearance: 'success', autoDismiss: true } + ); + } + }; + + const cancelRequest = async () => { + const response = await axios.delete( + `/api/v1/request/${data?.request?.id}` + ); + + if (response.data.id) { + revalidate(); + } + }; + + if (!data && !error) { + return
loading!
; + } + + if (!data) { + return
Unknwon?
; + } + return ( +
+ setShowRequestModal(false)} + onOk={() => request()} + /> + setShowCancelModal(false)} + onOk={() => cancelRequest()} + /> +
+
+ +
+
+ + {data.releaseDate.slice(0, 4)} + +

{data.title}

+ + {data.runtime} minutes | {data.genres.map((g) => g.name).join(', ')} + +
+
+ {!data.request && ( + + )} + {data.request?.status === MediaRequestStatus.PENDING && ( + + )} + {data.request?.status === MediaRequestStatus.APPROVED && ( + + )} + {data.request?.status === MediaRequestStatus.AVAILABLE && ( + + )} + + +
+
+
+
+

Overview

+

{data.overview}

+
+
+
+
+ Status + + {data.status} + +
+
+ Revenue + + {data.revenue} + +
+
+ Budget + + {data.budget} + +
+
+ Original Language + + {data.originalLanguage} + +
+
+
+
+
+ ); +}; + +export default MovieDetails; diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx index c90fd81f..62ebe340 100644 --- a/src/components/TitleCard/index.tsx +++ b/src/components/TitleCard/index.tsx @@ -10,6 +10,7 @@ import Placeholder from './Placeholder'; import axios from 'axios'; import { MediaRequest } from '../../../server/entity/MediaRequest'; import MovieRequestModal from '../RequestModal/MovieRequestModal'; +import Link from 'next/link'; interface TitleCardProps { id: number; @@ -208,28 +209,30 @@ const TitleCard: React.FC = ({
- + + + + + + + + {!currentStatus && (