<commit_before>import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { searchImagesAction } from '../actions/mediaActions'
import ErrorMsg from '../components/ErrorMsg'
import Spinner from '../components/StyledComponents/Spinner'
import '../styles/style.css'
import justifiedLayout from 'justified-layout'

export class PhotosPageNew extends Component {

  componentDidMount() {
    this.props.dispatch(searchImagesAction())
  }

  render() {
    const config = {
      "containerWidth": window.innerWidth,
      containerPadding: {
        top: 0,
        right: 14,
        bottom: 0,
        left: 14
      }
    }

    const sizes = []

    const geometry = justifiedLayout(sizes, config)
    /*var boxes = geometry.boxes.map(function (box) {
      return  `<div class="box"
                style="width: ${box.width}px;
                      height: ${box.height}px;
                      top: ${box.top}px;
                      left: ${box.left}px"></div>`;
    }).join('\n')*/
    const {
      images,
      imagesError
    } = this.props


    console.log(images)

    return (
      <div>
        {!imagesError ?
          images ?
            <div>
              <div>
                {images.map((image, i) => (
                  <div key={i}>
                    <img src={image.mediaUrl} alt={image.title}/>
                  </div>
                ))}
              </div>
            </div> : <Spinner/>
          : <ErrorMsg>{imagesError}</ErrorMsg>
        }
      </div>
    )
  }
}

PhotosPageNew.propTypes = {
  images: PropTypes.array,
  dispatch: PropTypes.func.isRequired,
  imagesError: PropTypes.string
}

const mapStateToProps = ({images, error}) => ({
  images: images[0],
  imagesError: images.error
})

export default connect(mapStateToProps)(PhotosPageNew)<commit_msg>Implementing Flickr images layout algorithm.<commit_after>import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { searchImagesAction } from '../actions/mediaActions'
import ErrorMsg from '../components/ErrorMsg'
import Spinner from '../components/StyledComponents/Spinner'
import '../styles/style.css'
import justifiedLayout from 'justified-layout'

export class PhotosPageNew extends Component {

  componentDidMount() {
    this.props.dispatch(searchImagesAction())
  }

  render() {
    const config = {
      "containerWidth": window.innerWidth,
      containerPadding: {
        top: 0,
        right: 14,
        bottom: 0,
        left: 14
      }
    }

    // TODO: Get the sizes of the real images.
    const sizes = [
      {
        width: 400,
        height: 300
      },
      {
        width: 300,
        height: 300
      },
      {
        width: 250,
        height: 400
      }
    ]
    const geometry = justifiedLayout(sizes, config)
    const {
      images,
      imagesError
    } = this.props

    return (
      <div>
        {!imagesError ?
          images ?
            <div>
              <div>
                {images.map((image, i) => (
                  <div key={i}>
                    <img src={image.mediaUrl}
                         alt={image.title}
                         width={geometry.boxes[i] ? geometry.boxes[i].width : 320}
                         height={geometry.boxes[i] ? geometry.boxes[i].height : 400}/>
                  </div>
                ))}
              </div>
            </div> : <Spinner/>
          : <ErrorMsg>{imagesError}</ErrorMsg>
        }
      </div>
    )
  }
}

PhotosPageNew.propTypes = {
  images: PropTypes.array,
  dispatch: PropTypes.func.isRequired,
  imagesError: PropTypes.string
}

const mapStateToProps = ({images, error}) => ({
  images: images[0],
  imagesError: images.error
})

export default connect(mapStateToProps)(PhotosPageNew)
{'fraction_non_alphanumeric': 0.12716912716912718, 'fraction_numerical': 0.009842009842009843, 'mean_word_length': 1.8885564697083022, 'pattern_counts': {'":': 2, '<': 29, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7225868', 'n_tokens_mistral': 1155, 'n_tokens_neox': 1090, 'n_words': 244}