import { Link } from 'gatsby'
import { nIntervals } from '../shared/utility'
import Context from '../context'
import Masonry from 'react-masonry-component'
import Post from './post'
import React, { memo, useContext, useEffect, useRef, useState } from 'react'
import WindowSizeListener from 'react-window-size-listener'
export default memo(function Posts ({ edges: initialEdges, pathname }) {
const { setState, ...state } = useContext(Context)
const [mounted, setMounted] = useState('')
useEffect(() => { setMounted(' posts--mounted') }, [])
const edges = useRef([...initialEdges].sort((a, b) => a.node.frontmatter.sequence - b.node.frontmatter.sequence))
const masonry = useRef(null)
const index = edges.current.findIndex(({ node: { fields: { path } } }) => path === pathname)
let posts
const onClick (event) {
setState({ ...state, postPosition: event.currentTarget.getBoundingClientRect() })
}
if ((index !== -1) && (index !== (initialEdges.length - 1))) {
edges.current.push(edges.current.splice(index, 1)[0])
}
posts = ((pathname === '/') || (pathname === '/bryn/')) ? edges.current : edges.current.slice(0, -1)
return (
<WindowSizeListener onResize={() => nIntervals(() => { masonry.current.masonry.layout() }, 100, 5)}>
<Masonry className={\`posts\${mounted}\`} ref={masonry}>
{
posts.map(({ node: { fields: { path }, frontmatter: post } }) => (
<Link className="posts__link" key={post.id} onClick={onClick} to={path}>
<Post classes="post" path={path} pathname={pathname} post={post}/>
</Link>
))
}
</Masonry>
</WindowSizeListener>
)