@material-ui/icons#AlternateEmail JavaScript Examples

The following examples show how to use @material-ui/icons#AlternateEmail. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: contactus.js    From upvision.github.io with MIT License 4 votes vote down vote up 
ContactUs = (props)=> {

    const [values, setValues] = useState(intialFieldValues);

    const [serverState, setServerState] = useState({
        submitting: false,
        status: null
    });

    const handleServerResponse = (ok, msg, form) => {
        setServerState({
          submitting: false,
          status: { ok, msg }
        });
        if (ok) {
          form.reset();
        }
    };

    const handleOnSubmit = e => {
        e.preventDefault();
        const form = e.target;
        setServerState({ submitting: true });
        axios({
          method: "post",
          url: "https://getform.io/f/c128f607-4510-4b63-8b70-42dca5b07a3a",
          data: new FormData(form)
        })
        .then(r => {
            handleServerResponse(true, "Thanks!", form);
        })
        .catch(r => {
            handleServerResponse(false, r.response.data.error, form);
        });
    };

    const handleInputChange = (e)=>{
        const {name, value} = e.target;
        setValues({
            ...values,
            [name]: value
        })
        handleEmailValidation();
    }

    const [validInput, setValidInput] = useState(false);
    const [validMail, setValidMail] = useState(true);

    const handleEmailValidation =() => {
        if (isEmpty(values.email) || validateEmail(values.email)) {
            setValidMail(true)
        } else {
            setValidMail(false)
        }
    }

    useEffect(() => {
        if (validMail && !(
                isEmpty(values.email) ||
                isEmpty(values.name) ||
                isEmpty(values.message)
            )) {
            setValidInput(true);
        } else {
            setValidInput(false);
        }
        // console.log(validInput);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [values.email, values.name, values.message, validMail])

    return (
    <>
        <SEO title="Contact Us" />
        <div className="contact_container">
            <div className="contact_wrapper">   
                <div className="contact_header">
                    Contact Us
                </div>
                <div className="contact_content">
                    <form
                        onSubmit={handleOnSubmit}
                    >
                        <FormField 
                            variant="outlined"
                            name="name"
                            label="Name"
                            value={values.fullName}
                            onChange={handleInputChange}
                            InputProps={{
                                startAdornment: (
                                  <InputAdornment position="start">
                                    <Person />
                                  </InputAdornment>
                                ),
                            }}
                        />
                        <FormField
                            error={!validMail}
                            variant="outlined"
                            name="email"
                            label="Email"
                            value={values.email}
                            onChange={handleInputChange}
                            helperText={validMail? "" : "Invalid Email"}
                            InputProps={{
                                startAdornment: (
                                  <InputAdornment position="start">
                                    <AlternateEmail />
                                  </InputAdornment>
                                ),
                            }}
                        />
                        <FormField
                            id="outlined-multiline-static"
                            multiline
                            variant="outlined"
                            rows={5}
                            label="Message"
                            value={values.msg}
                            onChange={handleInputChange}
                            name="message"
                            InputProps={{
                                startAdornment: (
                                  <InputAdornment position="start">
                                    <Send />
                                  </InputAdornment>
                                ),
                            }}
                            inputProps={{
                                maxLength: 255,
                            }}
                            helperText={values.message.length>0? `${values.message.length}/${255}` : ""}
                        />
                        <SubmitButton 
                            className="contact_button" 
                            type="submit"
                            disabled={serverState.submitting || !validInput}
                        >Submit</SubmitButton>
                        <div className="contact_msg">
                            {serverState.status && (
                                <p className={!serverState.status.ok ? "ErrorMsg" : ""}>
                                {serverState.status.msg}
                                </p>
                            )}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </>                          
    )
}