render() {
const { performance } = this.props
const { predecessorHostCountry, predecessorHostName } = performance
const predecessorInfo = predecessorHostCountry && predecessorHostName
? `${emojiFlag(predecessorHostCountry)} ${predecessorHostName}`
: null
return (
<View style={styles.row}>
<View style={styles.container}>
<View style={styles.appearances}>
{performance.appearances.map(this.renderAppearance.bind(this))}
</View>
<Text style={styles.generalInfo}>
{predecessorInfo
? `${predecessorInfo}, AG ${performance.ageGroup}`
: `AG ${performance.ageGroup}`
}
</Text>
</View>
</View>
)
}
render() {
const { contest, onSelect } = this.props
const TouchableElement = (Platform.OS === 'android')
? TouchableNativeFeedback
: TouchableHighlight
return (
<View>
<TouchableElement onPress={onSelect}>
<View style={styles.container}>
<Text style={styles.name} numberOfLines={1}>
{`${emojiFlag(contest.hostCountry)} ${contest.name}`}
</Text>
<Text style={styles.dateRange} numberOfLines={1}>
{this.formattedDateRange(
contest.startDate,
contest.endDate,
contest.timeZone
)}
</Text>
</View>
</TouchableElement>
</View>
)
}
render() {
const { params } = this.props.navigation.state
const { performance, timeZone, venue } = params
const mainAppearances = performance.appearances
.filter(a => a.participantRole !== 'accompanist')
const accompanists = performance.appearances
.filter(a => a.participantRole === 'accompanist')
const { predecessorHostCountry, predecessorHostName } = performance
const predecessorInfo = predecessorHostCountry && predecessorHostName
? emojiFlag(predecessorHostCountry) + ' ' + predecessorHostName
: null
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollContainer}
alwaysBounceVertical={false}
>
<View style={styles.generalInfo}>
<Text style={styles.categoryName}>
{performance.categoryName}
</Text>
<Text style={styles.ageGroup}>
Altersgruppe {performance.ageGroup}
</Text>
<View style={styles.stageTimeInfo}>
<Image style={styles.icon} source={calendarIcon} />
<Text style={styles.stageTime}>
{moment(performance.stageTime).tz(timeZone).format('LLLL')}
</Text>
</View>
<View style={styles.venueInfo}>
<Image style={styles.icon} source={locationIcon} />
<Text style={styles.venueName}>{venue.name}</Text>
</View>
</View>
<Separator style={styles.separator} />
<View>
{mainAppearances.map((appearance, i) =>
<Text key={'mainAppearance' + (i + 1)} style={styles.mainAppearanceText}>
{appearance.participantName}, {appearance.instrumentName}
</Text>
)}
{accompanists.map((appearance, i) => {
const ageGroupText = appearance.ageGroup !== performance.ageGroup
? ' (AG ' + appearance.ageGroup + ')'
: ''
return <Text key={'accompanist' + (i + 1)} style={styles.accompanistText}>
{appearance.participantName}, {appearance.instrumentName}{ageGroupText}
</Text>
}
)}
{predecessorInfo &&
<Text style={styles.predecessorInfo}>{predecessorInfo}</Text>
}
</View>
<Separator style={styles.separator} />
<View style={styles.piecesInfo}>
{performance.pieces.map((piece, i) => {
const composerDates = piece.composerBorn
? ' (' + piece.composerBorn + '–' + piece.composerDied + ')'
: ''
return <View key={'piece' + (i + 1)} style={styles.piece}>
<Text style={styles.composer}>
{piece.composerName}{composerDates}
</Text>
<Text style={styles.pieceTitle}>
{piece.title}
</Text>
</View>
})}
</View>
</ScrollView>
</View>
)
}