subscribe

This commit is contained in:
Karol Wypchlo 2021-03-29 14:24:12 +02:00
parent 8ba7568cbe
commit caf3cdc2a7
3 changed files with 52 additions and 10 deletions

View File

@ -30,6 +30,7 @@
"gatsby-transformer-sharp": "^3.0.0", "gatsby-transformer-sharp": "^3.0.0",
"gbimage-bridge": "^0.1.1", "gbimage-bridge": "^0.1.1",
"http-status-codes": "^2.1.4", "http-status-codes": "^2.1.4",
"jsonp": "^0.2.1",
"ms": "^2.1.2", "ms": "^2.1.2",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",

View File

@ -10,6 +10,7 @@ import {
YoutubeSmall, YoutubeSmall,
TikTokSmall, TikTokSmall,
} from "../../components/Icons"; } from "../../components/Icons";
import useSubscribe from "./useSubscribe";
const social = [ const social = [
{ name: "Discord", Icon: DiscordSmall, href: "https://discordapp.com/invite/sia" }, { name: "Discord", Icon: DiscordSmall, href: "https://discordapp.com/invite/sia" },
@ -28,12 +29,12 @@ const SectionTitle = ({ children }) => (
const CommunitySection = () => { const CommunitySection = () => {
const [experienced, setExperienced] = React.useState(false); const [experienced, setExperienced] = React.useState(false);
const [email, setEmail] = React.useState(""); const [email, setEmail] = React.useState("");
const onSubscribe = (event) => { const { subscribe, complete, success, message, pending } = useSubscribe();
const onSubscribe = async (event) => {
event.preventDefault(); event.preventDefault();
alert(`this will subscribe ${email} for a newsletter`); subscribe(email, experienced);
setEmail("");
}; };
return ( return (
@ -42,11 +43,11 @@ const CommunitySection = () => {
<SectionHeader>Newsletter</SectionHeader> <SectionHeader>Newsletter</SectionHeader>
<SectionTitle>Stay up to date</SectionTitle> <SectionTitle>Stay up to date</SectionTitle>
<form onSubmit={onSubscribe} className="flex flex-col"> <form onSubmit={onSubscribe} className="flex flex-col space-y-4">
<div className="relative rounded-md shadow-sm">
<label htmlFor="newsletter-email" className="sr-only"> <label htmlFor="newsletter-email" className="sr-only">
Email Email
</label> </label>
<div className="relative rounded-md shadow-sm">
<input <input
type="text" type="text"
name="email" name="email"
@ -56,12 +57,12 @@ const CommunitySection = () => {
value={email} value={email}
onChange={(event) => setEmail(event.target.value)} onChange={(event) => setEmail(event.target.value)}
/> />
<button type="submit" className="absolute inset-y-0 right-0 px-2 flex items-center"> <button type="submit" className="absolute inset-y-0 right-0 px-2 flex items-center" disabled={pending}>
<ArrowRight /> <ArrowRight />
</button> </button>
</div> </div>
<div className="flex items-center mt-4"> <div className="flex items-center">
<input <input
type="checkbox" type="checkbox"
id="newsletter-experience" id="newsletter-experience"
@ -78,6 +79,15 @@ const CommunitySection = () => {
Do you have previous experience using Skynet? Do you have previous experience using Skynet?
</label> </label>
</div> </div>
{complete && message && (
<div
className={classnames("text-center bg-white py-2 px-4 rounded bg-opacity-20 font-semibold font-content", {
"text-error": !success,
})}
dangerouslySetInnerHTML={{ __html: message }}
></div>
)}
</form> </form>
</div> </div>

View File

@ -0,0 +1,31 @@
import { useState, useCallback } from "react";
import { useAsync } from "react-use";
import jsonp from "jsonp";
const mailer = "https://tech.us11.list-manage.com/subscribe/post-json?u=5df238d9e852f9801b5f2c92e&amp;id=ab6bea4cc2";
const initialState = { complete: false, pending: false, success: false, message: "" };
const initialData = { email: "", experienced: false };
export default function useSubscribe() {
const [{ email, experienced }, setData] = useState(initialData);
const [state, setState] = useState(initialState);
useAsync(async () => {
if (!email) return;
setState(initialState);
const url = [mailer, `EMAIL=${email}`, `USER=${experienced ? "Yes" : "No"}`].join("&");
jsonp(url, { param: "c" }, (error, data) => {
const success = !error && data.result === "success";
const message = data ? data.msg : "";
setState({ complete: true, pending: false, success, message });
});
}, [email, experienced]);
const subscribe = useCallback((email, experienced) => setData({ email, experienced }), [setData]);
return { subscribe, ...state };
}