<commit_before>/* @flow */
'use strict';

import Relay from 'react-relay';
import React from 'react';
import { ScrollView, StyleSheet, View, Dimensions } from 'react-native';

import colors from '../../../../data/colors';
import SerifText from '../../text/serif';
import ImageView from '../../opaque_image_view';
import RelatedArtist from './related_artist'

const window = Dimensions.get('window')

class RelatedArtists extends React.Component {
    constructor(props) {
    super(props);
    this.state = { columns: this.columnCount()};
    this.onLayout = this.onLayout.bind(this);
  }
  
  columnCount() {
    const isPhone = window.width < 700;
    const isPadHorizontal = window.width > 1000;
    return !isPhone ? (isPadHorizontal ? 4 : 3) : 2;
  }
  
  onLayout(e) {
    this.setState({
    columns: this.columnCount()
  });
    // TODO ensure that on the initial render, and when it calls this callback, setting the state again should not
    // actually cause another render, as the number of columns should remain the same.
  }

  render() {
    const artists = this.props.artists;
    return (
      <View style={styles.container}>
        <SerifText style={styles.heading}>Related Artists</SerifText>
        <View style={styles.artistContainer}>
          { this.renderArtists() }
        </View>
      </View>
    );
  }

  renderArtists() {
    const artists = this.props.artists;
    var artistViews = artists.map(artist => <RelatedArtist key={artist.id} artist={artist} />);
    const extraRequiredViews = artists.length % this.state.columns;
    for (var i = 0; i < extraRequiredViews; i++) { 
      artistViews.push(<RelatedArtist key={'dummy'+i.toString()} artist={null}/>);
    }
    return artistViews;
  }
}
  
const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
  },
  artistContainer: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
    marginLeft: -10,
    marginRight: -10,
  },
  heading: {
    fontSize: 20,<commit_msg>[RelatedArtists] Fix logic for calculating dummy views to add<commit_after>/* @flow */
'use strict';

import Relay from 'react-relay';
import React from 'react';
import { ScrollView, StyleSheet, View, Dimensions } from 'react-native';

import colors from '../../../../data/colors';
import SerifText from '../../text/serif';
import ImageView from '../../opaque_image_view';
import RelatedArtist from './related_artist'

const window = Dimensions.get('window')

class RelatedArtists extends React.Component {
    constructor(props) {
    super(props);
    this.state = { columns: this.columnCount()};
    this.onLayout = this.onLayout.bind(this);
  }
  
  columnCount() {
    const isPhone = window.width < 700;
    const isPadHorizontal = window.width > 1000;
    return !isPhone ? (isPadHorizontal ? 4 : 3) : 2;
  }
  
  onLayout(e) {
    this.setState({
    columns: this.columnCount()
  });
    // TODO ensure that on the initial render, and when it calls this callback, setting the state again should not
    // actually cause another render, as the number of columns should remain the same.
  }

  render() {
    const artists = this.props.artists;
    return (
      <View style={styles.container}>
        <SerifText style={styles.heading}>Related Artists</SerifText>
        <View style={styles.artistContainer}>
          { this.renderArtists() }
        </View>
      </View>
    );
  }

  renderArtists() {
    const artists = this.props.artists;
    var artistViews = artists.map(artist => <RelatedArtist key={artist.id} artist={artist} />);
    const extraRequiredViews = this.state.columns - (artists.length % this.state.columns);
    for (var i = 0; i < extraRequiredViews; i++) {
      debugger; 
      artistViews.push(<RelatedArtist key={'dummy'+i.toString()} artist={null}/>);
    }
    return artistViews;
  }
}
  
const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
  },
  artistContainer: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
    marginLeft: -10,
    marginRight: -10,
  },
  heading: {
    fontSize: 20,
{'fraction_non_alphanumeric': 0.13917649891644596, 'fraction_numerical': 0.009150012039489525, 'mean_word_length': 3.1088031651829873, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '362331', 'n_tokens_mistral': 1300, 'n_tokens_neox': 1260, 'n_words': 335}