feat: show error msg

src/client/page/gallery.tsx

@@ -8,6 +8,8 @@ import { toQueryString } from '../accessor/util';
 import { useLocation } from 'react-router-dom';
 import { QueryStringToMap } from '../accessor/util';
 
+
+
 export type GalleryProp = {
     option?: QueryListOption;
     diff: string;
@@ -18,26 +20,35 @@ type GalleryState = {
 
 export const GalleryInfo = (props: GalleryProp) => {
     const [state, setState] = useState<GalleryState>({ documents: undefined });
+    const [error, setError] = useState<string | null>(null);
     const [loadAll, setLoadAll] = useState(false);
     useEffect(() => {
         const abortController = new AbortController();
         console.log('load first',props.option);
         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 });
-            setLoadAll(c.length == 0);
-        })
+            try{
+                const c = await ContentAccessor.findList(props.option);
+                //todo : if c is undefined, retry to fetch 3 times. and show error message.
+                setState({ documents: c });
+                setLoadAll(c.length == 0);
+            }
+            catch(e){
+                if(e instanceof Error){
+                    setError(e.message);
+                }
+                else{
+                    setError("unknown error");
+                }
+            }
+        });
         load();
     }, [props.diff]);
     const queryString = toQueryString(props.option ?? {});
-
-    if (state.documents === undefined) {
+    if (state.documents === undefined && error == null) {
         return (<LoadingCircle />);
     }
     else {
         return (
-
             <Box sx={{
                 display: 'grid',
                 gridRowGap: '1rem'
@@ -50,15 +61,16 @@ export const GalleryInfo = (props: GalleryProp) => {
                         <TagChip key={x} tagname={decodeURIComponent(x)} label={decodeURIComponent(x)}></TagChip>))}
                 </Box>}
                 {
-                    state.documents.map(x => {
+                    state.documents && state.documents.map(x => {
                         return (<ContentInfo document={x} key={x.id}
                             gallery={`/search?${queryString}`} short />);
                     })
                 }
+                {(error && <Typography variant="h5">Error : {error}</Typography>)}
                 <Typography variant="body1" sx={{
                     justifyContent: "center",
                     textAlign:"center"
-                }}>{state.documents.length} loaded...</Typography>
+                }}>{state.documents ? state.documents.length : "null"} loaded...</Typography>
                 <Button onClick={()=>loadMore()} disabled={loadAll}>{loadAll ? "Load All" : "Load More"}</Button>
             </Box>
         );