From dd99cb30f98c76f95a8ed43f6ae5949d44b7076f Mon Sep 17 00:00:00 2001 From: monoid Date: Thu, 28 Apr 2022 00:25:15 +0900 Subject: [PATCH] load more cursor --- src/client/component/headline.tsx | 2 +- src/client/page/gallery.tsx | 88 ++++++++++++++++++------------- 2 files changed, 52 insertions(+), 38 deletions(-) diff --git a/src/client/component/headline.tsx b/src/client/component/headline.tsx index bb7586d..b742439 100644 --- a/src/client/component/headline.tsx +++ b/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), }}>
diff --git a/src/client/page/gallery.tsx b/src/client/page/gallery.tsx index 52fa2fb..141ef20 100644 --- a/src/client/page/gallery.tsx +++ b/src/client/page/gallery.tsx @@ -1,67 +1,81 @@ import React, { useContext, useEffect, useState } from 'react'; -import { Headline, CommonMenuList,LoadingCircle, ContentInfo, NavList, NavItem, TagChip } from '../component/mod'; +import { Headline, CommonMenuList, LoadingCircle, ContentInfo, NavList, NavItem, TagChip } from '../component/mod'; -import { Box, Typography, Chip, Pagination } from '@mui/material'; -import ContentAccessor,{QueryListOption, Document} from '../accessor/document'; -import {toQueryString} from '../accessor/util'; +import { Box, Typography, Chip, Pagination, Button } from '@mui/material'; +import ContentAccessor, { QueryListOption, Document } from '../accessor/document'; +import { toQueryString } from '../accessor/util'; -import {useLocation} from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { QueryStringToMap } from '../accessor/util'; export type GalleryProp = { - option?:QueryListOption; - diff:string; + option?: QueryListOption; + diff: string; }; type GalleryState = { - documents:Document[]|undefined; + documents: Document[] | undefined; } -export const GalleryInfo = (props: GalleryProp)=>{ - const [state,setState]= useState({documents:undefined}); - useEffect(()=>{ +export const GalleryInfo = (props: GalleryProp) => { + const [state, setState] = useState({ documents: undefined }); + useEffect(() => { const abortController = new AbortController(); - const load = (async ()=>{ + const load = (async () => { const c = await ContentAccessor.findList(props.option); //todo : if c is undefined, retry to fetch 3 times. and show error message. - setState({documents:c}); + setState({ documents: c }); }) load(); - },[props.diff]); - const queryString = toQueryString(props.option??{}); + }, [props.diff]); + const queryString = toQueryString(props.option ?? {}); - if(state.documents === undefined){ - return (); + if (state.documents === undefined) { + return (); } - else{ - return ( - {props.option !== undefined && props.diff !== "" && - search for - {props.option.word !== undefined && } - {props.option.content_type !== undefined && } - {props.option.allow_tag !== undefined && props.option.allow_tag.map(x=>( - ))} - } - { - state.documents.map(x=>{ - return (); - }) + else { + return ( + + + {props.option !== undefined && props.diff !== "" && + search for + {props.option.word !== undefined && } + {props.option.content_type !== undefined && } + {props.option.allow_tag !== undefined && props.option.allow_tag.map(x => ( + ))} + } + { + state.documents.map(x => { + return (); + }) + } + + + ); + 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(); } - ); } } -export const Gallery = ()=>{ +export const Gallery = () => { const location = useLocation(); const query = QueryStringToMap(location.search); - const menu_list = CommonMenuList({url:location.search}); + const menu_list = CommonMenuList({ url: location.search }); let option: QueryListOption = query; option.allow_tag = typeof option.allow_tag === "string" ? [option.allow_tag] : option.allow_tag; option.limit = typeof query['limit'] === "string" ? parseInt(query['limit']) : undefined; return ( - ) } \ No newline at end of file