Commit 4d6d89e7 authored by Jon Moore's avatar Jon Moore
Browse files

Latest code

parent 4f2cb586
import React from 'react';
import PropTypes from 'prop-types';
const Testimonial = ({ testimonial, className }) => {
return (
<div className={className}>
<h3>{testimonial.title}</h3>
<img
src={testimonial.image.asset.sys.uri}
alt={testimonial.image.altText}
/>
<p>{testimonial.quote.text}</p>
<p>
<strong>{testimonial.quote.source}</strong>
</p>
</div>
);
};
Testimonial.propTypes = {
className: PropTypes.string,
testimonial: PropTypes.array,
};
export default Testimonial;
import React from 'react';
import PropTypes from 'prop-types';
import Image from '~/features/image';
import TextBlock from '~/features/documentation/textBlock';
import ContentComposerStyled from '../components.styled/Composer.styled';
const ContentComposer = ({ className, composer }) => {
......@@ -11,18 +9,25 @@ const ContentComposer = ({ className, composer }) => {
<ContentComposerStyled className={className}>
{composer.map((field, idx) => {
switch (field.type) {
case 'image':
case 'contentImage':
return (
<figure className="compField contentImage" key={idx}>
<Image image={field.value} className="image" />
<img
src={field.value.asset.sys.uri}
alt={field.value.altText}
/>
{field.value.caption && (
<figcaption>{field.value.caption}</figcaption>
)}
</figure>
);
case 'markup':
case 'textBlock':
return (
<TextBlock text={field.value} key={idx} className="compField" />
<div
key={idx}
className="compField"
dangerouslySetInnerHTML={{ __html: field.value }}
/>
);
default:
break;
......
......@@ -84,11 +84,11 @@ const EventFiltersStyled = styled.div`
}
}
${!filtersVisible && '.filterGroup:nth-child(1n+4) {display:none}'};
/* ${!filtersVisible && '.filterGroup:nth-child(1n+4) {display:none}'};
@media only screen and (min-width: ${mqLarge}) {
${!filtersVisible && '.filterGroup:nth-child(1n+4) {display:block}'};
}
} */
.feList {
border-top: 1px solid #fff;
......
......@@ -8,7 +8,12 @@ const EventCard = ({ title, description, image, uri, date, className }) => {
return (
<EventCardStyled className={className}>
<div className="cInner">
{image && <img src={image.asset.sys.uri} alt={image.altText} />}
{image && (
<img
src={image.asset.sys.uri + '?w=365&h=280&f=webp'}
alt={image.altText}
/>
)}
<div className="cTitle">
<Link to={uri} title={title}>
{title}
......
......@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import EventFiltersStyled from '../components.styled/EventFilters.styled';
import FilterEntryDropdown from '~/features/listings/components/FilterEntryDropdown';
import FilterDatePicker from '~/features/listings/components/FilterDatePicker';
import FilterDateTabs from '~/features/listings/components/FilterDateTabs';
const EventFilters = ({ className, filters, updateFilters }) => {
const [filtersVisible, toggleFilters] = useState(false);
......@@ -35,6 +37,29 @@ const EventFilters = ({ className, filters, updateFilters }) => {
/>
);
}
case 'datePicker': {
return (
<FilterDatePicker
className="tfCategory"
id={filterGroup.id}
label={filterGroup.label}
startYear="2000"
update={updateFilters}
value={filterGroup.value}
/>
);
}
case 'filterTabs': {
return (
<FilterDateTabs
className="tab"
id={filterGroup.id}
label={filterGroup.label}
update={updateFilters}
value={filterGroup.value}
/>
);
}
default:
return;
}
......
......@@ -5,9 +5,12 @@ import { withRouter } from 'react-router-dom';
import EventRecordStyled from '../components.styled/EventRecord.styled';
import ContentComposer from '~/features/composer/components/Composer';
import Tags from '~/features/tags/components/tags';
import Testimonial from '~/features/Testimonials/components/Testimonial';
const EventRecord = ({ className, entry }) => {
if (!entry) return null;
const { entryTitle } = entry;
return (
<EventRecordStyled className={className}>
......@@ -15,7 +18,20 @@ const EventRecord = ({ className, entry }) => {
<div className="flexWrap reverse">
<div className="flexColMain">
<div className="flexColPadding">
<h1 className="pageTitle">{entryTitle}</h1>
<Tags tags={entry.eventCategories} />
<h1 className="pageTitle">{entry.entryTitle}</h1>
{entry.mainImage && (
<img
src={entry.mainImage.asset.sys.uri}
alt={entry.mainImage.altText}
/>
)}
{entry.content && <ContentComposer composer={entry.content} />}
{entry.testimonials &&
entry.testimonials.length > 0 &&
entry.testimonials.map((testimonial, idx) => {
return <Testimonial testimonial={testimonial} key={idx} />;
})}
</div>
</div>
</div>
......
......@@ -7,6 +7,7 @@ import EventFilters from './EventFilters';
import EventListingStyled from '../components.styled/EventListing.styled';
import EventCard from './EventCard';
import formatDateTimeRange from '~/utils/formatDateTimeRange';
const EventListing = ({
className,
......@@ -52,8 +53,9 @@ const EventListing = ({
<EventCard
title={entry.entryTitle}
description={entry.entryDescription}
image={entry.image}
image={entry.mainImage}
uri={entry.sys && entry.sys.uri}
date={formatDateTimeRange(entry.datesAndTimes)}
/>
</div>
</div>
......
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { selectNavigationRoot } from '~/core/redux/selectors/navigation';
const HeaderNavigation = ({ className }) => {
const rootNode = useSelector(selectNavigationRoot);
if (!rootNode) return null;
const rootNodeJs = rootNode.toJS();
const linksToShow = rootNodeJs.children[1].children.map((link, idx) => {
return (
<li key={idx}>
<Link to={link.path}>{link.displayName}</Link>
</li>
);
});
return <ul className={className}>{linksToShow}</ul>;
};
HeaderNavigation.propTypes = {
className: PropTypes.string,
};
export default HeaderNavigation;
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
const FilterDateTabs = ({ className, id, update, value }) => {
const [selectedTab, updateTabs] = useState(value || '');
useEffect(() => {
if (!value) updateTabs('');
else updateTabs(value);
}, [value]);
useEffect(() => {
update(id, selectedTab, true);
}, [selectedTab]);
return (
<div className={className}>
<button
className="fkInput"
id="thisMonth"
type="button"
onClick={e => updateTabs(e.target.value)}
value="thisMonth"
>
This month
</button>
<button
className="fkInput"
id="thisMonth"
type="button"
onClick={e => updateTabs(e.target.value)}
value="thisYear"
>
This year
</button>
</div>
);
};
FilterDateTabs.propTypes = {
className: PropTypes.string,
id: PropTypes.string,
update: PropTypes.func,
value: PropTypes.string,
};
export default FilterDateTabs;
import React from 'react';
import PropTypes from 'prop-types';
const Tags = ({ tags, className }) => {
let tagsToRender = '';
tags.map((tag, idx) => {
if (idx > 0) {
tagsToRender += `, ${tag.entryTitle}`;
} else {
tagsToRender += tag.entryTitle;
}
});
return <span className={className}>{tagsToRender}</span>;
};
Tags.propTypes = {
className: PropTypes.string,
tags: PropTypes.array,
};
export default Tags;
......@@ -2,12 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import GlobalStyles from '~/themes/contensis/global';
import HeaderNavigation from '~/features/headerNavigation/HeaderNavigation';
const MainLayout = ({ children }) => {
return (
<>
<GlobalStyles />
<header>Header</header>
<header>
<HeaderNavigation />
</header>
{/* <SkipToContent /> */}
<main id="main">{children}</main>
<footer>Footer</footer>
......
......@@ -10,12 +10,13 @@ const EventListingPage = () => {
<ListingContainer
config={{
listingType: 'event',
contentTypeIds: ['event'],
contentTypeIds: ['event', 'eventRd', 'eventGj'],
fields: [
'entryTitle',
'entryDescription',
'image',
'mainImage',
'eventCategories',
'datesAndTimes',
],
pageSize: 4,
orderBy: {
......@@ -31,6 +32,28 @@ const EventListingPage = () => {
contentTypeIds: ['eventCategories'],
},
},
{
label: 'Date from',
type: 'datePicker',
fields: ['datesAndTimes.from'],
params: {
type: 'from',
},
},
{
label: 'Date to',
type: 'datePicker',
fields: ['datesAndTimes.to'],
params: {
type: 'to',
},
},
{
label: 'Date tabs',
type: 'filterTabs',
fields: ['datesAndTimes.to', 'datesAndTimes.from'],
params: {},
},
],
}}
>
......
......@@ -33,10 +33,10 @@ const formatDateRange = (
const dFrom = dateRange.from;
const dFromDate = formatDate(dFrom, dateFormat);
const dFromTime = dTo.ToString(timeFormat);
const dFromTime = formatDate(dFrom, timeFormat);
const dTo = dateRange.to;
const dToDate = formatDate(dTo, dateFormat);
const dToTime = dTo.ToString(timeFormat);
const dToTime = formatDate(dTo, timeFormat);
let dateTime = '';
......
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