Source: components/homepage/HomePage.js

import React, { Component } from 'react';

// Import child components
import Header from '../header/Header'
import BigTileBlue from '../bigtile/BigTileBlue'
import scheme from './scheme.jpg'
import { Link } from 'react-router-dom'
import Stage from './Stage'
import './HomePage.css'
import Footer from '../footer/Footer'
import GlossaryTeaser from '../glossary/GlossaryTeaser'
import getTranslation from '../../i18n/'
import twentyfour from './icons/twentyfour.svg';
import heatingcooling from './icons/heatingcooling.svg'
import emissions from './icons/emissions.svg'
import savespace from './icons/savespace.svg'

/**
 * The homepage of the web portal
 */
class HomePage extends Component {

  render() {

      let sitecontent = [];
      let page = this.props.pages.filter(page => page.url === '/');
      if(page.length > 0) {
          page = page[0];
          this.props.sitecontent.map(content => {
              if(content.page_id === page.id) {
                  sitecontent.push(content)
              }
          })
      }
      // Localize the content on the homepage
      if(this.props.language.locale !== "en") {
        let localized_text;
        let localized_title;
        this.props.sitecontent.map(content => {
            if(this.props.language.locale == 'cs') {
                localized_title = "title_cz"
                localized_text = "text_cz"
            } else {
                localized_title = "title_"+this.props.language.locale
                localized_text = "text_"+this.props.language.locale
            }
            content.title_local = content[localized_title]
            content.text_local = content[localized_text]
        })
    }
    const localExperts = this.props.localcontacts.filter(expert => expert.language === this.props.language.locale)

    return (
      <div className="App">
        <Header title="GeoPLASMA-CE web-portal" />


        <div className="container container-content">
            <Stage pilotareas={this.props.pilotareas} />
            <div className="container-flex">
                <div className="two-third">


                {((this.props.fetching.dataFetching.isFetching) && (sitecontent.length === 0)) &&
                    <div className="default-element default-element-dark profile-teaser">
                      <div className="loader"></div>
                    </div>
                }

                {sitecontent.map(content =>
                    <div key={content.id} className="default-element">
                        <div className="default-element-content text-container">
                            <h2>{(this.props.language.locale === "en" ? content.title : (content.title_local !== '') ? content.title_local : content.title)}</h2>

                            <span dangerouslySetInnerHTML={{__html: (this.props.language.locale === "en" ? content.text : (content.text_local !== '') ? content.text_local :content.text)}}></span>

                        </div>
                    </div>
                )}


                </div>
                <div className="third padding20">

                <div className="default-element default-element-dark">
                    <Link to="/content/whytouse">
                    <div className="default-element-content text-container why-teaser hover-effect">
                        <h3> {getTranslation("whytouse.why")}</h3>
                        <img src={twentyfour} />
                        <img src={heatingcooling} />
                        <img src={emissions} />
                        <img src={savespace} />
                    </div>
                    </Link>
                </div>

                {this.props.pages.filter(page => page.url === 'practice-examples').length > 0  &&
                    <div className="default-element default-element-dark">
                        <Link to="/content/practice-examples">
                        <div className="default-element-content text-container why-teaser hover-effect">
                            <h3><i className="fas fa-info-circle"></i> {getTranslation("example.teaser")}</h3>
                        </div>
                        </Link>
                    </div>
                }
                
                {this.props.pages.filter(page => page.url === 'links').length > 0  &&
                    <div className="default-element default-element-dark">
                        <Link to="/content/links">
                        <div className="default-element-content text-container why-teaser hover-effect">
                            <h3><i className="fas fa-globe"></i> {getTranslation("links.teaser")}</h3>
                        </div>
                        </Link>
                    </div>
                }
                

                <BigTileBlue
                    title="portal.teaser.expert.title"
                    icon="book"
                    description="portal.teaser.expert.description"
                    link="/experts"
                    linktitle="portal.teaser.expert.gotolink"
                />

                <GlossaryTeaser language={this.props.language} glossary={this.props.glossary} />

                <div className="default-element default-element-dark">
                    <div className="default-element-content text-container">
                        <h2>{getTranslation("contact.button")}</h2>
                        <h3>{getTranslation("homepage.project_manager")}:</h3>
                        <p>
                        Gregor Goetzl<br />
                        Geological Survey of Austria
                        <br />
                        gregor.goetzl@geologie.ac.at
                        <br />
                        +43 1 7125674 336</p>
                        <h3>{getTranslation("homepage.communication")}:</h3>
                        <p>
                        Urša Šolc<br />
                        Geological Survey of Slovenia
                        <br />
                        urska.solc@geo-zs.si
                        <br />
                        +386 1 2809 774</p>

                        <p>
                        Ruediger Grimm<br />
                        geoENERGIE Konzept GmbH
                        <br />
                        grimm@geoenergie-konzept.de
                        <br />
                        +49 3731 79878 11
                        </p>

                        {this.props.language.locale !== 'en' &&
                            <React.Fragment>
                                <h3>{getTranslation("homepage.local_contacts")}</h3>
                                {localExperts.map(expert =>
                                    <p dangerouslySetInnerHTML={{__html : expert.contactinfo}}></p>
                                )}
                            </React.Fragment>
                        }
                        </div>
                </div>

                </div>

            </div>
            <Footer activeLanguage={this.props.language.locale} pages={this.props.pages} />
        </div>



      </div>
    );
  }
}

export default HomePage;