anastely/ListFC.js

## ListFC.js

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);

	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);