tachiyomi-extensions-inspector/webUI/react/src/screens/SearchSingle.tsx

import React, { useContext, useEffect, 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 { useParams } from 'react-router-dom';
import MangaGrid from '../components/MangaGrid';
import NavBarTitle from '../context/NavbarTitle';

const useStyles = makeStyles((theme) => ({
    root: {
        TextField: {
            margin: theme.spacing(1),
            width: '25ch',
        },
    },
}));

export default function SearchSingle() {
    const { setTitle } = useContext(NavBarTitle);
    const { sourceId } = useParams<{sourceId: string}>();
    const classes = useStyles();
    const [error, setError] = useState<boolean>(false);
    const [mangas, setMangas] = useState<IManga[]>([]);
    const [message, setMessage] = useState<string>('');
    const [lastPageNum] = useState<number>(1);
    const [searchTerm, setSearchTerm] = useState<string>('');

    const textInput = React.createRef<HTMLInputElement>();

    useEffect(() => {
        fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}`)
            .then((response) => response.json())
            .then((data: { name: string }) => setTitle(`Search: ${data.name}`));
    }, []);

    function processInput() {
        if (textInput.current) {
            const { value } = textInput.current;
            if (value === '') {
                setError(true);
                setMessage('Type something to search');
            } else {
                setError(false);
                setSearchTerm(value);
                setMessage('');
            }
        }
    }

    useEffect(() => {
        if (searchTerm.length > 0) {
            fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/search/${searchTerm}/${lastPageNum}`)
                .then((response) => response.json())
                .then((data: IManga[]) => {
                    if (data.length > 0) {
                        setMangas(
                            data.map((it) => (
                                { title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id }
                            )),
                        );
                    } else {
                        setMessage('search qeury returned nothing.');
                    }
                });
        }
    }, [searchTerm]);

    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={() => processInput()}>
                    Primary
                </Button>
            </form>
            {mangaGrid}
        </>
    );
}