<h1 dir="auto">Bug report</h1>
<p dir="auto">AMP pages include the query string in the canonical URL.</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">On AMP pages the canonical link includes the query string. This has potential to cause duplicate content SEO issues on post pages, etc.</p>
<p dir="auto">Using <a href="https://nextjs.org/blog/next-9" rel="nofollow">https://nextjs.org/blog/next-9</a> as an example:</p>
<ul dir="auto">
<li><a href="https://nextjs.org/blog/next-9" rel="nofollow">https://nextjs.org/blog/next-9</a> (<code class="notranslate">&lt;link rel="canonical" href="/blog/next-9"/&gt;</code>)</li>
<li><a href="https://nextjs.org/blog/next-9?utm_source=google" rel="nofollow">https://nextjs.org/blog/next-9?utm_source=google</a> (<code class="notranslate">&lt;link rel="canonical" href="/blog/next-9?utm_source=google"/&gt;</code>)</li>
<li><a href="https://nextjs.org/blog/next-9?foo=bar" rel="nofollow">https://nextjs.org/blog/next-9?foo=bar</a> (<code class="notranslate">&lt;link rel="canonical" href="/blog/next-9?foo=bar"/&gt;</code>)</li>
</ul>
<p dir="auto">In this example the query string does not affect the content, however each URL has a different canonical value.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Visit an AMP page such as <a href="https://nextjs.org/blog/next-9" rel="nofollow">https://nextjs.org/blog/next-9</a> with and without query strings. Inspect the canonical link and note the inclusion of the query string.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">In the example above, the canonical link should not include the query string. However, this is nuanced, since in some situations including the query string (or a subset of the params) might be necessary when building the canonical link. For example, a URL such as <code class="notranslate">/post?id=123456&amp;foo=junk</code> could potentially require a canonical link of <code class="notranslate">&lt;link rel="canonical" href="/post?id=123456"/&gt;</code> for correct SEO.</p>
<p dir="auto">Ideally Next would allow full control over the canonical, i.e. it could be overridden. See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="462276027" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7706" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7706/hovercard" href="https://github.com/vercel/next.js/issues/7706">#7706</a> for a similar feature request and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="445610952" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7373" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/7373/hovercard" href="https://github.com/vercel/next.js/pull/7373">#7373</a>.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">N/A</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: 9</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">We are using hybrid AMP rendering for our post pages. We already set our canonical for the non-AMP version, and there are lots of business and SEO concerns when it comes to canonical links (we are a media company). Having full control over the canonical in the AMP context would be incredibly useful for us.</p>
<p dir="auto">Hi, I am using next.js in my project and have integrated redux, redux-saga &amp; reselect with it. I am dispatching actions in async <strong>getIntialProps</strong> but the component renders before the saga request attached to respective action is completed.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>I made an action and attached saga listener with it</li>
<li>I dispatched that action in async getInitialProps of pages/index.js</li>
<li>It should have waited before going to render of pages/index.js</li>
<li>However, the page rendered before the saga request got completed.</li>
<li>In this way, page renders before the store is updated with newly fetched data.</li>
</ol>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>^4.1.4</td>
</tr>
<tr>
<td>node</td>
<td>&gt;=6</td>
</tr>
<tr>
<td>OS</td>
<td>linux, windows</td>
</tr>
<tr>
<td>browser</td>
<td>all</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">The code for certain issue is as follows:</p>
<p dir="auto"><strong>pages/index</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  static async getInitialProps({store}) {
    await store.dispatch(getSettings())
    await store.dispatch(getAboutUs())
    console.log('Team Before',store.getState().home.Team)
    await store.dispatch(getTeam())
    console.log('Team After',store.getState().home.Team)
    await store.dispatch(getServices())
    await store.dispatch(getTestimonials())
    await store.dispatch(getPortfolio())
    await store.dispatch(getPortfolioSettings())
  }
	render() {
		return (
      &lt;HomeContainer /&gt;
		);
	}
}
export default withReduxSaga(Home)"><pre class="notranslate"><code class="notranslate">class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  static async getInitialProps({store}) {
    await store.dispatch(getSettings())
    await store.dispatch(getAboutUs())
    console.log('Team Before',store.getState().home.Team)
    await store.dispatch(getTeam())
    console.log('Team After',store.getState().home.Team)
    await store.dispatch(getServices())
    await store.dispatch(getTestimonials())
    await store.dispatch(getPortfolio())
    await store.dispatch(getPortfolioSettings())
  }
	render() {
		return (
      &lt;HomeContainer /&gt;
		);
	}
}
export default withReduxSaga(Home)
</code></pre></div>
<p dir="auto"><strong>Home Container</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import Home from 'components/views/Home';
import { Router } from 'routes';
import Root from 'containers/Root'
import LinearLoader from 'components/widgets/Loaders/LinearProgressLoader'

import {
	getSettings,
	getAboutUs,
	getTeam,
	getServices,
	getPortfolio,
	getPortfolioSettings,
	getTestimonials
}  from './actions';

import {
	selectSettings,
	selectGetSettingsStatus,
	selectAboutUs,
	selectGetAboutUsStatus,
	selectTeam,
	selectGetTeamStatus,
	selectServices,
	selectGetServiceStatus,
	selectTestimonials,
	selectGetTestimonialsStatus,
	selectPortfolios,
	selectGetPortfoliosStatus,
	selectPortfolioSettings,
	selectGetPortfolioSettingsStatus
} from './selectors';

export class HomeContainer extends React.Component {

	changeRoute = (route) =&gt; {
		Router.replaceRoute(route);
	}

	render() {
		console.log(&quot;Settings&quot;, this.props.Settings)
		const { GetPortfolioSettingsStatus, GetSettingsStatus, GetAboutUsStatus, GetTeamStatus, GetServicesStatus, GetTestimonialStatus, GetPortfoliosStatus } = this.props;
		if(GetSettingsStatus.get('loading')) {
			return (
				&lt;LinearLoader /&gt;
			);
		}
		return (
  &lt;div&gt;
    {!!this.props.Settings &amp;&amp; &lt;Root Settings={this.props.Settings} isHome SettingsStatus={GetSettingsStatus} &gt;
      &lt;Home
        Settings={this.props.Settings}
        SettingsStatus={GetSettingsStatus}
        changeRoute={this.changeRoute}
        Team={this.props.Team}
        TeamStatus={GetTeamStatus}
        AboutUs={this.props.AboutUs}
        AboutUsStatus={GetAboutUsStatus}
        Services={this.props.Services}
        ServicesStatus={GetServicesStatus}
        Testimonials={this.props.Testimonials}
        TestimonialStatus={GetTestimonialStatus}
        Portfolios={this.props.Portfolios}
        PortfoliosStatus={GetPortfoliosStatus}
        PortfolioSettings={this.props.PortfolioSettings}
        PortfolioSettingsStatus={GetPortfolioSettingsStatus}
      /&gt;
    &lt;/Root&gt;}
  &lt;/div&gt;
		);
	}
}

const mapDispatchToProps = (dispatch) =&gt; {
  return {
		onGetSettings: bindActionCreators(getSettings, dispatch),
		onGetAboutUs: bindActionCreators(getAboutUs, dispatch),
		onGetTeam: bindActionCreators(getTeam, dispatch),
		onGetServices: bindActionCreators(getServices, dispatch),
		onGetPortfolio: bindActionCreators(getPortfolio, dispatch),
		onGetTestimonial: bindActionCreators(getTestimonials, dispatch),
		onGetPortFolioSettings: bindActionCreators(getPortfolioSettings, dispatch)
  }
}

const mapStateToProps = createStructuredSelector({
	Settings: selectSettings(),
	Team: selectTeam(),
	AboutUs: selectAboutUs(),
	Services: selectServices(),
	Testimonials: selectTestimonials(),
	Portfolios: selectPortfolios(),
	PortfolioSettings: selectPortfolioSettings(),
	GetSettingsStatus: selectGetSettingsStatus(),
	GetTeamStatus: selectGetTeamStatus(),
	GetAboutUsStatus: selectGetAboutUsStatus(),
	GetServicesStatus: selectGetServiceStatus(),
	GetTestimonialStatus: selectGetTestimonialsStatus(),
	GetPortfoliosStatus: selectGetPortfoliosStatus(),
	GetPortfolioSettingsStatus: selectGetPortfolioSettingsStatus()
});

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)"><pre class="notranslate"><code class="notranslate">
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import Home from 'components/views/Home';
import { Router } from 'routes';
import Root from 'containers/Root'
import LinearLoader from 'components/widgets/Loaders/LinearProgressLoader'

import {
	getSettings,
	getAboutUs,
	getTeam,
	getServices,
	getPortfolio,
	getPortfolioSettings,
	getTestimonials
}  from './actions';

import {
	selectSettings,
	selectGetSettingsStatus,
	selectAboutUs,
	selectGetAboutUsStatus,
	selectTeam,
	selectGetTeamStatus,
	selectServices,
	selectGetServiceStatus,
	selectTestimonials,
	selectGetTestimonialsStatus,
	selectPortfolios,
	selectGetPortfoliosStatus,
	selectPortfolioSettings,
	selectGetPortfolioSettingsStatus
} from './selectors';

export class HomeContainer extends React.Component {

	changeRoute = (route) =&gt; {
		Router.replaceRoute(route);
	}

	render() {
		console.log("Settings", this.props.Settings)
		const { GetPortfolioSettingsStatus, GetSettingsStatus, GetAboutUsStatus, GetTeamStatus, GetServicesStatus, GetTestimonialStatus, GetPortfoliosStatus } = this.props;
		if(GetSettingsStatus.get('loading')) {
			return (
				&lt;LinearLoader /&gt;
			);
		}
		return (
  &lt;div&gt;
    {!!this.props.Settings &amp;&amp; &lt;Root Settings={this.props.Settings} isHome SettingsStatus={GetSettingsStatus} &gt;
      &lt;Home
        Settings={this.props.Settings}
        SettingsStatus={GetSettingsStatus}
        changeRoute={this.changeRoute}
        Team={this.props.Team}
        TeamStatus={GetTeamStatus}
        AboutUs={this.props.AboutUs}
        AboutUsStatus={GetAboutUsStatus}
        Services={this.props.Services}
        ServicesStatus={GetServicesStatus}
        Testimonials={this.props.Testimonials}
        TestimonialStatus={GetTestimonialStatus}
        Portfolios={this.props.Portfolios}
        PortfoliosStatus={GetPortfoliosStatus}
        PortfolioSettings={this.props.PortfolioSettings}
        PortfolioSettingsStatus={GetPortfolioSettingsStatus}
      /&gt;
    &lt;/Root&gt;}
  &lt;/div&gt;
		);
	}
}

const mapDispatchToProps = (dispatch) =&gt; {
  return {
		onGetSettings: bindActionCreators(getSettings, dispatch),
		onGetAboutUs: bindActionCreators(getAboutUs, dispatch),
		onGetTeam: bindActionCreators(getTeam, dispatch),
		onGetServices: bindActionCreators(getServices, dispatch),
		onGetPortfolio: bindActionCreators(getPortfolio, dispatch),
		onGetTestimonial: bindActionCreators(getTestimonials, dispatch),
		onGetPortFolioSettings: bindActionCreators(getPortfolioSettings, dispatch)
  }
}

const mapStateToProps = createStructuredSelector({
	Settings: selectSettings(),
	Team: selectTeam(),
	AboutUs: selectAboutUs(),
	Services: selectServices(),
	Testimonials: selectTestimonials(),
	Portfolios: selectPortfolios(),
	PortfolioSettings: selectPortfolioSettings(),
	GetSettingsStatus: selectGetSettingsStatus(),
	GetTeamStatus: selectGetTeamStatus(),
	GetAboutUsStatus: selectGetAboutUsStatus(),
	GetServicesStatus: selectGetServiceStatus(),
	GetTestimonialStatus: selectGetTestimonialsStatus(),
	GetPortfoliosStatus: selectGetPortfoliosStatus(),
	GetPortfolioSettingsStatus: selectGetPortfolioSettingsStatus()
});

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)
</code></pre></div>
<p dir="auto"><strong>Sagas</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
import es6promise from 'es6-promise'
import 'isomorphic-fetch'
import request from 'common/request'
import config from 'config/config'
import {
  getSettingsSuccess,
  getSettingsFail,
  getAboutUsSuccess,
  getAboutUsFail,
  getServicesSuccess,
  getServicesFail,
  getPortfolioSuccess,
  getPortfolioSettingsSuccess,
  getPortfolioSettingsFail,
  getPortfolioFail,
  getTeamSuccess,
  getTeamFail,
  getTestimonialsSuccess,
  getTestimonialsFail
} from './actions'

import {
  GET_SETTINGS,
  GET_ABOUT_US,
  GET_SERVICES,
  GET_PORTFOLIO,
  GET_TEAM,
  GET_TESTIMONIALS,
  GET_PORTFOLIO_SETTINGS
} from './constants';


es6promise.polyfill()

function * getSettings () {
  const settings = yield call(request, config.settings_type);
  console.log('Settings Fetched: ', settings)
  if(!settings) {
    yield put(getSettingsFail('No Data Found'));
  }
  else if(!settings.err) {
    yield put(getSettingsSuccess(settings[0]));
  } else {
    yield put(getSettingsFail(settings.err.reason));
  }
}

function * getAboutUs () {
  const aboutUs = yield call(request, config.about_us_type);
  if(!aboutUs) {
    yield put(getAboutUsFail('No Data Found'));
  }
  else if(!aboutUs.err) {
    yield put(getAboutUsSuccess(aboutUs[0]));
  } else {
    yield put(getAboutUsFail(aboutUs.err.reason));
  }
}

function * getServices () {
  const services = yield call(request, config.services_type);
  if(!services) {
    yield put(getServicesFail('No Data Found'));
  }
  else if(!services.err) {
    yield put(getServicesSuccess(services[0]));
  } else {
    yield put(getServicesFail(services.err.reason));
  }
}

function * getPortfolio () {
  const portfolio = yield call(request, config.portfolios_type);
  if(!portfolio) {
    yield put(getPortfolioFail('No Data Found'));
  }
  else if(!portfolio.err) {
    yield put(getPortfolioSuccess(portfolio));
  } else {
    yield put(getPortfolioFail(portfolio.err.reason));
  }
}

function * getPortfolioSettings () {
  const portfolio_settings = yield call(request, config.portfolios_settings_type);
  if(!portfolio_settings) {
    yield put(getPortfolioSettingsFail('No Data Found'));
  }
  else if(!portfolio_settings.err) {
    yield put(getPortfolioSettingsSuccess(portfolio_settings[0]));
  } else {
    yield put(getPortfolioSettingsFail(portfolio_settings.err.reason));
  }
}

function * getTeam () {
  const team = yield call(request, config.team_type);
  // console.log('teams Fetched: ', team)
  if(!team) {
    yield put(getTeamFail('No Data Found'));
  }
  else if(!team.err) {
    yield put(getTeamSuccess(team[0]));
  } else {
    yield put(getTeamFail(team.err.reason));
  }
}

function * getTestimonials () {
  const testimonials = yield call(request, config.testimonials_type);
  if(!testimonials) {
    yield put(getTestimonialsFail('No Data Found'));
  }
  else if(!testimonials.err) {
    yield put(getTestimonialsSuccess(testimonials[0]));
  } else {
    yield put(getTestimonialsFail(testimonials.err.reason));
  }
}


export function* homeSagas() {
  yield fork(takeLatest, GET_SETTINGS, getSettings);
  yield fork(takeLatest, GET_ABOUT_US, getAboutUs);
  yield fork(takeLatest, GET_SERVICES, getServices);
  yield fork(takeLatest, GET_PORTFOLIO, getPortfolio);
  yield fork(takeLatest, GET_PORTFOLIO_SETTINGS, getPortfolioSettings);
  yield fork(takeLatest, GET_TEAM, getTeam);
  yield fork(takeLatest, GET_TESTIMONIALS, getTestimonials);
}

export default homeSagas;"><pre class="notranslate"><code class="notranslate">
import es6promise from 'es6-promise'
import 'isomorphic-fetch'
import request from 'common/request'
import config from 'config/config'
import {
  getSettingsSuccess,
  getSettingsFail,
  getAboutUsSuccess,
  getAboutUsFail,
  getServicesSuccess,
  getServicesFail,
  getPortfolioSuccess,
  getPortfolioSettingsSuccess,
  getPortfolioSettingsFail,
  getPortfolioFail,
  getTeamSuccess,
  getTeamFail,
  getTestimonialsSuccess,
  getTestimonialsFail
} from './actions'

import {
  GET_SETTINGS,
  GET_ABOUT_US,
  GET_SERVICES,
  GET_PORTFOLIO,
  GET_TEAM,
  GET_TESTIMONIALS,
  GET_PORTFOLIO_SETTINGS
} from './constants';


es6promise.polyfill()

function * getSettings () {
  const settings = yield call(request, config.settings_type);
  console.log('Settings Fetched: ', settings)
  if(!settings) {
    yield put(getSettingsFail('No Data Found'));
  }
  else if(!settings.err) {
    yield put(getSettingsSuccess(settings[0]));
  } else {
    yield put(getSettingsFail(settings.err.reason));
  }
}

function * getAboutUs () {
  const aboutUs = yield call(request, config.about_us_type);
  if(!aboutUs) {
    yield put(getAboutUsFail('No Data Found'));
  }
  else if(!aboutUs.err) {
    yield put(getAboutUsSuccess(aboutUs[0]));
  } else {
    yield put(getAboutUsFail(aboutUs.err.reason));
  }
}

function * getServices () {
  const services = yield call(request, config.services_type);
  if(!services) {
    yield put(getServicesFail('No Data Found'));
  }
  else if(!services.err) {
    yield put(getServicesSuccess(services[0]));
  } else {
    yield put(getServicesFail(services.err.reason));
  }
}

function * getPortfolio () {
  const portfolio = yield call(request, config.portfolios_type);
  if(!portfolio) {
    yield put(getPortfolioFail('No Data Found'));
  }
  else if(!portfolio.err) {
    yield put(getPortfolioSuccess(portfolio));
  } else {
    yield put(getPortfolioFail(portfolio.err.reason));
  }
}

function * getPortfolioSettings () {
  const portfolio_settings = yield call(request, config.portfolios_settings_type);
  if(!portfolio_settings) {
    yield put(getPortfolioSettingsFail('No Data Found'));
  }
  else if(!portfolio_settings.err) {
    yield put(getPortfolioSettingsSuccess(portfolio_settings[0]));
  } else {
    yield put(getPortfolioSettingsFail(portfolio_settings.err.reason));
  }
}

function * getTeam () {
  const team = yield call(request, config.team_type);
  // console.log('teams Fetched: ', team)
  if(!team) {
    yield put(getTeamFail('No Data Found'));
  }
  else if(!team.err) {
    yield put(getTeamSuccess(team[0]));
  } else {
    yield put(getTeamFail(team.err.reason));
  }
}

function * getTestimonials () {
  const testimonials = yield call(request, config.testimonials_type);
  if(!testimonials) {
    yield put(getTestimonialsFail('No Data Found'));
  }
  else if(!testimonials.err) {
    yield put(getTestimonialsSuccess(testimonials[0]));
  } else {
    yield put(getTestimonialsFail(testimonials.err.reason));
  }
}


export function* homeSagas() {
  yield fork(takeLatest, GET_SETTINGS, getSettings);
  yield fork(takeLatest, GET_ABOUT_US, getAboutUs);
  yield fork(takeLatest, GET_SERVICES, getServices);
  yield fork(takeLatest, GET_PORTFOLIO, getPortfolio);
  yield fork(takeLatest, GET_PORTFOLIO_SETTINGS, getPortfolioSettings);
  yield fork(takeLatest, GET_TEAM, getTeam);
  yield fork(takeLatest, GET_TESTIMONIALS, getTestimonials);
}

export default homeSagas;
</code></pre></div>
<p dir="auto"><strong>Home Component</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import ScrollableAnchor from 'react-scrollable-anchor'
import { Router } from 'routes';
import AboutUs from './AboutUs'
import Services from './Services'
import Team from './Team'
import Testimonials from './Testimonials'
import Portfolios from './Portfolio'

class Home extends React.Component {
	constructor (props) {
		super(props)
	}

	render() {
		console.log('Teams available: ', this.props.Team)
		return (
  		&lt;div&gt;
		    &lt;div className=&quot;page-header&quot; filter-color=&quot;orange&quot;&gt;
		      {!!this.props.Settings &amp;&amp; &lt;div className=&quot;page-header-image&quot; data-parallax=&quot;true&quot; style={{backgroundColor: &quot;grey&quot;, backgroundImage: `url(${this.props.Settings.getIn(['metadata','home_banner_image','url'])}`}} /&gt;}
		      &lt;div className=&quot;container&quot;&gt;
						{
							this.props.SettingsStatus.get('loaded') ?
		        &lt;div className=&quot;content-center brand&quot;&gt;
		          &lt;img src={!!this.props.Settings ? this.props.Settings.getIn(['metadata','company_logo','url']): ''} alt={this.props.Settings.getIn(['metadata','agency_name'])} /&gt;
		          &lt;h3&gt;{!!this.props.Settings ? this.props.Settings.getIn(['metadata','punch_line']): 'Your Punch Line Here'}&lt;/h3&gt;
		        &lt;/div&gt;
						:
						&lt;div className=&quot;content-center brand&quot;&gt;
							&lt;h1&gt; Loading ... &lt;/h1&gt;
						&lt;/div&gt;
						}
		      &lt;/div&gt;
		    &lt;/div&gt;
		    &lt;div className=&quot;main&quot;&gt;
					{
						this.props.AboutUsStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.AboutUsStatus.get('loaded') ?
		    	  &lt;ScrollableAnchor id={'aboutUs'}&gt;
							&lt;AboutUs aboutUs={this.props.AboutUs} changeRoute={this.props.changeRoute} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.ServicesStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.ServicesStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'services'}&gt;
					  	&lt;Services services={this.props.Services} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.TeamStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.TeamStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'team'}&gt;
		        	&lt;Team team={this.props.Team} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.TestimonialStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.TestimonialStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'testimonials'}&gt;
							&lt;Testimonials testimonials={this.props.Testimonials} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.PortfoliosStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.PortfoliosStatus.get('loaded') &amp;&amp; this.props.PortfolioSettingsStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'portfolio'}&gt;
							&lt;Portfolios portfolios={this.props.Portfolios} settings={this.props.PortfolioSettings} changeRoute={this.props.changeRoute} /&gt;
		      	&lt;/ScrollableAnchor&gt;
						: &lt;div&gt; &lt;/div&gt;
					}
		    &lt;/div&gt;

		  &lt;/div&gt;
		);
	}
}
export default (Home)"><pre class="notranslate"><code class="notranslate">import ScrollableAnchor from 'react-scrollable-anchor'
import { Router } from 'routes';
import AboutUs from './AboutUs'
import Services from './Services'
import Team from './Team'
import Testimonials from './Testimonials'
import Portfolios from './Portfolio'

class Home extends React.Component {
	constructor (props) {
		super(props)
	}

	render() {
		console.log('Teams available: ', this.props.Team)
		return (
  		&lt;div&gt;
		    &lt;div className="page-header" filter-color="orange"&gt;
		      {!!this.props.Settings &amp;&amp; &lt;div className="page-header-image" data-parallax="true" style={{backgroundColor: "grey", backgroundImage: `url(${this.props.Settings.getIn(['metadata','home_banner_image','url'])}`}} /&gt;}
		      &lt;div className="container"&gt;
						{
							this.props.SettingsStatus.get('loaded') ?
		        &lt;div className="content-center brand"&gt;
		          &lt;img src={!!this.props.Settings ? this.props.Settings.getIn(['metadata','company_logo','url']): ''} alt={this.props.Settings.getIn(['metadata','agency_name'])} /&gt;
		          &lt;h3&gt;{!!this.props.Settings ? this.props.Settings.getIn(['metadata','punch_line']): 'Your Punch Line Here'}&lt;/h3&gt;
		        &lt;/div&gt;
						:
						&lt;div className="content-center brand"&gt;
							&lt;h1&gt; Loading ... &lt;/h1&gt;
						&lt;/div&gt;
						}
		      &lt;/div&gt;
		    &lt;/div&gt;
		    &lt;div className="main"&gt;
					{
						this.props.AboutUsStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.AboutUsStatus.get('loaded') ?
		    	  &lt;ScrollableAnchor id={'aboutUs'}&gt;
							&lt;AboutUs aboutUs={this.props.AboutUs} changeRoute={this.props.changeRoute} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.ServicesStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.ServicesStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'services'}&gt;
					  	&lt;Services services={this.props.Services} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.TeamStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.TeamStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'team'}&gt;
		        	&lt;Team team={this.props.Team} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.TestimonialStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.TestimonialStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'testimonials'}&gt;
							&lt;Testimonials testimonials={this.props.Testimonials} /&gt;
						&lt;/ScrollableAnchor&gt;
						: &lt;div&gt;&lt;/div&gt;
					}

					{
						this.props.PortfoliosStatus.get('loading') ?
						&lt;div&gt;&lt;/div&gt;
						: this.props.PortfoliosStatus.get('loaded') &amp;&amp; this.props.PortfolioSettingsStatus.get('loaded') ?
		      	&lt;ScrollableAnchor id={'portfolio'}&gt;
							&lt;Portfolios portfolios={this.props.Portfolios} settings={this.props.PortfolioSettings} changeRoute={this.props.changeRoute} /&gt;
		      	&lt;/ScrollableAnchor&gt;
						: &lt;div&gt; &lt;/div&gt;
					}
		    &lt;/div&gt;

		  &lt;/div&gt;
		);
	}
}
export default (Home)
</code></pre></div>