Commit 448b255c authored by Jon Moore's avatar Jon Moore

added basic event listing and card

parent c98265fb
Pipeline #40369 passed with stage
in 6 minutes
......@@ -17,6 +17,14 @@ export default [
loading: Loading,
}),
},
{
path: '/events-listing',
exact: true,
component: Loadable({
loader: () => import('~/pages/Listings/EventsListing.page'),
loading: Loading,
}),
},
// ********************************
// ˅˅ Do not delete these routes ˅˅
{
......
......@@ -10,8 +10,6 @@ import BlogListingStyled from '../components.styled/BlogListing.styled';
import BlogCard from './BlogCard';
const fetchEntries = async versionStatus => {
const entries = await triggerSearch(versionStatus);
const triggerSearch = async versionStatus => {
try {
//DELIVERY API QUERY START//
......@@ -31,6 +29,7 @@ const fetchEntries = async versionStatus => {
}
};
const entries = await triggerSearch(versionStatus);
return entries;
};
......
......@@ -2,7 +2,31 @@ import styled, { css } from 'styled-components';
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';
import EventCardStyled from '../components.styled/EventCard.styled';
const EventCard = () => {
return <p>Event card will go here</p>;
const EventCard = ({ title, summary, image, className }) => {
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;
/* eslint-disable no-unused-vars */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { selectVersionStatus } from '~/core/redux/selectors';
......@@ -15,11 +16,11 @@ const fetchEntries = async versionStatus => {
try {
//DELIVERY API QUERY START//
let query = new Query(
Op.equalTo('sys.contentTypeId', 'blogPost'),
Op.equalTo('sys.contentTypeId', 'thEvent'),
Op.equalTo('sys.versionStatus', versionStatus)
);
query.pageSize = 3;
query.fields = ['title', 'summary', 'image', 'sys'];
query.fields = ['title', 'description', 'bannerImage'];
//DELIVERY API QUERY END//
//DELIVERY API SEARCH START//
......@@ -69,7 +70,11 @@ const BlogListing = ({ className }) => {
{results && results.items && (
<ul>
{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>
)}
......
......@@ -2,16 +2,33 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
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 | Events', module).add(
'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 (
<EventCard
title={text('Title', 'Example title')}
description={text('Description', 'Example description')}
uri={text('URI', '/events/example-event')}
title={text('Title', 'Example event title')}
summary={text('Summary', 'Example summary for the 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">Events listing</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