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', flexFlow: 'column',
flexGrow: 1, flexGrow: 1,
padding: theme.spacing(3), padding: theme.spacing(3),
marginTop: theme.spacing(8), marginTop: theme.spacing(6),
}}> }}>
<div style={{ <div style={{
}} ></div> }} ></div>

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

@ -1,67 +1,81 @@
import React, { useContext, useEffect, useState } from 'react'; 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 { Box, Typography, Chip, Pagination, Button } from '@mui/material';
import ContentAccessor,{QueryListOption, Document} from '../accessor/document'; import ContentAccessor, { QueryListOption, Document } from '../accessor/document';
import {toQueryString} from '../accessor/util'; import { toQueryString } from '../accessor/util';
import {useLocation} from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { QueryStringToMap } from '../accessor/util'; import { QueryStringToMap } from '../accessor/util';
export type GalleryProp = { export type GalleryProp = {
option?:QueryListOption; option?: QueryListOption;
diff:string; diff: string;
}; };
type GalleryState = { type GalleryState = {
documents:Document[]|undefined; documents: Document[] | undefined;
} }
export const GalleryInfo = (props: GalleryProp)=>{ export const GalleryInfo = (props: GalleryProp) => {
const [state,setState]= useState<GalleryState>({documents:undefined}); const [state, setState] = useState<GalleryState>({ documents: undefined });
useEffect(()=>{ useEffect(() => {
const abortController = new AbortController(); const abortController = new AbortController();
const load = (async ()=>{ const load = (async () => {
const c = await ContentAccessor.findList(props.option); const c = await ContentAccessor.findList(props.option);
//todo : if c is undefined, retry to fetch 3 times. and show error message. //todo : if c is undefined, retry to fetch 3 times. and show error message.
setState({documents:c}); setState({ documents: c });
}) })
load(); load();
},[props.diff]); }, [props.diff]);
const queryString = toQueryString(props.option??{}); const queryString = toQueryString(props.option ?? {});
if(state.documents === undefined){ if (state.documents === undefined) {
return (<LoadingCircle/>); return (<LoadingCircle />);
} }
else{ else {
return (<Box sx={{ return (
display:'grid'
<Box sx={{
display: 'grid',
gridRowGap: '1rem'
}}> }}>
{props.option !== undefined && props.diff !== "" && <Box> {props.option !== undefined && props.diff !== "" && <Box>
<Typography variant="h6">search for</Typography> <Typography variant="h6">search for</Typography>
{props.option.word !== undefined && <Chip label={"search : "+props.option.word}></Chip>} {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.content_type !== undefined && <Chip label={"type : " + props.option.content_type}></Chip>}
{props.option.allow_tag !== undefined && props.option.allow_tag.map(x=>( {props.option.allow_tag !== undefined && props.option.allow_tag.map(x => (
<TagChip key={x} tagname={decodeURI(x)} label={decodeURI(x)}></TagChip>))} <TagChip key={x} tagname={decodeURI(x)} label={decodeURI(x)}></TagChip>))}
</Box>} </Box>}
{ {
state.documents.map(x=>{ state.documents.map(x => {
return (<ContentInfo document={x} key={x.id} 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 location = useLocation();
const query = QueryStringToMap(location.search); const query = QueryStringToMap(location.search);
const menu_list = CommonMenuList({url:location.search}); const menu_list = CommonMenuList({ url: location.search });
let option: QueryListOption = query; let option: QueryListOption = query;
option.allow_tag = typeof option.allow_tag === "string" ? [option.allow_tag] : option.allow_tag; option.allow_tag = typeof option.allow_tag === "string" ? [option.allow_tag] : option.allow_tag;
option.limit = typeof query['limit'] === "string" ? parseInt(query['limit']) : undefined; option.limit = typeof query['limit'] === "string" ? parseInt(query['limit']) : undefined;
return (<Headline menu={menu_list}> return (<Headline menu={menu_list}>
<GalleryInfo diff={location.search} option={query}></GalleryInfo> <GalleryInfo diff={location.search} option={query}></GalleryInfo>
</Headline>) </Headline>)
} }