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

Commit f848c60

Browse files
vinaypuppalZubair Ahmed
vinaypuppal
authored and
Zubair Ahmed
committed
show upcoming event on landing page (#133)
1 parent 59e2e60 commit f848c60

File tree

3 files changed

+121
-18
lines changed

3 files changed

+121
-18
lines changed

‎components/events/event-card.js‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const Card = styled(Flex)`
1818
border: 1px solid ${graySecondary};
1919
min-height: 120px;
2020
color: #8393a7;
21+
text-align: left;
2122
& .eventPhoto {
2223
height: 120px;
2324
width: 100%;
@@ -75,39 +76,63 @@ const CardTitle = styled.h3`
7576

7677
export default props => (
7778
<Card my={[3]} wrap>
78-
<Flex align="streach" width={[1, 1, 1 / 4]}>
79-
<img
80-
className="eventPhoto"
81-
src={`https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image}`}
82-
srcSet={`https://res.cloudinary.com/coderplex/image/fetch/w_300,h_200/${
83-
props.image
84-
} 720w, https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image} 1024w`}
85-
/>
86-
</Flex>
87-
<Box className="eventDetails" width={[1, 1, 3 / 4]}>
79+
{props.showImg && (
80+
<Flex align="streach" width={[1, 1, 1 / 4]}>
81+
<img
82+
className="eventPhoto"
83+
src={`https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image}`}
84+
srcSet={`https://res.cloudinary.com/coderplex/image/fetch/w_300,h_200/${
85+
props.image
86+
} 720w, https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image} 1024w`}
87+
/>
88+
</Flex>
89+
)}
90+
<Box className="eventDetails" width={props.showImg ? [1, 1, 3 / 4] : [1, 1, 1]}>
8891
<Flex className="eventDetails" column justify="space-between">
8992
<CardTitle inverted color="#222" px={[2]} py={[1]} m={0}>
9093
{truncateString(props.name, 64)}
9194
</CardTitle>
92-
<Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={[1, 1, 0]}>
95+
<Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
9396
<LocationIcon className="icons" />
9497
<span>{truncateString(props.location, 55)}</span>
9598
</Box>
9699
<Box px={2} pb={[2, 1]}>
97100
<Flex wrap>
98-
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.38]} className="secondaryText" pr={1} mr={[0]} my={[1, 1, 0]}>
101+
<Box
102+
fontSize={[12, 14, 16]}
103+
width={props.showImg ? [1, 1, 0.38] : [1, 1, 1 / 2]}
104+
className="secondaryText"
105+
pr={1}
106+
mr={[0]}
107+
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
99108
<TimeIcon className="icons" />
100109
<span>{format(props.time, "ddd MMM Do 'YY, h:mm A")}</span>
101110
</Box>
102-
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.24]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
111+
<Box
112+
fontSize={[12, 14, 16]}
113+
width={props.showImg ? [1, 1, 0.24] : [1, 1, 1 / 2]}
114+
className="secondaryText"
115+
pr={1}
116+
mx={[0]}
117+
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
103118
<AttendeesIcon className="icons" />
104119
<span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
105120
</Box>
106-
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.21]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
121+
<Box
122+
fontSize={[12, 14, 16]}
123+
width={props.showImg ? [1, 1, 0.21] : [1, 1, 1 / 2]}
124+
className="secondaryText"
125+
pr={1}
126+
mx={[0]}
127+
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
107128
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
108129
<span>{props.online ? 'Free session' : 'Free entry'}</span>
109130
</Box>
110-
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.17]} mt={[1, 1, 0]} className="rsvp">
131+
<Box
132+
fontSize={[12, 14, 16]}
133+
width={props.showImg ? [1, 1, 0.17] : [1, 1, 1 / 2]}
134+
mt={props.showImg ? [1, 1, 0] : [1, 1, 1]}
135+
className="rsvp">
111136
<Button href={props.link} inverted medium>
112137
{props.tense === 'past' ? 'View' : 'RSVP'}
113138
</Button>

‎pages/events.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export default class Events extends React.Component {
9898
: event.featured_photo ? event.featured_photo.photo_link : imagePlaceholderURL;
9999
return (
100100
<EventCard
101+
showImg
101102
key={event.id}
102103
image={imageSrc}
103104
name={event.name}

‎pages/index.js‎

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,17 @@ import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/
99
import { listOfSubjects } from '../utils/mock-data';
1010
import Layout from '../components/common/layout';
1111
import SubjectCard from '../components/learn/subject-card';
12-
import { heroPatternURL, heroBannerURL, spaceCoverURL, eventsCoverURL } from '../utils/urls';
12+
import EventCard from '../components/events/event-card';
13+
14+
import {
15+
baseEventsURL,
16+
indexPageEventURL,
17+
heroPatternURL,
18+
heroBannerURL,
19+
spaceCoverURL,
20+
eventsCoverURL,
21+
imagePlaceholderURL,
22+
} from '../utils/urls';
1323

1424
const HeroSection = styled.section`
1525
${space};
@@ -72,6 +82,7 @@ const EventsSection = styled.section`
7282
color: #fff;
7383
position: relative;
7484
text-align: left;
85+
padding-bottom: 30px;
7586
& img {
7687
width: 100%;
7788
min-height: 427px;
@@ -121,6 +132,72 @@ const SpaceOverlay = styled.div`
121132
}
122133
`;
123134

135+
class UpcomingEvent extends React.Component {
136+
state = {
137+
events: null,
138+
loading: true,
139+
fetchError: null,
140+
};
141+
async componentDidMount() {
142+
try {
143+
let events;
144+
const eventsResponse = await fetch(`${baseEventsURL}${indexPageEventURL}`);
145+
if (eventsResponse.ok) {
146+
events = await eventsResponse.json();
147+
} else {
148+
throw new Error('Failed to Retrieve past events');
149+
}
150+
await this.setState({
151+
events,
152+
fetchError: null,
153+
loading: false,
154+
});
155+
} catch (err) {
156+
console.log(err);
157+
await this.setState({
158+
event: null,
159+
fetchError: err.message,
160+
loading: false,
161+
});
162+
}
163+
}
164+
render() {
165+
const { loading, events } = this.state;
166+
if (loading) {
167+
return (
168+
<SubTitle inverted color="#222">
169+
Loading..
170+
</SubTitle>
171+
);
172+
} else if (events.length === 0) {
173+
return <img src={eventsCoverURL} alt="events__pic" />;
174+
} else if (events === null) {
175+
return <img src={eventsCoverURL} alt="events__pic" />;
176+
}
177+
return (
178+
<div>
179+
{events.slice(0, 1).map(event => {
180+
const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
181+
const imageSrc = regexForImageSrc.exec(event.description);
182+
return (
183+
<EventCard
184+
key={event.id}
185+
image={imageSrc ? imageSrc[1] : imagePlaceholderURL}
186+
name={event.name}
187+
location={event.venue ? event.venue.name : 'Online'}
188+
online={!event.venue}
189+
time={event.time}
190+
attendees={event.yes_rsvp_count}
191+
tense={event.status}
192+
link={event.link}
193+
/>
194+
);
195+
})}
196+
</div>
197+
);
198+
}
199+
}
200+
124201
export default () => (
125202
<Layout>
126203
<HeroSection pb={[2, 4]} px={[2, 1]}>
@@ -197,7 +274,7 @@ export default () => (
197274
<Flex align="center" justify="center" wrap>
198275
<Box order={[2, 2, 1]} width={[1, 1, 1 / 2]} px={[4, 4, 3]}>
199276
<Hide sm xs>
200-
<img src={eventsCoverURL} alt="events__pic" />
277+
<UpcomingEvent />
201278
</Hide>
202279
</Box>
203280
<Box order={1} width={[1, 1, 1 / 2]} px={[2, 3]} pt={[3, 4, 0]} pb={[4, 4, 0]}>
@@ -209,7 +286,7 @@ export default () => (
209286
</SubTitle>
210287
<Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
211288
<Hide md lg>
212-
<img src={eventsCoverURL} alt="events__pic" />
289+
<UpcomingEvent />
213290
</Hide>
214291
<Link href={'/events'}>
215292
<Button href={'/events'} medium>

0 commit comments

Comments
 (0)