mirror of https://gitea.com/gitea/blog.git
83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import React, { useState } from "react"
|
|
import Input from "../Input"
|
|
import Button from "../Button"
|
|
import style from "./style.module.css"
|
|
import clsx from "clsx"
|
|
import Alert from '@mui/material/Alert'
|
|
import Snackbar from '@mui/material/Snackbar'
|
|
const Spinner = () => <span className={style.loader} />
|
|
const Subscribe = ({placeholder, submitButtonText, className, classNameInputs}) => {
|
|
const [loading, setLoading] = useState(false)
|
|
const [inputValue,setInputValue]=useState('')
|
|
const [toastVisible,setToastVisible]=useState(false)
|
|
function onSubmit() {
|
|
setLoading(true)
|
|
fetch('https://api.hsforms.com/submissions/v3/integration/submit/44783791/7314ddd3-9767-4c71-8071-4d43ac5ae5e8',{
|
|
method:'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
submittedAt: new Date().getTime(),
|
|
fields: [
|
|
{
|
|
objectTypeId: "0-1",
|
|
name: "email",
|
|
value: inputValue
|
|
}
|
|
],
|
|
context: {
|
|
// hutk: "hutk",
|
|
pageUri: window.location.href,
|
|
pageName: document.title
|
|
}
|
|
})
|
|
})
|
|
.then(res =>res.json())
|
|
.then((data) => {
|
|
setLoading(false)
|
|
setToastVisible(true)
|
|
setInputValue('')
|
|
})
|
|
}
|
|
function handleInputChange(event) {
|
|
const value = event.target.value
|
|
setInputValue(value)
|
|
}
|
|
function handleClose (event, reason) {
|
|
setToastVisible(false)
|
|
};
|
|
|
|
return (
|
|
<div className={clsx(style.inputs, classNameInputs)}>
|
|
<Input
|
|
className={style.input}
|
|
name="email"
|
|
type="email"
|
|
title="Email address should be valid"
|
|
placeholder={placeholder}
|
|
required
|
|
autoComplete="off"
|
|
onChange={handleInputChange}
|
|
value={inputValue}
|
|
/>
|
|
|
|
<Button
|
|
variant={"tertiary"}
|
|
type="submit"
|
|
className={style.subscribeSubmit}
|
|
onClick={onSubmit}
|
|
>
|
|
{loading ? <Spinner /> : submitButtonText}
|
|
</Button>
|
|
<Snackbar anchorOrigin={{ vertical: 'top',horizontal: 'center' }} autoHideDuration={3000} open={toastVisible} onClose={handleClose}>
|
|
<Alert onClose={handleClose} severity="success">
|
|
success!
|
|
</Alert>
|
|
</Snackbar>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Subscribe
|