monoid
/
ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

feat: auto load

This commit is contained in:
monoid 2022-08-31 04:53:12 +09:00
parent 4e77586821
commit 826d3d8b74
1 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/client/page/gallery.tsx
View File

@ -7,6 +7,7 @@ import { toQueryString } from '../accessor/util';
import { useLocation } from 'react-router-dom';
import { QueryStringToMap } from '../accessor/util';
import { useIsElementInViewport } from './reader/reader';
@ -22,6 +23,14 @@ export const GalleryInfo = (props: GalleryProp) => {
const [state, setState] = useState<GalleryState>({ documents: undefined });
const [error, setError] = useState<string | null>(null);
const [loadAll, setLoadAll] = useState(false);
const {elementRef, isVisible: isLoadVisible} = useIsElementInViewport<HTMLButtonElement>({});
useEffect(()=>{
if(isLoadVisible && (!loadAll) && (state.documents != undefined)){
loadMore();
}
},[isLoadVisible]);
useEffect(() => {
const abortController = new AbortController();
console.log('load first',props.option);
@ -71,30 +80,31 @@ export const GalleryInfo = (props: GalleryProp) => {
justifyContent: "center",
textAlign:"center"
}}>{state.documents ? state.documents.length : "null"} loaded...</Typography>
<Button onClick={()=>loadMore()} disabled={loadAll}>{loadAll ? "Load All" : "Load More"}</Button>
<Button onClick={()=>loadMore()} disabled={loadAll} ref={elementRef} >{loadAll ? "Load All" : "Load More"}</Button>
</Box>
);
function loadMore() {
let option = {...props.option};
if(state.documents === undefined || state.documents.length === 0){
console.log("loadall");
setLoadAll(true);
return;
}
const prev_documents = state.documents;
option.cursor = prev_documents[prev_documents.length - 1].id;
console.log("load more", option);
const load = (async () => {
const c = await ContentAccessor.findList(option);
if (c.length === 0) {
setLoadAll(true);
}
else{
setState({ documents: [...prev_documents, ...c] });
}
});
load();
}
function loadMore() {
let option = {...props.option};
console.log(elementRef)
if(state.documents === undefined || state.documents.length === 0){
console.log("loadall");
setLoadAll(true);
return;
}
const prev_documents = state.documents;
option.cursor = prev_documents[prev_documents.length - 1].id;
console.log("load more", option);
const load = (async () => {
const c = await ContentAccessor.findList(option);
if (c.length === 0) {
setLoadAll(true);
}
else{
setState({ documents: [...prev_documents, ...c] });
}
});
load();
}
}