load more cursor

This commit is contained in:
monoid 2022-04-28 00:25:15 +09:00
parent 1eba3e43e7
commit dd99cb30f9
2 changed files with 52 additions and 38 deletions

View File

@ -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>

View File

@ -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={{
display:'grid'
return (
<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>)
}