Skip to content

Commit 6ef8063

Browse files
chenaskichenaski
committed
Refactor form
1 parent f8d0103 commit 6ef8063

File tree

2 files changed

+52
-127
lines changed

2 files changed

+52
-127
lines changed

‎src/components/landingBlocks/EmailForm.tsx‎

Lines changed: 50 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
1-
import React, { useState } from 'react';
2-
import { styled } from 'linaria/react';
3-
import Section from '../Section';
4-
import LandingContainer from '../LandingContainer';
5-
import { media, tm, tmDark, tmSelectors } from '../../themes';
6-
import backgroundImageLight from '../../assets/email-form/bg-light-big.svg';
7-
import backgroundImageDark from '../../assets/email-form/bg-dark-big.svg';
8-
import Lines from '../../assets/email-form/lines';
9-
import CTA from '../ui/CTA';
1+
import React from "react";
2+
import { styled } from "linaria/react";
3+
import Section from "../Section";
4+
import LandingContainer from "../LandingContainer";
5+
import { media, tm, tmDark, tmSelectors } from "../../themes";
6+
import backgroundImageLight from "../../assets/email-form/bg-light-big.svg";
7+
import backgroundImageDark from "../../assets/email-form/bg-dark-big.svg";
8+
import Lines from "../../assets/email-form/lines";
109

1110
// Props interface for the component
12-
export interface EmailFormProps {
13-
endpoint: string;
14-
}
11+
export interface EmailFormProps {}
1512

1613
// Styled components
1714
const FormSection = styled.section`
@@ -83,7 +80,7 @@ const FormContainer = styled.div`
8380
`;
8481

8582
const FormTitle = styled.h2`
86-
font-family: 'Source Code Pro', monospace;
83+
font-family: "Source Code Pro", monospace;
8784
font-size: 18px;
8885
font-weight: 500;
8986
line-height: 1.35;
@@ -155,7 +152,7 @@ const Input = styled.input`
155152
padding: 0 24px;
156153
background-color: ${tm(({ colors }) => colors.neutral100)};
157154
border: 1px solid ${tm(({ colors }) => colors.neutral700)};
158-
font-family: 'Source Code Pro', monospace;
155+
font-family: "Source Code Pro", monospace;
159156
font-size: 16px;
160157
line-height: 30px;
161158
letter-spacing: 0.03em;
@@ -209,7 +206,7 @@ const ErrorMessage = styled.div`
209206
left: 0;
210207
color: red;
211208
font-size: 10px;
212-
font-family: 'Source Code Pro', monospace;
209+
font-family: "Source Code Pro", monospace;
213210
${media.xs} {
214211
font-size: 12px;
215212
bottom: -18px;
@@ -224,7 +221,7 @@ const SuccessMessage = styled.div`
224221
margin-top: 16px;
225222
color: ${tm(({ colors }) => colors.tipBorderColor)};
226223
font-size: 16px;
227-
font-family: 'Source Code Pro', monospace;
224+
font-family: "Source Code Pro", monospace;
228225
text-align: center;
229226
`;
230227

@@ -253,94 +250,53 @@ const LinesContainer = styled.div`
253250
}
254251
`;
255252

256-
const validateEmail = (email: string): boolean => {
257-
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;
258-
return emailRegex.test(email);
259-
};
260-
261-
const EmailForm: React.FC<EmailFormProps> = ({ endpoint }) => {
262-
const [email, setEmail] = useState('');
263-
const [error, setError] = useState('');
264-
const [isSubmitting, setIsSubmitting] = useState(false);
265-
const [isSuccess, setIsSuccess] = useState(false);
266-
267-
const handleSubmit = async (e: any) => {
268-
e.preventDefault();
269-
270-
// Reset states
271-
setError('');
272-
setIsSuccess(false);
273-
274-
// Validate email
275-
if (!email.trim()) {
276-
setError('Email address is required');
277-
return;
278-
}
279-
280-
if (!validateEmail(email)) {
281-
setError('Please enter a valid email address');
282-
return;
283-
}
284-
285-
setIsSubmitting(true);
286-
287-
try {
288-
const response = await fetch(endpoint, {
289-
method: 'POST',
290-
headers: {
291-
'Content-Type': 'application/json',
292-
},
293-
body: JSON.stringify({ email }),
294-
});
295-
296-
if (!response.ok) {
297-
throw new Error('Failed to submit email');
298-
}
299-
300-
// Success
301-
setEmail('');
302-
setIsSuccess(true);
303-
} catch (err) {
304-
console.error('Error submitting email:', err);
305-
setError('Failed to submit. Please try again later.');
306-
} finally {
307-
setIsSubmitting(false);
308-
}
309-
};
310-
253+
const EmailForm: React.FC<EmailFormProps> = () => {
311254
return (
312255
<Section clearPadding>
313256
<LinesContainer>
314257
<Lines />
315258
</LinesContainer>
316259
<FormSection>
317260
<LandingContainer>
318-
<BackgroundImage image={backgroundImageLight.src} imageDark={backgroundImageDark.src} />
261+
<BackgroundImage
262+
image={backgroundImageLight.src}
263+
imageDark={backgroundImageDark.src}
264+
/>
319265
<FormContainer>
320-
<FormTitle>Tell me about new product features as they come out</FormTitle>
266+
<FormTitle>
267+
Tell me about new product features as they come out
268+
</FormTitle>
321269
<FormRow>
322-
<InputContainer>
323-
<Input
324-
type='email'
325-
placeholder='email address*'
326-
value={email}
327-
onChange={({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
328-
setEmail(value);
329-
330-
if (error && (validateEmail(value) || value.trim() === '')) {
331-
setError('');
332-
}
333-
}}
334-
disabled={isSubmitting}
335-
aria-label='Email address'
336-
/>
337-
{error && <ErrorMessage>{error}</ErrorMessage>}
338-
</InputContainer>
339-
<CTA variant='lg' disabled={isSubmitting} onClick={(e) => handleSubmit(e)}>
340-
{isSubmitting ? 'Submitting...' : 'Get started'}
341-
</CTA>
270+
<script
271+
src="https://cdn.jsdelivr.net/ghost/signup-form@~0.2/umd/signup-form.min.js"
272+
data-button-color="#000000"
273+
data-button-text-color="#FFFFFF"
274+
data-site="https://blog.nomic.foundation/"
275+
data-locale="en"
276+
async
277+
/>
278+
{/* <InputContainer> */}
279+
{/* <Input */}
280+
{/* type='email' */}
281+
{/* placeholder='email address*' */}
282+
{/* value={email} */}
283+
{/* onChange={({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => { */}
284+
{/* setEmail(value); */}
285+
286+
{/* if (error && (validateEmail(value) || value.trim() === '')) { */}
287+
{/* setError(''); */}
288+
{/* } */}
289+
{/* }} */}
290+
{/* disabled={isSubmitting} */}
291+
{/* aria-label='Email address' */}
292+
{/* /> */}
293+
{/* {error && <ErrorMessage>{error}</ErrorMessage>} */}
294+
{/* </InputContainer> */}
295+
{/* <CTA variant='lg' disabled={isSubmitting} onClick={(e) => handleSubmit(e)}> */}
296+
{/* {isSubmitting ? 'Submitting...' : 'Get started'} */}
297+
{/* </CTA> */}
342298
</FormRow>
343-
{isSuccess && <SuccessMessage>Thank you! You are now subscribed to our updates.</SuccessMessage>}
299+
{/* {isSuccess && <SuccessMessage>Thank you! You are now subscribed to our updates.</SuccessMessage>} */}
344300
</FormContainer>
345301
</LandingContainer>
346302
</FormSection>

‎src/pages/index.tsx‎

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import WhatIsNewBlock, {
88
import HardhatNews from "../components/landingBlocks/HardhatNews";
99
import getPosts from "../lib/getPosts";
1010
import getHardHatReleases from "../lib/getHardHatReleases";
11+
import EmailForm from "../components/landingBlocks/EmailForm";
1112

1213
type HomePageType = {
1314
releases: NewsType[];
@@ -37,39 +38,7 @@ const Home = ({ releases, posts }: HomePageType) => {
3738
content={{ title: homepageContent.hardhatNewsContent.title, posts }}
3839
/>
3940

40-
{/* <EmailForm endpoint={homepageContent.emailFormContent.endpoint} /> */}
41-
42-
<form data-members-form="subscribe">
43-
<input
44-
data-members-label
45-
type="hidden"
46-
value="Turntable buying guide"
47-
/>
48-
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
49-
<label>
50-
Name
51-
<input data-members-name />
52-
</label>
53-
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
54-
<label>
55-
Email
56-
<input data-members-email type="email" required />
57-
</label>
58-
{/* eslint-disable-next-line react/button-has-type */}
59-
<button>Sign up</button>
60-
<p className="loading">⏲️ Please hold while we check our collection.</p>
61-
<p className="error">❗Somethings gone wrong. Please try again.</p>
62-
<p className="success">🎸 Success! Check your inbox for our email.</p>
63-
</form>
64-
65-
<script
66-
src="https://cdn.jsdelivr.net/ghost/signup-form@~0.2/umd/signup-form.min.js"
67-
data-button-color="#000000"
68-
data-button-text-color="#FFFFFF"
69-
data-site="https://blog.nomic.foundation/"
70-
data-locale="en"
71-
async
72-
/>
41+
<EmailForm />
7342
</LandingLayout>
7443
);
7544
};

0 commit comments

Comments
 (0)