Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit 356761d

Browse files
HerrBastiiivinaypuppal
HerrBastiii
authored and
vinaypuppal
committed
Move Subscripte to extern component (#48)
1 parent c10e6bd commit 356761d

File tree

2 files changed

+133
-107
lines changed

2 files changed

+133
-107
lines changed

‎components/subscribe.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import React, { Component } from 'react';
2+
import { Form, Message } from 'semantic-ui-react';
3+
import { baseEventsURL, subscribeURL } from '../utils/urls';
4+
5+
class Subscribe extends Component {
6+
state = {
7+
subscribersEmail: '',
8+
submittingEmail: false,
9+
emailSubmittingError: '',
10+
subscriberEmailPosted: false,
11+
};
12+
13+
handleChange = event => {
14+
this.setState({
15+
subscribersEmail: event.target.value,
16+
emailSubmittingError: '',
17+
});
18+
};
19+
20+
handleSubmit = () => {
21+
this.setState({ emailSubmittingError: '' });
22+
const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
23+
const email = this.state.subscribersEmail;
24+
if (!email) {
25+
this.setState({
26+
emailSubmittingError: 'Please enter a email',
27+
});
28+
return;
29+
}
30+
if (!emailRegx.test(email)) {
31+
this.setState({
32+
emailSubmittingError: 'Please enter a valid email',
33+
});
34+
return;
35+
}
36+
this.postSubscriberEmail(email);
37+
};
38+
39+
async postSubscriberEmail(subscribersEmail) {
40+
await this.setState({ submittingEmail: true });
41+
const postSubscriberEmailRequest = await fetch(
42+
`${baseEventsURL}${subscribeURL}`,
43+
{
44+
method: 'post',
45+
headers: { 'Content-Type': 'application/json' },
46+
body: JSON.stringify({ email: subscribersEmail }),
47+
},
48+
);
49+
if (postSubscriberEmailRequest.status === 200) {
50+
this.setState({
51+
subscriberEmailPosted: true,
52+
submittingEmail: false,
53+
emailSubmittingError: '',
54+
});
55+
} else {
56+
this.setState({
57+
submittingEmail: false,
58+
emailSubmittingError: 'Submission Failed Try Again.',
59+
});
60+
}
61+
}
62+
render() {
63+
const hasError = this.state.emailSubmittingError !== '';
64+
65+
return (
66+
<div>
67+
<section className="update">
68+
<div className="container update_container">
69+
<h3 className="taglines">
70+
We are constanly updating our platform.<br />If you would like to
71+
stay informed about our updates, drop you email.
72+
</h3>
73+
<div className="update_content">
74+
{this.state.subscriberEmailPosted ? (
75+
<h2>Thank you, we will keep you posted</h2>
76+
) : (
77+
<Form onSubmit={this.handleSubmit} error={hasError}>
78+
<Form.Group>
79+
<Form.Input
80+
placeholder="Enter email address"
81+
name="email"
82+
value={this.state.subscribersEmail}
83+
onChange={this.handleChange}
84+
disabled={this.state.submittingEmail}
85+
/>
86+
<Form.Button
87+
loading={this.state.submittingEmail}
88+
color="pink"
89+
content="Subscribe"
90+
/>
91+
</Form.Group>
92+
<Message
93+
error
94+
header="Action Forbidden"
95+
content={this.state.emailSubmittingError}
96+
/>
97+
</Form>
98+
)}
99+
</div>
100+
</div>
101+
</section>
102+
<style jsx>{`
103+
.taglines {
104+
padding-bottom: 20px;
105+
}
106+
.update_container {
107+
background-color: #f6f6f6 !important;
108+
}
109+
.update_content {
110+
display: flex;
111+
flex-direction: row;
112+
flex-wrap: wrap;
113+
justify-content: center;
114+
align-content: center;
115+
align-items: center;
116+
}
117+
.container {
118+
background-color: #ffffff;
119+
text-align: center;
120+
padding: 60px;
121+
}
122+
`}</style>
123+
</div>
124+
);
125+
}
126+
}
127+
128+
export default Subscribe;

‎pages/index.js

Lines changed: 5 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
22
import Link from 'next/link';
3-
import { Card, Button, Divider, Form, Message } from 'semantic-ui-react';
3+
import { Card, Button, Divider } from 'semantic-ui-react';
44

5-
import { baseEventsURL, indexPageEventURL, subscribeURL } from '../utils/urls';
5+
import { baseEventsURL, indexPageEventURL } from '../utils/urls';
66
import RowEvent from '../components/row-events';
77
import publicPage from '../hocs/public-page';
8+
import Subscribe from '../components/subscribe';
89

910
const indexPageLearns = [
1011
{
@@ -53,10 +54,6 @@ const indexPageLearns = [
5354
class Home extends React.Component {
5455
state = {
5556
indexPageEvent: '',
56-
subscribersEmail: '',
57-
submittingEmail: false,
58-
emailSubmittingError: '',
59-
subscriberEmailPosted: false,
6057
};
6158

6259
async componentDidMount() {
@@ -71,56 +68,6 @@ class Home extends React.Component {
7168
}
7269
}
7370

74-
handleChange = event => {
75-
this.setState({
76-
subscribersEmail: event.target.value,
77-
emailSubmittingError: '',
78-
});
79-
};
80-
81-
handleSubmit = () => {
82-
this.setState({ emailSubmittingError: '' });
83-
const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
84-
const email = this.state.subscribersEmail;
85-
if (!email) {
86-
this.setState({
87-
emailSubmittingError: 'Please enter a email',
88-
});
89-
return;
90-
}
91-
if (!emailRegx.test(email)) {
92-
this.setState({
93-
emailSubmittingError: 'Please enter a valid email',
94-
});
95-
return;
96-
}
97-
this.postSubscriberEmail(email);
98-
};
99-
100-
async postSubscriberEmail(subscribersEmail) {
101-
await this.setState({ submittingEmail: true });
102-
const postSubscriberEmailRequest = await fetch(
103-
`${baseEventsURL}${subscribeURL}`,
104-
{
105-
method: 'post',
106-
headers: { 'Content-Type': 'application/json' },
107-
body: JSON.stringify({ email: subscribersEmail }),
108-
},
109-
);
110-
if (postSubscriberEmailRequest.status === 200) {
111-
this.setState({
112-
subscriberEmailPosted: true,
113-
submittingEmail: false,
114-
emailSubmittingError: '',
115-
});
116-
} else {
117-
this.setState({
118-
submittingEmail: false,
119-
emailSubmittingError: 'Submission Failed Try Again.',
120-
});
121-
}
122-
}
123-
12471
render() {
12572
return (
12673
<div>
@@ -238,46 +185,7 @@ class Home extends React.Component {
238185
</Button.Group>
239186
</div>
240187
</section>
241-
<section className="update">
242-
<div className="container update_container">
243-
<h3 className="taglines">
244-
We are constanly updating our platform.<br />If you would like
245-
to stay informed about our updates, drop you email.
246-
</h3>
247-
<div className="update_content">
248-
{this.state.subscriberEmailPosted ? (
249-
<h2>Thank you, we will keep you posted</h2>
250-
) : (
251-
<Form
252-
onSubmit={this.handleSubmit}
253-
error={this.state.emailSubmittingError}
254-
>
255-
<Form.Group>
256-
<Form.Input
257-
placeholder="Enter email address"
258-
name="email"
259-
value={this.state.subscribersEmail}
260-
onChange={this.handleChange}
261-
disabled={this.state.submittingEmail}
262-
/>
263-
<Form.Button
264-
loading={this.state.submittingEmail}
265-
color="pink"
266-
content="Subscribe"
267-
/>
268-
</Form.Group>
269-
{this.state.emailSubmittingError && (
270-
<Message
271-
error
272-
header="Action Forbidden"
273-
content={this.state.emailSubmittingError}
274-
/>
275-
)}
276-
</Form>
277-
)}
278-
</div>
279-
</div>
280-
</section>
188+
<Subscribe />
281189
</main>
282190
<style jsx>{`
283191
main {
@@ -333,17 +241,7 @@ class Home extends React.Component {
333241
.discord .container {
334242
background: #FAFAFA;
335243
}
336-
.update_container{
337-
background-color: #f6f6f6;
338-
}
339-
.update_content {
340-
display: flex;
341-
flex-direction: row;
342-
flex-wrap: wrap;
343-
justify-content: center;
344-
align-content: center;
345-
align-items: center;
346-
}
244+
347245
`}</style>
348246
</div>
349247
);

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy