CoffeeShopEdit.js

import React, { useEffect, useState} from 'react';
import { Link, useHistory, useParams } from 'react-router-dom';
import { Alert, Button, Container, Form, FormGroup, Input, Label } from 'reactstrap';

const  CoffeeShopEdit =  (props) => {


    const [isLoading,setIsLoading] = useState(true);
    const [isCreate,setIsCreate] = useState(false);
    const [item ,setItem] = useState({});

    const [coffeeShop,setCoffeeShop] = useState([]);
    const [errorMessage,setErrorMessage] = useState("");

    let history = useHistory();
    let { id } = useParams();

    useEffect(()=> {
        setIsCreate(id === 'new');
        const getCoffeeShops =  async () => {
            const coffeeShop = await fetchCoffeeShop();
            setItem(coffeeShop);
            setIsLoading(false);
        };
        getCoffeeShops();
    }, [])


    const fetchCoffeeShop = async () =>
    {
        const response = await props.api.getById(props.match.params.id);
        const coffeeShop = await response.json();
        return coffeeShop;
    };




    // constructor(props) {
    //     super(props);
    //     this.state = {
    //         item: this.emptyItem,
    //         errorMessage: null,
    //         isCreate: false
    //     };
    //     this.handleChange = this.handleChange.bind(this);
    //     this.handleSubmit = this.handleSubmit.bind(this);
    // }

    // async componentDidMount() {
    //     this.state.isCreate = this.props.match.params.id === 'new'; // are we editing or creating?
    //     if (!this.state.isCreate) {
    //         const response = await this.props.api.getById(this.props.match.params.id);
    //         const coffeeShop = await response.json();
    //         this.setState({item: coffeeShop});
    //     }
    // }

    const handleChange = (event) => {

        const target = event.target;
        const value = target.value;
        const name = target.name;
        let itemCopy = {...item};
        itemCopy[name] = value;
        setItem(itemCopy);
    }

   const handleSubmit = async (event) => {
        event.preventDefault();
       // const {item, isCreate} = state;

        let result = isCreate ? await props.api.create(item) : await props.api.update(item);

        if (!result.ok) {
            setErrorMessage({errorMessage: `Failed to ${isCreate ? 'create' : 'update'} record: ${result.status} ${result.statusText}`})
        } else {
            history.push('/coffee-shops');
        }

    }


        //const {item, errorMessage, isCreate} = this.state;
        const title = <h2>{isCreate ? 'Add Coffee Shop' : 'Edit Coffee Shop'}</h2>;

        return (
            <div>
                {props.navbar}
                <Container style={{textAlign: 'left'}}>
                    {title}
                    {errorMessage ?
                        <Alert color="warning">
                            {errorMessage}
                        </Alert> : null
                    }
                    <Form onSubmit={handleSubmit}>
                        <div className="row">
                            <FormGroup className="col-md-8 mb-3">
                                <Label for="name">Name</Label>
                                <Input type="text" name="name" id="name" value={item.name || ''}
                                       onChange={handleChange} autoComplete="name"/>
                            </FormGroup>
                            <FormGroup className="col-md-4 mb-3">
                                <Label for="phone">Phone</Label>
                                <Input type="text" name="phone" id="phone" value={item.phone || ''}
                                       onChange={handleChange} autoComplete="phone"/>
                            </FormGroup>
                        </div>
                        <FormGroup>
                            <Label for="address">Address</Label>
                            <Input type="text" name="address" id="address" value={item.address || ''}
                                   onChange={handleChange} autoComplete="address-level1"/>
                        </FormGroup>
                        <div className="row">
                            <FormGroup className="col-md-4 mb-3">
                                <Label for="priceOfCoffee">Price of Coffee</Label>
                                <Input type="text" name="priceOfCoffee" id="priceOfCoffee" value={item.priceOfCoffee || ''}
                                       onChange={handleChange}/>
                            </FormGroup>
                            <FormGroup className="col-md-4 mb-3">
                                <Label for="powerAccessible">Power Accessible?</Label>
                                <Input type="select" name="powerAccessible" id="powerAccessible"
                                       value={item.powerAccessible === 'true' ? 'true' : 'false'}
                                       onChange={handleChange}>
                                    <option value="true">Yes</option>
                                    <option value="false">No</option>
                                </Input>
                            </FormGroup>
                            <FormGroup className="col-md-4 mb-3">
                                <Label for="internetReliability">Internet Reliability</Label>
                                <Input type="select" name="internetReliability" id="internetReliability"
                                       value={item.internetReliability || '-'}
                                       onChange={handleChange}>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option value="-">-</option>
                                </Input>
                            </FormGroup>
                        </div>
                        <FormGroup>
                            <Button color="primary" type="submit">Save</Button>{' '}
                            <Button color="secondary" tag={Link} to="/coffee-shops">Cancel</Button>
                        </FormGroup>
                    </Form>
                </Container>
            </div>
        );

}

export default CoffeeShopEdit;