manga search UI done

This commit is contained in:
Aria Moradi 2021-01-20 15:26:52 +03:30
parent 48f29edf6c
commit c537c1bf29
6 changed files with 97 additions and 21 deletions

View File

@ -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)
@ -68,12 +71,12 @@ class Main {
app.get("/api/v1/source/:sourceId/popular/:pageNum") { ctx ->
val sourceId = ctx.pathParam("sourceId").toLong()
val pageNum = ctx.pathParam("pageNum").toInt()
ctx.json(getMangaList(sourceId,pageNum,popular = true))
ctx.json(getMangaList(sourceId, pageNum, popular = true))
}
app.get("/api/v1/source/:sourceId/latest/:pageNum") { ctx ->
val sourceId = ctx.pathParam("sourceId").toLong()
val pageNum = ctx.pathParam("pageNum").toInt()
ctx.json(getMangaList(sourceId,pageNum,popular = false))
ctx.json(getMangaList(sourceId, pageNum, popular = false))
}
app.get("/api/v1/manga/:mangaId/") { ctx ->
@ -89,7 +92,7 @@ class Main {
app.get("/api/v1/manga/:mangaId/chapter/:chapterId") { ctx ->
val chapterId = ctx.pathParam("chapterId").toInt()
val mangaId = ctx.pathParam("mangaId").toInt()
ctx.json(getPages(chapterId,mangaId))
ctx.json(getPages(chapterId, mangaId))
}
}

View File

@ -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>

View File

@ -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;
}

View File

@ -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>
);

View File

@ -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} />;
}

View File

@ -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}
</>
);
}