text: /* global fetch */
  import React, { useState, useEffect } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  const App = () => {
    const [message, setMessage] = useState('...loading')
  
    useEffect(() => {
      async function fetchData () {
        try {
          let data = await (await fetch('/api')).json()
          setMessage(data.message)
        } catch (err) {
          setMessage(err.message)
        }
      }
      fetchData()
    })
  
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>{message}</p>
          <p>Change me!</p>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://capecod.world"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
  
  export default App;
  