API call using Axios

App.jsx

import 'bootstrap/dist/css/bootstrap.min.css';
import { useEffect, useState } from 'react';
import axios from 'axios';
import Alert from 'react-bootstrap/Alert';
import Form from 'react-bootstrap/Form';
import Container from 'react-bootstrap/Container';
import Placeholder from 'react-bootstrap/Placeholder';

function App() {
    // State for search input element
    const [search, setSearch] = useState('');
    // State for poster image src
    const [posterSrc, setPosterSrc] = useState(null);
    // State to track if there's an error when calling API
    const [isError, setIsError] = useState(false);
    // State to track if the API call is still loading
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        // This is called debouncing, Google "Debounce in React"
        let searchTimeout = null;
        if (search != '') {
            searchTimeout = setTimeout(() => {
                // Before we call the API, we do following things
                setPosterSrc(null); // Empty the img src so it won't show anything
                setIsError(false); // Set error state to false
                setIsLoading(true); // Set loading state to true because we're about to do an API call
                axios.request(`http://www.omdbapi.com/?apikey=5deca18a&t=${search}`)
                    .then((response) => {
                        console.log(response);
                        if (response && response.data && response.data.Response !== 'False') {
                            // If there are response from the API and the response is what we expect, set img poster src state
                            setPosterSrc(response.data.Poster);
                        } else {
                            // If the API response from the API is not what we expect, set error state to true
                            setIsError(true);
                        }
                        
                        // Whatever happens, when the API call is done, set loading to false
                        setIsLoading(false);
                    })
                    .catch(() => {
                        // This block will run if there's an error on our API call
                        setIsError(true); // when this happen, set error state to true
                        setIsLoading(false); // and set loading state to false because its not loading anymore
                    });
            }, 500);
        }

        return () => {
            if (searchTimeout) {
                clearTimeout(searchTimeout);
            }
        }
    }, [search]);

    return (
        <Container>
            <Form>
                <Form.Label htmlFor="search-input">Search movie title</Form.Label>
                <Form.Control
                    type="text"
                    id="search-input"
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
            </Form>

            { isLoading &&
                <Placeholder animation="glow" as='div' className="mt-2">
                    <Placeholder style={{ width: '300px', height: '450px' }} />
                </Placeholder> }
            { !isLoading && posterSrc && <img src={posterSrc} alt={search} className="mt-2" /> }
            { !isLoading && isError && <Alert variant='danger' className="mt-2">Movie not found!</Alert> }
        </Container>
    );
}

export default App