import React from 'react';
import { Route, Link } from 'react-router-dom'
import { Switch } from 'react-router'
import universal from 'react-universal-component'
import '../nav.css'

const UniversalComponent = universal((props) => import(`./${props.page}`))

export default (props) => (
    <div>
        <div className="nav">
            <Link to="/about">About</Link>
            <Link to="/">Gallery</Link>
            <Link to="/article/bio">Article - bio</Link>
        </div>
        <Switch>
            <Route exact path="/">
                <UniversalComponent page="Gallery" />
            </Route>
            <Route path="/article/:slug"
                render={({ staticContext, match }) => {
                    const site = staticContext ? staticContext.site : location.hostname.split('.')[0]
                    return <UniversalComponent page="Article" data={props.data} site={site} match={match} />
                }}
            />
            <Route path="/about"
                render={({ staticContext }) => {
                    const site = staticContext ? staticContext.site : location.hostname.split('.')[0]
                    return <UniversalComponent page="About" data={props.data} site={site} />
                }}
            />
            <Route>
                <UniversalComponent page="NotFound" />
            </Route>
        </Switch>
    </div>
)

import React from 'react'
import { connect } from 'react-redux'
import NotFound from './NotFound'
import '../css/Article.css'
import { fetchArticle } from '../actions';

class Article extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {
        this.props.fetchArticle(this.props.site, this.props.match.params.slug)
    }

    render() {
        const siteConfig = require(`../../data/${this.props.site}/siteConfig`)
        const imagePath = require(`../images/${siteConfig.aboutImage}`)
        require(`../css/${this.props.site}/theme.css`)

        try {
            const markdownData = require(`../../data/${this.props.site}/${this.props.match.params.slug}.md`)

            return (
                <div className="article">
                        <h1>{this.props.title}</h1>
                        <img src={imagePath} alt="" />
                        <div className="content">{ markdownData.title }</div>
                        <div className="content">{ markdownData.author }</div>
                        <div className="content" dangerouslySetInnerHTML={{ __html: this.props.__content }} />
                </div>
            )
        } catch (err) {
            return <NotFound />
        }
    }
}

const mapStateToProps = (state) => ({
    title: state.text,
    __content: state.content
})

export default connect(mapStateToProps, { fetchArticle })(Article)