merge galleryinfo to gallery and fix ineffient request

src/client/component/galleryinfo.tsx

@@ -1,49 +0,0 @@
-import { Box, Paper, Link, useMediaQuery, Portal, List, ListItem, ListItemIcon, Tooltip, ListItemText } from '@material-ui/core';
-import {useTheme, makeStyles, Theme} from '@material-ui/core/styles';
-import React, { useEffect, useState } from 'react';
-import ContentAccessor,{QueryListOption, Document} from '../accessor/document';
-import {Link as RouterLink} from 'react-router-dom';
-import { LoadingCircle, ContentInfo, NavList, NavItem } from './mod';
-import {toQueryString} from '../accessor/util';
-
-const useStyles = makeStyles((theme:Theme)=>({
-    root:{
-        display:"grid",
-        gridGap: theme.spacing(4),
-    },
-}));
-
-export type GalleryProp = {
-    option?:QueryListOption;
-};
-type GalleryState = {
-    documents:Document[]|undefined;
-}
-
-export const GalleryInfo = (props: GalleryProp)=>{
-    const [state,setState]= useState<GalleryState>({documents:undefined});
-    useEffect(()=>{
-        const load = (async ()=>{
-            console.log("mounted");
-            const c = await ContentAccessor.findList(props.option);
-            //todo : if c is undefined, retry to fetch 3 times. and show error message.
-            setState({documents:c});
-        })
-        load();
-    },[props.option]);
-    const classes = useStyles();
-    const queryString = toQueryString(props.option||{});
-
-    if(state.documents === undefined){
-        return (<LoadingCircle/>);
-    }
-    else{
-        return (<Box className={classes.root}>{
-            state.documents.map(x=>{
-                return (<ContentInfo document={x} key={x.id} 
-                    gallery={`/search?${queryString}`} short/>);
-            })
-            }
-            </Box>);
-    }
-}

src/client/component/mod.ts

@@ -2,5 +2,4 @@ export * from './contentinfo';
 export * from './loading';
 export * from './tagchip';
 export * from './navlist';
-export * from './galleryinfo';
 export * from './headline';

src/client/page/gallery.tsx

@@ -1,9 +1,56 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import { Headline, CommonMenuList } from '../component/mod';
+import { Headline, CommonMenuList,LoadingCircle, ContentInfo, NavList, NavItem } from '../component/mod';
-import {GalleryInfo} from '../component/mod';
+
+import { Box, Paper, Link, useMediaQuery, Portal, List, ListItem, ListItemIcon, Tooltip, ListItemText } from '@material-ui/core';
+import {useTheme, makeStyles, Theme} from '@material-ui/core/styles';
+import ContentAccessor,{QueryListOption, Document} from '../accessor/document';
+import {Link as RouterLink} from 'react-router-dom';
+import {toQueryString} from '../accessor/util';
+
 import {useLocation} from 'react-router-dom';
 import { QueryStringToMap } from '../accessor/util';
 
+const useStyles = makeStyles((theme:Theme)=>({
+    root:{
+        display:"grid",
+        gridGap: theme.spacing(4),
+    },
+}));
+
+export type GalleryProp = {
+    option?:QueryListOption;
+    diff:string;
+};
+type GalleryState = {
+    documents:Document[]|undefined;
+}
+
+export const GalleryInfo = (props: GalleryProp)=>{
+    const [state,setState]= useState<GalleryState>({documents:undefined});
+    useEffect(()=>{
+        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});
+        })
+        load();
+    },[props.diff]);
+    const classes = useStyles();
+    const queryString = toQueryString(props.option||{});
+
+    if(state.documents === undefined){
+        return (<LoadingCircle/>);
+    }
+    else{
+        return (<Box className={classes.root}>{
+            state.documents.map(x=>{
+                return (<ContentInfo document={x} key={x.id} 
+                    gallery={`/search?${queryString}`} short/>);
+        })
+        }
+        </Box>);
+    }
+}
 
 export const Gallery = ()=>{
     const location = useLocation();
@@ -11,6 +58,6 @@ export const Gallery = ()=>{
     const menu_list = CommonMenuList({url:location.search});
     
     return (<Headline menu={menu_list}>
-        <GalleryInfo option={query}></GalleryInfo>
+        <GalleryInfo diff={location.search} option={query}></GalleryInfo>
     </Headline>)
 }