import justify from 'justified-layout'
import PhotoGridItem from 'client/components/PhotoGridItem'
import { withStyles } from '@material-ui/core/styles'
import debounce from 'lodash/debounce'

const gutter = 8 * 4

const styles = theme => ({
  container: {
    position: 'relative',
    marginLeft: gutter,
    marginRight: gutter,
  },
})

const buildGrid = (photos, width = global.innerWidth - gutter * 2) => {
  const dimensions = photos.map(p => {
    const { original } = p.versions
    return { height: original.height, width: original.width }
  })
  const result = justify(dimensions, { containerWidth: width })
  return result.boxes.map((box, i) => ({ ...box, photo: photos[i] }))
}

class PhotoGrid extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isClient: false,
    }
  }

  componentDidMount() {
    this.setState({ ...this.state, isClient: true })
    window.addEventListener('resize', this.handleResize, false)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize, false)
  }

  handleResize = debounce(() => this.forceUpdate(), 20, false)

  render() {
    const { photos, albumSlug, classes } = this.props

    return (
      <div className={classes.container}>
        {this.state.isClient ?
          buildGrid(photos).map(item => (
            <PhotoGridItem item={item} albumSlug={albumSlug} key={item.photo.id} />
          ))
        :
          <div style={{display: 'none'}}>
            {buildGrid(photos, 1060).map(item => (
              <PhotoGridItem item={item} albumSlug={albumSlug} key={item.photo.id} />
            ))}
          </div>
        }
      </div>
    )
  }
}
export default withStyles(styles)(PhotoGrid)

@@ -1,12 +1,56 @@
+import %7B useState, useEffect %7D from 'react'%0A
 import justi
@@ -388,67 +388,166 @@
 nst 
-buildGrid = (photos, width = global.innerWidth - gutter * 2
+gridWidth = windowWidth =%3E %7B%0A  if (windowWidth %3C 425) %7B%0A    return windowWidth%0A  %7D%0A  return windowWidth - gutter * 2%0A%7D%0A%0Aconst buildGrid = (photos, windowWidth
 ) =%3E
@@ -746,21 +746,38 @@
 rWidth: 
-w
+gridWidth(windowW
 idth
+)
  %7D)%0A  re
@@ -846,20 +846,20 @@
 %7D))%0A%7D%0A%0Ac
-lass
+onst
  PhotoGr
@@ -865,202 +865,144 @@
 rid 
-extends React.Component %7B%0A  constructor(props) %7B%0A    super(props)%0A    this.state = %7B%0A      isClient: 
+= (%7B photos, albumSlug, classes %7D) =%3E %7B%0A  const %5BisClient, updateIsClient%5D = useState(
 false
-,%0A    %7D%0A  %7D%0A%0A  componentDidMount() %7B%0A    this.setState(%7B ...this.state, i
+)%0A  useEffect(() =%3E %7B%0A    updateI
 sClient
-: 
+(
 true
- %7D
 )%0A  
@@ -1029,37 +1029,32 @@
 tener('resize', 
-this.
 handleResize, fa
@@ -1064,38 +1064,27 @@
 )%0A  
-%7D%0A%0A  componentWillUnmount() %7B%0A
+  return () =%3E %7B%0A  
     
@@ -1120,21 +1120,16 @@
 esize', 
-this.
 handleRe
@@ -1147,145 +1147,235 @@
 )%0A  
-%7D%0A%0A  handleResize = debounce(() =%3E this.forceUpdate(), 20, false)%0A%0A  render() %7B%0A    const %7B photos, albumSlug, classes %7D = this.props%0A%0A  
+  %7D%0A  %7D, %5B%5D)%0A%0A  const %5BwindowWidth, updateWindowWidth%5D = useState()%0A  useEffect(() =%3E %7B%0A    updateWindowWidth(window.innerWidth)%0A  %7D, %5B%5D)%0A%0A  const handleResize = debounce(() =%3E updateWindowWidth(window.innerWidth), 20, false)%0A%0A
   re
@@ -1381,18 +1381,16 @@
 eturn (%0A
-  
     %3Cdiv
@@ -1431,22 +1431,9 @@
     
-  %7Bthis.state.
+%7B
 isCl
@@ -1439,18 +1439,16 @@
 lient ?%0A
-  
         
@@ -1463,16 +1463,29 @@
 d(photos
+, windowWidth
 ).map(it
@@ -1484,34 +1484,32 @@
 ).map(item =%3E (%0A
-  
           %3CPhoto
@@ -1566,34 +1566,32 @@
 em.photo.id%7D /%3E%0A
-  
         ))%0A     
@@ -1595,14 +1595,10 @@
     
-  :%0A  
+:%0A
     
@@ -1633,18 +1633,16 @@
 one'%7D%7D%3E%0A
-  
         
@@ -1686,34 +1686,32 @@
 %3E (%0A            
-  
 %3CPhotoGridItem i
@@ -1776,18 +1776,16 @@
         
-  
 ))%7D%0A    
@@ -1784,26 +1784,24 @@
 ))%7D%0A        
-  
 %3C/div%3E%0A     
@@ -1801,22 +1801,18 @@
 %3E%0A      
-  %7D%0A  
+%7D%0A
     %3C/di
@@ -1820,17 +1820,12 @@
 %3E%0A  
-  )%0A  
+)%0A
 %7D%0A
-%7D
 %0Aexp

Convert PhotoGrid to react hooks