Commit 04432afe authored by opgbaudouin's avatar opgbaudouin

Added some components and the Leaflet one.

parent b282e8e7
Pipeline #39701 failed with stage
in 5 minutes and 23 seconds
This diff is collapsed.
......@@ -7,7 +7,7 @@ export default [
contentTypeID: 'homepage',
component: Loadable({
loader: () => {
return import('~/pages/Home/Homepage');
return import('~/pages/Home/Homepage.js');
},
loading: Loading,
}),
......@@ -16,7 +16,16 @@ export default [
contentTypeID: 'blogPost',
component: Loadable({
loader: () => {
return import('~/pages/Blogs/BlogPost');
return import('~/pages/Blogs/BlogPost.js');
},
loading: Loading,
}),
},
{
contentTypeID: 'thEvent',
component: Loadable({
loader: () => {
return import('~/pages/Events/EventPage.js');
},
loading: Loading,
}),
......
import React from 'react';
import PropTypes from 'prop-types';
import ContactDetailsStyled from './ContactDetails.styled';
const ContactDetails = ({ name, phone, email, website }) => {
//const fullLocation = `${latitude},${longitude}`;
// const imgMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${fullLocation}&zoom=14&size=400x300&sensor=false`;
return (
<ContactDetailsStyled>
{/* name */ name && (
<p>
<span className="label">Name:</span>
{name}
</p>
)}
{/* phone */ phone && (
<p>
<span className="label">Phone:</span>
{phone}
</p>
)}
{/* email */ email && (
<p>
<span className="label">Email:</span>
{email}
</p>
)}
{/* website */ website && (
<p>
<span className="label">Website:</span>
{website}
</p>
)}
</ContactDetailsStyled>
);
};
ContactDetails.propTypes = {
name: PropTypes.string,
phone: PropTypes.string,
email: PropTypes.string,
website: PropTypes.string,
};
export default ContactDetails;
import styled, { css } from 'styled-components';
const ContactDetailsStyled = styled.div`
${() => {
return css`
.label {
font-weight: 700;
color: rgb(255, 0, 0);
}
`;
}};
`;
export default ContactDetailsStyled;
......@@ -5,15 +5,17 @@ import { Link } from 'react-router-dom';
import EventCardStyled from '../components.styled/EventCard.styled';
const EventCard = ({ title, summary, image, className }) => {
const EventCard = ({ title, summary, image, uri, className }) => {
const titleUppercase = title.toUpperCase();
return (
<EventCardStyled className={className}>
<img src={image.asset.sys.uri} alt={image.altText}></img>
<h3>{titleUppercase}</h3>
<p>{summary}</p>
</EventCardStyled>
<Link to={uri}>
<EventCardStyled className={className}>
<img src={image.asset.sys.uri} alt={image.altText}></img>
<h3>{titleUppercase}</h3>
<p>{summary}</p>
</EventCardStyled>
</Link>
);
};
......@@ -21,6 +23,7 @@ EventCard.propTypes = {
title: PropTypes.string,
summary: PropTypes.string,
image: PropTypes.object,
uri: PropTypes.string,
className: PropTypes.string,
};
......
import React from 'react';
import PropTypes from 'prop-types';
import EVentRecordStyled from '../components.styled/EventRecord.styled';
import EventRecordStyled from '../components.styled/EventRecord.styled';
import ContentComposer from '~/features/composer/components/Composer';
import Location from '~/features/location/Location';
import formatDate from '../util/formatDate';
import ContactDetails from '~/features/contactDetails/ContactDetails';
const EventRecord = ({ className, entry }) => {
if (!entry) return null;
const contact = entry.contactComponent;
return (
<EVentRecordStyled className={className}>
<EventRecordStyled className={className}>
<div className="container">
{entry.image && (
<img src={entry.image.asset.sys.uri} alt={entry.image.altText} />
{entry.bannerImage && (
<img
src={entry.bannerImage.asset.sys.uri}
alt={entry.bannerImage.altText}
/>
)}
<div className="eventContent">
<h1 className="pageTitle">{entry.entryTitle}</h1>
<h2>Location</h2>
<Location
latitude={entry.location.lat}
longitude={entry.location.lon}
></Location>
<p>
<span>
<strong>Event Date:</strong>
{formatDate(entry.datetime, 'dd/MMMM/yyyy')}
</span>
</p>
<h2>Contact Details</h2>
<ContactDetails
name={contact.name}
email={contact.email}
phone={contact.phone}
website={contact.websiteAddress}
></ContactDetails>
{entry.content && <ContentComposer composer={entry.content} />}
</div>
</div>
</EVentRecordStyled>
</EventRecordStyled>
);
};
......
......@@ -68,11 +68,16 @@ const EventListing = ({ className }) => {
{/* DELIVERY API RENDER ENTRIES START */}
{results && results.items && (
<ul>
<ul className="EventListingContainer">
{results.items.map((entry, idx) => {
return (
<li key={idx}>
<Link to={entry.sys.uri}>{entry.title}</Link>
<EventCard
title={entry.title}
summary={entry.description}
image={entry.bannerImage}
uri={entry.sys.uri}
/>
</li>
);
})}
......
import React from 'react';
import PropTypes from 'prop-types';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'; //Nasty? is this is how this is done?
const Location = ({ latitude, longitude }) => {
// const fullLocation = `${latitude},${longitude}`;
// const imgMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${fullLocation}&zoom=14&size=400x300&sensor=false`;
const position = [latitude, longitude];
return (
<Map
center={position}
zoom={13}
style={{ height: '300px', width: '300px' }}
>
<TileLayer
attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
);
};
Location.propTypes = {
latitude: PropTypes.number,
longitude: PropTypes.number,
};
export default Location;
import React from 'react';
import PropTypes from 'prop-types';
import MainLayout from '~/layouts/Main.layout';
import EventRecord from '~/features/eventListing/components/EventRecord';
import { Loading } from '~/core/routes/Loading';
const EventPage = ({ entry }) => {
// entry: magic contensis prop
if (!entry) return <Loading />;
return (
<MainLayout>
<EventRecord entry={entry} />
</MainLayout>
);
};
EventPage.propTypes = {
entry: PropTypes.object,
};
export default EventPage;
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