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)
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