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)