manga search UI done

server/src/main/kotlin/ir/armor/tachidesk/Main.kt

@@ -36,10 +36,13 @@ class Main {
             androidCompat.startApp(App())
 
 
-
             val app = Javalin.create { config ->
-    //                config.addSinglePageRoot("/", "")
+                try {
+                    this::class.java.classLoader.getResource("/react/index.html")
                     config.addStaticFiles("/react")
+                } catch (e: RuntimeException) {
+                    println("Warning: react build files are missing.")
+                }
             }.start(4567)
 
 

webUI/react/src/App.tsx

@@ -9,6 +9,7 @@ import Extensions from './screens/Extensions';
 import MangaList from './screens/MangaList';
 import Manga from './screens/Manga';
 import Reader from './screens/Reader';
+import Search from './screens/Search';
 
 export default function App() {
     return (
@@ -16,6 +17,9 @@ export default function App() {
             <NavBar />
 
             <Switch>
+                <Route path="/search">
+                    <Search />
+                </Route>
                 <Route path="/extensions">
                     <Extensions />
                 </Route>

webUI/react/src/components/MangaGrid.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MangaCard from './MangaCard';
+
+interface IProps{
+    mangas: IManga[]
+    message?: string
+}
+
+export default function MangaGrid(props: IProps) {
+    const { mangas, message } = props;
+    let mapped;
+
+    if (mangas.length === 0) {
+        mapped = <h3>{message !== undefined ? message : 'loading...'}</h3>;
+    } else {
+        mapped = (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
+                {mangas.map((it) => (
+                    <MangaCard manga={it} />
+                ))}
+            </div>
+        );
+    }
+
+    return mapped;
+}

webUI/react/src/components/TemporaryDrawer.tsx

@@ -48,6 +48,14 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
                         <ListItemText primary="Sources" />
                     </ListItem>
                 </Link>
+                <Link to="/search" style={{ color: 'inherit', textDecoration: 'none' }}>
+                    <ListItem button key="Search">
+                        <ListItemIcon>
+                            <InboxIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Global Search" />
+                    </ListItem>
+                </Link>
             </List>
         </div>
     );

webUI/react/src/screens/MangaList.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import MangaCard from '../components/MangaCard';
+import MangaGrid from '../components/MangaGrid';
 
 export default function MangaList(props: { popular: boolean }) {
     const { sourceId } = useParams<{sourceId: string}>();
-    let mapped;
     const [mangas, setMangas] = useState<IManga[]>([]);
     const [lastPageNum] = useState<number>(1);
 
@@ -17,17 +16,5 @@ export default function MangaList(props: { popular: boolean }) {
             ));
     }, []);
 
-    if (mangas.length === 0) {
-        mapped = <h3>wait</h3>;
-    } else {
-        mapped = (
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
-                {mangas.map((it) => (
-                    <MangaCard manga={it} />
-                ))}
-            </div>
-        );
-    }
-
-    return mapped;
+    return <MangaGrid mangas={mangas} />;
 }

webUI/react/src/screens/Search.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import MangaGrid from '../components/MangaGrid';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        TextField: {
+            margin: theme.spacing(1),
+            width: '25ch',
+        },
+    },
+}));
+
+export default function Search() {
+    const classes = useStyles();
+    const [error, setError] = useState<boolean>(false);
+    const [mangas, setMangas] = useState<IManga[]>([]);
+    const [message, setMessage] = useState<string>('');
+
+    const textInput = React.createRef<HTMLInputElement>();
+
+    function doSearch() {
+        if (textInput.current) {
+            const { value } = textInput.current;
+            if (value === '') { setError(true); } else {
+                setError(false);
+                setMangas([]);
+                setMessage('button pressed');
+            }
+        }
+    }
+
+    const mangaGrid = <MangaGrid mangas={mangas} message={message} />;
+
+    return (
+        <>
+            <form className={classes.root} noValidate autoComplete="off">
+                <TextField inputRef={textInput} error={error} id="standard-basic" label="Search text.." />
+                <Button variant="contained" color="primary" onClick={() => doSearch()}>
+                    Primary
+                </Button>
+            </form>
+            {mangaGrid}
+        </>
+    );
+}