index.js (2171B)
1 import React, { useState, useEffect } from 'react'; 2 import { 3 Linking, 4 Text, 5 View, 6 Modal, 7 TouchableOpacity 8 } from 'react-native'; 9 import moment from 'moment'; 10 import HTML from 'react-native-render-html'; 11 import fetch from 'node-fetch'; 12 import { 13 APIurl, 14 version 15 } from '../../../assets/constants/API'; 16 import styles from '../../../assets/styles'; 17 import UserModal from '../userModal'; 18 19 function Comment({ commentID }) { 20 const [commentData, setCommentData] = useState(); 21 const [showUserModal, setShowUserModal] = useState(false); 22 useEffect(() => { 23 let isMounted = true; 24 async function getCommentData() { 25 if (isMounted) { 26 const data = await fetch( 27 `${APIurl}/${version}/item/${commentID}.json` 28 ); 29 const res = await data.json(); 30 setCommentData(res); 31 } 32 } 33 getCommentData(); 34 return () => { 35 setCommentData(undefined); 36 isMounted = false; 37 }; 38 }, []); 39 return commentData && !commentData.deleted ? ( 40 <View style={styles.storyContainer}> 41 <Modal 42 animationType="slide" 43 transparent={false} 44 visible={showUserModal} 45 onRequestClose={() => { 46 Alert.alert('Modal has been closed.'); 47 }} 48 > 49 <UserModal 50 userID={commentData.by} 51 setShowUserModal={setShowUserModal} 52 /> 53 </Modal> 54 <TouchableOpacity 55 onPress={() => setShowUserModal(true)} 56 > 57 <Text style={styles.storyUser}> 58 {commentData.by} • {parseTime(commentData.time)} 59 </Text> 60 </TouchableOpacity> 61 {commentData.text ? ( 62 <HTML 63 html={commentData.text} 64 onLinkPress={(_, href) => Linking.openURL(href)} 65 /> 66 ) : ( 67 <></> 68 )} 69 {commentData.url ? ( 70 <Text 71 style={styles.storyUrl} 72 onPress={() => Linking.openURL(commentData.url)} 73 > 74 Open URL 🔗 75 </Text> 76 ) : ( 77 <></> 78 )} 79 </View> 80 ) : ( 81 <Null /> 82 ); 83 } 84 85 function Null() { 86 return <></>; 87 } 88 89 function parseTime(UNIXtime) { 90 return moment(UNIXtime * 1000).fromNow(); 91 } 92 93 export default Comment;