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

Commit f216dfc

Browse files
author
M-ZubairAhmed
committed
Merge branch 'learn' of github.com:coderplex/coderplex into learn
2 parents acc4b99 + 673c431 commit f216dfc

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 <me@vinaypuppal.com> (https://www.vinaypuppal.com/)",
46-
"license": "BSD",
37+
"contributors": [
38+
"Vinay Puppal <me@vinaypuppal.com> (https://www.vinaypuppal.com/)",
39+
"M-ZubairAhmed <ahmedzubari216@gmail.com> (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)
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