anastely/Flatlist.js

## Flatlist.js
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);
	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);