Skip to content

Commit

Permalink
DCN-151 - Load Home page content from linked elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@hejtmii
hejtmii committed May 2, 2019
1 parent 1257368 commit f0ba629
Show file tree
Hide file tree
Showing 11 changed files with 170 additions and 260 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -15,7 +15,7 @@
"@chevtek/react-spinners": "^1.0.5",
"google-maps-react": "^2.0.2",
"immutable": "^3.8.2",
"kentico-cloud-delivery": "^5.1.0",
"kentico-cloud-delivery": "^5.7.2",
"lodash": "^4.17.11",
"qs": "^6.5.2",
"react": "^16.4.2",
Expand Down
24 changes: 19 additions & 5 deletions src/Components/Banner.js
View file
@@ -1,16 +1,30 @@
import React from 'react';
import { translate } from 'react-translate';

import BackgroundImage from '../Images/banner-default.jpg';

const Banner = props => {
const heroUnit = props.heroUnit;
const images = heroUnit.image && heroUnit.image.value;
const imageUrl = images && images.length && images[0].url;

return (
<section
className="banner-section"
style={{ backgroundImage: 'url(' + BackgroundImage + ')' }}
style={
imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : undefined
}
>
<h2 className="banner-heading">{props.t('heading')}</h2>
<p className="banner-text">{props.t('text')}</p>
<h2 className="banner-heading">
{heroUnit.title && heroUnit.title.value}
</h2>
<p className="banner-text">
{heroUnit.marketingMessage && (
<div
dangerouslySetInnerHTML={{
__html: heroUnit.marketingMessage.value
}}
/>
)}
</p>
</section>
);
};
Expand Down
198 changes: 75 additions & 123 deletions src/Components/LatestArticles.js
View file
@@ -1,114 +1,23 @@
import React, { Component } from 'react';
import { ArticleStore } from '../Stores/Article';
import React from 'react';
import dateFormat from 'dateformat';
import { translate } from 'react-translate';

import { dateFormats } from '../Utilities/LanguageCodes';
import Link from '../Components/LowerCaseUrlLink';

const articleCount = 5;

let getState = props => {
return {
articles: ArticleStore.getArticles(articleCount, props.language)
};
};

class LatestArticles extends Component {
constructor(props) {
super(props);
this.state = getState(props);
this.onChange = this.onChange.bind(this);
dateFormat.i18n = dateFormats[props.language] || dateFormats[0];
}

componentDidMount() {
ArticleStore.addChangeListener(this.onChange);
ArticleStore.provideArticles(this.props.language);
}

componentWillUnmount() {
ArticleStore.removeChangeListener(this.onChange);
ArticleStore.unsubscribe();
const LatestArticles = props => {
if (props.articles.length === 0) {
return <div className="row" />;
}

static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.language !== nextProps.language) {
ArticleStore.provideArticles(nextProps.language);
dateFormat.i18n = dateFormats[nextProps.language] || dateFormats[0];
return {
language: nextProps.language
};
}
return null;
}

onChange() {
this.setState(getState(this.props));
}

render() {
if (this.state.articles.length === 0) {
return <div className="row" />;
}

let formatDate = value => {
return dateFormat(value, 'mmmm d');
};

var otherArticles = this.state.articles.slice(1).map((article, index) => {
let title =
article.title.value.trim().length > 0
? article.title.value
: this.props.t('noTitleValue');

let imageLink =
article.teaserImage.value[0] !== undefined ? (
<img
alt={'Article ' + title}
className="article-tile-image"
src={article.teaserImage.value[0].url}
title={'Article ' + title}
/>
) : (
<div className="article-tile-image placeholder-tile-image">
{this.props.t('noTeaserValue')}
</div>
);

let postDate = formatDate(article.postDate.value);

let summary =
article.summary.value.trim().length > 0
? article.summary.value
: this.props.t('noSummaryValue');

let link = `/${this.props.language.toLowerCase()}/articles/${
article.system.id
}`;

return (
<div className="col-md-3" key={index}>
<div className="article-tile">
<Link to={link}>{imageLink}</Link>
<div className="article-tile-date">{postDate}</div>
<div className="article-tile-content">
<h2 className="h4">
<Link to={link}>{title}</Link>
</h2>
<p className="article-tile-text">{summary}</p>
</div>
</div>
</div>
);
});

let article = this.state.articles[0];
let formatDate = value => {
return dateFormat(value, 'mmmm d');
};

var otherArticles = props.articles.slice(1).map((article, index) => {
let title =
article.title.value.trim().length > 0
? article.title.value
: this.props.t('noTitleValue');
: props.t('noTitleValue');

let imageLink =
article.teaserImage.value[0] !== undefined ? (
Expand All @@ -120,7 +29,7 @@ class LatestArticles extends Component {
/>
) : (
<div className="article-tile-image placeholder-tile-image">
{this.props.t('noTeaserValue')}
{props.t('noTeaserValue')}
</div>
);

Expand All @@ -129,34 +38,77 @@ class LatestArticles extends Component {
let summary =
article.summary.value.trim().length > 0
? article.summary.value
: this.props.t('noSummaryValue');
: props.t('noSummaryValue');

let link = `/${this.props.language.toLowerCase()}/articles/${
article.system.id
}`;
let tabTitle = this.props.t('title');
let link = `/${props.language.toLowerCase()}/articles/${article.system.id}`;

return (
<div className="row">
<h1 className="title-tab">{tabTitle}</h1>
<div className="article-tile article-tile-large">
<div className="col-md-12 col-lg-6">
<Link to={link}>{imageLink}</Link>
</div>
<div className="col-md-12 col-lg-6">
<div className="article-tile-date">{postDate}</div>
<div className="article-tile-content">
<h2>
<Link to={link}>{title}</Link>
</h2>
<p className="article-tile-text lead-paragraph">{summary}</p>
</div>
<div className="col-md-3" key={index}>
<div className="article-tile">
<Link to={link}>{imageLink}</Link>
<div className="article-tile-date">{postDate}</div>
<div className="article-tile-content">
<h2 className="h4">
<Link to={link}>{title}</Link>
</h2>
<p className="article-tile-text">{summary}</p>
</div>
</div>
{otherArticles}
</div>
);
}
}
});

let article = props.articles[0];

let title =
article.title.value.trim().length > 0
? article.title.value
: props.t('noTitleValue');

let imageLink =
article.teaserImage.value[0] !== undefined ? (
<img
alt={'Article ' + title}
className="article-tile-image"
src={article.teaserImage.value[0].url}
title={'Article ' + title}
/>
) : (
<div className="article-tile-image placeholder-tile-image">
{props.t('noTeaserValue')}
</div>
);

let postDate = formatDate(article.postDate.value);

let summary =
article.summary.value.trim().length > 0
? article.summary.value
: props.t('noSummaryValue');

let link = `/${props.language.toLowerCase()}/articles/${article.system.id}`;
let tabTitle = props.t('title');

return (
<div className="row">
<h1 className="title-tab">{tabTitle}</h1>
<div className="article-tile article-tile-large">
<div className="col-md-12 col-lg-6">
<Link to={link}>{imageLink}</Link>
</div>
<div className="col-md-12 col-lg-6">
<div className="article-tile-date">{postDate}</div>
<div className="article-tile-content">
<h2>
<Link to={link}>{title}</Link>
</h2>
<p className="article-tile-text lead-paragraph">{summary}</p>
</div>
</div>
</div>
{otherArticles}
</div>
);
};

export default translate('LatestArticles')(LatestArticles);
16 changes: 11 additions & 5 deletions src/Components/OurStory.js
View file
@@ -1,18 +1,24 @@
import React from 'react';
import { translate } from 'react-translate';

import StoryImage from '../Images/our-story.jpg';

const OurStory = props => {
const fact = props.fact;
const images = fact.image && fact.image.value;
const imageUrl = images && images.length && images[0].url;

return (
<div className="row">
<h1 className="title-tab">{props.t('title')}</h1>
<h1 className="title-tab">{fact.title && fact.title.value}</h1>
<div className="col-sm-12">
<div
className="ourstory-section center-text"
style={{ backgroundImage: 'url(' + StoryImage + ')' }}
style={
imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : undefined
}
>
{props.t('text')}
{fact.description && (
<div dangerouslySetInnerHTML={{ __html: fact.description.value }} />
)}
</div>
</div>
</div>
Expand Down

0 comments on commit f0ba629

Please sign in to comment.