137 lines
6.3 KiB
JavaScript
137 lines
6.3 KiB
JavaScript
import {useEffect, useState} from "react";
|
|
import CardContinueWatching from "./CardContinueWatching";
|
|
import {TMDB_IMAGE_ENDPOINT} from "../utils";
|
|
import {useRouter} from "next/router";
|
|
import Heading from "./Heading";
|
|
import Loading from "./Loading";
|
|
|
|
|
|
export default function Collection({}) {
|
|
const [data, setData] = useState([]);
|
|
const router = useRouter();
|
|
const [dataLoaded, setDataLoaded] = useState(false)
|
|
const [dataEmpty, changeDataStatus] = useState(false)
|
|
const clear = () => {
|
|
setData([]);
|
|
changeDataStatus(true);
|
|
if (localStorage) {
|
|
localStorage.removeItem("userWatched");
|
|
}
|
|
}
|
|
const clear_movie = (id, category) => {
|
|
setDataLoaded(false)
|
|
if (localStorage) {
|
|
if (category === "tv") {
|
|
let data = JSON.parse(localStorage.getItem("userWatched")).tv;
|
|
let out = []
|
|
for (let i in data) {
|
|
if (data[i][0] !== id) {
|
|
out.push(data[i])
|
|
}
|
|
}
|
|
let new_data = {movies: JSON.parse(localStorage.getItem("userWatched")).movies, tv: out}
|
|
localStorage.setItem("userWatched", JSON.stringify(new_data));
|
|
} else {
|
|
let data = JSON.parse(localStorage.getItem("userWatched")).movies;
|
|
let out = []
|
|
for (let i in data) {
|
|
if (data[i] !== id) {
|
|
out.push(data[i])
|
|
}
|
|
}
|
|
let new_data = {tv: JSON.parse(localStorage.getItem("userWatched")).tv, movies: out}
|
|
localStorage.setItem("userWatched", JSON.stringify(new_data));
|
|
}
|
|
}
|
|
|
|
}
|
|
/*Note : Currently fetching the data for tv and movie one by one based on the id stored in local storage. */
|
|
useEffect(() => {
|
|
const res = async () => {
|
|
if (localStorage.getItem("userWatched")) {
|
|
if (JSON.parse(localStorage.getItem("userWatched")).movies.length === 0 && JSON.parse(localStorage.getItem("userWatched")).tv.length === 0) {
|
|
changeDataStatus(true)
|
|
setDataLoaded(true)
|
|
} else {
|
|
const movieIds = JSON.parse(localStorage.getItem("userWatched")).movies
|
|
let watchedData = []
|
|
for (let i in movieIds) {
|
|
await fetch(`${router.asPath}api/movie/${movieIds[i]}`, {
|
|
credentials: "include"
|
|
}).then(response => response.json()).then(da => {
|
|
watchedData.push({
|
|
id: movieIds[i],
|
|
name: da.detail.original_title,
|
|
year: da.detail.release_date.split('-')[0],
|
|
poster_link: da.detail.backdrop_path ? `${TMDB_IMAGE_ENDPOINT}/${da.detail.backdrop_path}` : `${TMDB_IMAGE_ENDPOINT}/${da.detail.poster_path}`,
|
|
type: 'movie'
|
|
});
|
|
})
|
|
}
|
|
const tvIds = JSON.parse(localStorage.getItem("userWatched")) ? JSON.parse(localStorage.getItem("userWatched")).tv : ""
|
|
for (let i in tvIds) {
|
|
if (tvIds[i] !== [])
|
|
await fetch(`${router.asPath}api/tv/${tvIds[i][0]}`, {
|
|
credentials: "include"
|
|
}).then(response => response.json()).then(da => {
|
|
watchedData.push({
|
|
id: tvIds[i][0],
|
|
name: da.detail.name + ` S${tvIds[i][1]} E${tvIds[i][2]}`,
|
|
year: da.detail.first_air_date ? da.detail.first_air_date.split("-")[0] : "",
|
|
poster_link: da.detail.backdrop_path ? `${TMDB_IMAGE_ENDPOINT}/${da.detail.backdrop_path}` : `${TMDB_IMAGE_ENDPOINT}/${da.detail.poster_path}`,
|
|
type: 'tv'
|
|
});
|
|
})
|
|
}
|
|
setData(watchedData)
|
|
setDataLoaded(true)
|
|
changeDataStatus(false)
|
|
}
|
|
} else {
|
|
setDataLoaded(true)
|
|
changeDataStatus(true)
|
|
}
|
|
}
|
|
res();
|
|
}
|
|
,
|
|
[dataLoaded]
|
|
)
|
|
;
|
|
return (
|
|
<div className={"relative"}>
|
|
{dataLoaded ? (
|
|
!dataEmpty ?
|
|
<section
|
|
className={
|
|
'mb-6 md:mb-10'
|
|
}>
|
|
<Heading title={"Continue Watching"} clearHistoryFunction={clear} href={""} isHomePage
|
|
media_type={"all"}
|
|
iscontinue_watching={true}/>
|
|
<section
|
|
className={
|
|
' w-[100%] gap-5 overflow-x-scroll pb-2 '
|
|
}>
|
|
<ul className={"flex gap-10 flex-row"}>
|
|
{
|
|
data.map((data, index) => {
|
|
return (<li key={index}>
|
|
<CardContinueWatching category={data.type} id={data.id}
|
|
title={data.name}
|
|
clearHistoryFunction={clear_movie}
|
|
year={data.year}
|
|
src={data.poster_link}/>
|
|
</li>
|
|
)
|
|
})
|
|
}
|
|
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
: ""
|
|
) : <Loading/>}
|
|
</div>
|
|
)
|
|
}
|