Created
April 5, 2020 16:22
-
-
Save anastely/2e3e52ba29d93846b63390750f289c16 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
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 {saveSongs, isPlaying, isPauseTrigger} = props; | |
const _renderItems = useCallback( | |
// the same reference with each rerender | |
({item, index}) => ( | |
<TouchableNativeFeed | |
key={item.id} | |
onPress={() => { | |
console.log('onPress', songs); | |
saveSongs(songs, index); | |
isPlaying(true); | |
isPauseTrigger(!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> | |
), | |
[saveSongs, isPlaying, isPauseTrigger], | |
); | |
const renderFooter = useCallback( | |
// the same reference with each rerender | |
() => { | |
return loading ? ( | |
<View style={styles.loader}> | |
<ActivityIndicator size="large" /> | |
</View> | |
) : null; | |
}, | |
[loading], | |
); | |
const handleLoadMore = useCallback( | |
// the same reference with each rerender | |
() => { | |
if (page <= last_page - 1) { | |
setPage(page + 1); | |
} | |
}, | |
[page, last_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, | |
}), | |
); | |
setSongs(songs.concat(All_Songs)); | |
setLoading(false); | |
}; | |
getData(); | |
console.log('songs', songs); | |
}, [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={_keyExtractor} // the same reference with each rerender | |
initialNumToRender={10} | |
contentContainerStyle={styles.contentContainerStyle} // the same reference with each rerender | |
columnWrapperStyle={styles.columnWrapperStyle} // the same reference with each rerender | |
numColumns={2} | |
ListEmptyComponent={_renderListEmptyComponent} // the same reference with each rerender | |
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 _keyExtractor = (song) => song.id; | |
const _renderListEmptyComponent = () => <EmptyList />; | |
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