{"size": 1084, "ext": "js", "max_stars_repo_path": "src/screens/ShowContentScreen.js", "max_stars_repo_name": "syuraj/SoundSpice-mobile", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/screens/ShowContentScreen.js", "max_issues_repo_name": "syuraj/SoundSpice-mobile", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/screens/ShowContentScreen.js", "max_forks_repo_name": "syuraj/SoundSpice-mobile", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.9714285714, "max_line_length": 80, "alphanum_fraction": 0.6835793358}
import React, { useState, useEffect } from 'react';
import { View, FlatList } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions';
import RenderTrack from '../components/RenderTrack';
import OptionsModal from '../components/OptionsModal';
import { flatListItemLayout } from '../utils/FlatListLayout';

function ShowFolderScreen(props) {
	const [modal, setModal] = useState({ visible: false, item: {} });

	useEffect(() => {
		let unsubscribe = props.navigation.addListener('focus', props.hideFooter);
		return unsubscribe;
	}, [props.navigation]);

	return (
		<View style={{ flex: 1 }}>
			<FlatList
				keyExtractor={(asset) => asset.id.toString()}
				renderItem={({ item }) => <RenderTrack item={item} setOptions={setModal} />}
				data={props.route.params.content}
				getItemLayout={flatListItemLayout}
			/>
			<OptionsModal
				selectedTrack={modal.item}
				isVisible={modal.visible}
				onPressCancel={() => setModal({ ...modal, visible: false })}
			/>
		</View>
	);
}

export default connect(null, actions)(ShowFolderScreen);
