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 113f0f7

Browse files
Zubair Ahmedvinaypuppal
Zubair Ahmed
authored and
vinaypuppal
committed
Events page updated (#11)
* events page is updated with meetup api (WIP) * events page updated * git ignored lock file * events page with future and past events * events page completed * no semicolon rule removed from prettier * #11 (comment) * #11 (comment) * fix on #11 (comment) * #11 (comment) * engines from package.json removed * #11 (comment) * #9 * #11 (comment) * links to open in new windows
1 parent ed30198 commit 113f0f7

20 files changed

+1112
-779
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,4 @@ $RECYCLE.BIN/
116116

117117
# Others
118118
data/
119-
.next/
119+
.next/

‎components/count-down.js

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -85,38 +85,28 @@ class Countdown extends Component {
8585
<div className="countdown">
8686
<span className="countdown-col">
8787
<span className="countdown-col-element">
88-
<strong>
89-
{this.addLeadingZeros(countDown.days)}
90-
</strong>
91-
<span>
92-
{countDown.days === 1 ? 'Day' : 'Days'}
93-
</span>
88+
<strong>{this.addLeadingZeros(countDown.days)}</strong>
89+
<span>{countDown.days === 1 ? 'Day' : 'Days'}</span>
9490
</span>
9591
</span>
9692

9793
<span className="countdown-col">
9894
<span className="countdown-col-element">
99-
<strong>
100-
{this.addLeadingZeros(countDown.hours)}
101-
</strong>
95+
<strong>{this.addLeadingZeros(countDown.hours)}</strong>
10296
<span>Hours</span>
10397
</span>
10498
</span>
10599

106100
<span className="countdown-col">
107101
<span className="countdown-col-element">
108-
<strong>
109-
{this.addLeadingZeros(countDown.min)}
110-
</strong>
102+
<strong>{this.addLeadingZeros(countDown.min)}</strong>
111103
<span>Min</span>
112104
</span>
113105
</span>
114106

115107
<span className="countdown-col">
116108
<span className="countdown-col-element">
117-
<strong>
118-
{this.addLeadingZeros(countDown.sec)}
119-
</strong>
109+
<strong>{this.addLeadingZeros(countDown.sec)}</strong>
120110
<span>Sec</span>
121111
</span>
122112
</span>

‎components/footer.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import FaYoutube from 'react-icons/lib/fa/youtube-play';
44
import FaGithub from 'react-icons/lib/fa/github-alt';
55
import FaInstagram from 'react-icons/lib/fa/instagram';
66

7-
export default () =>
7+
export default () => (
88
<footer>
99
<div className="footer__container">
1010
<div className="footer__content">
@@ -79,4 +79,5 @@ export default () =>
7979
color: #314159;
8080
}
8181
`}</style>
82-
</footer>;
82+
</footer>
83+
);

‎components/global-styles.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
export default () =>
3+
export default () => (
44
<div>
55
<style jsx global>{`
66
*,
@@ -14,9 +14,9 @@ export default () =>
1414
padding: 0;
1515
margin: 0;
1616
background: #fafafa;
17-
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
18-
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
19-
"Helvetica Neue", sans-serif;
17+
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
18+
Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
19+
'Helvetica Neue', sans-serif;
2020
font-weight: 400;
2121
color: #444;
2222
text-rendering: optimizeLegibility;
@@ -43,11 +43,12 @@ export default () =>
4343
width: 100px;
4444
height: 100%;
4545
box-shadow: 0 0 10px #d812c8, 0 0 5px #d812c8;
46-
opacity: 1.0;
46+
opacity: 1;
4747
transform: rotate(3deg) translate(0px, -4px);
4848
}
4949
.headroom--pinned header {
50-
box-shadow: 0 2px 4px rgba(61, 71, 82, .1);
50+
box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
5151
}
5252
`}</style>
53-
</div>;
53+
</div>
54+
);

‎components/head.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import Head from 'next/head';
33

4-
export default ({ title }) =>
4+
export default ({ title }) => (
55
<Head>
66
<meta charSet="utf-8" />
77
<meta
@@ -41,14 +41,13 @@ export default ({ title }) =>
4141
rel="stylesheet"
4242
href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
4343
/>
44-
<title>
45-
{title}
46-
</title>
44+
<title>{title}</title>
4745
<meta name="description" content="coderplex" />
4846
<meta property="og:type" content="website" />
4947
<meta property="og:title" content={title} />
5048
<meta property="og:url" content="https://coderplex.org" />
5149
<meta property="og:image" content="/static/favicons/favicon-32x32.png" />
5250
<meta property="og:site_name" content="coderplex" />
5351
<meta property="og:description" content="coderplex" />
54-
</Head>;
52+
</Head>
53+
);

‎components/header.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export default props => {
9191
</li>
9292
);
9393
})}
94-
{props.username &&
94+
{props.username && (
9595
<li className="nav__linkItem">
9696
<img src={props.avatarUrl} alt="avatar_img" />
9797
<Dropdown
@@ -109,7 +109,8 @@ export default props => {
109109
</Dropdown.Item>
110110
</Dropdown.Menu>
111111
</Dropdown>
112-
</li>}
112+
</li>
113+
)}
113114
</ul>
114115
</nav>
115116
</div>

‎components/icon.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
export default () =>
3+
export default () => (
44
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
55
<path
66
fill="#6B4841"
@@ -45,4 +45,5 @@ export default () =>
4545
height: 200px;
4646
}
4747
`}</style>
48-
</svg>;
48+
</svg>
49+
);

‎components/row-events.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { Card, Icon } from 'semantic-ui-react';
3+
import moment from 'moment';
4+
5+
const RowEvent = props => {
6+
return (
7+
<Card fluid raised targer="_blank" href={props.link}>
8+
<Card.Content>
9+
<Card.Header>{props.name}</Card.Header>
10+
<div className="card_venue">
11+
<Card.Meta>
12+
{props.venue === undefined ? 'Online' : props.venue.name}
13+
</Card.Meta>
14+
</div>
15+
</Card.Content>
16+
<Card.Content extra>
17+
<span className="card_icons">
18+
<Icon name="clock" />
19+
{moment(props.time).format("h:mm A, ddd MMM Do 'YY")}
20+
</span>
21+
<span className="card_icons">
22+
<Icon name="users" />
23+
{`${props.yesCount} attended`}
24+
</span>
25+
<Icon name="log out" />
26+
{props.venue === undefined ? 'Free session' : 'Free entry'}
27+
</Card.Content>
28+
<style jsx>{`
29+
.card_venue {
30+
margin-top: 15px;
31+
}
32+
.card_icons {
33+
margin-right: 15px;
34+
}
35+
`}</style>
36+
</Card>
37+
);
38+
};
39+
40+
export default RowEvent;

‎package.json

Lines changed: 5 additions & 5 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 nodemon server.js -w server.js",
@@ -33,9 +34,6 @@
3334
"git add"
3435
]
3536
},
36-
"engines": {
37-
"node": "8.1.4"
38-
},
3937
"keywords": [],
4038
"author": "Vinay Puppal <[email protected]> (https://www.vinaypuppal.com/)",
4139
"license": "MIT",
@@ -49,6 +47,7 @@
4947
"feathers-rest": "^1.8.0",
5048
"isomorphic-unfetch": "^2.0.0",
5149
"js-cookie": "^2.1.4",
50+
"moment": "^2.19.1",
5251
"next": "2.4.7",
5352
"nprogress": "^0.2.0",
5453
"preact": "^8.2.1",
@@ -60,6 +59,7 @@
6059
"react-ga": "^2.2.0",
6160
"react-headroom": "^2.1.6",
6261
"react-icons": "^2.2.5",
62+
"react-textgradient": "0.0.2",
6363
"semantic-ui-react": "^0.71.3"
6464
},
6565
"devDependencies": {
@@ -71,7 +71,7 @@
7171
"husky": "^0.14.3",
7272
"lint-staged": "^4.0.2",
7373
"nodemon": "^1.11.0",
74-
"prettier": "^1.5.3",
74+
"prettier": "^1.7.0",
7575
"webpack-bundle-analyzer": "^2.8.3",
7676
"xo": "^0.18.2"
7777
}

‎pages/events.js

Lines changed: 103 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,109 @@
11
import React from 'react';
2+
import axios from 'axios';
3+
import { Card } from 'semantic-ui-react';
24

3-
import Icon from '../components/icon';
45
import publicPage from '../hocs/public-page';
6+
import {
7+
futureEventsMeetupURL,
8+
pastEventsMeetupURL,
9+
reverseProxyCORS,
10+
} from '../utils/urls';
11+
import RowEvent from '../components/row-events';
512

6-
export default publicPage(() =>
7-
<div>
8-
<main>
9-
<Icon />
10-
<h3>Under Construction, Coming Soon!...</h3>
11-
</main>
12-
<style jsx>{`
13-
main {
14-
min-height: calc(100vh - 70px);
15-
background: #f4f7fb;
16-
color: #314159;
17-
display: flex;
18-
justify-content: center;
19-
align-items: center;
20-
flex-direction: column;
13+
export default publicPage(
14+
class Events extends React.Component {
15+
static async getInitialProps() {
16+
try {
17+
const requestPastEvents = await axios.get(
18+
`${reverseProxyCORS}${pastEventsMeetupURL}`,
19+
);
20+
const requestFutureEvents = await axios.get(
21+
`${reverseProxyCORS}${futureEventsMeetupURL}`,
22+
);
23+
return {
24+
pastEvents: requestPastEvents.data,
25+
futureEvents: requestFutureEvents.data,
26+
};
27+
} catch (err) {
28+
return {
29+
pastEvents: 'err',
30+
futureEvents: 'err',
31+
};
2132
}
22-
`}</style>
23-
</div>,
33+
}
34+
35+
render() {
36+
return (
37+
<div>
38+
<div className="top_banner_root">
39+
<h1 className="top_banner_headline">Events</h1>
40+
<h2>Because you cannot change the world alone</h2>
41+
</div>
42+
<main>
43+
{this.props.pastEvents !== 'err' &&
44+
this.props.futureEvents !== 'err' ? (
45+
<div>
46+
<h4>Upcoming events</h4>
47+
<div>
48+
{this.props.futureEvents.map(event => (
49+
<Card.Group key={event.id}>
50+
<RowEvent
51+
name={event.name}
52+
yesCount={event.yes_rsvp_count}
53+
time={event.time}
54+
venue={event.venue}
55+
link={event.link}
56+
/>
57+
</Card.Group>
58+
))}
59+
</div>
60+
<h4>Recent events</h4>
61+
<div>
62+
{this.props.pastEvents.map(event => (
63+
<Card.Group key={event.id}>
64+
<RowEvent
65+
key={event.id}
66+
name={event.name}
67+
yesCount={event.yes_rsvp_count}
68+
time={event.time}
69+
venue={event.venue}
70+
link={event.link}
71+
/>
72+
</Card.Group>
73+
))}
74+
</div>
75+
</div>
76+
) : (
77+
<div>Failed to Retrieve Events</div>
78+
)}
79+
</main>
80+
<style jsx>{`
81+
main {
82+
background-color: #ffffff;
83+
padding-top: 30px;
84+
padding-bottom: 30px;
85+
padding-left: 30px;
86+
padding-right: 30px;
87+
min-height: calc(100vh - 70px);
88+
display: flex;
89+
justify-content: center;
90+
align-items: center;
91+
flex-direction: column;
92+
}
93+
.top_banner_root {
94+
background-color: #f4f7fb;
95+
min-height: 200px;
96+
text-align: center;
97+
}
98+
.top_banner_headline {
99+
padding-top: 20px;
100+
font-size: 4em;
101+
color: #df1cb5;
102+
font-weight: 900;
103+
}
104+
`}</style>
105+
</div>
106+
);
107+
}
108+
},
24109
);

0 commit comments

Comments
 (0)