const handleSubmit = (e) => {
    e.preventDefault();
    // TODO: Add logic to validate inputs and display submitted data
    // HINT: You can use the setError function

    // HINT: You can use the setSubmittedData function as below
    // setSubmittedData({ name, email, message });    
    if (!name || !email || !message) {
      setError("All fields are required.");
    } else {
      setSubmittedData({ name, email, message });
      setName("");
      setEmail("");
      setMessage("");
      setError(""); // Clear any existing error
    }
  };``

import { useState } from "react";
import "./App.css";

import "h8k-components";
 
function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [submittedData, setSubmittedData] = useState(null);
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    console.log('🔥🔥🔥THIS IS SUBMIT 🔥🔥🔥',e.target.name.value);

    const fieldArr = [
      {
        fied:'name',
        value: e.target.name.value
      },
      {
        fied:'email',
        value:e.target.email.value
      },
      {
        fied:'message',
        value:e.target.message.value
      },
    ]

    

    const emptyField = fieldArr.find((field) => isEmptyValue(field.value));

    if (emptyField) {
      setError("All fields are required.");
      setSubmittedData(null); // Clear previous data if there's an error
      return;
    }

    setError(""); // Clear error if all fields are valid
    setSubmittedData({ name, email, message }); // Set submitted data
    await resetState()
  };
  const resetState = async () =>{
    setEmail('')
    setName('')
    setMessage('')
  }

  const isEmptyValue = (e)=>{
    const isEmpty = e.length > 0 ? false:true

    return isEmpty
  }



  return (
    <>
      <h8k-navbar header="Contact Form"></h8k-navbar>
      <div className="App">
        <h1>Contact Form</h1>
        <form onSubmit={handleSubmit}>
          <input
          name="name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Name"
            data-testid="name-input"
            onBlur={(e)=>{
              const isEmpty = isEmptyValue(e.target.value)

              if (isEmpty) {
                setError('fill all field')
              } else {
                setError('')
                
              }
            }}
          />
          <input
          name="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Email"
            data-testid="email-input"
            onBlur={(e)=>{
              const isEmpty = isEmptyValue(e.target.value)

              if (isEmpty) {
                setError('fill all field')
              } else {
                setError('')
                
              }
            }}
          />
          <textarea
          name="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Message"
            data-testid="message-input"
            onBlur={(e)=>{
              const isEmpty = isEmptyValue(e.target.value)

              if (isEmpty) {
                setError('fill all field')
              } else {
                setError('')
                
              }
            }}
          />
          <button type="submit" data-testid="submit-button">
            Submit
          </button>
        </form>
        {error && (
          <p data-testid="error-message" className="error">
            {error}
          </p>
        )}
        {submittedData && (
          <div data-testid="submitted-data" className="submitted-data">
            <h2>Submitted Information</h2>
            <p>
              <strong>Name:</strong> {submittedData.name}
            </p>
            <p>
              <strong>Email:</strong> {submittedData.email}
            </p>
            <p>
              <strong>Message:</strong> {submittedData.message}
            </p>
          </div>
        )}
      </div>
    </>
  );
}

export default App;

const all_req = "All fields are required.";

  const handleSubmit = (e) => {
    e.preventDefault();
    // TODO: Add logic to validate inputs and display submitted data
    // HINT: You can use the setError function
    
    // HINT: You can use the setSubmittedData function as below
    if (name.trim() === "" ||  email === "" ||  message === ""){
      setError(all_req)

    }
     setSubmittedData({ name, email, message });
     setName("");
     setEmail("");
     setMessage("");
  };

import { useState } from "react";
import "./App.css";

import "h8k-components";

function App() {
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    message: ""

  })
  const [isDirty, setIsDirty] = useState({})
  const [errors, setErrors] = useState({})
  const [isLoading, setIsLoading] = useState(false)
  const [isDataSubmitted, setIsDataSubmitted] = useState(false)
  const [edgeCaseErrorMessage, setEdgeCaseErrorMessage] = useState(false)
  const [payload, setPayload] = useState(null)

  const _handleChange = (e) => {
    const { name, value } = e.target
    const newFormState = { ...formState }
    const newIsDirty = { ...isDirty }
    newFormState[name] = value
    newIsDirty[name] = true
    setFormState(newFormState)
    setIsDirty(newIsDirty)

    _validateFields(newFormState, newIsDirty)
  }

  const _validateFields = (newFormState, newIsDirty) => {
    return new Promise((resolve) => {
      const newErrors = { ...errors }
      let isFormValid = true

      Object.keys(newFormState).forEach((key, _) => {
        if (newIsDirty[key]) {
          switch (key) {
            case "email": if (!newFormState[key]?.length) {
              newErrors[key] = "*Required"
              isFormValid = false
            } else {
              const regExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
              if (new RegExp(regExp).test(newFormState[key])) {
                newErrors[key] = null
                delete newIsDirty[key]
              } else {
                newErrors[key] = "*Invalid Email"
                isFormValid = false
              }

            };
              break;
            default: if (!newFormState[key]?.length) {
              newErrors[key] = "*Required"
              isFormValid = false
            } else {
              newErrors[key] = null
              delete newIsDirty[key]
            }; break;
          }
        }

      })

      setIsDirty(newIsDirty)
      setErrors(newErrors)
      resolve(isFormValid)
    })
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    // TODO: Add logic to validate inputs and display submitted data

    const newIsDirty = {
      name: true,
      email: true,
      message: true
    }
    setIsLoading(true)
    const isValid = await _validateFields(formState, newIsDirty)

    if (!isValid) {
      setIsLoading(false)
      setEdgeCaseErrorMessage(true)
      return
    } else {
      console.log("payload", formState)
      setPayload(formState)
      setIsDataSubmitted(true)
      _resetData()
    }
    setIsLoading(false)
  };

  const _resetData = () => {
    setFormState({
      name: "",
      email: "",
      message: ""
    })
    setIsDirty({})
    setErrors({})
    setIsLoading(false)
    setIsDataSubmitted(false)
    setEdgeCaseErrorMessage(false)
  }

  return (
    <>
      <h8k-navbar header="Contact Form"></h8k-navbar>
      <div className="App">
        <h1>Contact Form</h1>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            name="name"
            value={formState.name}
            onChange={(e) => _handleChange(e)}
            placeholder="Name"
            data-testid="name-input"
          />
          {isDirty.name ? <small style={{ color: "red" }}>{errors.name}</small> : null}
          <input
            type="email"
            name="email"
            value={formState.email}
            onChange={(e) => _handleChange(e)}
            placeholder="Email"
            data-testid="email-input"
          />
          {isDirty.email ? <small style={{ color: "red" }}>{errors.email}</small> : null}
          <textarea
            value={formState.message}
            name="message"
            onChange={(e) => _handleChange(e)}
            placeholder="Message"
            data-testid="message-input"
          />
          {isDirty.message ? <small style={{ color: "red" }}>{errors.message}</small> : null}
          <button type="submit" data-testid="submit-button" disabled={isLoading}>
            Submit
          </button>
        </form>
        {edgeCaseErrorMessage && (
          <p data-testid="error-message" className="error">
            All fields are required
          </p>
        )}
        {payload !== null && (
          <div data-testid="submitted-data" className="submitted-data">
            <h2>Submitted Information</h2>
            <p>
              <strong>Name:</strong> {payload.name}
            </p>
            <p>
              <strong>Email:</strong> {payload.email}
            </p>
            <p>
              <strong>Message:</strong> {payload.message}
            </p>
          </div>
        )}
      </div>
    </>
  );
}

export default App;