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 fdafee9

Browse files
vinaypuppalvinaypuppal
committed
show upcoming event on landing page
1 parent ee16a86 commit fdafee9

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,43 +76,67 @@ 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>
101110
{props.tense === 'past'
102111
? format(props.time, "ddd MMM Do 'YY")
103112
: format(props.time, "ddd MMM Do 'YY, h:mm A")}
104113
</span>
105114
</Box>
106-
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.24]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
115+
<Box
116+
fontSize={[12, 14, 16]}
117+
width={props.showImg ? [1, 1, 0.24] : [1, 1, 1 / 2]}
118+
className="secondaryText"
119+
pr={1}
120+
mx={[0]}
121+
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
107122
<AttendeesIcon className="icons" />
108123
<span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
109124
</Box>
110-
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.21]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
125+
<Box
126+
fontSize={[12, 14, 16]}
127+
width={props.showImg ? [1, 1, 0.21] : [1, 1, 1 / 2]}
128+
className="secondaryText"
129+
pr={1}
130+
mx={[0]}
131+
my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
111132
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
112133
<span>{props.online ? 'Free session' : 'Free entry'}</span>
113134
</Box>
114-
<Box fontSize={[12, 14, 16]} width={[1, 1, 0.17]} mt={[1, 1, 0]} className="rsvp">
135+
<Box
136+
fontSize={[12, 14, 16]}
137+
width={props.showImg ? [1, 1, 0.17] : [1, 1, 1 / 2]}
138+
mt={props.showImg ? [1, 1, 0] : [1, 1, 1]}
139+
className="rsvp">
115140
<Button href={props.link} inverted medium>
116141
{props.tense === 'past' ? 'View' : 'RSVP'}
117142
</Button>

‎pages/events.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export default class Events extends React.Component {
9595
const imageSrc = regexForImageSrc.exec(event.description);
9696
return (
9797
<EventCard
98+
showImg
9899
key={event.id}
99100
image={imageSrc ? imageSrc[1] : imagePlaceholderURL}
100101
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)