Skip to content

Commit 73ce24a

Browse files
sctsct
committed
feat(frontend): title detail (movie) initial version
1 parent 4638fae commit 73ce24a

File tree

4 files changed

+328
-22
lines changed

4 files changed

+328
-22
lines changed

‎src/components/MovieDetails/index.tsx‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
import React, { useState } from 'react';
2+
import type { MovieDetails as MovieDetailsType } from '../../../server/models/Movie';
3+
import useSWR from 'swr';
4+
import { useRouter } from 'next/router';
5+
import { useToasts } from 'react-toast-notifications';
6+
import Button from '../Common/Button';
7+
import MovieRequestModal from '../RequestModal/MovieRequestModal';
8+
import type { MediaRequest } from '../../../server/entity/MediaRequest';
9+
import axios from 'axios';
10+
11+
interface MovieDetailsProps {
12+
movie?: MovieDetailsType;
13+
}
14+
15+
enum MediaRequestStatus {
16+
PENDING = 1,
17+
APPROVED,
18+
DECLINED,
19+
AVAILABLE,
20+
}
21+
22+
const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
23+
const router = useRouter();
24+
const { addToast } = useToasts();
25+
const [showRequestModal, setShowRequestModal] = useState(false);
26+
const [showCancelModal, setShowCancelModal] = useState(false);
27+
const { data, error, revalidate } = useSWR<MovieDetailsType>(
28+
`/api/v1/movie/${router.query.movieId}`,
29+
{
30+
initialData: movie,
31+
}
32+
);
33+
34+
const request = async () => {
35+
const response = await axios.post<MediaRequest>('/api/v1/request', {
36+
mediaId: data?.id,
37+
mediaType: 'movie',
38+
});
39+
40+
if (response.data) {
41+
revalidate();
42+
addToast(
43+
<span>
44+
<strong>{data?.title}</strong> succesfully requested!
45+
</span>,
46+
{ appearance: 'success', autoDismiss: true }
47+
);
48+
}
49+
};
50+
51+
const cancelRequest = async () => {
52+
const response = await axios.delete<MediaRequest>(
53+
`/api/v1/request/${data?.request?.id}`
54+
);
55+
56+
if (response.data.id) {
57+
revalidate();
58+
}
59+
};
60+
61+
if (!data && !error) {
62+
return <div>loading!</div>;
63+
}
64+
65+
if (!data) {
66+
return <div>Unknwon?</div>;
67+
}
68+
return (
69+
<div
70+
className="bg-cover -mx-4 -mt-2 px-8 pt-4 "
71+
style={{
72+
height: 493,
73+
backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
74+
}}
75+
>
76+
<MovieRequestModal
77+
type="request"
78+
visible={showRequestModal}
79+
title={data.title}
80+
onCancel={() => setShowRequestModal(false)}
81+
onOk={() => request()}
82+
/>
83+
<MovieRequestModal
84+
type="cancel"
85+
visible={showCancelModal}
86+
title={data.title}
87+
onCancel={() => setShowCancelModal(false)}
88+
onOk={() => cancelRequest()}
89+
/>
90+
<div className="flex flex-col items-center md:flex-row md:items-end pt-4">
91+
<div className="mr-4 flex-shrink-0">
92+
<img
93+
src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
94+
alt=""
95+
className="rounded shadow md:shadow-2xl w-32 md:w-52"
96+
/>
97+
</div>
98+
<div className="text-white flex flex-col mr-4 mt-4 md:mt-0 text-center md:text-left">
99+
<span className="md:text-2xl md:leading-none">
100+
{data.releaseDate.slice(0, 4)}
101+
</span>
102+
<h1 className="text-2xl md:text-4xl">{data.title}</h1>
103+
<span className="text-xs md:text-base mt-1 md:mt-0">
104+
{data.runtime} minutes | {data.genres.map((g) => g.name).join(', ')}
105+
</span>
106+
</div>
107+
<div className="flex-1 flex justify-end mt-4 md:mt-0">
108+
{!data.request && (
109+
<Button
110+
buttonType="primary"
111+
onClick={() => setShowRequestModal(true)}
112+
>
113+
<svg
114+
className="w-4 mr-1"
115+
fill="none"
116+
stroke="currentColor"
117+
viewBox="0 0 24 24"
118+
xmlns="http://www.w3.org/2000/svg"
119+
>
120+
<path
121+
strokeLinecap="round"
122+
strokeLinejoin="round"
123+
strokeWidth={2}
124+
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
125+
/>
126+
</svg>
127+
Request
128+
</Button>
129+
)}
130+
{data.request?.status === MediaRequestStatus.PENDING && (
131+
<Button
132+
buttonType="warning"
133+
onClick={() => setShowCancelModal(true)}
134+
>
135+
<svg
136+
className="w-4 mr-2"
137+
fill="none"
138+
stroke="currentColor"
139+
viewBox="0 0 24 24"
140+
xmlns="http://www.w3.org/2000/svg"
141+
>
142+
<path
143+
strokeLinecap="round"
144+
strokeLinejoin="round"
145+
strokeWidth={2}
146+
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
147+
/>
148+
</svg>
149+
Pending
150+
</Button>
151+
)}
152+
{data.request?.status === MediaRequestStatus.APPROVED && (
153+
<Button buttonType="danger">
154+
<svg
155+
className="w-5 mr-1"
156+
fill="none"
157+
stroke="currentColor"
158+
viewBox="0 0 24 24"
159+
xmlns="http://www.w3.org/2000/svg"
160+
>
161+
<path
162+
strokeLinecap="round"
163+
strokeLinejoin="round"
164+
strokeWidth={2}
165+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
166+
/>
167+
</svg>
168+
Unavailable
169+
</Button>
170+
)}
171+
{data.request?.status === MediaRequestStatus.AVAILABLE && (
172+
<Button buttonType="success">
173+
<svg
174+
className="w-5 mr-1"
175+
fill="none"
176+
stroke="currentColor"
177+
viewBox="0 0 24 24"
178+
xmlns="http://www.w3.org/2000/svg"
179+
>
180+
<path
181+
strokeLinecap="round"
182+
strokeLinejoin="round"
183+
strokeWidth={2}
184+
d="M5 13l4 4L19 7"
185+
/>
186+
</svg>
187+
Available
188+
</Button>
189+
)}
190+
<Button buttonType="danger" className="ml-2">
191+
<svg
192+
className="w-5"
193+
style={{ height: 20 }}
194+
fill="none"
195+
stroke="currentColor"
196+
viewBox="0 0 24 24"
197+
xmlns="http://www.w3.org/2000/svg"
198+
>
199+
<path
200+
strokeLinecap="round"
201+
strokeLinejoin="round"
202+
strokeWidth={2}
203+
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
204+
/>
205+
</svg>
206+
</Button>
207+
<Button buttonType="default" className="ml-2">
208+
<svg
209+
className="w-5"
210+
style={{ height: 20 }}
211+
fill="none"
212+
stroke="currentColor"
213+
viewBox="0 0 24 24"
214+
xmlns="http://www.w3.org/2000/svg"
215+
>
216+
<path
217+
strokeLinecap="round"
218+
strokeLinejoin="round"
219+
strokeWidth={2}
220+
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
221+
/>
222+
<path
223+
strokeLinecap="round"
224+
strokeLinejoin="round"
225+
strokeWidth={2}
226+
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
227+
/>
228+
</svg>
229+
</Button>
230+
</div>
231+
</div>
232+
<div className="flex pt-8 text-white flex-col md:flex-row pb-4">
233+
<div className="flex-1 md:mr-8">
234+
<h2 className="text-xl md:text-2xl">Overview</h2>
235+
<p className="pt-2 text-sm md:text-base">{data.overview}</p>
236+
</div>
237+
<div className="w-full md:w-80 mt-8 md:mt-0">
238+
<div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-700">
239+
<div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
240+
<span className="text-sm">Status</span>
241+
<span className="flex-1 text-right text-cool-gray-400 text-sm">
242+
{data.status}
243+
</span>
244+
</div>
245+
<div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
246+
<span className="text-sm">Revenue</span>
247+
<span className="flex-1 text-right text-cool-gray-400 text-sm">
248+
{data.revenue}
249+
</span>
250+
</div>
251+
<div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
252+
<span className="text-sm">Budget</span>
253+
<span className="flex-1 text-right text-cool-gray-400 text-sm">
254+
{data.budget}
255+
</span>
256+
</div>
257+
<div className="flex px-4 py-2 border-b border-cool-gray-700 last:border-b-0">
258+
<span className="text-sm">Original Language</span>
259+
<span className="flex-1 text-right text-cool-gray-400 text-sm">
260+
{data.originalLanguage}
261+
</span>
262+
</div>
263+
</div>
264+
</div>
265+
</div>
266+
</div>
267+
);
268+
};
269+
270+
export default MovieDetails;

‎src/components/TitleCard/index.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Placeholder from './Placeholder';
1010
import axios from 'axios';
1111
import { MediaRequest } from '../../../server/entity/MediaRequest';
1212
import MovieRequestModal from '../RequestModal/MovieRequestModal';
13+
import Link from 'next/link';
1314

1415
interface TitleCardProps {
1516
id: number;
@@ -208,28 +209,30 @@ const TitleCard: React.FC<TitleCardProps> = ({
208209
</div>
209210
</div>
210211
<div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
211-
<button className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
212-
<svg
213-
className="w-4 mx-auto"
214-
fill="none"
215-
stroke="currentColor"
216-
viewBox="0 0 24 24"
217-
xmlns="http://www.w3.org/2000/svg"
218-
>
219-
<path
220-
strokeLinecap="round"
221-
strokeLinejoin="round"
222-
strokeWidth={2}
223-
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
224-
/>
225-
<path
226-
strokeLinecap="round"
227-
strokeLinejoin="round"
228-
strokeWidth={2}
229-
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
230-
/>
231-
</svg>
232-
</button>
212+
<Link href={`/movie/${id}`}>
213+
<a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
214+
<svg
215+
className="w-4 mx-auto"
216+
fill="none"
217+
stroke="currentColor"
218+
viewBox="0 0 24 24"
219+
xmlns="http://www.w3.org/2000/svg"
220+
>
221+
<path
222+
strokeLinecap="round"
223+
strokeLinejoin="round"
224+
strokeWidth={2}
225+
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
226+
/>
227+
<path
228+
strokeLinecap="round"
229+
strokeLinejoin="round"
230+
strokeWidth={2}
231+
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
232+
/>
233+
</svg>
234+
</a>
235+
</Link>
233236
{!currentStatus && (
234237
<button
235238
onClick={() => setShowRequestModal(true)}

‎src/pages/movie/[movieId].tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { NextPage } from 'next';
3+
import type { MovieDetails as MovieDetailsType } from '../../../server/models/Movie';
4+
import MovieDetails from '../../components/MovieDetails';
5+
import axios from 'axios';
6+
7+
interface MoviePageProps {
8+
movie?: MovieDetailsType;
9+
}
10+
11+
const MoviePage: NextPage<MoviePageProps> = ({ movie }) => {
12+
return <MovieDetails movie={movie} />;
13+
};
14+
15+
MoviePage.getInitialProps = async (ctx) => {
16+
if (ctx.req) {
17+
const response = await axios.get<MovieDetailsType>(
18+
`http://localhost:${process.env.PORT || 3000}/api/v1/movie/${
19+
ctx.query.movieId
20+
}`,
21+
{ headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined }
22+
);
23+
24+
return {
25+
movie: response.data,
26+
};
27+
}
28+
29+
return {};
30+
};
31+
32+
export default MoviePage;

‎tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
},
1313
variants: {
1414
padding: ['first', 'last'],
15+
borderWidth: ['first', 'last'],
1516
},
1617
plugins: [
1718
require('@tailwindcss/ui')({

0 commit comments

Comments
 (0)