feat: load more button disabled if load all

This commit is contained in:
monoid 2022-04-28 13:47:06 +09:00
parent 0963cdb5c4
commit f338736775
2 changed files with 12 additions and 2 deletions

View File

@ -2,6 +2,9 @@
"name": "ionian_client", "name": "ionian_client",
"version": "0.0.1", "version": "0.0.1",
"description": "client of ionian", "description": "client of ionian",
"scripts": {
"build:watch": "ts-node build.ts"
},
"dependencies": { "dependencies": {
"@emotion/react": "^11.9.0", "@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",

View File

@ -18,8 +18,10 @@ type GalleryState = {
export const GalleryInfo = (props: GalleryProp) => { export const GalleryInfo = (props: GalleryProp) => {
const [state, setState] = useState<GalleryState>({ documents: undefined }); const [state, setState] = useState<GalleryState>({ documents: undefined });
const [loadAll, setLoadAll] = useState(false);
useEffect(() => { useEffect(() => {
const abortController = new AbortController(); const abortController = new AbortController();
console.log('load first',props.option);
const load = (async () => { const load = (async () => {
const c = await ContentAccessor.findList(props.option); const c = await ContentAccessor.findList(props.option);
//todo : if c is undefined, retry to fetch 3 times. and show error message. //todo : if c is undefined, retry to fetch 3 times. and show error message.
@ -52,7 +54,7 @@ export const GalleryInfo = (props: GalleryProp) => {
gallery={`/search?${queryString}`} short />); gallery={`/search?${queryString}`} short />);
}) })
} }
<Button onClick={()=>loadMore()}>Load More</Button> <Button onClick={()=>loadMore()} disabled={loadAll}>{loadAll ? "Load All" : "Load More"}</Button>
</Box> </Box>
); );
function loadMore() { function loadMore() {
@ -61,7 +63,12 @@ export const GalleryInfo = (props: GalleryProp) => {
console.log("load more", option); console.log("load more", option);
const load = (async () => { const load = (async () => {
const c = await ContentAccessor.findList(option); const c = await ContentAccessor.findList(option);
setState({ documents: [...state.documents, ...c] }); if (c.length === 0) {
setLoadAll(true);
}
else{
setState({ documents: [...state.documents, ...c] });
}
}); });
load(); load();
} }