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 65b470c

Browse files
author
z
committed
reduced max line of prettier to 80 as in laptops it was a problem
event card done except for time
1 parent b751b12 commit 65b470c

File tree

13 files changed

+300
-85
lines changed

13 files changed

+300
-85
lines changed

‎.prettierrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"printWidth": 120,
2+
"printWidth": 80,
33
"semi": true,
44
"trailingComma": "es5",
55
"singleQuote": true,

‎components/common/footer/index.js

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -151,11 +151,14 @@ export default class FooterBar extends React.Component {
151151

152152
async postSubscriberEmail(subscribersEmail) {
153153
await this.setState({ submittingEmail: true });
154-
const postSubscriberEmailRequest = await fetch(`${baseEventsURL}${subscribeURL}`, {
155-
method: 'post',
156-
headers: { 'Content-Type': 'application/json' },
157-
body: JSON.stringify({ email: subscribersEmail }),
158-
});
154+
const postSubscriberEmailRequest = await fetch(
155+
`${baseEventsURL}${subscribeURL}`,
156+
{
157+
method: 'post',
158+
headers: { 'Content-Type': 'application/json' },
159+
body: JSON.stringify({ email: subscribersEmail }),
160+
}
161+
);
159162
if (postSubscriberEmailRequest.status === 200) {
160163
this.setState({
161164
subscriberEmailPosted: true,
@@ -174,8 +177,17 @@ export default class FooterBar extends React.Component {
174177
<Footer>
175178
<Container>
176179
<Flex wrap py={[0, 3]}>
177-
<Flex align="center" direction="column" justify="center" width={[1, 1, 1 / 2]} px={[2, 3]} py={[3, 0]}>
178-
<Title>We are constantly updating our platform. Do subscribe to stay informed.</Title>
180+
<Flex
181+
align="center"
182+
direction="column"
183+
justify="center"
184+
width={[1, 1, 1 / 2]}
185+
px={[2, 3]}
186+
py={[3, 0]}>
187+
<Title>
188+
We are constantly updating our platform. Do subscribe to stay
189+
informed.
190+
</Title>
179191
{this.state.subscriberEmailPosted ? (
180192
<h3>Thank you, we will keep you posted</h3>
181193
) : (
@@ -187,15 +199,22 @@ export default class FooterBar extends React.Component {
187199
placeholder="Enter your email..."
188200
/>
189201
<button type="submit" disabled={this.state.submittingEmail}>
190-
{this.state.submittingEmail ? 'Subscribing...' : 'Subscribe'}
202+
{this.state.submittingEmail
203+
? 'Subscribing...'
204+
: 'Subscribe'}
191205
</button>
192206
</Form>
193207
)}
194-
<Message className={this.state.emailSubmittingError ? 'error' : ''}>
208+
<Message
209+
className={this.state.emailSubmittingError ? 'error' : ''}>
195210
<p>{this.state.emailSubmittingError}</p>
196211
</Message>
197212
</Flex>
198-
<Flex className="follow" align="center" justify="center" width={[1, 1, 1 / 2]}>
213+
<Flex
214+
className="follow"
215+
align="center"
216+
justify="center"
217+
width={[1, 1, 1 / 2]}>
199218
<Box p={[1, 2]}>
200219
<Title>Follow Us</Title>
201220
<SocialLinks>

‎components/common/header/index.js

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ import Link from 'next/link';
77
import MetaInfo from '../../../config/meta-info';
88
import { Container } from '../../../utils/base.styles';
99
import Meta from '../meta';
10-
import { Header, Nav, NavLinks, NavLink, NavLogo, MobileMenuBtn } from './index.styles';
10+
import {
11+
Header,
12+
Nav,
13+
NavLinks,
14+
NavLink,
15+
NavLogo,
16+
MobileMenuBtn,
17+
} from './index.styles';
1118

1219
Router.onRouteChangeStart = () => {
1320
NProgress.start();
@@ -61,7 +68,8 @@ class NavBar extends React.Component {
6168
};
6269
render() {
6370
const pathName = this.props.router.pathname;
64-
const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
71+
const metaData =
72+
MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
6573
const title = metaData.title;
6674
const description = metaData.description;
6775
const image = metaData.image;
@@ -71,7 +79,9 @@ class NavBar extends React.Component {
7179
<Meta title={title} description={description} image={image} />
7280
<Container>
7381
<Nav>
74-
<MobileMenuBtn onClick={this.toggleMenu} className={this.state.menuOpen ? 'open' : ''}>
82+
<MobileMenuBtn
83+
onClick={this.toggleMenu}
84+
className={this.state.menuOpen ? 'open' : ''}>
7585
<span>Menu</span>
7686
</MobileMenuBtn>
7787
<NavLogo>
@@ -83,18 +93,23 @@ class NavBar extends React.Component {
8393
</Link>
8494
</NavLogo>
8595
<NavLinks className={this.state.menuOpen ? 'open' : ''}>
86-
{this.state.navItems.filter(item => !item.external).map(item => (
87-
<NavLink key={item.path}>
88-
<Link href={item.path}>
89-
<a className={pathName === item.path ? 'active' : ''}>
90-
<span>{item.title}</span>
91-
</a>
92-
</Link>
93-
</NavLink>
94-
))}
96+
{this.state.navItems
97+
.filter(item => !item.external)
98+
.map(item => (
99+
<NavLink key={item.path}>
100+
<Link href={item.path}>
101+
<a className={pathName === item.path ? 'active' : ''}>
102+
<span>{item.title}</span>
103+
</a>
104+
</Link>
105+
</NavLink>
106+
))}
95107
{this.state.navItems.filter(item => item.external).map(item => (
96108
<NavLink key={item.path}>
97-
<a href={item.path} rel="noopener noreferrer" className={pathName === item.path ? 'active' : ''}>
109+
<a
110+
href={item.path}
111+
rel="noopener noreferrer"
112+
className={pathName === item.path ? 'active' : ''}>
98113
<span>{item.title}</span>
99114
</a>
100115
</NavLink>

‎components/common/meta.js

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,51 @@ export default ({ title, description, image }) => {
88
<meta name="viewport" content="width=device-width,initial-scale=1" />
99
<meta name="mobile-web-app-capable" content="yes" />
1010
<meta name="apple-mobile-web-app-capable" content="yes" />
11-
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png" />
12-
<link rel="icon" type="image/png" href="/static/favicons/favicon-32x32.png" sizes="32x32" />
13-
<link rel="icon" type="image/png" href="/static/favicons/favicon-16x16.png" sizes="16x16" />
11+
<link
12+
rel="apple-touch-icon"
13+
sizes="180x180"
14+
href="/static/favicons/apple-touch-icon.png"
15+
/>
16+
<link
17+
rel="icon"
18+
type="image/png"
19+
href="/static/favicons/favicon-32x32.png"
20+
sizes="32x32"
21+
/>
22+
<link
23+
rel="icon"
24+
type="image/png"
25+
href="/static/favicons/favicon-16x16.png"
26+
sizes="16x16"
27+
/>
1428
<link rel="manifest" href="/static/favicons/manifest.json" />
15-
<link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#c201b9" />
29+
<link
30+
rel="mask-icon"
31+
href="/static/favicons/safari-pinned-tab.svg"
32+
color="#c201b9"
33+
/>
1634
<link rel="shortcut icon" href="/static/favicons/favicon.ico" />
1735
<link
1836
rel="stylesheet"
1937
href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
2038
/>
21-
<meta name="msapplication-config" content="/static/favicons/browserconfig.xml" />
39+
<meta
40+
name="msapplication-config"
41+
content="/static/favicons/browserconfig.xml"
42+
/>
2243
<meta name="theme-color" content="#c201b9" />
2344
<title>{title}</title>
2445
<meta name="description" content={description} />
2546
<meta property="og:type" content="website" />
2647
<meta property="og:title" content={title} />
2748
<meta property="og:url" content="https://coderplex.org" />
28-
<meta property="og:image" content={image || 'https://coderplex.org/static/favicons/android-chrome-512x512.png'} />
49+
<meta
50+
property="og:image"
51+
content={
52+
image ||
53+
'https://coderplex.org/static/favicons/android-chrome-512x512.png'
54+
}
55+
/>
2956
<meta property="og:site_name" content="coderplex.org" />
3057
<meta property="og:description" content={description} />
3158
</Head>

‎components/events/event-card.js

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import { Button, graySecondary } from '../../utils/base.styles';
1010

1111
const Card = styled.div`
1212
text-decoration: none;
13-
width: calc(100% - 40px);
14-
margin: 20px;
13+
width: 100%;
14+
min-height: 150px;
15+
margin-top: 20px;
1516
padding-right: 10px;
1617
display: grid;
1718
grid-template-columns: 1fr 4fr;
@@ -73,7 +74,7 @@ export default props => (
7374
<div>
7475
<Card>
7576
<img className="photo" src={props.image} />
76-
<div className="title">{props.title}</div>
77+
<div className="title">{props.name}</div>
7778
<div className="location">
7879
<LocationIcon className="icons" />
7980
{props.location}
@@ -85,15 +86,23 @@ export default props => (
8586
</div>
8687
<div className="infotext">
8788
<AttendeesIcon className="icons" />
88-
{props.attendees}
89-
</div>
90-
<div className="infotext">
91-
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
92-
{props.online ? 'Online' : 'Free entry'}
89+
{props.tense === 'past'
90+
? `${props.attendees} attended`
91+
: `${props.attendees} attending`}
9392
</div>
93+
{props.tense === 'past' ? null : (
94+
<div className="infotext">
95+
{props.online ? (
96+
<StreamIcon className="icons" />
97+
) : (
98+
<TicketIcon className="icons" />
99+
)}
100+
{props.online ? 'Free session' : 'Free entry'}
101+
</div>
102+
)}
94103
<div className="rsvp">
95104
<Button href={props.link} ghost>
96-
{props.isPast ? 'View' : 'RSVP'}
105+
{props.tense === 'past' ? 'View' : 'RSVP'}
97106
</Button>
98107
</div>
99108
</div>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
},
3535
"lint-staged": {
3636
"*.js": [
37-
"prettier --write --single-quote --print-width=120 --trailing-comma=es5 --jsx-bracket-same-line",
37+
"prettier --write --single-quote --print-width=80 --trailing-comma=es5 --jsx-bracket-same-line",
3838
"xo",
3939
"jest --findRelatedTests",
4040
"git add"

‎pages/events.js

Lines changed: 93 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react';
2+
import fetch from 'isomorphic-unfetch';
23
import { Flex, Box } from 'grid-emotion';
34
import styled from 'react-emotion';
45
import { space } from 'styled-system';
56

67
import Layout from '../components/common/layout';
78
import BannerSection from '../components/common/banner';
89
import { Container, Title, SubTitle } from '../utils/base.styles';
10+
import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
911
import EventCard from '../components/events/event-card';
1012

1113
const EventsSection = styled.section`
@@ -15,6 +17,89 @@ const EventsSection = styled.section`
1517
`;
1618

1719
export default class Events extends React.Component {
20+
state = {
21+
pastEvents: [],
22+
futureEvents: [],
23+
fetchError: null,
24+
loading: true,
25+
};
26+
27+
async componentDidMount() {
28+
try {
29+
let pastEvents;
30+
let futureEvents;
31+
const pastEventsResponse = await fetch(
32+
`${baseEventsURL}${pastEventsURL}`
33+
);
34+
if (pastEventsResponse.ok) {
35+
pastEvents = await pastEventsResponse.json();
36+
console.log(pastEvents);
37+
} else {
38+
throw new Error('Failed to Retrieve past events');
39+
}
40+
const futureEventsResponse = await fetch(
41+
`${baseEventsURL}${futureEventsURL}`
42+
);
43+
if (futureEventsResponse.ok) {
44+
futureEvents = await futureEventsResponse.json();
45+
console.log(futureEvents);
46+
} else {
47+
throw new Error('Failed to retieve future events');
48+
}
49+
await this.setState({
50+
pastEvents,
51+
futureEvents,
52+
fetchError: null,
53+
loading: false,
54+
});
55+
} catch (err) {
56+
console.log(err);
57+
await this.setState({
58+
pastEvents: null,
59+
futureEvents: null,
60+
fetchError: err.message,
61+
loading: false,
62+
});
63+
}
64+
}
65+
66+
renderEvents(events) {
67+
if (this.state.loading) {
68+
return (
69+
<SubTitle inverted color="#222">
70+
Loading..
71+
</SubTitle>
72+
);
73+
}
74+
if (events.length === 0) {
75+
return (
76+
<SubTitle inverted color="#222">
77+
No upcoming events yet, check back later
78+
</SubTitle>
79+
);
80+
}
81+
return (
82+
<div>
83+
{events.map(event => {
84+
const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
85+
const imageSrc = regexForImageSrc.exec(event.description);
86+
return (
87+
<EventCard
88+
key={event.id}
89+
image={imageSrc ? imageSrc[1] : ''}
90+
location={event.venue ? event.venue.name : 'Online'}
91+
link={event.link}
92+
name={event.name}
93+
tense={event.status}
94+
attendees={event.yes_rsvp_count}
95+
time={event.time}
96+
/>
97+
);
98+
})}
99+
</div>
100+
);
101+
}
102+
18103
render() {
19104
return (
20105
<Layout>
@@ -25,25 +110,24 @@ export default class Events extends React.Component {
25110
/>
26111
<EventsSection py={[2, 4]} px={[2, 1]}>
27112
<Container>
28-
<Flex pb={[2, 4]} direction="column" align="center" justify="center">
113+
<Flex
114+
pb={[2, 4]}
115+
direction="column"
116+
align="center"
117+
justify="center">
29118
<Box width={[1, 0.75]}>
30119
<Title inverted color="#222">
31120
Upcoming Events
32121
</Title>
33-
<SubTitle inverted color="#222">
34-
No events as of now, check back later
35-
</SubTitle>
36-
<EventCard />
122+
{this.renderEvents(this.state.futureEvents)}
37123
</Box>
38124
</Flex>
39125
<Flex direction="column" align="center" justify="center">
40126
<Box width={[1, 0.75]}>
41127
<Title inverted color="#222">
42-
Past Events
128+
Recent Events
43129
</Title>
44-
<SubTitle inverted color="#222">
45-
Loading...
46-
</SubTitle>
130+
{this.renderEvents(this.state.pastEvents)}
47131
</Box>
48132
</Flex>
49133
</Container>

0 commit comments

Comments
 (0)