monoid/ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

load more cursor

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/component/headline.tsx
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>

72
src/client/page/gallery.tsx
View File

@ -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<GalleryState>({documents:undefined});
useEffect(()=>{
export const GalleryInfo = (props: GalleryProp) => {
const [state, setState] = useState<GalleryState>({ 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 (<LoadingCircle/>);
if (state.documents === undefined) {
return (<LoadingCircle />);
}
else{
return (<Box sx={{
display:'grid'
else {
return (
<Box sx={{
display: 'grid',
gridRowGap: '1rem'
}}>
{props.option !== undefined && props.diff !== "" && <Box>
<Typography variant="h6">search for</Typography>
{props.option.word !== undefined && <Chip label={"search : "+props.option.word}></Chip>}
{props.option.content_type !== undefined && <Chip label={"type : "+props.option.content_type}></Chip>}
{props.option.allow_tag !== undefined && props.option.allow_tag.map(x=>(
{props.option.word !== undefined && <Chip label={"search : " + props.option.word}></Chip>}
{props.option.content_type !== undefined && <Chip label={"type : " + props.option.content_type}></Chip>}
{props.option.allow_tag !== undefined && props.option.allow_tag.map(x => (
<TagChip key={x} tagname={decodeURI(x)} label={decodeURI(x)}></TagChip>))}
</Box>}
{
state.documents.map(x=>{
state.documents.map(x => {
return (<ContentInfo document={x} key={x.id}
gallery={`/search?${queryString}`} short/>);
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();
}
}
}
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 (<Headline menu={menu_list}>
<GalleryInfo diff={location.search} option={query}></GalleryInfo>
</Headline>)
}