mangamochi/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/loading-state #31

Merged
rov merged 8 commits from feat/loading-state into main 2026-04-05 21:28:30 -03:00
Conversation 0 Commits 8 Files Changed 12 +107 -5
1 changed files with 107 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1fc69c1de1 - Show all commits

112
src/pages/Chapter.tsx
View File

@ -134,6 +134,25 @@ const Chapter = () => {
}
const images = data.data.contentImageKeys;
const previousContentId = data.data.previousContentId;
const nextContentId = data.data.nextContentId;
const goToNextChapter = () => {
if (nextContentId) {
setCurrentPage(1);
setVisibleCount(1);
window.scrollTo({ top: 0 });
navigate(`/manga/${mangaId}/chapter/${nextContentId}`);
}
};
const goToPreviousChapter = () => {
if (previousContentId) {
setCurrentPage(1);
setVisibleCount(1);
window.scrollTo({ top: 0 });
navigate(`/manga/${mangaId}/chapter/${previousContentId}`);
}
};
/** Standard navigation (non-infinite mode) */
const goToNextPage = () => {
@ -180,10 +199,33 @@ const Chapter = () => {
<h1 className="text-sm font-semibold text-foreground">
{data.data.mangaTitle}
</h1>
<p className="text-xs text-muted-foreground">
Chapter {chapterNumber}
<p className="text-xs text-muted-foreground text-center">
{chapterNumber}
</p>
</div>
{previousContentId && (
<Button
variant="ghost"
size="sm"
onClick={goToPreviousChapter}
className="gap-1"
>
<ChevronLeft className="h-4 w-4" />
<span className="hidden sm:inline">Prev</span>
</Button>
)}
{nextContentId && (
<Button
variant="ghost"
size="sm"
onClick={goToNextChapter}
className="gap-1"
>
<span className="hidden sm:inline">Next</span>
<ChevronRight className="h-4 w-4" />
</Button>
)}
</div>
<div className="flex items-center gap-4">
@ -211,7 +253,7 @@ const Chapter = () => {
{data.data.mangaTitle}
</h1>
<p className="text-sm text-muted-foreground">
Chapter {chapterNumber}
{chapterNumber}
</p>
</div>
@ -233,6 +275,36 @@ const Chapter = () => {
{/* LOAD MORE SENTINEL */}
<div ref={loadMoreRef} className="h-10" />
{/* CHAPTER NAVIGATION (infinite scroll mode) */}
{(previousContentId || nextContentId) && (
<div className="flex items-center justify-center gap-3 border-t border-border py-6">
{previousContentId ? (
<Button
onClick={goToPreviousChapter}
variant="outline"
className="gap-2 bg-transparent"
>
<ChevronLeft className="h-4 w-4" />
Previous
</Button>
) : (
<div className="flex-1" />
)}
{nextContentId ? (
<Button
onClick={goToNextChapter}
variant="outline"
className="gap-2 bg-transparent"
>
Next
<ChevronRight className="h-4 w-4" />
</Button>
) : (
<div className="flex-1" />
)}
</div>
)}
</div>
) : (
/* ------------------------------------------------------------------ */
@ -243,8 +315,8 @@ const Chapter = () => {
<img
src={
import.meta.env.VITE_OMV_BASE_URL +
"/" +
images[currentPage - 1] || "/placeholder.svg"
"/" +
images[currentPage - 1] || "/placeholder.svg"
}
alt={`Page ${currentPage}`}
width={1000}
@ -280,6 +352,36 @@ const Chapter = () => {
<ChevronRight className="h-4 w-4" />
</Button>
</div>
{/* CHAPTER NAVIGATION */}
{(previousContentId || nextContentId) && (
<div className="flex items-center justify-center gap-3 border-t border-border pt-4">
{previousContentId ? (
<Button
onClick={goToPreviousChapter}
variant="outline"
className="gap-2 bg-transparent"
>
<ChevronLeft className="h-4 w-4" />
Previous
</Button>
) : (
<div className="flex-1" />
)}
{nextContentId ? (
<Button
onClick={goToNextChapter}
variant="outline"
className="gap-2 bg-transparent"
>
Next
<ChevronRight className="h-4 w-4" />
</Button>
) : (
<div className="flex-1" />
)}
</div>
)}
</div>
</>
)}