Last active
April 5, 2020 08:22
-
-
Save anastely/bb39b9ec5bec75674fa7fee2bf9066b9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Body, | |
Button, | |
Card, | |
Container, | |
Header, | |
Icon, | |
Left, | |
Right, | |
Text, | |
Title, | |
View, | |
} from 'native-base'; | |
import React from 'react'; | |
import { | |
ActivityIndicator, | |
FlatList, | |
TouchableNativeFeedback, | |
} from 'react-native'; | |
import FastImage from 'react-native-fast-image'; | |
import {connect} from 'react-redux'; | |
import API from '../../api/API'; | |
import EmptyList from '../../component/EmptyList'; | |
import TouchableNativeFeed from '../../component/TouchableNativeFeedback'; | |
import {isPauseAction} from '../../redux/actions/isPauseAction'; | |
import {isPlayingAction} from '../../redux/actions/isPlayingAction'; | |
import {saveSongsPlayer} from '../../redux/actions/songsInPlayerAction'; | |
import styles from './styles'; | |
const URL = 'https://www.3-rap.com/public/'; | |
const LastSongs = props => { | |
const [songs, setSongs] = React.useState([]); | |
const [loading, setLoading] = React.useState(false); | |
const [page, setPage] = React.useState(1); | |
const [last_page, setLast_page] = React.useState(1); | |
const _renderItems = ({item, index}) => ( | |
<TouchableNativeFeed | |
key={item.id} | |
onPress={() => { | |
props.saveSongs(songs, index); | |
props.isPlaying(true); | |
props.isPauseTrigger(!props.isPauseTrigger); | |
}} | |
background={TouchableNativeFeedback.Ripple('white')} | |
delayPressIn={0} | |
useForeground> | |
<Card | |
style={{ | |
justifyContent: 'center', | |
alignItems: 'center', | |
backgroundColor: '#121212', | |
flex: 1, | |
}}> | |
<FastImage | |
source={{uri: item.img}} | |
resizeMode={FastImage.resizeMode.cover} | |
style={styles.cardImg} | |
/> | |
<Body style={{...styles.cardItem, width: '100%'}}> | |
<View style={styles.radioCardName}> | |
<Text style={styles.text} numberOfLines={1}> | |
{item.name} | |
</Text> | |
</View> | |
</Body> | |
</Card> | |
</TouchableNativeFeed> | |
); | |
const renderFooter = () => { | |
return loading ? ( | |
<View style={styles.loader}> | |
<ActivityIndicator size="large" /> | |
</View> | |
) : null; | |
}; | |
const handleLoadMore = () => { | |
console.log('page at first', page); | |
if (page <= last_page - 1) { | |
setPage(page + 1); | |
console.log('page at If', page); | |
} | |
}; | |
React.useEffect(() => { | |
let isCancelled = false; | |
setLoading(true); | |
const getData = async () => { | |
let response = await API.get(`/tracks?page=${page}`); | |
let lastPage = response.data.data.items.last_page; | |
setLast_page(lastPage); | |
let { | |
data: { | |
data: { | |
items: {data}, | |
}, | |
}, | |
} = response; | |
let All_Songs = []; | |
data.map(track => | |
All_Songs.push({ | |
id: track.id, | |
name: track.name, | |
url: URL + track.sounds, | |
img: URL + track.avatar, | |
}), | |
); | |
if (!isCancelled) { | |
setSongs(songs.concat(All_Songs)); | |
setLoading(false); | |
} | |
}; | |
setTimeout(() => { | |
getData(); | |
}, 1000); | |
}, [page]); | |
return ( | |
<Container style={styles.container}> | |
<Header | |
style={styles.darkHeader} | |
androidStatusBarColor="#121212" | |
iosBarStyle="light-content"> | |
<Left> | |
<Button transparent onPress={() => props.navigation.goBack()}> | |
<Icon name="ios-arrow-forward" style={styles.colorWhite} /> | |
</Button> | |
</Left> | |
<Body> | |
<Title style={styles.headerText}>اخر الاغاني</Title> | |
</Body> | |
<Right></Right> | |
</Header> | |
<FlatList | |
data={songs} | |
keyExtractor={song => song.id} | |
initialNumToRender={10} | |
contentContainerStyle={{ | |
flexGrow: 1, | |
}} | |
columnWrapperStyle={{ | |
flex: 1, | |
justifyContent: 'space-around', | |
margin: 10, | |
}} | |
numColumns={2} | |
ListEmptyComponent={<EmptyList />} | |
renderItem={_renderItems} | |
onEndReached={handleLoadMore} | |
onEndReachedThreshold={100} | |
ListFooterComponent={renderFooter} | |
removeClippedSubviews={true} | |
maxToRenderPerBatch={1} // Reduce number in each render batch | |
maxToRenderPerBatch={100} // Increase time between renders | |
windowSize={7} | |
/> | |
</Container> | |
); | |
}; | |
const mapDispatchToProps = dispatch => { | |
return { | |
isPlaying: _isPlaying => { | |
dispatch(isPlayingAction(_isPlaying)); | |
}, | |
isPauseTrigger: _isPause => { | |
dispatch(isPauseAction(_isPause)); | |
}, | |
saveSongs: (songs, index) => { | |
dispatch(saveSongsPlayer(songs, index)); | |
}, | |
}; | |
}; | |
export default connect(null, mapDispatchToProps)(LastSongs); | |
// Class Component | |
// class LastSongs extends React.PureComponent { | |
// constructor() { | |
// super(); | |
// this.state = { | |
// songs: [], | |
// loading: false, | |
// page: 1, | |
// }; | |
// this.isCancelled = false; | |
// } | |
// getData = async () => { | |
// this.setState({loading: true}); | |
// let response = await API.get(`/tracks?page=${this.state.page}`); | |
// let { | |
// data: { | |
// data: { | |
// items: {data}, | |
// }, | |
// }, | |
// } = response; | |
// let All_Songs = []; | |
// data.map(track => | |
// All_Songs.push({ | |
// id: track.id, | |
// name: track.name, | |
// url: URL + track.sounds, | |
// img: URL + track.avatar, | |
// }), | |
// ); | |
// this.setState({ | |
// songs: this.state.songs.concat(All_Songs), | |
// loading: false, | |
// }); | |
// }; | |
// _renderItems = ({item, index}) => ( | |
// <TouchableNativeFeed | |
// key={item.id} | |
// onPress={() => { | |
// props.saveSongs(songs, index); | |
// props.isPlaying(true); | |
// props.isPauseTrigger(!props.isPauseTrigger); | |
// }} | |
// background={TouchableNativeFeedback.Ripple('white')} | |
// delayPressIn={0} | |
// useForeground> | |
// <Card | |
// style={{ | |
// justifyContent: 'center', | |
// alignItems: 'center', | |
// backgroundColor: '#121212', | |
// flex: 1, | |
// }}> | |
// <FastImage | |
// source={{uri: item.img}} | |
// resizeMode={FastImage.resizeMode.cover} | |
// style={styles.cardImg} | |
// /> | |
// <Body style={{...styles.cardItem, width: '100%'}}> | |
// <View style={styles.radioCardName}> | |
// <Text style={styles.text} numberOfLines={1}> | |
// {item.name} | |
// </Text> | |
// </View> | |
// </Body> | |
// </Card> | |
// </TouchableNativeFeed> | |
// ); | |
// handleLoadMore = () => { | |
// console.log('first', this.state.page); | |
// this.setState({page: this.state.page + 1}, () => | |
// this.getData().then(() => console.log('page', this.state.page)), | |
// ); | |
// }; | |
// renderFooter = () => { | |
// return this.state.loading ? ( | |
// <View style={styles.loader}> | |
// <ActivityIndicator color="#f09" size="large" /> | |
// </View> | |
// ) : null; | |
// }; | |
// componentDidMount() { | |
// this.getData(); | |
// } | |
// render() { | |
// return ( | |
// <Container style={styles.container}> | |
// <Header | |
// style={styles.darkHeader} | |
// androidStatusBarColor="#121212" | |
// iosBarStyle="light-content"> | |
// <Left> | |
// <Button transparent onPress={() => this.props.navigation.goBack()}> | |
// <Icon name="ios-arrow-forward" style={styles.colorWhite} /> | |
// </Button> | |
// </Left> | |
// <Body> | |
// <Title style={styles.headerText}>اخر الاغاني</Title> | |
// </Body> | |
// <Right></Right> | |
// </Header> | |
// <FlatList | |
// data={this.state.songs} | |
// keyExtractor={song => song.id} | |
// initialNumToRender={10} | |
// contentContainerStyle={{ | |
// flexGrow: 1, | |
// }} | |
// columnWrapperStyle={{ | |
// flex: 1, | |
// justifyContent: 'space-around', | |
// margin: 10, | |
// }} | |
// numColumns={2} | |
// ListEmptyComponent={<EmptyList />} | |
// renderItem={this._renderItems} | |
// onEndReached={this.handleLoadMore} | |
// onEndReachedThreshold={2} | |
// ListFooterComponent={this.renderFooter} | |
// removeClippedSubviews={true} | |
// maxToRenderPerBatch={1} // Reduce number in each render batch | |
// maxToRenderPerBatch={100} // Increase time between renders | |
// windowSize={7} | |
// /> | |
// {/* <RecyclerListView | |
// rowRenderer={this.rowRenderer} | |
// dataProvider={songs} | |
// layoutProvider={this.layoutProvider} | |
// onScroll={this.checkRefetch} | |
// renderFooter={this.renderFooter} | |
// /> */} | |
// </Container> | |
// ); | |
// } | |
// } | |
// const mapDispatchToProps = dispatch => { | |
// return { | |
// isPlaying: _isPlaying => { | |
// dispatch(isPlayingAction(_isPlaying)); | |
// }, | |
// isPauseTrigger: _isPause => { | |
// dispatch(isPauseAction(_isPause)); | |
// }, | |
// saveSongs: (songs, index) => { | |
// dispatch(saveSongsPlayer(songs, index)); | |
// }, | |
// }; | |
// }; | |
// export default connect(null, mapDispatchToProps)(LastSongs); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment