App.js

//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';
import { Dialog } from 'react-overlay-pack';
import CorrectSign from './material/sign_correct.png';
import ErrorSign from './material/sign_error.png';


function App() {
    const { useState } = React;
    const [queryStr, setQueryStr] = useState('')
    const [sign, setSign] = useState(CorrectSign)
    const [text, setText] = useState('This area shows the result of requests..')
    const [formState, setFormState] = useState('hide')
    const [dialogState, setDialogState] = useState(false)
    const axios = require('axios').default;
    var center = {display: 'flex', justifyContent: 'center', alignItems: 'center'}

    function get() {
        axios.get('http://127.0.0.1:5000/api/' + queryStr)
        .then(function (response) {
            // handle success
            setSign(CorrectSign)
            showDialog()
            document.getElementById('dialog').value = response.status + ":\n" + response.statusText
            document.getElementById('board').value = JSON.stringify(response.data)
        })
        .catch(function (error) {
            // handle error
            setSign(ErrorSign)
            showDialog()
            document.getElementById('dialog').value = error
        })
    }
    function put() {
        changeFormState()
    }
    function mesg() {
        document.getElementById('board').value = 'Hello there!'
    }
    function changeFormState() {
        if (formState === 'hide') {
            setFormState('show')
        } else {
            setFormState('hide')
        }
    }
    function showDialog() {
        setDialogState(true)
    }
    return (
        <div>
            {dialogState === true &&
            <Dialog
                show={dialogState}
                onOutsideClick={() => setDialogState(false)}>
                    <div style={{marginTop:'20%'}}>
                        <div style={{
                                    marginLeft: '35%'
                                }}>
                            <img src={sign}/>
                        </div>
                        <div>
                            <textarea id='dialog' 
                                readOnly={true}
                                rows="3" 
                                cols="38"
                                style={{
                                    border:'2px solid silver', 
                                    backgroundColor: 'white', 
                                    fontSize: '200%',
                                    margin: '50px'
                                }}>
                                {text}
                            </textarea>
                        </div>
                    </div>
            </Dialog>}
            <form name='mainform'>
                <h1 style={center}> 
                    Welcome to the home page of GoodReads Crawler! </h1>
                <h3 style={center}> Please input your query string:</h3>
                <div style={center}>
                    <input 
                        id='queryString' 
                        type='text' 
                        placeholder='example: book?id=12345678' 
                        size='40' 
                        value={queryStr}
                        onChange={(e) => setQueryStr(e.target.value)}
                    />
                </div>
                <h3 style={center}> Please input your data for uploading (only effective for POST and PUT):</h3>
                {formState === 'hide' && 
                    <div style={center}>
                        <button style={{width:60}} onClick={changeFormState}>
                            book
                        </button>
                        <button style={{marginLeft:10, width:60}} onClick={changeFormState}>
                            author
                        </button>
                    </div>}
                {formState === 'show' &&
                    <form style={center}>
                        <table border="1" style="width:100%;">
                            <tr>
                                <td>Cell 1</td>
                                <input/>
                            </tr>
                            <tr>
                                <td>Cell 3</td>
                                <input/>
                            </tr>
                        </table>
                    </form>}
            </form>
            <div style={{marginTop:20, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                <FourButtons 
                    backColor='blue' 
                    borderColor='RoyalBlue'
                    leftMargin={0}
                    text='GET'
                    func={get} />
                <FourButtons 
                    backColor='black' 
                    borderColor='gray'
                    leftMargin={20}
                    text='PUT'
                    func={put} />
                <FourButtons 
                    backColor='green' 
                    borderColor='seagreen'
                    leftMargin={20}
                    text='POST'
                    func={showDialog} />
                <FourButtons 
                    backColor='red' 
                    borderColor='indianred'
                    leftMargin={20}
                    text='DELETE'
                    func={mesg} />
            </div>
            <div style={{marginTop:20, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                <textarea id="board" name="returnData" rows="6" cols="50" value={text} readOnly={true}>
                </textarea>
            </div>
        </div>
    );
}

export default App;