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 { useLocation } from 'react-router-dom';
import { QueryStringToMap } from '../accessor/util'; 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 [state, setState] = useState<GalleryState>({ documents: undefined });
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [loadAll, setLoadAll] = useState(false); const [loadAll, setLoadAll] = useState(false);
const {elementRef, isVisible: isLoadVisible} = useIsElementInViewport<HTMLButtonElement>({});
useEffect(()=>{
if(isLoadVisible && (!loadAll) && (state.documents != undefined)){
loadMore();
}
},[isLoadVisible]);
useEffect(() => { useEffect(() => {
const abortController = new AbortController(); const abortController = new AbortController();
console.log('load first',props.option); console.log('load first',props.option);
@ -71,30 +80,31 @@ export const GalleryInfo = (props: GalleryProp) => {
justifyContent: "center", justifyContent: "center",
textAlign:"center" textAlign:"center"
}}>{state.documents ? state.documents.length : "null"} loaded...</Typography> }}>{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> </Box>
); );
function loadMore() { }
let option = {...props.option}; function loadMore() {
if(state.documents === undefined || state.documents.length === 0){ let option = {...props.option};
console.log("loadall"); console.log(elementRef)
setLoadAll(true); if(state.documents === undefined || state.documents.length === 0){
return; console.log("loadall");
} setLoadAll(true);
const prev_documents = state.documents; return;
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();
} }
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();
} }
} }