import React, { useState } from 'react';

import { useForm } from 'react-hook-form';

const GATEWAY_URL = "https://xxxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/interact"; // REST API Gateway (API has applied Authorizer already)
var msgFromLambda = "Nothing, something go wrong..";

const InteractRestApiGW = ({ token }) => {
    const [submitted, setSubmitted] = useState(false);
    
    const {
        register,
        handleSubmit,
        setError,
        reset,
        formState: { errors, isSubmitting }
    } = useForm();

    const onSubmit = async data => {
        const payload = {
            "message": {
                "name": data.myName,
            }
        }

        try {
            const response = await fetch(GATEWAY_URL, {
                method: "POST",
                mode: "cors",
                contentType: "application/json",
                body: JSON.stringify(payload),
                headers: {
                    "Content-type": "application/json; charset=UTF-8",
                    "Accept": "application/json",
                    "Authorization": token,
                }
            });
            const result = await response.json();
            msgFromLambda = result.text
            setSubmitted(true);
            reset();
        } catch (error) {
            setError(
                "submit",
                "submitError",
                `Oops! There seems to be an issue! ${error.message}`
            );
        }
    };

    const showThankYou = (
        <div className="msg-confirm">
            <p>Awesome! Your command was sent. The response is: </p> 
            <p style={{fontWeight: "bold"}}>{msgFromLambda}</p>
            <p style={{fontSize: '13px'}}><i>If the response is a Hello your name from Lambda, it means Backend recognized you. Congras!
                Otherwise, please debug it for more detail...</i></p>
            <button className="btn btn-info my-3" type="button" onClick={() => setSubmitted(false)}>
                Send another command?
            </button>
        </div>
    );

    const showSubmitError = msg => <p className="msg-error">{msg}</p>;

    const showForm = (
        <form onSubmit={handleSubmit(onSubmit)} method="post">
            <p>This text box send command to REST API Gateway URL
                (which is applied Cognito User Pool Authorizer already.
                It means if someone has URL, they still can not send requests to it unless they authenticated this page): </p>
            <label htmlFor="myName">
                <input
                    className="form-control"
                    type="myName"
                    name="myName"
                    id="myName"
                    placeholder="Your name"
                    {...register("myName", {
                        required: "Dont forget your name!",
                    })}
                    disabled={isSubmitting}
                />
                {errors.myName && <div className="msg-error">{errors.myName.message}</div>}
            </label>
            <div className="submit-wrapper">
                <button className="btn btn-info my-3" type="submit" disabled={isSubmitting}>Send command</button>
            </div>
        </form>
    );

    return (
        <div className="container my-4">
            {errors && errors.submit && showSubmitError(errors.submit.message)}
            <div className="form-side">{submitted ? showThankYou : showForm}</div>
        </div>
    )
}

export default InteractRestApiGW

import React from 'react'
import { SignIn, SignOut } from "@hoangmnsd/gatsby-theme-amplify-cognito";
import InteractRestApiGW from '../components/InteractRestApiGW';

const PrivateSpace = props => {
    return (
        (props.authState !== "signedIn") ?
            <SignIn authState={props.authState} /> :
                <SignOut />
                <div className="container about my-5">
                    <h1 className="font-weight-bold">Hello my friend,</h1>
                    <h2>This space requires an authenticated user</h2>
                    <InteractRestApiGW 
                        token={props.authData.signInUserSession.idToken.jwtToken}
                    />
                </div>
    )
}

export default PrivateSpace