Skip to content

Commit dac7bc0

Browse files
author
Endo
committed
fix DetailModalProfile and DetailModal
1 parent b2b5a0c commit dac7bc0

3 files changed

Lines changed: 58 additions & 40 deletions

File tree

‎src/components/DetailModal.tsx‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@ import QualityChip from "./QualityChip";
2424
import { formatMinuteToReadable, getRandomNumber } from "src/utils/common";
2525
import SimilarVideoCard from "./SimilarVideoCard";
2626
import { useDetailModal } from "src/providers/DetailModalProvider";
27-
import {
28-
useGetAppendedVideosQuery,
29-
useGetSimilarVideosQuery,
30-
} from "src/store/slices/discover";
27+
import { useGetSimilarVideosQuery } from "src/store/slices/discover";
3128
import { MEDIA_TYPE } from "src/types/Common";
3229
import VideoJSPlayer from "./watch/VideoJSPlayer";
3330

@@ -47,14 +44,10 @@ const Transition = forwardRef(function Transition(
4744
// }
4845

4946
export default function DetailModal() {
50-
const { detailType, setDetailType } = useDetailModal();
51-
const { data: detail } = useGetAppendedVideosQuery(
52-
{ mediaType: detailType.mediaType, id: detailType.id ?? 0 },
53-
{ skip: !detailType.id }
54-
);
47+
const { detail, setDetailType } = useDetailModal();
5548
const { data: similarVideos } = useGetSimilarVideosQuery(
56-
{ mediaType: detailType.mediaType, id: detailType.id ?? 0 },
57-
{ skip: !detailType.id }
49+
{ mediaType: detail.mediaType ?? MEDIA_TYPE.Movie, id: detail.id ?? 0 },
50+
{ skip: !detail.id }
5851
);
5952
const playerRef = useRef<Player | null>(null);
6053
const [muted, setMuted] = useState(true);
@@ -71,14 +64,14 @@ export default function DetailModal() {
7164
}
7265
}, []);
7366

74-
if (detailType.id) {
67+
if (detail.mediaDetail) {
7568
return (
7669
<Dialog
77-
id="detail_dialog"
7870
fullWidth
7971
scroll="body"
8072
maxWidth="md"
8173
open={!!detail}
74+
id="detail_dialog"
8275
TransitionComponent={Transition}
8376
>
8477
<DialogContent sx={{ p: 0, bgcolor: "#181818" }}>
@@ -110,7 +103,8 @@ export default function DetailModal() {
110103
{
111104
type: "video/youtube",
112105
src: `https://www.youtube.com/watch?v=${
113-
detail?.videos.results[0]?.key || "L3oOldViIgY"
106+
detail.mediaDetail?.videos.results[0]?.key ||
107+
"L3oOldViIgY"
114108
}`,
115109
},
116110
],
@@ -148,7 +142,7 @@ export default function DetailModal() {
148142
/>
149143
<IconButton
150144
onClick={() => {
151-
setDetailType({ mediaType: MEDIA_TYPE.Movie, id: null });
145+
setDetailType({ mediaType: undefined, id: undefined });
152146
}}
153147
sx={{
154148
top: 15,
@@ -176,7 +170,7 @@ export default function DetailModal() {
176170
}}
177171
>
178172
<MaxLineTypography variant="h4" maxLine={1} sx={{ mb: 2 }}>
179-
{detail?.title}
173+
{detail.mediaDetail?.title}
180174
</MaxLineTypography>
181175
<Stack direction="row" spacing={2} sx={{ mb: 3 }}>
182176
<PlayButton sx={{ color: "black", py: 0 }} />
@@ -209,7 +203,7 @@ export default function DetailModal() {
209203
sx={{ color: "success.main" }}
210204
>{`${getRandomNumber(100)}% Match`}</Typography>
211205
<Typography variant="body2">
212-
{detail?.release_date.substring(0, 4)}
206+
{detail.mediaDetail?.release_date.substring(0, 4)}
213207
</Typography>
214208
<AgeLimitChip label={`${getRandomNumber(20)}+`} />
215209
<Typography variant="subtitle2">{`${formatMinuteToReadable(
@@ -223,17 +217,17 @@ export default function DetailModal() {
223217
variant="body1"
224218
sx={{ mt: 2 }}
225219
>
226-
{detail?.overview}
220+
{detail.mediaDetail?.overview}
227221
</MaxLineTypography>
228222
</Grid>
229223
<Grid item xs={12} sm={6} md={4}>
230224
<Typography variant="body2" sx={{ my: 1 }}>
231-
{`Genres : ${detail?.genres
225+
{`Genres : ${detail.mediaDetail?.genres
232226
.map((g) => g.name)
233227
.join(", ")}`}
234228
</Typography>
235229
<Typography variant="body2" sx={{ my: 1 }}>
236-
{`Available in : ${detail?.spoken_languages
230+
{`Available in : ${detail.mediaDetail?.spoken_languages
237231
.map((l) => l.name)
238232
.join(", ")}`}
239233
</Typography>

‎src/constant/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,9 @@ export const COMMON_TITLES: CustomGenre[] = [
2020

2121
export const YOUTUBE_URL = "https://www.youtube.com/watch?v=";
2222
export const APP_BAR_HEIGHT = 70;
23+
24+
export const INITIAL_DETAIL_STATE = {
25+
id: undefined,
26+
mediaType: undefined,
27+
mediaDetail: undefined,
28+
};

‎src/providers/DetailModalProvider.tsx‎

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import { ReactNode, useEffect, useState } from "react";
1+
import { ReactNode, useEffect, useState, useCallback } from "react";
22
import { useLocation } from "react-router-dom";
3+
4+
import { INITIAL_DETAIL_STATE } from "src/constant";
35
import createSafeContext from "src/lib/createSafeContext";
6+
import { useLazyGetAppendedVideosQuery } from "src/store/slices/discover";
47
import { MEDIA_TYPE } from "src/types/Common";
8+
import { MovieDetail } from "src/types/Movie";
59

10+
interface DetailType {
11+
id?: number;
12+
mediaType?: MEDIA_TYPE;
13+
}
614
export interface DetailModalConsumerProps {
7-
detailType: {
8-
mediaType: MEDIA_TYPE;
9-
id: number | null;
10-
};
11-
setDetailType: ({
12-
mediaType,
13-
id,
14-
}: {
15-
mediaType: MEDIA_TYPE;
16-
id: number | null;
17-
}) => void;
15+
detail: { mediaDetail?: MovieDetail } & DetailType;
16+
setDetailType: (newDetailType: DetailType) => void;
1817
}
1918

2019
export const [useDetailModal, Provider] =
@@ -25,16 +24,35 @@ export default function DetailModalProvider({
2524
}: {
2625
children: ReactNode;
2726
}) {
28-
const [detailType, setDetailType] = useState<{
29-
mediaType: MEDIA_TYPE;
30-
id: number | null;
31-
}>({ mediaType: MEDIA_TYPE.Movie, id: null });
3227
const location = useLocation();
28+
const [detail, setDetail] = useState<
29+
{ mediaDetail?: MovieDetail } & DetailType
30+
>(INITIAL_DETAIL_STATE);
31+
32+
const [getAppendedVideos] = useLazyGetAppendedVideosQuery();
33+
34+
const handleChangeDetail = useCallback(
35+
async (newDetailType: { mediaType?: MEDIA_TYPE; id?: number }) => {
36+
if (!!newDetailType.id && newDetailType.mediaType) {
37+
const response = await getAppendedVideos({
38+
mediaType: newDetailType.mediaType,
39+
id: newDetailType.id as number,
40+
}).unwrap();
41+
setDetail({ ...newDetailType, mediaDetail: response });
42+
} else {
43+
setDetail(INITIAL_DETAIL_STATE);
44+
}
45+
},
46+
[]
47+
);
3348

3449
useEffect(() => {
35-
setDetailType({ mediaType: MEDIA_TYPE.Movie, id: null });
36-
// eslint-disable-next-line react-hooks/exhaustive-deps
37-
}, [location.pathname]);
50+
setDetail(INITIAL_DETAIL_STATE);
51+
}, [location.pathname, setDetail]);
3852

39-
return <Provider value={{ setDetailType, detailType }}>{children}</Provider>;
53+
return (
54+
<Provider value={{ detail, setDetailType: handleChangeDetail }}>
55+
{children}
56+
</Provider>
57+
);
4058
}

0 commit comments

Comments
 (0)