bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 10:19:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Sergey Yarkov 2020-09-28 19:00:43 +03:00
parent 818f292831
commit 46cb2a4d25
2 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby-config.js
View File

@ -57,7 +57,7 @@ module.exports = {
}, },
}, },
{ {
resolve: 'gatsby-plugin-mailchimp', resolve: "gatsby-plugin-mailchimp",
options: { options: {
endpoint: process.env.MAILCHIMP_ENDPOINT, endpoint: process.env.MAILCHIMP_ENDPOINT,
}, },

51
src/components/Newsletter/Newsletter.js
View File

@ -1,29 +1,36 @@
import React from "react" import React from "react"
import addToMailchimp from 'gatsby-plugin-mailchimp' import addToMailchimp from "gatsby-plugin-mailchimp"
const Newsletter = () => { const Newsletter = () => {
const [email, setEmail] = React.useState('') const [email, setEmail] = React.useState("")
const [success, setSuccess] = React.useState(false) const [success, setSuccess] = React.useState(false)
const [error, setError] = React.useState({ isError: false, message: '' }) const [error, setError] = React.useState({ isError: false, message: "" })
const submitHandler = async (e) => { const submitHandler = async e => {
try { try {
e.preventDefault() e.preventDefault()
if (!email.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) { if (
setError({ isError: true, message: 'Заполните поле в формате E-mail!' }) !email.match(
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
)
) {
setError({ isError: true, message: "Заполните поле в формате E-mail!" })
setSuccess(false) setSuccess(false)
window.setTimeout(() => setError({ isError: false, message: '' }), 5000) window.setTimeout(() => setError({ isError: false, message: "" }), 5000)
return return
} }
setError({ isError: false, message: '' }) setError({ isError: false, message: "" })
const data = await addToMailchimp(email) const data = await addToMailchimp(email)
if (data.result !== 'success') { if (data.result !== "success") {
setError({ isError: true, message: `Произошла ошибка, возможно "${email}" уже подписан на рассылку. Попробуйте запрос позже.` }) setError({
window.setTimeout(() => setError({ isError: false, message: '' }), 5000) isError: true,
message: `Произошла ошибка, возможно "${email}" уже подписан на рассылку. Попробуйте запрос позже.`,
})
window.setTimeout(() => setError({ isError: false, message: "" }), 5000)
console.log(data.msg) console.log(data.msg)
return return
} }
@ -36,7 +43,7 @@ const Newsletter = () => {
} }
} }
const handleChangeEmail = (e) => { const handleChangeEmail = e => {
const email = e.target.value.trim().toLowerCase() const email = e.target.value.trim().toLowerCase()
setEmail(email) setEmail(email)
@ -56,12 +63,26 @@ const Newsletter = () => {
</p> </p>
<form onSubmit={submitHandler} action="#" target="_blank"> <form onSubmit={submitHandler} action="#" target="_blank">
<div className="email-field"> <div className="email-field">
<input value={email} onChange={handleChangeEmail} placeholder="ваш e-mail" name="email" /> <input
value={email}
onChange={handleChangeEmail}
placeholder="ваш e-mail"
name="email"
/>
<button>Подписаться</button> <button>Подписаться</button>
</div> </div>
</form> </form>
{success ? <p className='newsletter-content__success'><span role="img" aria-label="checkMark">✔️</span> Вы успешно подписались на рыссылку!</p> : null} {success ? (
{error.isError ? <p className='newsletter-content__error'>{error.message}</p> : null} <p className="newsletter-content__success">
<span role="img" aria-label="checkMark">
✔️
</span>{" "}
Вы успешно подписались на рыссылку!
</p>
) : null}
{error.isError ? (
<p className="newsletter-content__error">{error.message}</p>
) : null}
</div> </div>
</div> </div>
) )