handle search shortcuts (#116)

* code cleanup

* fix some issues

* handle search keyboard shortcuts

src/components/ExtensionSearch.tsx

@@ -1,56 +0,0 @@
-/*
- * Copyright (C) Contributors to the Suwayomi project
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-import React, { useState, useRef } from 'react';
-import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, Input } from '@mui/material';
-import CancelIcon from '@mui/icons-material/Cancel';
-import { useQueryParam, StringParam } from 'use-query-params';
-
-export default function LibrarySearch() {
-    const [query, setQuery] = useQueryParam('query', StringParam);
-    const [searchOpen, setSearchOpen] = useState(!!query);
-    const inputRef = useRef<HTMLInputElement>();
-
-    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-        setQuery(e.target.value === '' ? undefined : e.target.value);
-    }
-    const cancelSearch = () => {
-        setQuery(null);
-        setSearchOpen(false);
-    };
-    const handleBlur = () => {
-        if (!query) setSearchOpen(false);
-    };
-    const openSearch = () => {
-        setSearchOpen(true);
-        // Put Focus Action at the end of the Callstack so Input actually exists on the dom
-        setTimeout(() => {
-            if (inputRef && inputRef.current) inputRef.current.focus();
-        });
-    };
-    return (
-        <>
-            {searchOpen ? (
-                <Input
-                    value={query || ''}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                    inputRef={inputRef}
-                    endAdornment={(
-                        <IconButton onClick={cancelSearch}>
-                            <CancelIcon />
-                        </IconButton>
-                    )}
-                />
-            ) : (
-                <SearchIcon onClick={openSearch} />
-            )}
-        </>
-    );
-}

src/components/chapter/ChapterList.tsx

@@ -18,7 +18,7 @@ import ChapterOptions from 'components/chapter/ChapterOptions';
 import ChapterCard from 'components/chapter/ChapterCard';
 import useLocalStorage from 'util/useLocalStorage';
 
-const List = styled(Virtuoso)(({ theme }) => ({
+const CustomVirtuoso = styled(Virtuoso)(({ theme }) => ({
     listStyle: 'none',
     padding: 0,
     minHeight: '200px',
@@ -221,7 +221,7 @@ export default function ChapterList(props: IProps) {
                     <ChapterOptions options={options} setOptions={setOptions} />
                 </Box>
 
-                <List
+                <CustomVirtuoso
                     style={{ // override Virtuoso default values and set them with class
                         height: 'undefined',
                         // 900 is the md breakpoint in MUI

src/components/library/LibraryMangaGrid.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import MangaGrid, { IMangaGridProps } from 'components/MangaGrid';
-import useLibraryOptions, { NullAndUndefined } from 'util/useLibraryOptions';
+import useLibraryOptions from 'util/useLibraryOptions';
 
 const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';
 

src/components/util/AppbarSearch.tsx

@@ -6,17 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
 import { IconButton, Input } from '@mui/material';
 import CancelIcon from '@mui/icons-material/Cancel';
-import useLibraryOptions from '../../util/useLibraryOptions';
+import { useQueryParam, StringParam } from 'use-query-params';
 
-export default function LibrarySearch() {
-    const {
-        query,
-        setQuery,
-    } = useLibraryOptions();
+export default function AppbarSearch() {
+    const [query, setQuery] = useQueryParam('query', StringParam);
     const [searchOpen, setSearchOpen] = useState(!!query);
     const inputRef = React.useRef<HTMLInputElement>();
 
@@ -35,6 +32,22 @@ export default function LibrarySearch() {
             if (inputRef && inputRef.current) inputRef.current.focus();
         });
     };
+
+    const handleSearchShortcut = (e: KeyboardEvent) => {
+        if ((e.code === 'F3') || (e.ctrlKey && e.code === 'KeyF')) {
+            e.preventDefault();
+            openSearch();
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener('keydown', handleSearchShortcut);
+
+        return () => {
+            window.removeEventListener('keydown', handleSearchShortcut);
+        };
+    }, [handleSearchShortcut]);
+
     return (
         <>
             {searchOpen
@@ -52,7 +65,11 @@ export default function LibrarySearch() {
                             </IconButton>
                         )}
                     />
-                ) : <SearchIcon onClick={openSearch} /> }
+                ) : (
+                    <IconButton onClick={openSearch}>
+                        <SearchIcon />
+                    </IconButton>
+                )}
         </>
     );
 }