diff --git a/components/events/event-card.js b/components/events/event-card.js
index 1a1ae38ab..5365a9791 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -18,6 +18,7 @@ const Card = styled(Flex)`
border: 1px solid ${graySecondary};
min-height: 120px;
color: #8393a7;
+ text-align: left;
& .eventPhoto {
height: 120px;
width: 100%;
@@ -75,39 +76,63 @@ const CardTitle = styled.h3`
export default props => (
<Card my={[3]} wrap>
- <Flex align="streach" width={[1, 1, 1 / 4]}>
- <img
- className="eventPhoto"
- src={`https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image}`}
- srcSet={`https://res.cloudinary.com/coderplex/image/fetch/w_300,h_200/${
- props.image
- } 720w, https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image} 1024w`}
- />
- </Flex>
- <Box className="eventDetails" width={[1, 1, 3 / 4]}>
+ {props.showImg && (
+ <Flex align="streach" width={[1, 1, 1 / 4]}>
+ <img
+ className="eventPhoto"
+ src={`https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image}`}
+ srcSet={`https://res.cloudinary.com/coderplex/image/fetch/w_300,h_200/${
+ props.image
+ } 720w, https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image} 1024w`}
+ />
+ </Flex>
+ )}
+ <Box className="eventDetails" width={props.showImg ? [1, 1, 3 / 4] : [1, 1, 1]}>
<Flex className="eventDetails" column justify="space-between">
<CardTitle inverted color="#222" px={[2]} py={[1]} m={0}>
{truncateString(props.name, 64)}
</CardTitle>
- <Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={[1, 1, 0]}>
+ <Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
<LocationIcon className="icons" />
<span>{truncateString(props.location, 55)}</span>
</Box>
<Box px={2} pb={[2, 1]}>
<Flex wrap>
- <Box fontSize={[12, 14, 16]} width={[1, 1, 0.38]} className="secondaryText" pr={1} mr={[0]} my={[1, 1, 0]}>
+ <Box
+ fontSize={[12, 14, 16]}
+ width={props.showImg ? [1, 1, 0.38] : [1, 1, 1 / 2]}
+ className="secondaryText"
+ pr={1}
+ mr={[0]}
+ my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
<TimeIcon className="icons" />
<span>{format(props.time, "ddd MMM Do 'YY, h:mm A")}</span>
</Box>
- <Box fontSize={[12, 14, 16]} width={[1, 1, 0.24]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
+ <Box
+ fontSize={[12, 14, 16]}
+ width={props.showImg ? [1, 1, 0.24] : [1, 1, 1 / 2]}
+ className="secondaryText"
+ pr={1}
+ mx={[0]}
+ my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
<AttendeesIcon className="icons" />
<span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
</Box>
- <Box fontSize={[12, 14, 16]} width={[1, 1, 0.21]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
+ <Box
+ fontSize={[12, 14, 16]}
+ width={props.showImg ? [1, 1, 0.21] : [1, 1, 1 / 2]}
+ className="secondaryText"
+ pr={1}
+ mx={[0]}
+ my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
{props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
<span>{props.online ? 'Free session' : 'Free entry'}</span>
</Box>
- <Box fontSize={[12, 14, 16]} width={[1, 1, 0.17]} mt={[1, 1, 0]} className="rsvp">
+ <Box
+ fontSize={[12, 14, 16]}
+ width={props.showImg ? [1, 1, 0.17] : [1, 1, 1 / 2]}
+ mt={props.showImg ? [1, 1, 0] : [1, 1, 1]}
+ className="rsvp">
<Button href={props.link} inverted medium>
{props.tense === 'past' ? 'View' : 'RSVP'}
</Button>
diff --git a/pages/events.js b/pages/events.js
index b92ad9438..eadae11bb 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -98,6 +98,7 @@ export default class Events extends React.Component {
: event.featured_photo ? event.featured_photo.photo_link : imagePlaceholderURL;
return (
<EventCard
+ showImg
key={event.id}
image={imageSrc}
name={event.name}
diff --git a/pages/index.js b/pages/index.js
index 71728fe13..95a4d878e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -9,7 +9,17 @@ import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/
import { listOfSubjects } from '../utils/mock-data';
import Layout from '../components/common/layout';
import SubjectCard from '../components/learn/subject-card';
-import { heroPatternURL, heroBannerURL, spaceCoverURL, eventsCoverURL } from '../utils/urls';
+import EventCard from '../components/events/event-card';
+
+import {
+ baseEventsURL,
+ indexPageEventURL,
+ heroPatternURL,
+ heroBannerURL,
+ spaceCoverURL,
+ eventsCoverURL,
+ imagePlaceholderURL,
+} from '../utils/urls';
const HeroSection = styled.section`
${space};
@@ -72,6 +82,7 @@ const EventsSection = styled.section`
color: #fff;
position: relative;
text-align: left;
+ padding-bottom: 30px;
& img {
width: 100%;
min-height: 427px;
@@ -121,6 +132,72 @@ const SpaceOverlay = styled.div`
}
`;
+class UpcomingEvent extends React.Component {
+ state = {
+ events: null,
+ loading: true,
+ fetchError: null,
+ };
+ async componentDidMount() {
+ try {
+ let events;
+ const eventsResponse = await fetch(`${baseEventsURL}${indexPageEventURL}`);
+ if (eventsResponse.ok) {
+ events = await eventsResponse.json();
+ } else {
+ throw new Error('Failed to Retrieve past events');
+ }
+ await this.setState({
+ events,
+ fetchError: null,
+ loading: false,
+ });
+ } catch (err) {
+ console.log(err);
+ await this.setState({
+ event: null,
+ fetchError: err.message,
+ loading: false,
+ });
+ }
+ }
+ render() {
+ const { loading, events } = this.state;
+ if (loading) {
+ return (
+ <SubTitle inverted color="#222">
+ Loading..
+ </SubTitle>
+ );
+ } else if (events.length === 0) {
+ return <img src={eventsCoverURL} alt="events__pic" />;
+ } else if (events === null) {
+ return <img src={eventsCoverURL} alt="events__pic" />;
+ }
+ return (
+ <div>
+ {events.slice(0, 1).map(event => {
+ const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
+ const imageSrc = regexForImageSrc.exec(event.description);
+ return (
+ <EventCard
+ key={event.id}
+ image={imageSrc ? imageSrc[1] : imagePlaceholderURL}
+ name={event.name}
+ location={event.venue ? event.venue.name : 'Online'}
+ online={!event.venue}
+ time={event.time}
+ attendees={event.yes_rsvp_count}
+ tense={event.status}
+ link={event.link}
+ />
+ );
+ })}
+ </div>
+ );
+ }
+}
+
export default () => (
<Layout>
<HeroSection pb={[2, 4]} px={[2, 1]}>
@@ -197,7 +274,7 @@ export default () => (
<Flex align="center" justify="center" wrap>
<Box order={[2, 2, 1]} width={[1, 1, 1 / 2]} px={[4, 4, 3]}>
<Hide sm xs>
- <img src={eventsCoverURL} alt="events__pic" />
+ <UpcomingEvent />
</Hide>
</Box>
<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 () => (
</SubTitle>
<Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
<Hide md lg>
- <img src={eventsCoverURL} alt="events__pic" />
+ <UpcomingEvent />
</Hide>
<Link href={'/events'}>
<Button href={'/events'} medium>