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

Commit 7bda55e

Browse files
Zubair Ahmedvinaypuppal
Zubair Ahmed
authored and
vinaypuppal
committed
fixes #32
* links to learn repo syllabus added except for laravel * 1. subscriber form added without login 2. links of learn in new tab * fixed bug- center prop on card in index.js * name of events url changed * post request for email updates added * fixed z-index glitch * add loading state to email submission
1 parent c6312b8 commit 7bda55e

File tree

4 files changed

+154
-25
lines changed

4 files changed

+154
-25
lines changed

‎components/global-styles.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export default () => (
4949
.headroom--pinned header {
5050
box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
5151
}
52+
.headroom--scrolled {
53+
z-index: 99999 !important;
54+
}
5255
`}</style>
5356
</div>
5457
);

‎pages/events.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +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 {
7-
futureEventsMeetupURL,
8-
pastEventsMeetupURL,
9-
reverseProxyCORS,
10-
} from '../utils/urls';
6+
import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
117
import RowEvent from '../components/row-events';
128

139
class Events extends React.Component {
@@ -20,13 +16,13 @@ class Events extends React.Component {
2016
async componentDidMount() {
2117
try {
2218
const pastEvents = await fetch(
23-
`${reverseProxyCORS}${pastEventsMeetupURL}`,
19+
`${baseEventsURL}${pastEventsURL}`,
2420
).then(res => {
2521
if (res.ok) return res.json();
2622
throw new Error('Failed to Retrieve Events');
2723
});
2824
const futureEvents = await fetch(
29-
`${reverseProxyCORS}${futureEventsMeetupURL}`,
25+
`${baseEventsURL}${futureEventsURL}`,
3026
).then(res => {
3127
if (res.ok) return res.json();
3228
throw new Error('Failed to Retrieve Events');

‎pages/index.js

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

5-
import { indexPageMeetupURL, reverseProxyCORS } from '../utils/urls';
5+
import { baseEventsURL, indexPageEventURL, subscribeURL } from '../utils/urls';
66
import RowEvent from '../components/row-events';
77
import publicPage from '../hocs/public-page';
88

99
const indexPageLearns = [
1010
{
11-
link: '#',
11+
link:
12+
'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
1213
title: 'ReactJS',
1314
subject: 'Frontend Web Development',
1415
image: '',
@@ -20,25 +21,29 @@ const indexPageLearns = [
2021
image: '',
2122
},
2223
{
23-
link: '#',
24+
link:
25+
'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
2426
title: 'Go',
2527
subject: 'Programming Language',
2628
image: '',
2729
},
2830
{
29-
link: '#',
30-
title: 'Security',
31-
subject: 'Networking',
31+
link:
32+
'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
33+
title: 'Introduction to C.S',
34+
subject: 'Computer Science',
3235
image: '',
3336
},
3437
{
35-
link: '#',
38+
link:
39+
'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
3640
title: 'Blockchain',
3741
subject: 'Distributed Computing',
3842
image: '',
3943
},
4044
{
41-
link: '#',
45+
link:
46+
'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
4247
title: 'Android',
4348
subject: 'Mobile Development',
4449
image: '',
@@ -48,13 +53,15 @@ const indexPageLearns = [
4853
class Home extends React.Component {
4954
state = {
5055
indexPageEvent: '',
56+
subscribersEmail: '',
57+
submittingEmail: false,
58+
emailSubmittingError: '',
59+
subscriberEmailPosted: false,
5160
};
5261

5362
async componentDidMount() {
5463
try {
55-
const requestEvent = await fetch(
56-
`${reverseProxyCORS}${indexPageMeetupURL}`,
57-
);
64+
const requestEvent = await fetch(`${baseEventsURL}${indexPageEventURL}`);
5865
const requestEventJson = await requestEvent.json();
5966
await this.setState({
6067
indexPageEvent: requestEventJson[0],
@@ -64,6 +71,56 @@ class Home extends React.Component {
6471
}
6572
}
6673

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+
67124
render() {
68125
return (
69126
<div>
@@ -87,12 +144,12 @@ class Home extends React.Component {
87144
resource to learn any technology
88145
</h3>
89146
<div className="content">
90-
<Card.Group itemsPerRow={3} stackable textAlign={'center'}>
147+
<Card.Group itemsPerRow={3} stackable>
91148
{indexPageLearns.map(learn => (
92149
<Card
93-
raised
94150
key={learn.title}
95151
href={learn.link}
152+
target="_blank"
96153
header={learn.title}
97154
meta={learn.subject}
98155
/>
@@ -164,6 +221,63 @@ class Home extends React.Component {
164221
</Link>
165222
</div>
166223
</section>
224+
<Divider hidden />
225+
<section className="discord">
226+
<div className="container">
227+
<h3 className="taglines">
228+
Join our Discord server, and say Hello World!
229+
</h3>
230+
<Button.Group basic>
231+
<Button
232+
content="Join Chat"
233+
icon="discussions"
234+
labelPosition="left"
235+
onClick={() =>
236+
window.open('https://discord.gg/dVnQ2Gf', '_blank')}
237+
/>
238+
</Button.Group>
239+
</div>
240+
</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>
167281
</main>
168282
<style jsx>{`
169283
main {
@@ -216,6 +330,20 @@ class Home extends React.Component {
216330
padding-left: 30px;
217331
padding-right: 30px;
218332
}
333+
.discord .container {
334+
background: #FAFAFA;
335+
}
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+
}
219347
`}</style>
220348
</div>
221349
);

‎utils/urls.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
export const pastEventsMeetupURL = '/events/past';
1+
export const baseEventsURL = 'https://coderplex-api.glitch.me/api';
22

3-
export const futureEventsMeetupURL = '/events/upcoming';
3+
export const futureEventsURL = '/events/upcoming';
44

5-
export const indexPageMeetupURL = '/events';
5+
export const pastEventsURL = '/events/past';
66

7-
export const reverseProxyCORS = 'https://coderplex-api.glitch.me/api';
7+
export const indexPageEventURL = '/events';
8+
9+
export const subscribeURL = '/subscribe';

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