test.jsx

import React, { useCallback, useState } from "react";
import { adopt } from "react-adopt";

import Input from "@components/common/Form/Input";
import Button from "@components/common/Form/Button";
import {
	SubscribeStyles,
	SubscribeContainer,
	SubiscribeTitle,
	SubiscribeDetails,
} from "./styles";
import { SubscribeMutation } from "./subscribe-mutation";

const defaultFormData = {
	email: {
		value: "",
		error: null,
	},
	fullName: {
		value: "",
		error: null,
	},
};

const SubscribeData = adopt({
	subscribe: ({ render }) => <SubscribeMutation>{render}</SubscribeMutation>,
});

const Subscribe = () => {
	const [form, setForm] = useState(defaultFormData);

	const handleFormChange = (key) =>
		useCallback(
			({ target: { value } }) => {
				setForm({
					...form,
					[key]: {
						value,
					},
				});
			},
			[email]
		);

	const setError = (error) => {
		const formData = error.reduce(
			(acc, current) => ({
				...acc,
				[current[0]]: {
					value: form[current[0]].value,
					error: current[1],
				},
			}),
			{}
		);

		setForm({
			...form,
			...formData,
		});
	};

	const handleSubmit = (addSubscribe) => (e) => {
		const error = [];
		e.preventDefault();

		if (!form.email.value) {
			error.push(["email", "Please provide your email!"]);
		}

		if (!form.fullName.value) {
			error.push(["fullName", "Please provide your full name!"]);
		}

		if (error.length) return setError(error);

		addSubscribe({
			variables: {
				email: form.email.value,
				fullName: form.fullName.value,
			},
		});
	};

	return (
		<SubscribeData>
			{({ subscribe: { addSubscribe, loading } }) => (
				<SubscribeStyles>
					<SubscribeContainer>
						<SubiscribeTitle>Subscribe</SubiscribeTitle>
						<SubiscribeDetails>
							Subscribe to receive important announcements and deals
						</SubiscribeDetails>
						<form onSubmit={handleSubmit(addSubscribe)}>
							<Input
								type="text"
								onChange={handleFormChange("fullName")}
								error={form.fullName.error}
								value={form.fullName.value}
								placeholder="Full Name"
							/>
							<Input
								type="email"
								onChange={handleFormChange("email")}
								error={form.email.error}
								value={form.email.value}
								placeholder="Email"
							/>
							<Button variant="secondary" type="submit" disabled={loading}>
								Go
							</Button>
						</form>
					</SubscribeContainer>
				</SubscribeStyles>
			)}
		</SubscribeData>
	);
};

export default Subscribe;