BestStories.js (1529B)
1 import React, { useState, useEffect } from 'react'; 2 import { 3 FlatList, 4 SafeAreaView, 5 Platform, 6 Text, 7 View 8 } from 'react-native'; 9 10 import fetch from 'node-fetch'; 11 12 import styles from '../../../assets/styles'; 13 import Story from '../story'; 14 15 import { 16 APIurl, 17 version 18 } from '../../../assets/constants/API'; 19 20 import renderSeparator from '../renderSeparator'; 21 22 function BestStories() { 23 const [bestStories, setBestStories] = useState([]); 24 useEffect(() => { 25 let isMounted = true; 26 async function loadBestStories() { 27 if (isMounted) { 28 const data = await fetch( 29 `${APIurl}/${version}/beststories.json` 30 ); 31 const res = await data.json(); 32 setBestStories(res); 33 } 34 } 35 loadBestStories(); 36 return () => { 37 setBestStories([]); 38 isMounted = false; 39 }; 40 }, []); 41 return ( 42 <SafeAreaView style={styles.container}> 43 <View style={styles.headingContainer}> 44 <Text style={styles.heading}>Best stories</Text> 45 </View> 46 47 {bestStories ? ( 48 <FlatList 49 showsVerticalScrollIndicator={false} 50 data={bestStories} 51 renderItem={story => ( 52 <Story storyID={story.item} /> 53 )} 54 keyExtractor={story => String(story)} 55 ItemSeparatorComponent={ 56 Platform.OS == 'ios' && renderSeparator 57 } 58 /> 59 ) : ( 60 <Null /> 61 )} 62 </SafeAreaView> 63 ); 64 } 65 66 function Null() { 67 return <Text>Loading...</Text>; 68 } 69 70 export default BestStories;