Commit 7aaac445 authored by Andy Lamb's avatar Andy Lamb
Browse files

now using componentDidMount for yammer

parent e5f8a53b
Pipeline #40521 passed with stage
in 4 minutes and 49 seconds
This diff is collapsed.
......@@ -21,4 +21,13 @@ export default [
loading: Loading,
}),
},
// {
// contentTypeID: 'andyLambTest',
// component: Loadable({
// loader: () => {
// return import('~/pages/AndyTestPages/AndyTestPage');
// },
// loading: Loading,
// }),
// },
];
......@@ -25,6 +25,14 @@ export default [
loading: Loading,
}),
},
{
path: '/andy-test',
exact: true,
component: Loadable({
loader: () => import('~/pages/AndyTestPages/AndyTestPage'),
loading: Loading,
}),
},
// ********************************
// ˅˅ Do not delete these routes ˅˅
{
......
import styled, { css } from 'styled-components';
const AndyTestContentStyled = styled.div`
${() => {
return css`
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
max-width: 1100px;
width: 100%;
margin: auto;
@media only screen and (min-width: 768px) {
flex-direction: row;
}
article {
max-width: 750px;
width: 100%;
padding: 20px;
@media only screen and (min-width: 1100px) {
padding: 0;
}
img {
width: 100%;
height: auto;
}
}
aside {
width: 100%;
@media only screen and (min-width: 1100px) {
max-width: 250px;
}
}
`;
}};
`;
export default AndyTestContentStyled;
import styled, { css } from 'styled-components';
const BlogCardStyled = styled.article`
${() => {
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;
}
`;
}};
`;
export default BlogCardStyled;
import styled, { css } from 'styled-components';
const BlogFiltersStyled = styled.div`
${() => {
return css`
@media only screen and (min-width: 1024px) {
padding-right: 32px;
}
.filterGroup:not(:first-child) {
margin-top: 24px;
}
.filterGroup .open .feToggle {
border-radius: 16px 16px 0 0;
&:after {
transform: translateY(-50%) rotate(180deg);
}
}
.feLabel {
display: none;
}
.feToggle {
position: relative;
padding-right: 32px;
display: block;
width: 100%;
padding: 12px 16px;
background: rgba(163, 183, 148, 0.2);
border-radius: 16px;
border: none;
font-size: 16px;
line-height: 24px;
color: #333333;
text-align: left;
&:after {
content: '';
background-image: url('/static/img/icons/chevron_down.svg');
width: 10px;
height: 5px;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
}
.toggleFiltersWrap {
text-align: right;
@media only screen and (min-width: 1024px) {
display: none;
}
}
.toggleFilters {
border: none;
margin-top: 24px;
background: transparent;
font-size: 14px;
color: #879b79;
text-decoration: underline;
&:after {
content: '';
display: inline-block;
margin-left: 8px;
background-image: url('/static/img/icons/chevron_down_green.svg');
width: 8px;
height: 5px;
}
}
.feList {
border-top: 1px solid #fff;
list-style: none;
margin: 0;
padding: 24px 16px;
background: rgba(163, 183, 148, 0.2);
border-radius: 0 0 16px 16px;
}
.feItem:not(:first-child) {
margin-top: 24px;
}
.feItemInput {
display: none;
}
.feItemInput:checked + .feItemLabel {
font-weight: bold;
}
`;
}};
`;
export default BlogFiltersStyled;
import styled, { css } from 'styled-components';
const BlogListingStyled = styled.div`
${() => {
return css`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 30px auto;
.resultsInfo {
width: 100%;
margin-bottom: 30px;
}
a {
text-decoration: none;
width: 100%;
margin: 20px;
@media only screen and (min-width: 550px) {
margin: 0;
width: calc(50% - 15px);
}
@media only screen and (min-width: 1100px) {
margin: 0;
width: calc(33% - 15px);
}
p {
text-decoration: none;
}
}
`;
}};
`;
export default BlogListingStyled;
import React from 'react';
import PropTypes from 'prop-types';
import AndyTestContentStyled from '../components.styled/AndyTestContent.styled';
import ContentComposer from '~/features/composer/components/Composer';
const AndyTestContent = ({ className, entry }) => {
if (!entry) return null;
return (
<AndyTestContentStyled 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.postContent} />}
</div>
</div>
</AndyTestContentStyled>
);
};
AndyTestContent.propTypes = {
className: PropTypes.string,
entry: PropTypes.object,
};
export default AndyTestContent;
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import BlogCardStyled from '../components.styled/BlogCard.styled';
const BlogCard = ({ title, description, image, uri, className }) => {
return (
<Link to={uri}>
<BlogCardStyled 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>}
</BlogCardStyled>
</Link>
);
};
BlogCard.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
description: PropTypes.string,
image: PropTypes.object,
uri: PropTypes.string,
};
export default BlogCard;
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import BlogFiltersStyled from '../components.styled/BlogFilters.styled';
import FilterEntryDropdown from '~/features/listings/components/FilterEntryDropdown';
const BlogFilters = ({ 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 (
<BlogFiltersStyled 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>
</BlogFiltersStyled>
);
};
BlogFilters.propTypes = {
className: PropTypes.string,
clearFilters: PropTypes.func,
filters: PropTypes.array,
updateFilters: PropTypes.func,
};
export default BlogFilters;
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 BlogListingStyled from '../components.styled/BlogListing.styled';
import BlogCard from './BlogCard';
const fetchEntries = async versionStatus => {
const triggerSearch = async versionStatus => {
try {
//DELIVERY API QUERY START//
let query = new Query(
Op.equalTo('sys.contentTypeId', 'blogPost'),
Op.equalTo('sys.versionStatus', versionStatus)
);
query.pageSize = 3;
query.fields = ['title', 'summary', 'image', 'sys'];
//DELIVERY API QUERY END//
//DELIVERY API SEARCH START//
return await cachedSearch.search(query, 1);
//DELIVERY API SEARCH END//
} catch (error) {
throw new Error(error);
}
};
const entries = await triggerSearch(versionStatus);
return entries;
};
const BlogListing = ({ className }) => {
const [results, setResults] = useState();
//GET VERSION STATUS
const versionStatus = useSelector(selectVersionStatus);
//const versionStatus = 'latest';
useEffect(() => {
fetchEntries(versionStatus).then(results => {
setResults(results);
});
}, [versionStatus]);
let resultsInfo = null;
//DELIVERY API PAGING INFO START//
if (results && results.totalCount > 0) {
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`;
}
//DELIVERY API PAGING INFO END//
return (
<BlogListingStyled className={className}>
{resultsInfo && (
<div
className="resultsInfo"
dangerouslySetInnerHTML={{ __html: resultsInfo }}
/>
)}
{/* DELIVERY API RENDER ENTRIES START */}
{results &&
results.items &&
results.items.map((entry, idx) => {
return (
<BlogCard
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>)}
{/* DELIVERY API RENDER ENTRIES END */}
</BlogListingStyled>
);
};
BlogListing.propTypes = {
className: PropTypes.string,
};
export default BlogListing;
import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import BlogCard from '~/features/blogListing/components/BlogCard';
storiesOf('Features | Listings', module).add(
'Blog card',
() => {
return (
<BlogCard
title={text('Title', 'Example Title')}
description={text('Title', 'Example description')}
uri="/blog/example-post"
/>
);
},
{
knobs: {
escapeHTML: false,
},
}
);
import React from 'react';
import React, { Component } from 'react';
// import { Helmet } from 'react-helmet';
import Script from 'react-inline-script';
import PropTypes from 'prop-types';
const YammerScripts = props => {
return (
<>
<Script url="https://s0-azure.assets-yammer.com/assets/platform_embed.js" />
<Script>
class YammerScripts extends Component {
componentDidMount() {
const script = document.createElement('script');
script.src = 'https://s0-azure.assets-yammer.com/assets/platform_embed.js';
script.async = true;
document.body.appendChild(script);
}
render() {
return (
<Script type="text/javascript">
{`
yam.connect.embedFeed({
container: "#embedded-feed",
network: "towerhamlets.gov.uk",
feedType: "group",
feedId: "${props.feedId}"
container: "${this.props.container}",
network: "${this.props.network}",
feedType: "${this.props.feedType}",
feedId: "${this.props.feedId}"
});
`}
</Script>
</>
);
};
);
}
}
YammerScripts.propTypes = {
// container: PropTypes.string,
// network: PropTypes.string,
// feedType: PropTypes.string,
container: PropTypes.string,
network: PropTypes.string,
feedType: PropTypes.string,
feedId: PropTypes.string,
};
......
import React from 'react';
import PropTypes from 'prop-types';
import GlobalStyles from '~/themes/contensis/global';
import Header from '~/features/header/components/header';
import Footer from '~/features/footer/footer';
......
import React from 'react';
import PropTypes from 'prop-types';
import MainLayout from '~/layouts/Main.layout';
import AndyTestContent from '~/features/andyTest/components/AndyTestContent';
import { Loading } from '~/core/routes/Loading';
const AndyTest = ({ entry }) => {
if (!entry) return <Loading />;
return (
<MainLayout>
<AndyTestContent entry={entry} />
</MainLayout>
);
};
AndyTest.propTypes = {
entry: PropTypes.object,
};
export default AndyTest;