post.js

post.js

import React from "react";
import { connect, styled } from "frontity";

console.log("Hello there");

const Post = ({ state }) => {

    const data = state.source.get(state.router.link); // state.source.get('url-string')
    const post = state.source[data.type][data.id]; // state.source[url-string -> type][url-string -> id] date.type is Post; data.id is Post ID
    const author = state.source.author[post.author]; // state.source.author[post -> author]
    const categories = state.source.category[post.categories];
    const test = "Hi there";
    console.log("test"); // does not print to console
    console.log(categories); // does not print to console

    return(
        <div>
            <h2>{post.title.rendered}!!!</h2>
            <h2>Here: { console.log("Hii") // does not print to console }</h2>
            <ConsoleLog>{ test }</ConsoleLog>
            <ConsoleLog>{ categories }</ConsoleLog>
            <MainContent>
                <PostInfo>
                    <p><strong>Posted on : </strong>{post.date}</p>
                    <p><strong>Author: {author.name}</strong></p>
                </PostInfo>
                <div dangerouslySetInnerHTML={{__html: post.content.rendered}} />
            </MainContent>

            <Sidebar>
                {/*{state.source.post}*/}
            </Sidebar>
        </div>


    )
}

export default connect(Post);

const ConsoleLog = ({ children }) => {
    // don't work either :'(
    console.log(children);
    return false;
};

const PostInfo = styled.div`
    background-image: linear-gradient(t0 right, #f4f4f4, #fff);
    margin-bottom: 1em;
    padding: 0.5em;
    border-left: 4px solid lightseagreen;
    font-size: 0.8em;
    
    & > a {
        margin: 0;
    }
`

const MainContent = styled.div`
    width: 75%;
    float: left;
`

const Sidebar = styled.div`
    width: 25%;
    padding: 0 2em;
    float: right;
    border-left: 4px solid lightgrey;
`