Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2024-12-24 15:51:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

implemented infinite scroll

Browse Source
This commit is contained in:
Aria Moradi 2021-01-22 21:11:00 +03:30
parent 2c76ad9b74
commit 0757ea5d0d
7 changed files with 99 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
server/src/main/kotlin/ir/armor/tachidesk/database/dataclass/MangaDataClass.kt
View File

@ -18,3 +18,8 @@ data class MangaDataClass(
val genre: String? = null,
val status: String = MangaStatus.UNKNOWN.name
)
data class PagedMangaListDataClass(
val mangaList: List<MangaDataClass>,
val hasNextPage: Boolean
)

11
server/src/main/kotlin/ir/armor/tachidesk/util/MangaList.kt
View File

@ -2,13 +2,14 @@ package ir.armor.tachidesk.util
import eu.kanade.tachiyomi.source.model.MangasPage
import ir.armor.tachidesk.database.dataclass.MangaDataClass
import ir.armor.tachidesk.database.dataclass.PagedMangaListDataClass
import ir.armor.tachidesk.database.table.MangaStatus
import ir.armor.tachidesk.database.table.MangaTable
import org.jetbrains.exposed.sql.insertAndGetId
import org.jetbrains.exposed.sql.select
import org.jetbrains.exposed.sql.transactions.transaction
fun getMangaList(sourceId: Long, pageNum: Int = 1, popular: Boolean): List<MangaDataClass> {
fun getMangaList(sourceId: Long, pageNum: Int = 1, popular: Boolean): PagedMangaListDataClass {
val source = getHttpSource(sourceId.toLong())
val mangasPage = if (popular) {
source.fetchPopularManga(pageNum).toBlocking().first()
@ -21,9 +22,9 @@ fun getMangaList(sourceId: Long, pageNum: Int = 1, popular: Boolean): List<Manga
return mangasPage.processEntries(sourceId)
}
fun MangasPage.processEntries(sourceId: Long): List<MangaDataClass> {
fun MangasPage.processEntries(sourceId: Long): PagedMangaListDataClass {
val mangasPage = this
return transaction {
val mangaList = transaction {
return@transaction mangasPage.mangas.map { manga ->
var mangaEntry = MangaTable.select { MangaTable.url eq manga.url }.firstOrNull()
var mangaEntityId = if (mangaEntry == null) { // create manga entry
@ -62,4 +63,8 @@ fun MangasPage.processEntries(sourceId: Long): List<MangaDataClass> {
)
}
}
return PagedMangaListDataClass(
mangaList,
mangasPage.hasNextPage
)
}

4
server/src/main/kotlin/ir/armor/tachidesk/util/Search.kt
View File

@ -1,13 +1,13 @@
package ir.armor.tachidesk.util
import ir.armor.tachidesk.database.dataclass.MangaDataClass
import ir.armor.tachidesk.database.dataclass.PagedMangaListDataClass
fun sourceFilters(sourceId: Long) {
val source = getHttpSource(sourceId)
// source.getFilterList().toItems()
}
fun sourceSearch(sourceId: Long, searchTerm: String, pageNum: Int): List<MangaDataClass> {
fun sourceSearch(sourceId: Long, searchTerm: String, pageNum: Int): PagedMangaListDataClass {
val source = getHttpSource(sourceId)
val searchManga = source.fetchSearchManga(pageNum, searchTerm, source.getFilterList()).toBlocking().first()
return searchManga.processEntries(sourceId)

10
webUI/react/src/components/MangaCard.tsx
View File

@ -38,8 +38,10 @@ const useStyles = makeStyles({
interface IProps {
manga: IManga
// eslint-disable-next-line react/no-unused-prop-types, react/require-default-props
// ref?: false | React.MutableRefObject<HTMLInputElement | undefined>
}
export default function MangaCard(props: IProps) {
const MangaCard = React.forwardRef((props: IProps, ref) => {
const {
manga: {
id, title, thumbnailUrl,
@ -49,7 +51,7 @@ export default function MangaCard(props: IProps) {
return (
<Link to={`/manga/${id}/`}>
<Card className={classes.root}>
<Card className={classes.root} ref={ref}>
<CardActionArea>
<div className={classes.wrapper}>
<CardMedia
@ -66,4 +68,6 @@ export default function MangaCard(props: IProps) {
</Card>
</Link>
);
}
});
export default MangaCard;

50
webUI/react/src/components/MangaGrid.tsx
View File

@ -1,26 +1,54 @@
import React from 'react';
import React, { useEffect, useRef } from 'react';
import MangaCard from './MangaCard';
interface IProps{
mangas: IManga[]
message?: string
hasNextPage: boolean
lastPageNum: number
setLastPageNum: (lastPageNum: number) => void
}
export default function MangaGrid(props: IProps) {
const { mangas, message } = props;
const {
mangas, message, hasNextPage, lastPageNum, setLastPageNum,
} = props;
let mapped;
const lastManga = useRef<HTMLInputElement>();
const scrollHandler = () => {
if (lastManga.current) {
const rect = lastManga.current.getBoundingClientRect();
if (((rect.y + rect.height) / window.innerHeight < 2) && hasNextPage) {
setLastPageNum(lastPageNum + 1);
}
}
};
useEffect(() => {
window.addEventListener('scroll', scrollHandler, true);
return () => {
window.removeEventListener('scroll', scrollHandler, true);
};
}, [hasNextPage, mangas]);
if (mangas.length === 0) {
mapped = <h3>{message !== undefined ? message : 'loading...'}</h3>;
mapped = <h3>{message}</h3>;
} else {
mapped = (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
{mangas.map((it) => (
<MangaCard manga={it} />
))}
</div>
);
mapped = mangas.map((it, idx) => {
if (idx === mangas.length - 1) {
return <MangaCard manga={it} ref={lastManga} />;
}
return <MangaCard manga={it} />;
});
}
return mapped;
return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
{mapped}
</div>
);
}
MangaGrid.defaultProps = {
message: 'loading...',
};

25
webUI/react/src/screens/MangaList.tsx
View File

@ -7,7 +7,8 @@ export default function MangaList(props: { popular: boolean }) {
const { sourceId } = useParams<{sourceId: string}>();
const { setTitle } = useContext(NavBarTitle);
const [mangas, setMangas] = useState<IManga[]>([]);
const [lastPageNum] = useState<number>(1);
const [hasNextPage, setHasNextPage] = useState<boolean>(false);
const [lastPageNum, setLastPageNum] = useState<number>(1);
useEffect(() => {
fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}`)
@ -19,10 +20,22 @@ export default function MangaList(props: { popular: boolean }) {
const sourceType = props.popular ? 'popular' : 'latest';
fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/${sourceType}/${lastPageNum}`)
.then((response) => response.json())
.then((data: IManga[]) => setMangas(
data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id })),
));
}, []);
.then((data: { mangaList: IManga[], hasNextPage: boolean }) => {
setMangas([
...mangas,
...data.mangaList.map((it) => ({
title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id,
}))]);
setHasNextPage(data.hasNextPage);
});
}, [lastPageNum]);
return <MangaGrid mangas={mangas} />;
return (
<MangaGrid
mangas={mangas}
hasNextPage={hasNextPage}
lastPageNum={lastPageNum}
setLastPageNum={setLastPageNum}
/>
);
}

28
webUI/react/src/screens/SearchSingle.tsx
View File

@ -22,8 +22,9 @@ export default function SearchSingle() {
const [error, setError] = useState<boolean>(false);
const [mangas, setMangas] = useState<IManga[]>([]);
const [message, setMessage] = useState<string>('');
const [lastPageNum] = useState<number>(1);
const [searchTerm, setSearchTerm] = useState<string>('');
const [hasNextPage, setHasNextPage] = useState<boolean>(false);
const [lastPageNum, setLastPageNum] = useState<number>(1);
const textInput = React.createRef<HTMLInputElement>();
@ -51,13 +52,14 @@ export default function SearchSingle() {
if (searchTerm.length > 0) {
fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/search/${searchTerm}/${lastPageNum}`)
.then((response) => response.json())
.then((data: IManga[]) => {
if (data.length > 0) {
setMangas(
data.map((it) => (
{ title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id }
)),
);
.then((data: { mangaList: IManga[], hasNextPage: boolean }) => {
if (data.mangaList.length > 0) {
setMangas([
...mangas,
...data.mangaList.map((it) => ({
title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id,
}))]);
setHasNextPage(data.hasNextPage);
} else {
setMessage('search qeury returned nothing.');
}
@ -65,7 +67,15 @@ export default function SearchSingle() {
}
}, [searchTerm]);
const mangaGrid = <MangaGrid mangas={mangas} message={message} />;
const mangaGrid = (
<MangaGrid
mangas={mangas}
message={message}
hasNextPage={hasNextPage}
lastPageNum={lastPageNum}
setLastPageNum={setLastPageNum}
/>
);
return (
<>