Verified Commit 8f5e2637 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Fix event poster selection on frontpage

parent 2f017065
...@@ -38,17 +38,19 @@ const EventPoster = ({ event, elevation, className, ...props }) => { ...@@ -38,17 +38,19 @@ const EventPoster = ({ event, elevation, className, ...props }) => {
</React.Fragment> </React.Fragment>
) )
const imageTag = (
<Img
src={event ? `${apiUrl}${event.img_poster.file}` : null}
ratioX={1}
ratioY={1.41421356237}
alt={event ? event.title_de : null}
loadingPlaceholder={loadingPlaceholder}
/>
)
return ( return (
<Box boxShadow={2} className={[classes.root].join(' ')} {...props}> <Box boxShadow={2} className={[classes.root].join(' ')} {...props}>
<Link to={event ? `/events/${event._id}` : null}> {event ? <Link to={`/events/${event._id}`}>{imageTag}</Link> : imageTag}
<Img
src={event ? `${apiUrl}${event.img_poster.file}` : null}
ratioX={1}
ratioY={1.41421356237}
alt={event ? event.title_de : null}
loadingPlaceholder={loadingPlaceholder}
/>
</Link>
</Box> </Box>
) )
} }
......
...@@ -40,15 +40,30 @@ const useStyles = makeStyles( ...@@ -40,15 +40,30 @@ const useStyles = makeStyles(
const IndexPage = () => { const IndexPage = () => {
const events = useSelector(state => state.events.items) const events = useSelector(state => state.events.items)
const joboffers = useSelector(state => state.joboffers.items) const joboffers = useSelector(state => state.joboffers.items)
const eventsFrontpage = useSelector(state => state.events.frontpage) const eventsFrontpageUpcoming = useSelector(
state => state.events.frontpageUpcoming
)
const eventsFrontpagePast = useSelector(state => state.events.frontpagePast)
const joboffersFrontpage = useSelector(state => state.joboffers.frontpage) const joboffersFrontpage = useSelector(state => state.joboffers.frontpage)
const dispatch = useDispatch() const dispatch = useDispatch()
const classes = useStyles() const classes = useStyles()
// Note: the second empty array ensures that the effect is called only once after mount. // Note: the second empty array ensures that the effect is called only once after mount.
useEffect(() => { useEffect(() => {
if (eventsFrontpage.totalPages === 0 && !eventsFrontpage.isPending) { if (
dispatch(listLoadNextPage(EVENTS, { listName: 'frontpage' })) eventsFrontpageUpcoming.totalPages === 0 &&
!eventsFrontpageUpcoming.isPending
) {
dispatch(listLoadNextPage(EVENTS, { listName: 'frontpageUpcoming' }))
}
}, [])
useEffect(() => {
if (
eventsFrontpagePast.totalPages === 0 &&
!eventsFrontpagePast.isPending
) {
dispatch(listLoadNextPage(EVENTS, { listName: 'frontpagePast' }))
} }
}, []) }, [])
...@@ -58,6 +73,12 @@ const IndexPage = () => { ...@@ -58,6 +73,12 @@ const IndexPage = () => {
} }
}, []) }, [])
let pastEventCount = 0
if (eventsFrontpageUpcoming.lastPageLoaded > 0) {
pastEventCount = 3 - (eventsFrontpageUpcoming.items.length % 3)
}
return ( return (
<Layout className={classes.root} seoProps={{ title: 'home.title' }}> <Layout className={classes.root} seoProps={{ title: 'home.title' }}>
<Link to="/events"> <Link to="/events">
...@@ -66,13 +87,21 @@ const IndexPage = () => { ...@@ -66,13 +87,21 @@ const IndexPage = () => {
</Typography> </Typography>
</Link> </Link>
<div className={classes.cardRow}> <div className={classes.cardRow}>
{eventsFrontpage.lastPageLoaded > 0 {eventsFrontpageUpcoming.lastPageLoaded > 0 ? (
? eventsFrontpage.items.map(eventId => ( <React.Fragment>
{eventsFrontpageUpcoming.items.map(eventId => (
<EventPoster key={eventId} event={events[eventId].data} /> <EventPoster key={eventId} event={events[eventId].data} />
))
: Array.from(Array(3)).map((_, i) => (
<EventPoster key={i} event={null} />
))} ))}
{eventsFrontpagePast.items.map((eventId, index) => {
if (index >= pastEventCount) return null
return <EventPoster key={eventId} event={events[eventId].data} />
})}
</React.Fragment>
) : (
Array.from(Array(3)).map((_, i) => (
<EventPoster key={i} event={null} />
))
)}
</div> </div>
<Link to="/jobs"> <Link to="/jobs">
<Typography variant="h3" className={classes.title}> <Typography variant="h3" className={classes.title}>
......
...@@ -10,7 +10,7 @@ import { AUTH_LOGOUT_SUCCESS } from '../auth/constants' ...@@ -10,7 +10,7 @@ import { AUTH_LOGOUT_SUCCESS } from '../auth/constants'
import generateReducer from '../common/reducer' import generateReducer from '../common/reducer'
const lists = { const lists = {
frontpage: { frontpageUpcoming: {
useQuery: false, useQuery: false,
createBaseQuery: now => ({ createBaseQuery: now => ({
max_results: 6, max_results: 6,
...@@ -23,6 +23,19 @@ const lists = { ...@@ -23,6 +23,19 @@ const lists = {
}, },
}), }),
}, },
frontpagePast: {
useQuery: false,
createBaseQuery: now => ({
max_results: 6,
sort: ['-priority', '-time_advertising_start'],
where: {
show_website: true,
time_start: { $lt: now },
time_advertising_start: { $lt: now },
img_poster: { $ne: null },
},
}),
},
upcomingWithOpenRegistration: { upcomingWithOpenRegistration: {
useQuery: true, useQuery: true,
createBaseQuery: now => ({ createBaseQuery: now => ({
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment