Thanks to visit codestin.com
Credit goes to github.com

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

Commit 673c431

Browse files
vinaypuppalvinaypuppal
authored
Merge branch 'master' into learn
2 parents eaa22ed + 356761d commit 673c431

File tree

9 files changed

+317
-146
lines changed

9 files changed

+317
-146
lines changed

‎components/header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default props => {
8787
padding: 5px 20px;
8888
width: 100%;
8989
background: #fff;
90-
z-index: 1000
90+
z-index: 1000;
9191
}
9292
.header__container {
9393
max-width: 1280px;

‎components/row-events.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
55

66
const extractImageUrl = input => {
77
const regex = /<img.*?src=['"](.*?)['"]/;
8-
return regex.exec(input)[1];
8+
const matches = regex.exec(input);
9+
return matches ? matches[1] : '';
910
};
1011

1112
const RowEvent = props => {

‎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;

‎components/top-banner.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
3+
export default props => (
4+
<div>
5+
<div>
6+
<div className="top_banner_root">
7+
<h1 className="top_banner_headline">{props.pageTitle}</h1>
8+
<h2>{props.pageSubTitle}</h2>
9+
</div>
10+
<style jsx>{`
11+
.top_banner_root {
12+
background-color: #f4f7fb;
13+
min-height: 200px;
14+
text-align: center;
15+
}
16+
.top_banner_headline {
17+
padding-top: 20px;
18+
font-size: 4em;
19+
color: #df1cb5;
20+
font-weight: 900;
21+
}
22+
`}</style>
23+
</div>
24+
</div>
25+
);

‎package.json

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"main": "index.js",
66
"scripts": {
77
"test": "xo",
8-
"lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
8+
"lint":
9+
"prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
910
"precommit": "lint-staged",
1011
"analyze": "cross-env ANALYZE=1 next build",
1112
"dev": "cross-env NODE_ENV=development next",
@@ -15,24 +16,15 @@
1516
},
1617
"xo": {
1718
"parser": "babel-eslint",
18-
"extends": [
19-
"prettier",
20-
"prettier/react",
21-
"plugin:react/recommended"
22-
],
23-
"env": [
24-
"browser",
25-
"node"
26-
],
19+
"extends": ["prettier", "prettier/react", "plugin:react/recommended"],
20+
"env": ["browser", "node"],
2721
"rules": {
2822
"linebreak-style": 0,
2923
"react/display-name": 0,
3024
"react/prop-types": 0
3125
},
3226
"space:": 2,
33-
"ignores": [
34-
"next.config.js"
35-
]
27+
"ignores": ["next.config.js"]
3628
},
3729
"lint-staged": {
3830
"*.js": [
@@ -42,8 +34,15 @@
4234
]
4335
},
4436
"keywords": [],
45-
"author": "Vinay Puppal <[email protected]> (https://www.vinaypuppal.com/)",
46-
"license": "BSD",
37+
"contributors": [
38+
"Vinay Puppal <[email protected]> (https://www.vinaypuppal.com/)",
39+
"M-ZubairAhmed <[email protected]> (https://github.com/M-ZubairAhmed)"
40+
],
41+
"repository": {
42+
"type": "git",
43+
"url": "https://github.com/coderplex/coderplex.git"
44+
},
45+
"license": "BSD-3-Clause",
4746
"dependencies": {
4847
"date-fns": "1.29.0",
4948
"feathers-rest": "^1.8.0",
@@ -58,7 +57,7 @@
5857
"react-headroom": "^2.1.6",
5958
"react-icons": "^2.2.5",
6059
"react-textgradient": "0.0.2",
61-
"semantic-ui-react": "^0.71.3"
60+
"semantic-ui-react": "^0.71.5"
6261
},
6362
"devDependencies": {
6463
"axios": "0.16.2",

‎pages/events.js

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import fetch from 'isomorphic-unfetch';
33
import { Card, Divider, Dimmer, Loader } from 'semantic-ui-react';
44

55
import publicPage from '../hocs/public-page';
6+
import TopBanner from '../components/top-banner';
67
import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
78
import RowEvent from '../components/row-events';
89

@@ -98,10 +99,10 @@ class Events extends React.Component {
9899
render() {
99100
return (
100101
<div>
101-
<div className="top_banner_root">
102-
<h1 className="top_banner_headline">Events</h1>
103-
<h2>Because you cannot change the world alone</h2>
104-
</div>
102+
<TopBanner
103+
pageTitle="Events"
104+
pageSubTitle="Because you cannot change the world alone"
105+
/>
105106
<main>
106107
{this.state.loading ? (
107108
<Dimmer active>
@@ -124,17 +125,6 @@ class Events extends React.Component {
124125
align-items: center;
125126
flex-direction: column;
126127
}
127-
.top_banner_root {
128-
background-color: #f4f7fb;
129-
min-height: 200px;
130-
text-align: center;
131-
}
132-
.top_banner_headline {
133-
padding-top: 20px;
134-
font-size: 4em;
135-
color: #df1cb5;
136-
font-weight: 900;
137-
}
138128
`}</style>
139129
</div>
140130
);

0 commit comments

Comments
 (0)