+
+
+
diff --git a/webUI/react/src/components/MangaGrid.tsx b/webUI/react/src/components/MangaGrid.tsx
new file mode 100644
index 0000000..891397a
--- /dev/null
+++ b/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 = {message !== undefined ? message : 'loading...'}
;
+ } else {
+ mapped = (
+
+ {mangas.map((it) => (
+
+ ))}
+
+ );
+ }
+
+ return mapped;
+}
diff --git a/webUI/react/src/components/TemporaryDrawer.tsx b/webUI/react/src/components/TemporaryDrawer.tsx
index 9a1e4d0..6895d4b 100644
--- a/webUI/react/src/components/TemporaryDrawer.tsx
+++ b/webUI/react/src/components/TemporaryDrawer.tsx
@@ -48,6 +48,14 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
+
+
+
+
+
+
+
+
);
diff --git a/webUI/react/src/screens/MangaList.tsx b/webUI/react/src/screens/MangaList.tsx
index d7d86f4..93ba238 100644
--- a/webUI/react/src/screens/MangaList.tsx
+++ b/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([]);
const [lastPageNum] = useState(1);
@@ -17,17 +16,5 @@ export default function MangaList(props: { popular: boolean }) {
));
}, []);
- if (mangas.length === 0) {
- mapped = wait
;
- } else {
- mapped = (
-
- {mangas.map((it) => (
-
- ))}
-
- );
- }
-
- return mapped;
+ return ;
}
diff --git a/webUI/react/src/screens/Search.tsx b/webUI/react/src/screens/Search.tsx
new file mode 100644
index 0000000..b79f977
--- /dev/null
+++ b/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(false);
+ const [mangas, setMangas] = useState([]);
+ const [message, setMessage] = useState('');
+
+ const textInput = React.createRef();
+
+ function doSearch() {
+ if (textInput.current) {
+ const { value } = textInput.current;
+ if (value === '') { setError(true); } else {
+ setError(false);
+ setMangas([]);
+ setMessage('button pressed');
+ }
+ }
+ }
+
+ const mangaGrid = ;
+
+ return (
+ <>
+
+ {mangaGrid}
+ >
+ );
+}