HOO LOGIC

About

We work on the web.

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

We work on the web.

iks design

Bespoke company + portfolio website.

React, Gatsby, Sanity.

Unity

Web translation service.

React, GraphQL, Material UI, TypeScript.

Apria

Enterprise healthcare.

Vue.js, Laravel.

Real Kana

Five million page views per month.

React, Gatsby, TypeScript.

Incremental

Flowers. Bass synth. Gravity.

What did we create?

iOS, Swift.

Zig

Daily find-the-best-path puzzle.

React, MUI, TypeScript.

Sophos

Network security mobile administration.

Vue.js, Vuex, Axios.

Real Kanji

Japanese study website.

React, Gatsby, GraphQL.

Real Kana App

iOS, Objective C.

東京 JAPAN