From dd99cb30f98c76f95a8ed43f6ae5949d44b7076f Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
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),
         }}>
             <div style={{
             }} ></div>
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<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'
-        }}>
-            {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=>(
-                    <TagChip key={x} tagname={decodeURI(x)} label={decodeURI(x)}></TagChip>))}
-            </Box>}
-            {
-            state.documents.map(x=>{
-                return (<ContentInfo document={x} key={x.id} 
-                    gallery={`/search?${queryString}`} short/>);
-        })
+    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 => (
+                        <TagChip key={x} tagname={decodeURI(x)} label={decodeURI(x)}></TagChip>))}
+                </Box>}
+                {
+                    state.documents.map(x => {
+                        return (<ContentInfo document={x} key={x.id}
+                            gallery={`/search?${queryString}`} short />);
+                    })
+                }
+                <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();
         }
-        </Box>);
     }
 }
 
-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>)
 }
\ No newline at end of file