Last active
July 17, 2020 13:02
-
-
Save paulosuzart/9d04d1cef735aa0231f0edaa1cc3b143 to your computer and use it in GitHub Desktop.
post.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useEffect } from "react"; | |
import { connect, styled } from "frontity"; | |
import Link from "./link"; | |
import List from "./list"; | |
import Item from "./list/list-item"; | |
import FeaturedMedia from "./featured-media"; | |
const Post = ({ state, actions, libraries }) => { | |
// Get information about the current URL. | |
const data = state.source.get(state.router.link); | |
const { api } = libraries.source; | |
// Get the data of the post. | |
const post = state.source[data.type][data.id]; | |
// console.log(post, '---links'); | |
// console.log(state.source, '--endsource'); | |
// console.log(state.source.category, '++++endcat'); | |
// console.log('posgt' , post, '----endpost'); | |
const mainCat = state.source.category['2']; | |
// const bros = await actions.source.fetch(`/category/${mainCat.name}`, {per_page: 1}) | |
// console.log(bros) | |
// console.log('main can', mainCat) | |
// Get the data of the author. | |
const author = state.source.author[post.author]; | |
// Get a human readable date. | |
const date = new Date(post.date); | |
// Get the html2react component. | |
const Html2React = libraries.html2react.Component; | |
/** | |
* Once the post has loaded in the DOM, prefetch both the | |
* home posts and the list component so if the user visits | |
* the home page, everything is ready and it loads instantly. | |
*/ | |
useEffect(() => { | |
actions.source.fetch('/category/travel-guide/'); | |
// actions.source.fetch("/"); | |
// List.preload(); | |
const all = async () => { | |
const postsCategories = await api.get({ | |
endpoint: "posts", | |
params: { _embed: true, categories: "2" }, | |
}); | |
console.log(postsCategories, 'cats'); | |
const added = await libraries.source.populate({ response : postsCategories, state: state, force: true }); | |
console.log('added', added); | |
console.log('new state', state) | |
}; | |
all(); | |
}, []); | |
const related = state.source.get('/category/travel-guide/'); | |
// const fu = state.source.get('/sample-fin/'); | |
// console.log(fu); | |
return data.isReady && related.isReady ? ( | |
<Container> | |
{ | |
related.items.map(i => <a key={i.id} href={i.link}>{i.link}</a>) | |
} | |
<div>Main Category: <span>{mainCat.name}</span></div> | |
<div> | |
<Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} /> | |
{/* Only display author and date on posts */} | |
{data.isPost && ( | |
<div> | |
{author && ( | |
<StyledLink link={author.link}> | |
<Author> | |
By <b>{author.name}</b> | |
</Author> | |
</StyledLink> | |
)} | |
<DateWrapper> | |
{" "} | |
on <b>{date.toDateString()}</b> | |
</DateWrapper> | |
</div> | |
)} | |
</div> | |
{/* Look at the settings to see if we should include the featured image */} | |
{state.theme.featured.showOnPost && ( | |
<FeaturedMedia id={post.featured_media} /> | |
)} | |
{/* Render the content using the Html2React component so the HTML is processed | |
by the processors we included in the libraries.html2react.processors array. */} | |
<Content> | |
<Html2React html={post.content.rendered} /> | |
</Content> | |
</Container> | |
) : null; | |
}; | |
export default connect(Post); | |
const Container = styled.div` | |
width: 800px; | |
margin: 0; | |
padding: 24px; | |
`; | |
const Title = styled.h1` | |
margin: 0; | |
margin-top: 24px; | |
margin-bottom: 8px; | |
color: rgba(12, 17, 43); | |
`; | |
const StyledLink = styled(Link)` | |
padding: 15px 0; | |
`; | |
const Author = styled.p` | |
color: rgba(12, 17, 43, 0.9); | |
font-size: 0.9em; | |
display: inline; | |
`; | |
const DateWrapper = styled.p` | |
color: rgba(12, 17, 43, 0.9); | |
font-size: 0.9em; | |
display: inline; | |
`; | |
/** | |
* This component is the parent of the `content.rendered` HTML. We can use nested | |
* selectors to style that HTML. | |
*/ | |
const Content = styled.div` | |
color: rgba(12, 17, 43, 0.8); | |
word-break: break-word; | |
* { | |
max-width: 100%; | |
} | |
p { | |
line-height: 1.6em; | |
} | |
img { | |
width: 100%; | |
object-fit: cover; | |
object-position: center; | |
} | |
figure { | |
margin: 24px auto; | |
/* next line overrides an inline style of the figure element. */ | |
width: 100% !important; | |
figcaption { | |
font-size: 0.7em; | |
} | |
} | |
iframe { | |
display: block; | |
margin: auto; | |
} | |
blockquote { | |
margin: 16px 0; | |
background-color: rgba(0, 0, 0, 0.1); | |
border-left: 4px solid rgba(12, 17, 43); | |
padding: 4px 16px; | |
} | |
a { | |
color: rgb(31, 56, 197); | |
text-decoration: underline; | |
} | |
/* Input fields styles */ | |
input[type="text"], | |
input[type="email"], | |
input[type="url"], | |
input[type="tel"], | |
input[type="number"], | |
input[type="date"], | |
textarea, | |
select { | |
display: block; | |
padding: 6px 12px; | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 1.5; | |
color: #495057; | |
background-color: #fff; | |
background-clip: padding-box; | |
border: 1px solid #ced4da; | |
border-radius: 4px; | |
outline-color: transparent; | |
transition: outline-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; | |
margin: 8px 0 4px 0; | |
&:focus { | |
outline-color: #1f38c5; | |
} | |
} | |
input[type="submit"] { | |
display: inline-block; | |
margin-bottom: 0; | |
font-weight: 400; | |
text-align: center; | |
white-space: nowrap; | |
vertical-align: middle; | |
-ms-touch-action: manipulation; | |
touch-action: manipulation; | |
cursor: pointer; | |
background-image: none; | |
border: 1px solid #1f38c5; | |
padding: 12px 36px; | |
font-size: 14px; | |
line-height: 1.42857143; | |
border-radius: 4px; | |
color: #fff; | |
background-color: #1f38c5; | |
} | |
/* WordPress Core Align Classes */ | |
@media (min-width: 420px) { | |
img.aligncenter, | |
img.alignleft, | |
img.alignright { | |
width: auto; | |
} | |
.aligncenter { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.alignright { | |
float: right; | |
margin-left: 24px; | |
} | |
.alignleft { | |
float: left; | |
margin-right: 24px; | |
} | |
} | |
`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment