//import logo from './logo.svg';
//import './App.css';
//
//function App() {
//  return (
//    <div className="App">
//      <header className="App-header">
//        <img src={logo} className="App-logo" alt="logo" />
//        <p>
//          Edit <code>src/App.js</code> and save to reload.
//        </p>
//        <a
//          className="App-link"
//          href="https://reactjs.org"
//          target="_blank"
//          rel="noopener noreferrer"
//        >
//          Learn React
//        </a>
//      </header>
//    </div>
//  );
//}
//
//export default App;

import React, { useState } from 'react';
import FourButtons from './Components/FourButtons'

function App() {
    const { useState } = React;
    const [queryStr, setQueryStr] = useState('')
    const [jsonValue, setJsonValue] = useState('')
    const [text, setText] = useState('This area shows the result of requests..')
    const axios = require('axios').default;
    function mesg() {
        alert('Hey!')
    }
    return (
        <div>
            <form name='mainform'>
                <h1> Welcome to the home page of GoodReads Crawler! </h1>
                <h3> Please input your query string:</h3>
                <input 
                    id='queryString' 
                    type='text' 
                    placeholder='example: book?id=12345678' 
                    size='40' 
                    value={queryStr}
                    onChange={(e) => setQueryStr(e.target.value)}
                />
                <h3> Please input your json parameters (only effective for POST and PUT):</h3>
                <input 
                    id='jsonValue' 
                    type='text' 
                    placeholder='example: {"rating_counr": 1000000}' 
                    size='40' 
                    value={jsonValue}
                    onChange={(e) => setJsonValue(e.target.value)}
                />
            </form>
            <div style={{marginTop:20}}>
                <FourButtons 
                    backColor='blue' 
                    borderColor='RoyalBlue'
                    leftMargin={0}
                    text='GET'
                    func={mesg} />
                <FourButtons 
                    backColor='black' 
                    borderColor='gray'
                    leftMargin={20}
                    text='PUT'
                    func={mesg} />
                <FourButtons 
                    backColor='green' 
                    borderColor='seagreen'
                    leftMargin={20}
                    text='POST'
                    func={mesg} />
                <FourButtons 
                    backColor='red' 
                    borderColor='indianred'
                    leftMargin={20}
                    text='DELETE'
                    func={mesg} />
            </div>
            <div style={{marginTop:20}}>
                <textarea id="board" name="returnData" rows="6" cols="50" value={text} readOnly={true}>
                </textarea>
            </div>
        </div>
    );
}

export default App;