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

merge galleryinfo to gallery and fix ineffient request

Browse Source
This commit is contained in:
monoid 2021-01-17 03:35:53 +09:00
parent 1dfb3c3c49
commit 3fa0b10d75
3 changed files with 51 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/client/component/galleryinfo.tsx
View File

@ -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>);
}
}

1
src/client/component/mod.ts
View File

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

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

@ -1,9 +1,56 @@
import React, { useContext, useEffect } from 'react';
import { Headline, CommonMenuList } from '../component/mod';
import {GalleryInfo} from '../component/mod';
import React, { useContext, useEffect, useState } from 'react';
import { Headline, CommonMenuList,LoadingCircle, ContentInfo, NavList, NavItem } 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>)
}