Untitled
unknown
plain_text
a year ago
16 kB
3
Indexable
showGenreSearch = () => {
return(
<Modal
testID='modal'
animationType={'none'}
transparent={true}
visible={true}
onRequestClose={() => this.setState({ visible: false })}
onDismiss={() => this.setState({ visible: false })}>
<ImageBackground blurRadius={20} source={bggebreblock} style={{
flex: 1,
backgroundColor: 'rgba(24,24,24,0.9)',
justifyContent: 'flex-end',
}}>
<View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.5)", }}>
<TouchableOpacity testID='close' style={{ marginTop: Scale(30) }} onPress={() => this.setState({ showGenreModal: false })}>
<FastImage style={{
width: Scale(40),
height: Scale(40),
marginLeft: Scale(10),
}} source={closeChevron} />
</TouchableOpacity>
<View style={{
width: '90%',
backgroundColor: '#22232E',
borderWidth: Scale(1),
borderColor: '#E6E6FA',
borderRadius: Scale(10),
flexDirection: 'row',
alignSelf: 'center',
alignItems: 'center',
marginTop: Scale(5),
}}>
<FastImage style={{
height: Scale(15),
width: Scale(15), marginLeft: Scale(10)
}} source={searchwhiteicon} />
<TextInput
testID='hasttagClick'
multiline={false}
placeholder="Search for a Genre"
style={{
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(20),
marginLeft: Scale(10),
width: '90%',
color: '#fff',
margin: Platform.OS == 'ios' ? Scale(10) : 0,
}}
placeholderTextColor="white"
selectionColor={'#fff'}
returnKeyType="search"
scrollEnabled={false}
value={this.state.genreNameText}
onChangeText={(text) => {
this.setState({ genreNameText: text });
this.handleGenreChangeTextList(text)
}}
/>
</View>
{!this.state.showsearch
?
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View>
<View style={{ paddingTop: Scale(15), }}>
<Text style={{
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(22),
color: '#fff',
marginTop: Platform.OS == 'ios' ? Scale(0.5) : Scale(0.1),
}}>Following</Text>
</View>
<View style={{ marginBottom: Scale(150) }}>
<TouchableOpacity onPress={() => this.handleFollowingAll()} testID='search_genre'>
<Text style={{ fontFamily: FONTS.AppleSymbols,
fontSize: Scale(16),
color: '#F9705B',
top: 5,}}>All</Text>
</TouchableOpacity>
<FlatList
testID='followingAll'
data={this.state.followingGenreList}
renderItem={({ item, index }) =>
<TouchableOpacity testID='genrelist' onPress={() => this.handlesearchGenre(item?.attributes?.genre?.data)}>
<View style={{ marginBottom: Scale(10) }}>
<Text style={{
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(16),
color: '#F9705B',
textTransform: 'lowercase',
}}>#{item?.attributes?.genre?.data?.attributes?.name}</Text>
</View>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={() => <View style={{ paddingTop: Scale(15), }} />}
/>
</View>
</View>
<View>
<View style={{ paddingTop: Scale(15) }}>
<Text style={{
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(22),
color: '#fff',
marginTop: Platform.OS === 'ios' ? Scale(0.5) : Scale(0.1),
}}>Most Popular</Text>
</View>
<View style={{ marginBottom: Scale(150) }} >
<TouchableOpacity onPress={() => this.handleMostpopularAll()} testID='handleMostpopularAll'>
<Text style={{
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(16),
color: '#F9705B',
top: 5,
}}>All</Text>
</TouchableOpacity>
<FlatList
testID='handlesearchGenre'
data={this.state.popularGenreList.slice(0, 10)}
renderItem={({ item, index }) =>
<TouchableOpacity onPress={() => this.handlesearchGenre(item)}>
<View style={{ marginBottom: Scale(10) }}>
<Text style={
{ color: item.attributes.is_following ? '#F9705B' : '#fff',fontFamily: FONTS.AppleSymbols,
fontSize: Scale(16),
color: '#fff',
textTransform: 'lowercase',
marginTop: Platform.OS === 'ios' ? Scale(0.5) : Scale(1.5), }}>#{item.attributes.name}</Text>
</View>
</TouchableOpacity>
}
showsVerticalScrollIndicator={false}
style={{ marginBottom: Scale(50) }}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={() => <View style={{ paddingTop: Scale(10), }} />}
/>
</View>
</View>
</View>
:
<View>
<View style={{ paddingTop: Scale(15), }}>
</View>
<View style={{ marginLeft: Scale(40), marginBottom: Scale(150) }} >
<FlatList
testID='GenretagList'
data={this.state.GenretagList}
renderItem={({ item, index }) =>
<TouchableOpacity onPress={() => this.handlesearchGenre(item)}>
<View style={{ marginBottom: Scale(10) }}>
<Text style={{
fontFamily: FONTS.AppleSymbols,
fontSize: Scale(20),
color: '#fff',
}}>#{item.attributes.name}</Text>
</View>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={() => <View style={{ paddingTop: Scale(15), }} />}
/>
</View>
</View>
}
</View>
{/* <Text style={{color:'#fff'}} >Hello from Swpanil</Text> */}
</ImageBackground>
{/* <ImageBackground blurRadius={20} source={bggebreblock} style={styles.modalContentContainer}>
<View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.5)", }}>
<TouchableOpacity testID='close' style={{ marginTop: Scale(30) }} onPress={() => this.setState({ visible: false })}>
<FastImage style={styles.arrowWhiteIconStyle} source={closeChevron} />
</TouchableOpacity>
{this.state.passedgenre === '' ?
<View style={{ marginTop: Scale(30), flexDirection: 'row', alignSelf: 'flex-end', marginRight: Scale(20) }}>
<Text style={styles.TopheaderGenreText2}>#{this.state.title}</Text>
</View>
:
<View style={{ marginTop: Scale(30), flexDirection: 'row', alignSelf: 'flex-end', marginRight: Scale(20), }}>
<TouchableOpacity
testID='passedgenre'
onPress={() => this.state.isfollowinggenre ? this._unfollowingGenre(this.state.passedid) : this._followingGenre(this.state.passedid)}
style={[styles.boxColor, { backgroundColor: this.state.isfollowinggenre ? 'white' : 'transparent', borderColor: 'white', bottom: 0 }]}
>
<Text style={[styles.Textcolor, { color: this.state.isfollowinggenre ? 'black' : 'white' }]}>
{this.state.isfollowinggenre ? "Unfollow" : "Follow"}
</Text>
</TouchableOpacity>
<TouchableOpacity testID='follow_unfollow_txt' onPress={() => this.handlehastagclick()}
style={{ alignItems: 'center', justifyContent: 'center' }}>
<Text style={styles.TopheaderGenreText4}>#{this.state.passedgenre}</Text>
</TouchableOpacity>
</View>
}
<View style={styles.inputcontainer}>
<FastImage style={{
height: Scale(15),
width: Scale(15), marginLeft: Scale(10)
}} source={searchwhiteicon} />
<TextInput
testID='hasttagClick'
multiline={false}
placeholder="Search for a Genre"
style={styles.placeholderStyle}
placeholderTextColor="white"
selectionColor={'#fff'}
returnKeyType="search"
scrollEnabled={false}
value={this.state.genreNameText}
onChangeText={(text) => {
this.setState({ genreNameText: text });
this.handleGenreChangeTextList(text)
}}
/>
</View>
{!this.state.showsearch ?
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View>
<View style={{ paddingTop: Scale(15), }}>
<Text style={styles.headerGenreText}>Following</Text>
</View>
<View style={{ marginBottom: Scale(150) }}>
<TouchableOpacity onPress={() => this.handleFollowingAll()} testID='search_genre'>
<Text style={styles.allText}>All</Text>
</TouchableOpacity>
<FlatList
testID='followingAll'
data={this.state.followingGenreList}
renderItem={({ item, index }) =>
<TouchableOpacity testID='genrelist' onPress={() => this.handlesearchGenre(item?.attributes?.genre?.data)}>
<View style={{ marginBottom: Scale(10) }}>
<Text style={styles.followingGenreText}>#{item?.attributes?.genre?.data?.attributes?.name}</Text>
</View>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={() => <View style={{ paddingTop: Scale(15), }} />}
/>
</View>
</View>
<View>
<View style={{ paddingTop: Scale(15) }}>
<Text style={styles.headerGenreText}>Most Popular</Text>
</View>
<View style={{ marginBottom: Scale(150) }} >
<TouchableOpacity onPress={() => this.handleMostpopularAll()} testID='handleMostpopularAll'>
<Text style={styles.allText}>All</Text>
</TouchableOpacity>
<FlatList
testID='handlesearchGenre'
data={this.state.popularGenreList.slice(0, 10)}
renderItem={({ item, index }) =>
<TouchableOpacity onPress={() => this.handlesearchGenre(item)}>
<View style={{ marginBottom: Scale(10) }}>
<Text style={[styles.popularGenreText, { color: item.attributes.is_following ? '#F9705B' : '#fff' }]}>#{item.attributes.name}</Text>
</View>
</TouchableOpacity>
}
showsVerticalScrollIndicator={false}
style={{ marginBottom: Scale(50) }}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={() => <View style={{ paddingTop: Scale(10), }} />}
/>
</View>
</View>
</View>
:
<View>
<View style={{ paddingTop: Scale(15), }}>
</View>
<View style={{ marginLeft: Scale(40), marginBottom: Scale(150) }} >
<FlatList
testID='GenretagList'
data={this.state.GenretagList}
renderItem={({ item, index }) =>
<TouchableOpacity onPress={() => this.handlesearchGenre(item)}>
<View style={{ marginBottom: Scale(10) }}>
<Text style={styles.GenreTextnormal}>#{item.attributes.name}</Text>
</View>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={() => <View style={{ paddingTop: Scale(15), }} />}
/>
</View>
</View>
}
</View>
</ImageBackground> */}
</Modal>
)
}