mass search (#157)

* mass search

currently cripples server for like 2 mins on use

* works

its slow, really slow
but it don't break the server anymore

* concurrency using p-queue

* remove package.lock + search auto select

* sorting like yomi

* fix yarn.lock

src/components/MangaGrid.tsx

@@ -9,6 +9,8 @@ import React, { useEffect, useRef } from 'react';
 import Grid from '@mui/material/Grid';
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
+import { Typography } from '@mui/material';
+import { Box } from '@mui/system';
 import MangaCard from './MangaCard';
 
 export interface IMangaGridProps{
@@ -20,12 +22,14 @@ export interface IMangaGridProps{
     lastPageNum: number
     setLastPageNum: (lastPageNum: number) => void
     gridLayout?: number | undefined
+    horisontal?: boolean | undefined
+    noFaces?: boolean | undefined
 }
 
 export default function MangaGrid(props: IMangaGridProps) {
     const {
         mangas, isLoading, message, messageExtra,
-        hasNextPage, lastPageNum, setLastPageNum, gridLayout,
+        hasNextPage, lastPageNum, setLastPageNum, gridLayout, horisontal, noFaces,
     } = props;
     let mapped;
     const lastManga = useRef<HTMLDivElement>(null);
@@ -51,7 +55,18 @@ export default function MangaGrid(props: IMangaGridProps) {
                 <LoadingPlaceholder />
             );
         } else {
-            mapped = (
+            mapped = noFaces ? (
+                <Box
+                    sx={{
+                        margin: 'auto',
+                    }}
+                >
+                    <Typography variant="h5">
+                        {message}
+                    </Typography>
+                    {messageExtra}
+                </Box>
+            ) : (
                 <EmptyView message={message!} messageExtra={messageExtra} />
             );
         }
@@ -78,7 +93,22 @@ export default function MangaGrid(props: IMangaGridProps) {
     }
 
     return (
-        <Grid container spacing={1} style={{ margin: 0, width: '100%', padding: '5px' }}>
+        <Grid
+            container
+            spacing={1}
+            style={horisontal ? {
+                margin: 0,
+                width: '100%',
+                padding: '5px',
+                overflowX: 'scroll',
+                display: '-webkit-inline-box',
+                flexWrap: 'nowrap',
+            } : {
+                margin: 0,
+                width: '100%',
+                padding: '5px',
+            }}
+        >
             {mapped}
         </Grid>
     );

src/components/util/AppbarSearch.tsx

@@ -12,7 +12,16 @@ import { IconButton, Input } from '@mui/material';
 import CancelIcon from '@mui/icons-material/Cancel';
 import { useQueryParam, StringParam } from 'use-query-params';
 
-export default function AppbarSearch() {
+interface IProps {
+    autoOpen?: boolean
+}
+
+const defaultProps = {
+    autoOpen: false,
+};
+
+const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
+    const { autoOpen } = props;
     const [query, setQuery] = useQueryParam('query', StringParam);
     const [searchOpen, setSearchOpen] = useState(!!query);
     const inputRef = React.useRef<HTMLInputElement>();
@@ -40,6 +49,12 @@ export default function AppbarSearch() {
         }
     };
 
+    useEffect(() => {
+        if (autoOpen) {
+            openSearch();
+        }
+    }, []);
+
     useEffect(() => {
         window.addEventListener('keydown', handleSearchShortcut);
 
@@ -72,4 +87,8 @@ export default function AppbarSearch() {
                 )}
         </>
     );
-}
+};
+
+AppbarSearch.defaultProps = defaultProps;
+
+export default AppbarSearch;