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",
 | 
			
		||||
    "version": "0.0.1",
 | 
			
		||||
    "description": "client of ionian",
 | 
			
		||||
    "scripts": {
 | 
			
		||||
        "build:watch": "ts-node build.ts"
 | 
			
		||||
    },
 | 
			
		||||
    "dependencies": {
 | 
			
		||||
        "@emotion/react": "^11.9.0",
 | 
			
		||||
        "@emotion/styled": "^11.8.1",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -18,8 +18,10 @@ type GalleryState = {
 | 
			
		|||
 | 
			
		||||
export const GalleryInfo = (props: GalleryProp) => {
 | 
			
		||||
    const [state, setState] = useState<GalleryState>({ documents: undefined });
 | 
			
		||||
    const [loadAll, setLoadAll] = useState(false);
 | 
			
		||||
    useEffect(() => {
 | 
			
		||||
        const abortController = new AbortController();
 | 
			
		||||
        console.log('load first',props.option);
 | 
			
		||||
        const load = (async () => {
 | 
			
		||||
            const c = await ContentAccessor.findList(props.option);
 | 
			
		||||
            //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 />);
 | 
			
		||||
                    })
 | 
			
		||||
                }
 | 
			
		||||
                <Button onClick={()=>loadMore()}>Load More</Button>
 | 
			
		||||
                <Button onClick={()=>loadMore()} disabled={loadAll}>{loadAll ? "Load All" : "Load More"}</Button>
 | 
			
		||||
            </Box>
 | 
			
		||||
        );
 | 
			
		||||
        function loadMore() {
 | 
			
		||||
| 
						 | 
				
			
			@ -61,7 +63,12 @@ export const GalleryInfo = (props: GalleryProp) => {
 | 
			
		|||
            console.log("load more", option);
 | 
			
		||||
            const load = (async () => {
 | 
			
		||||
                const c = await ContentAccessor.findList(option);
 | 
			
		||||
                setState({ documents: [...state.documents, ...c] });
 | 
			
		||||
                if (c.length === 0) {
 | 
			
		||||
                    setLoadAll(true);
 | 
			
		||||
                }
 | 
			
		||||
                else{
 | 
			
		||||
                    setState({ documents: [...state.documents, ...c] });
 | 
			
		||||
                }
 | 
			
		||||
            });
 | 
			
		||||
            load();
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue