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.

show upcoming event on landing page #133

Merged
merged 3 commits into from
Dec 18, 2017
Merged

show upcoming event on landing page #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fdafee9
show upcoming event on landing page
vinaypuppal Dec 17, 2017
e5d7db9
Merge branch 'develop' into feature/upcoming-event-on-index-page
Dec 18, 2017
6b8ce87
Merge branch 'develop' into feature/upcoming-event-on-index-page
Dec 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 40 additions & 15 deletions components/events/event-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions pages/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
83 changes: 80 additions & 3 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -72,6 +82,7 @@ const EventsSection = styled.section`
color: #fff;
position: relative;
text-align: left;
padding-bottom: 30px;
& img {
width: 100%;
min-height: 427px;
Expand Down Expand Up @@ -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]}>
Expand Down Expand Up @@ -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]}>
Expand All @@ -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>
Expand Down