Revue Newsletter Subscribe from ur Web

#webdev #tutorial

🪦 In memory of Revue

WTF is Revue

Get api key

Login/Create a Revue account after successfully creating a account move to integration page and scroll to the bottom you will see a link to request access for the api

Provide the requested details to review the account and for what type of usage we will be using the API for ans submit information.

Once your account is verified and review process is complete a email will be sent to your account. this process will take some time so stay calm and look at my bio unit you receive your mail 😜.

After receiving your mail check your integrations panel bottom you will have your API key located below.

Coding part

import { useState } from 'react';

const Subscribe = () =>
{
    const [ email, setEmail ] = useState( '' );
    const [ error, setError ] = useState( '' );
    const [ success, setSuccess ] = useState( '' );

    const subscribeMe = async ( event ) =>
    {
        event.preventDefault();

        const res = await fetch( "/api/subscribe", {
            body: JSON.stringify( { email: email } ),
            headers: { 'Content-Type': 'application/json' },
            method: "POST",
        } );

        const { error, message } = await res.json();
        if ( error )
        {
            setError( error );
        } else
        {
            setSuccess( message );
        }
    };

    return (
        <div>
            <p>
                Sign up for my newsletter
            </p>
            <form onSubmit={ subscribeMe }>
                <input
                    value={ email }
                    onChange={ ( e ) => setEmail( e.target.value ) }
                    placeholder="Enter your mail address"
                    type="email"
                    autoComplete="email"
                    required
                />
                <button
                    type="submit"
                >
                    Subscribe
                </button>
            </form>

            { success
                ?
                <span>
                    { success }
                </span>
                :
                <span>
                    { error }
                </span>
            }
        </div>
    );
};

export default Subscribe;