load more cursor

src/client/component/headline.tsx

@@ -200,7 +200,7 @@ export const Headline = (prop: {
             flexFlow: 'column',
             flexGrow: 1,
             padding: theme.spacing(3),
-            marginTop: theme.spacing(8),
+            marginTop: theme.spacing(6),
         }}>
             <div style={{
             }} ></div>

src/client/page/gallery.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Headline, CommonMenuList, LoadingCircle, ContentInfo, NavList, NavItem, TagChip } from '../component/mod';
 
-import { Box, Typography, Chip, Pagination } from '@mui/material';
+import { Box, Typography, Chip, Pagination, Button } from '@mui/material';
 import ContentAccessor, { QueryListOption, Document } from '../accessor/document';
 import { toQueryString } from '../accessor/util';
 
@@ -33,8 +33,11 @@ export const GalleryInfo = (props: GalleryProp)=>{
         return (<LoadingCircle />);
     }
     else {
-        return (<Box sx={{
+        return (
-            display:'grid'
+
+            <Box sx={{
+                display: 'grid',
+                gridRowGap: '1rem'
             }}>
                 {props.option !== undefined && props.diff !== "" && <Box>
                     <Typography variant="h6">search for</Typography>
@@ -49,7 +52,19 @@ export const GalleryInfo = (props: GalleryProp)=>{
                             gallery={`/search?${queryString}`} short />);
                     })
                 }
-        </Box>);
+                <Button onClick={()=>loadMore()}>Load More</Button>
+            </Box>
+        );
+        function loadMore() {
+            let option = {...props.option};
+            option.cursor = state.documents[state.documents.length - 1].id;
+            console.log("load more", option);
+            const load = (async () => {
+                const c = await ContentAccessor.findList(option);
+                setState({ documents: [...state.documents, ...c] });
+            });
+            load();
+        }
     }
 }
 
@@ -62,6 +77,5 @@ export const Gallery = ()=>{
     option.limit = typeof query['limit'] === "string" ? parseInt(query['limit']) : undefined;
     return (<Headline menu={menu_list}>
         <GalleryInfo diff={location.search} option={query}></GalleryInfo>
-        
     </Headline>)
 }