import React, {useContext, useState} from 'react'; import ImageUploader from "react-images-upload"; import {Button, CircularProgress} from "@material-ui/core"; import {GLOBAL_CONSTANTS} from "./GlobalConstants"; import FormButtons from "./FormButtons"; import {BackendContext} from "./App"; const FindImage: React.FunctionComponent = () => { const [pictureDataUrl, setPictureDataUrl] = useState(''); const [name, setName] = useState(); const [message, setMessage] = useState(); const [loading, setLoading] = useState(); const [backend] = useContext(BackendContext); const handleImageChange = (picture:File[], pictureDataUrl: string[]) => { setPictureDataUrl(pictureDataUrl[0]); setLoading(false) resetMessage(); }; const resetMessage = () => { setName(undefined); setLoading(false) setMessage(undefined); }; const findImage = () => { resetMessage(); setLoading(true) if(pictureDataUrl) { fetch(GLOBAL_CONSTANTS.get(backend)?.FIND_IMAGE as string, { method: 'POST', body: pictureDataUrl.split('base64,')[1], }) .then(response => response.json()) .then(result => { setLoading(false) if(result.person_name) { setName(result.person_name); } else { setMessage(result.message); } }) .catch(error => { setLoading(false) console.error('Error:', error); }); } }; return (
{name &&
Hi, {name}
} {message &&
{message}
} {loading && }
); }; export default FindImage;