Aria Moradi
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
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}
|
|
</>
|
|
);
|
|
}
|