HOO LOGIC

About

React, GraphQL, Sanity, TypeScript.

  • 137 Nishiwakamiya Kitahanchō
    Kamigyō-ku Kyōto 602–0097
    JAPAN
  • +81 70 4471 4022
  • info@hoologic.io
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>
  )

About

React, GraphQL, Sanity, TypeScript.

Apria

Enterprise healthcare.

Vue.js, Laravel.

Real Kana

Five million page views per month.

React, Gatsby.

Incremental

Flowers. Bass synth. Gravity.

What did we create?

iOS, Swift.

Zig

Mobile game prototype.

jQuery.

Sophos

Network security mobile administration.

Vue.js, Vuex, Axios.

Real Kanji

Japanese study site.

React, Gatsby, GraphQL.

Real Kana App

iOS, Objective C.

京都 JAPAN