fixed a bug,added clear history feature

This commit is contained in:
Rohithk 2023-09-27 20:38:29 +05:30
commit 63c54f2b05
3 changed files with 56 additions and 38 deletions

View file

@ -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>
)

View file

@ -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'>

View file

@ -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]);