@material-ui/icons#Send JavaScript Examples

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>
    </>                          
    )
}

function Account () {
  const dispatch = useDispatch();
  const isSynced = useSelector(selectIsSynced);
  const childBalance = useSelector(selectChildchainBalance, isEqual);
  const rootBalance = useSelector(selectRootchainBalance, isEqual);
  const pendingExits = useSelector(selectPendingExits, isEqual);
  const transactions = useSelector(selectChildchainTransactions, isEqual);
  const criticalTransactionLoading = useSelector(selectLoading([ 'EXIT/CREATE' ]));

  const exitPending = useMemo(() => pendingExits.some(i => i.status === 'Pending'), [ pendingExits ]);
  const transferPending = useMemo(() => transactions.some(i => i.status === 'Pending'), [ transactions ]);
  const disabled = !childBalance.length || !isSynced || exitPending || transferPending;

  const handleModalClick = useCallback(
    (name) => dispatch(openModal(name)),
    [ dispatch ]
  );

  return (
    <div className={styles.Account}>
      <h2>Account</h2>
      <div className={styles.wallet}>
        <span className={styles.address}>{`Wallet Address : ${networkService.account ? truncate(networkService.account, 6, 4, '...') : ''}`}</span>
        <Copy value={networkService.account} />
      </div>

      <div className={styles.balances}>
        <div className={styles.box}>
          <div className={styles.header}>
            <div className={styles.title}>
              <span>Balance on Childchain</span>
              <span>OMG Network</span>
            </div>
            <div className={styles.actions}>
              <div
                onClick={() => handleModalClick('mergeModal')}
                className={[
                  styles.transfer,
                  (disabled || criticalTransactionLoading) ? styles.disabled : ''
                ].join(' ')}
              >
                <MergeType />
                <span>Merge</span>
              </div>
              <div
                onClick={() => handleModalClick('transferModal')}
                className={[
                  styles.transfer,
                  (disabled || criticalTransactionLoading) ? styles.disabled : ''
                ].join(' ')}
              >
                <Send />
                <span>Transfer</span>
              </div>
            </div>
          </div>
          {childBalance.map((i, index) => {
            return (
              <div key={index} className={styles.row}>
                <div className={styles.token}>
                  <span className={styles.symbol}>{i.name}</span>
                </div>
                <span>{logAmount(i.amount, i.decimals)}</span>
              </div>
            );
          })}
          <div className={styles.buttons}>
            <Button
              onClick={() => handleModalClick('depositModal')}
              type='primary'
              disabled={!isSynced}
            >
              DEPOSIT
            </Button>
            <Button
              onClick={() => handleModalClick('exitModal')}
              type='secondary'
              disabled={disabled}
            >
              EXIT
            </Button>
          </div>
        </div>

        <div className={styles.box}>
          <div className={styles.header}>
            <div className={styles.title}>
              <span>Balance on Rootchain</span>
              <span>Ethereum Network</span>
            </div>
          </div>

          {rootBalance.map((i, index) => {
            return (
              <div key={index} className={styles.row}>
                <div className={styles.token}>
                  <span className={styles.symbol}>{i.name}</span>
                </div>
                <span>{logAmount(i.amount, i.decimals)}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}