feat: load more button disabled if load all
This commit is contained in:
		
							parent
							
								
									0963cdb5c4
								
							
						
					
					
						commit
						f338736775
					
				
					 2 changed files with 12 additions and 2 deletions
				
			
		| 
						 | 
					@ -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",
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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();
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue