Skip to content

GitLab

Commit 77d60733 authored by Jon Moore's avatar Jon Moore
Browse files

updates to events listing code

parent 8a9cfa88
Hide whitespace changes
Inline Side-by-side
src/app/features/eventListing/components copy/ExampleCard.js deleted 100644 → 0
View file @ 8a9cfa88
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import ExampleCardStyled from '../components.styled/EventCard.styled';
const ExampleCard = ({ title, description, image, uri, className }) => {
return (
<Link to={uri}>
<ExampleCardStyled className={className}>
{image && (
<img
src={`${image.asset.sys.uri}?width=500&height=300&fit=crop`}
alt={image.asset.altText}
/>
)}
<h3>{title}</h3>
{description && <p>{description}</p>}
</ExampleCardStyled>
</Link>
);
};
ExampleCard.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
description: PropTypes.string,
image: PropTypes.object,
uri: PropTypes.string,
};
export default ExampleCard;
src/app/features/eventListing/components copy/ExampleFilters.js deleted 100644 → 0
View file @ 8a9cfa88
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import ExampleFiltersStyled from '../components.styled/EventFilters.styled';
import FilterEntryDropdown from '~/features/listings/components/FilterEntryDropdown';
const ExampleFilters = ({ className, filters, updateFilters }) => {
const [filtersVisible, toggleFilters] = useState(false);
const renderFilter = filterGroup => {
switch (filterGroup.type) {
case 'entry': {
return (
<FilterEntryDropdown
className="tfCategory"
entries={filterGroup.params.entries}
id={filterGroup.id}
label={filterGroup.label}
update={updateFilters}
value={filterGroup.value}
/>
);
}
case 'list': {
return (
<FilterEntryDropdown
className="tfCategory"
entries={filterGroup.params.options}
id={filterGroup.id}
label={filterGroup.label}
update={updateFilters}
type={'list'}
value={filterGroup.value}
/>
);
}
default:
return;
}
};
return (
<ExampleFiltersStyled className={className} filtersVisible={filtersVisible}>
<div className="tfInner">
{filters &&
filters.map((filterGroup, idx) => {
return (
<div key={idx} className="filterGroup">
{renderFilter(filterGroup)}
</div>
);
})}
<div className="toggleFiltersWrap">
<button
onClick={() => toggleFilters(!filtersVisible)}
className="toggleFilters"
>
Additional filters
</button>
</div>
</div>
</ExampleFiltersStyled>
);
};
ExampleFilters.propTypes = {
className: PropTypes.string,
clearFilters: PropTypes.func,
filters: PropTypes.array,
updateFilters: PropTypes.func,
};
export default ExampleFilters;
src/app/features/eventListing/components copy/ExampleListing.js deleted 100644 → 0
View file @ 8a9cfa88
import React, { useState, useEffect, useSelector } from 'react';
import PropTypes from 'prop-types';
import { selectVersionStatus } from '~/core/redux/selectors';
import { Op, Query } from 'contensis-delivery-api';
import { cachedSearch } from '~/core/util/ContensisDeliveryApi';
import ExampleListingStyled from '../components.styled/EventListing.styled';
import ExampleCard from './ExampleCard';
const fetchEntries = async versionStatus => {
const triggerSearch = async versionStatus => {
try {
let query = new Query(
Op.equalTo('sys.contentTypeId', 'exampleCT'),
Op.equalTo('sys.versionStatus', versionStatus)
);
query.pageSize = 3;
query.fields = ['title', 'summary', 'image', 'sys'];
return await cachedSearch.search(query, 1);
} catch (error) {
throw new Error(error);
}
};
const entries = await triggerSearch(versionStatus);
return entries;
};
const ExampleListing = ({ className }) => {
const [results, setResults] = useState();
const versionStatus = useSelector(selectVersionStatus);
useEffect(() => {
fetchEntries(versionStatus).then(entries => {
setResults(entries.items);
});
}, [versionStatus]);
let resultsInfo = null;
if (results && results.totalCount > 1) {
const start = results.pageIndex * results.pageSize + 1;
let end = results.pageSize;
if (end > results.totalCount) end = results.totalCount;
resultsInfo = `Displaying ${start}-${end} of ${results.totalCount} results`;
}
return (
<ExampleListingStyled className={className}>
<h1 className="pageTitle">Example listing title</h1>
{resultsInfo && (
<div
className="resultsInfo"
dangerouslySetInnerHTML={{ __html: resultsInfo }}
/>
)}
{results &&
results.map((entry, idx) => {
return (
<div key={idx} className="card">
<div className="cardPadding">
<ExampleCard
title={entry.entryTitle}
description={entry.entryDescription}
image={entry.image}
uri={entry.sys && entry.sys.uri}
/>
</div>
</div>
);
})}
{!results || (results.length < 1 && <p>No results found.</p>)}
</ExampleListingStyled>
);
};
ExampleListing.propTypes = {
className: PropTypes.string,
};
export default ExampleListing;
src/app/features/eventListing/components copy/Examplerecord.js deleted 100644 → 0
View file @ 8a9cfa88
import React from 'react';
import PropTypes from 'prop-types';
import ExampleRecordStyled from '../components.styled/EventRecord.styled';
import ContentComposer from '~/features/composer/components/Composer';
const EventRecord = ({ className, entry }) => {
if (!entry) return null;
return (
<ExampleRecordStyled className={className}>
<div className="container">
{entry.image && (
<img src={entry.image.asset.sys.uri} alt={entry.image.altText} />
)}
<div className="eventContent">
<h1 className="pageTitle">{entry.entryTitle}</h1>
{entry.content && <ContentComposer composer={entry.content} />}
</div>
</div>
</ExampleRecordStyled>
);
};
EventRecord.propTypes = {
className: PropTypes.string,
entry: PropTypes.object,
};
export default EventRecord;
src/app/features/eventListing/components/EventsListing.js
View file @ 77d60733
import React, { useState, useEffect, useSelector } from 'react';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { selectVersionStatus } from '~/core/redux/selectors';
import { Op, Query } from 'contensis-delivery-api';
import { cachedSearch } from '~/core/util/ContensisDeliveryApi';
import EventListingStyled from '../components.styled/EventListing.styled';
import EventsListingStyled from '../components.styled/EventListing.styled';
import EventCard from './EventCard';
const fetchEntries = async versionStatus => {
const triggerSearch = async versionStatus => {
......@@ -25,18 +27,19 @@ const fetchEntries = async versionStatus => {
return entries;
};
const EventsListing = ({ className }) => {
const ExampleListing = ({ className }) => {
const [results, setResults] = useState();
const versionStatus = useSelector(selectVersionStatus);
//const versionStatus = 'latest';
useEffect(() => {
fetchEntries(versionStatus).then(entries => {
setResults(entries.items);
fetchEntries(versionStatus).then(results => {
setResults(results);
});
}, [versionStatus]);
let resultsInfo = null;
if (results && results.totalCount > 1) {
if (results && results.totalCount > 0) {
const start = results.pageIndex * results.pageSize + 1;
let end = results.pageSize;
if (end > results.totalCount) end = results.totalCount;
......@@ -45,8 +48,7 @@ const EventsListing = ({ className }) => {
}
return (
<EventListingStyled className={className}>
<h1 className="pageTitle">Example listing title</h1>
<EventsListingStyled className={className}>
{resultsInfo && (
<div
className="resultsInfo"
......@@ -54,20 +56,26 @@ const EventsListing = ({ className }) => {
/>
)}
{results && (
<ul>
{results.map((entry, idx) => {
return <li key={idx}>{entry.title}</li>;
})}
</ul>
)}
{results &&
results.items &&
results.items.map((entry, idx) => {
return (
<EventCard
title={entry.title}
description={entry.summary}
image={entry.image}
uri={entry.sys && entry.sys.uri}
key={idx}
/>
);
})}
{!results || (results.length < 1 && <p>No results found.</p>)}
</EventListingStyled>
</EventsListingStyled>
);
};
EventsListing.propTypes = {
ExampleListing.propTypes = {
className: PropTypes.string,
};
export default EventsListing;
export default ExampleListing;
src/app/features/exampleListing/components.styled/ExampleListing.styled.js
View file @ 77d60733
......@@ -8,6 +8,10 @@ const ExampleListingStyled = styled.div`
width: 100%;
max-width: 1200px;
margin: 30px auto;
.resultsInfo {
width: 100%;
margin-bottom: 30px;
}
a {
text-decoration: none;
width: 100%;
......
src/app/features/exampleListing/components/ExampleListing.js
View file @ 77d60733
......@@ -32,14 +32,14 @@ const ExampleListing = ({ className }) => {
const versionStatus = useSelector(selectVersionStatus);
//const versionStatus = 'latest';
useEffect(() => {
fetchEntries(versionStatus).then(entries => {
setResults(entries.items);
fetchEntries(versionStatus).then(results => {
setResults(results);
});
}, [versionStatus]);
let resultsInfo = null;
if (results && results.totalCount > 1) {
if (results && results.totalCount > 0) {
const start = results.pageIndex * results.pageSize + 1;
let end = results.pageSize;
if (end > results.totalCount) end = results.totalCount;
......@@ -57,7 +57,8 @@ const ExampleListing = ({ className }) => {
)}
{results &&
results.map((entry, idx) => {
results.items &&
results.items.map((entry, idx) => {
return (
<ExampleCard
title={entry.title}
......
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