React Column Aware Layout

team.js

import React, {useState, useRef, useMemo, useCallback, useEffect} from 'react';
import {hot} from 'react-hot-loader/root';
import {ITEMS} from "../globals/config";
import Item from "../components/team/Item";
import Slide_And_Scroll from "../components/transitions/Slide_And_Scroll";
import Current from "../components/team/Current";
import chunk from 'lodash/chunk';
import debounce from 'lodash/debounce';

const getCurrentFromHash = () => {
	if ( window.location.hash ) {
		return ITEMS.filter( item => '#' + item.slug === window.location.hash ).shift();
	}
	return null;
};

const getItemChunks = ( $columnCount ) => {
	return chunk( ITEMS, $columnCount );
};

const getColumnCount = () => {
	if ( document.body.clientWidth < 640 ) {
		return 2;
	}
	if ( document.body.clientWidth < 768 ) {
		return 3;
	}

	return 4;
};


export default hot( () => {
	const [current, setCurrent] = useState( {
		post: getCurrentFromHash(),
		closed: false
	} );
	const [columns, setColumns] = useState( getColumnCount() );
	const rows = useMemo( () => getItemChunks( columns ), [columns] );

	const clickedRef = useRef( null );

	// Recount the columns on resize.
	useEffect( () => {
		const cb = debounce( () => setColumns( getColumnCount() ), 500 );
		window.addEventListener( 'resize', cb );
		return () => {
			window.removeEventListener( 'resize', cb );
		}
	}, [] );

	const close = useCallback( () => {
		const offset = $( clickedRef.current ).offset();
		$( 'html, body' ).animate( {
			scrollTop: offset.top,
			scrollLeft: offset.left
		} );

		setCurrent( {...current, ...{closed: true}} );

	}, [current] );

	const open = useCallback( ( post ) => {
		setCurrent( {
			post: post,
			closed: false
		} );

	}, [] );


	return (
		<div className="team-wrap">
			{rows.map( ( posts, i ) => {
				let currentInThisRow = false;
				return (
					<div className="row" key={'team-row-' + i}>
						{posts.map( post => {
							if ( post === current.post ) {
								currentInThisRow = true;
								return <Item key={post.id} ref={clickedRef} open={open} post={post} close={close}
								             active={!current.closed} columnCount={columns}/>
							} else {
								return <Item key={post.id} open={open} post={post} inactive={current.post !== null}
								             columnCount={columns}/>
							}
						} )}
						{currentInThisRow &&
						<Slide_And_Scroll clickedElement={clickedRef.current} closed={current.closed}>
							<Current post={current.post} close={close}/>
						</Slide_And_Scroll>}
					</div>
				)
			} )}
		</div>
	);
} );