Commit f64dc96d authored by Andy Lamb's avatar Andy Lamb
Browse files

added basic events listing and card

parent 54ae0af2
Pipeline #39606 passed with stage
in 4 minutes and 1 second
...@@ -17,6 +17,14 @@ export default [ ...@@ -17,6 +17,14 @@ export default [
loading: Loading, loading: Loading,
}), }),
}, },
{
path: '/events-listing',
exact: true,
component: Loadable({
loader: () => import('~/pages/Listings/EventsListing.page'),
loading: Loading,
}),
},
// ******************************** // ********************************
// ˅˅ Do not delete these routes ˅˅ // ˅˅ Do not delete these routes ˅˅
{ {
......
...@@ -2,7 +2,31 @@ import styled, { css } from 'styled-components'; ...@@ -2,7 +2,31 @@ import styled, { css } from 'styled-components';
const EventCardStyled = styled.article` const EventCardStyled = styled.article`
${() => { ${() => {
return css``; return css`
display: block;
width: 100%;
max-width: 550px;
margin-bottom: 80px;
&:hover {
cursor: pointer;
}
h3 {
margin: 10px 0;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
}
p {
margin: 0;
margin-bottom: 30px;
font-size: 16px;
line-height: 1.7;
}
img {
width: 100%;
height: auto;
}
`;
}}; }};
`; `;
......
...@@ -5,10 +5,21 @@ import { Link } from 'react-router-dom'; ...@@ -5,10 +5,21 @@ import { Link } from 'react-router-dom';
import EventCardStyled from '../components.styled/EventCard.styled'; import EventCardStyled from '../components.styled/EventCard.styled';
const EventCard = () => { const EventCard = ({ title, summary, image, className }) => {
return <p>Event card will go here</p>; return (
<EventCardStyled className={className}>
<img src={image.asset.sys.uri} alt={image.altText} />
<h3>{title}</h3>
<p>{summary}</p>
</EventCardStyled>
);
}; };
EventCard.propTypes = {}; EventCard.propTypes = {
title: PropTypes.string,
summary: PropTypes.string,
image: PropTypes.object,
className: PropTypes.string,
};
export default EventCard; export default EventCard;
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { selectVersionStatus } from '~/core/redux/selectors'; import { selectVersionStatus } from '~/core/redux/selectors';
...@@ -15,11 +16,11 @@ const fetchEntries = async versionStatus => { ...@@ -15,11 +16,11 @@ const fetchEntries = async versionStatus => {
try { try {
//DELIVERY API QUERY START// //DELIVERY API QUERY START//
let query = new Query( let query = new Query(
Op.equalTo('sys.contentTypeId', 'blogPost'), Op.equalTo('sys.contentTypeId', 'thEvent'),
Op.equalTo('sys.versionStatus', versionStatus) Op.equalTo('sys.versionStatus', versionStatus)
); );
query.pageSize = 3; query.pageSize = 3;
query.fields = ['title', 'summary', 'image', 'sys']; query.fields = ['title', 'description', 'bannerImage', 'sys'];
//DELIVERY API QUERY END// //DELIVERY API QUERY END//
//DELIVERY API SEARCH START// //DELIVERY API SEARCH START//
...@@ -69,7 +70,11 @@ const EventListing = ({ className }) => { ...@@ -69,7 +70,11 @@ const EventListing = ({ className }) => {
{results && results.items && ( {results && results.items && (
<ul> <ul>
{results.items.map((entry, idx) => { {results.items.map((entry, idx) => {
return <li key={idx}>{entry.title}</li>; return (
<li key={idx}>
<Link to={entry.sys.uri}> {entry.title} </Link>
</li>
);
})} })}
</ul> </ul>
)} )}
......
...@@ -2,16 +2,32 @@ import React from 'react'; ...@@ -2,16 +2,32 @@ import React from 'react';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import EventCard from '~/features/eventListing/components/EventCard'; import EventCard from '~/features/eventListing/components/EventCard';
import { text } from '@storybook/addon-knobs'; import { text, object } from '@storybook/addon-knobs';
storiesOf('Features | Listings', module).add( storiesOf('Features | Listings', module).add(
'Event card', 'Event card',
() => { () => {
const image = {
altText: 'Some bad alt text',
transformations: 'w=1200&h=800&crop=1200,600,0,100',
caption: '',
asset: {
entryDescription: null,
sys: {
dataFormat: 'asset',
contentTypeId: 'image',
id: '1c380b5e-cab4-4120-9581-e0d11db75544',
uri:
'https://live-workshops-cte-master.cloud.contensis.com/image-library/images/CC585EEC5F.xed163892.jpg?w=1200&h=800&crop=1200,600,0,100',
},
entryTitle: 'CC585EEC5F',
},
};
return ( return (
<EventCard <EventCard
title={text('Title', 'Example title')} title={text('Title', 'Example title')}
description={text('Description', 'Example description')} summary={text('Summary', 'Example description')}
uri={text('URI', '/events/example-event')} image={object('Image', image)}
/> />
); );
}, },
......
import React from 'react';
import PropTypes from 'prop-types';
import MainLayout from '~/layouts/Main.layout';
import EventsListing from '~/features/eventListing/components/EventsListing';
const EventsListingPage = () => {
return (
<MainLayout>
<h1 className="pageTitle">Event listing page</h1>
<EventsListing />
</MainLayout>
);
};
EventsListingPage.propTypes = {
entry: PropTypes.object,
};
export default EventsListingPage;
Markdown is supported
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