fixed a bug,added clear history feature
This commit is contained in:
parent
339b2bd33a
commit
63c54f2b05
3 changed files with 56 additions and 38 deletions
|
|
@ -10,6 +10,14 @@ 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");
|
||||
}
|
||||
}
|
||||
/*TODO : Currently fetching the data for tv and movie one by one based on the id stored in local storage. */
|
||||
useEffect(() => {
|
||||
const res = async () => {
|
||||
|
|
@ -29,59 +37,66 @@ export default function Collection({}) {
|
|||
});
|
||||
})
|
||||
}
|
||||
const tvIds = JSON.parse(localStorage.getItem("userWatched")).tv
|
||||
const tvIds = JSON.parse(localStorage.getItem("userWatched")) ? JSON.parse(localStorage.getItem("userWatched")).tv : ""
|
||||
for (let i in tvIds) {
|
||||
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,
|
||||
year: 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'
|
||||
});
|
||||
})
|
||||
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,
|
||||
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)
|
||||
} else {
|
||||
setDataLoaded(true)
|
||||
changeDataStatus(true)
|
||||
}
|
||||
}
|
||||
res();
|
||||
}
|
||||
,
|
||||
[]
|
||||
[data]
|
||||
)
|
||||
;
|
||||
return (
|
||||
<div className={"relative"}>
|
||||
{dataLoaded ? (
|
||||
<section
|
||||
className={
|
||||
'mb-6 md:mb-10'
|
||||
}>
|
||||
<Heading title={"Continue Watching"} href={""} isHomePage media_type={"all"}
|
||||
iscontinue_watching={true}/>
|
||||
!dataEmpty ?
|
||||
<section
|
||||
className={
|
||||
' w-[100%] gap-5 overflow-x-scroll p-5 '
|
||||
'mb-6 md:mb-10'
|
||||
}>
|
||||
<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}
|
||||
year={data.year}
|
||||
src={data.poster_link}/>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Heading title={"Continue Watching"} clearHistoryFunction={clear} href={""} isHomePage
|
||||
media_type={"all"}
|
||||
iscontinue_watching={true}/>
|
||||
<section
|
||||
className={
|
||||
' w-[100%] gap-5 overflow-x-scroll p-5 '
|
||||
}>
|
||||
<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}
|
||||
year={data.year}
|
||||
src={data.poster_link}/>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
: ""
|
||||
) : <Loading/>}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
|
||||
export default function Heading({
|
||||
href,
|
||||
isHomePage,
|
||||
isTrending, // TODO: Do we need this here?
|
||||
media_type,
|
||||
clearHistoryFunction,
|
||||
iscontinue_watching,
|
||||
title,
|
||||
}) {
|
||||
|
|
@ -26,9 +28,10 @@ export default function Heading({
|
|||
<h2 className='section-title'>{title}</h2>
|
||||
)}
|
||||
{iscontinue_watching &&
|
||||
<a className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
|
||||
Clear history
|
||||
</a>
|
||||
<div onClick={clearHistoryFunction}
|
||||
className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
|
||||
Clear history
|
||||
</div>
|
||||
}
|
||||
{href && <Link href={href} as={href} passHref>
|
||||
<a className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const Movies = () => {
|
|||
} else {
|
||||
if (id || tmdb)
|
||||
localStorage.setItem("userWatched", JSON.stringify({
|
||||
movies: [id ? id : tmdb], tv: [[]]
|
||||
movies: [id ? id : tmdb], tv: []
|
||||
}))
|
||||
}
|
||||
}, [id, tmdb]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue