Source: components/homepage/ContentPage.js

import React, { Component } from 'react';
import {
    Accordion,
    AccordionItem,
    AccordionItemHeading,
    AccordionItemButton,
    AccordionItemPanel,
} from 'react-accessible-accordion';
import getTranslation from '../../i18n/'
// Import child components
import Header from '../header/Header'
import { Link } from 'react-router-dom'
import BigTileBlue from '../bigtile/BigTileBlue'
import Stage from './Stage'
import 'react-accessible-accordion/dist/fancy-example.css';
import './HomePage.css'
import Footer from '../footer/Footer'
import GlossaryTeaser from '../glossary/GlossaryTeaser'
// Why to use icons
import twentyfour from './icons/twentyfour.svg';
import heatingcooling from './icons/heatingcooling.svg'
import emissions from './icons/emissions.svg'
import savespace from './icons/savespace.svg'
import normalpower from './icons/normalpower.svg'
import smartgrids from './icons/smartgrids.svg'
import highinvest from './icons/highinvest.svg'
import lowcost from './icons/lowcost.svg'
import searchinfos from './icons/searchinfos.svg'
import permission_timeconsuming from './icons/permission_timeconsuming.svg'
import decisionmaker from './icons/decisionmaker.svg'
import web_tool from './icons/web_tool.svg'
import permission_easier from './icons/permission_easier.svg'

/**
 * Content page from the web portal (why to use shallow geothermal, disclaimer etc., case studies, international projects)
 */
class ContentPage extends Component {

    /**
     * Opt out of google anlytics
     */
    optOut() {
    var disableStr = 'ga-disable-' + 'UA-108798631-1';
    document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
    window[disableStr]
    }

    render() {

        const iconset = {
            twentyfour,
            heatingcooling,
            emissions,
            savespace,
            normalpower,
            smartgrids,
            highinvest,
            lowcost,
            searchinfos,
            permission_timeconsuming,
            decisionmaker,
            web_tool,
            permission_easier
        }

        // Localize the content
        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]



            })
        }
        let sitecontent = [];
        // Check if special navigation with icons is needed
        let page = this.props.pages.filter(page => page.url === this.props.url);
        if(page.length > 0) {
            page = page[0];
            this.props.sitecontent.map(content => {
                    let icons = [];
                if(content.page_id === page.id) {
                    
                    const findIcons = content.text.split("##");
                    for(let i = 1; i < findIcons.indexOf("--"); i++) {
                        icons.push(findIcons[i]);
                    }
                    if(this.props.match.params.url === 'whytouse') {
                        content.text = findIcons[0]+findIcons[findIcons.indexOf("--")+1];
                    }
                    if(!content.icons) {
                        content.icons = icons;
                    }
                    
                    sitecontent.push(content)
                }
            })
        }
        
        // In case it is the international links page
        let orderedLinks = {};
        if(this.props.links.length > 0) {
            this.props.links.map(link => {
                if(!orderedLinks[link.type]) {
                    orderedLinks[link.type] = { name: link.type, links: []}
                }
                link.identifier = link.title_of_project_initiative ? link.title_of_project_initiative : link.acronym;
                orderedLinks[link.type].links.push(link);
                orderedLinks[link.type].links.sort(function(a, b) {
                    if(a.identifier < b.identifier) { return -1; }
                    if(a.identifier > b.identifier) { return 1; }
                    return 0;
                })
                return link;
            })
        }

        // In case it is the case studies page
        let orderedExamples = {};
        if(this.props.examples.length > 0) {
            this.props.examples.map(example => {
                if(!orderedExamples[example.pilotarea_id]) {
                    orderedExamples[example.pilotarea_id] = { name: getTranslation(this.props.pilotareas.filter(area => area.id == example.pilotarea_id)[0].name), examples: []}
                }
                Object.keys(example).map(key => {
                    if(example[key] === '') {
                        delete example[key];
                    }
                    delete example.id
                    delete example.created_at
                    delete example.updated_at
                })
                orderedExamples[example.pilotarea_id].examples.push(example);

                return example;
            })
        }
        
        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.match.params.url === 'whytouse' &&
                        <div className="whytouse-navi">
                            {sitecontent.map(content =>
                                <a key={content.id} className="whytouse-navibox" href={"#"+content.title}>                            
                                    <h3>{(this.props.language.locale === "en" ? content.title : (content.title_local !== '') ? content.title_local : content.title)}</h3>
                                    <div className="navibox-icons">
                                    {content.icons.map(icon =>
                                        <img key={icon} src={iconset[icon]} />    
                                    )}
                                    </div>
                                </a>
                            )}
                        </div>
                    }

                    {sitecontent.map(content =>
                        <div key={content.id} className="default-element">
                            <div className="default-element-content text-container">
                            <a name={content.title}></a>
                            <h2 className={this.props.match.params.url === 'whytouse' ? 'whytouse' : 'not-whytouse'}>
                                <span>{(this.props.language.locale === "en" ? content.title : (content.title_local !== '') ? content.title_local : content.title)}</span>
                                <div>
                                {content.icons.map(icon =>
                                    <img src={iconset[icon]} />    
                                )}
                                </div>
                            </h2>

                                <span dangerouslySetInnerHTML={{__html: (this.props.language.locale === "en" ? content.text : (content.text_local !== '') ? content.text_local :content.text)}}></span>
                                {content.title === 'Google Analytics' &&
                                <button className="btn btn-green" onClick={() => this.optOut()}>{getTranslation("tracking.button")}</button>
                                }
                            </div>
                        </div>
                    )}

                    {this.props.match.params.url === 'links' &&
                        <Accordion allowZeroExpanded={true} allowMultipleExpanded={true}>
                            {Object.keys(orderedLinks).map((key) =>
                                <AccordionItem key={key}>
                                    <AccordionItemHeading>
                                        <AccordionItemButton>
                                            {orderedLinks[key].name}
                                        
                                        </AccordionItemButton>
                                    </AccordionItemHeading>
                                    <AccordionItemPanel>
                                        {orderedLinks[key].links.map(link =>
                                            <div className="accordion-item">
                                                <h2>{link.title_of_project_initiative ? link.title_of_project_initiative : link.acronym}</h2>
                                                <ul>
                                                    {link.acronym && <li>{getTranslation("links.acronym")} <strong>{link.acronym}</strong></li>}
                                                    {link.financing_program_source && <li>{getTranslation("links.financing")} <strong>{link.financing_program_source}</strong></li>}
                                                    {link.summary && <li><p>{link.summary}</p></li>}
                                                    {link.website && <li>{getTranslation("links.link")} <a href={link.website}><strong>{link.website}</strong></a></li>}
                                                </ul>
                                            </div>
                                        )}
                                    </AccordionItemPanel>
                                </AccordionItem>  
                            )}
                        </Accordion>
                    }

                    {this.props.match.params.url === 'practice-examples' &&
                        <Accordion allowZeroExpanded={true} allowMultipleExpanded={true}>
                            {Object.keys(orderedExamples).map((key) =>
                                <AccordionItem key={key}>
                                    <AccordionItemHeading>
                                        <AccordionItemButton>
                                            {orderedExamples[key].name}
                                        </AccordionItemButton>
                                    </AccordionItemHeading>
                                    <AccordionItemPanel>
                                        {orderedExamples[key].examples.map(example =>
                                            <div className="accordion-item">
                                                <h2>{example.title}</h2>
                                                <table className="example-data" cellSpacing="0">
                                                    <tbody>
                                                        {Object.keys(example).map(ex =>
                                                            <React.Fragment>
                                                            {ex !== 'pilotarea_id' &&
                                                            <tr>
                                                                <td>{getTranslation("example."+ex)}</td>
                                                                <td dangerouslySetInnerHTML={{__html : example[ex]}}></td>
                                                            </tr>
                                                            } 
                                                            </React.Fragment>
                                                        )}
                                                    </tbody>
                                                </table>
                                            </div>
                                        )}
                                    </AccordionItemPanel>
                                </AccordionItem>  
                            )}
                        </Accordion>
                    }



                    </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 ContentPage;