AskStories.js (1499B)
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 AskStories() { 23 const [askStories, setAskStories] = useState([]); 24 useEffect(() => { 25 let isMounted = true; 26 async function loadAskStories() { 27 if (isMounted) { 28 const data = await fetch( 29 `${APIurl}/${version}/askstories.json` 30 ); 31 const res = await data.json(); 32 setAskStories(res); 33 } 34 } 35 loadAskStories(); 36 return () => { 37 setAskStories([]); 38 isMounted = false; 39 }; 40 }, []); 41 return ( 42 <SafeAreaView style={styles.container}> 43 <View style={styles.headingContainer}> 44 <Text style={styles.heading}>Ask stories</Text> 45 </View> 46 47 {askStories ? ( 48 <FlatList 49 showsVerticalScrollIndicator={false} 50 data={askStories} 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 <></>; 68 } 69 70 export default AskStories;