index.js (1635B)
1 import React, { useEffect, useState } from 'react'; 2 import { 3 SafeAreaView, 4 View, 5 Text, 6 Linking, 7 TouchableOpacity 8 } from 'react-native'; 9 import HTML from 'react-native-render-html'; 10 11 import { 12 APIurl, 13 version 14 } from '../../../assets/constants/API'; 15 import styles from '../../../assets/styles'; 16 17 function UserModal({ userID, setShowUserModal }) { 18 const [userData, setUserData] = useState(undefined); 19 useEffect(() => { 20 let isMounted = true; 21 async function getUserData() { 22 if (isMounted) { 23 const data = await fetch( 24 `${APIurl}/${version}/user/${userID}.json` 25 ); 26 const res = await data.json(); 27 setUserData(res); 28 } 29 } 30 getUserData(); 31 return () => { 32 setUserData(undefined); 33 isMounted = false; 34 }; 35 }, []); 36 return userData ? ( 37 <SafeAreaView style={styles.modelContainer}> 38 <TouchableOpacity 39 onPress={() => setShowUserModal(false)} 40 > 41 <View style={styles.userModalContainer}> 42 <Text style={styles.userModalName}> 43 {userData.id} 44 </Text> 45 {userData.about ? ( 46 <HTML 47 html={userData.about} 48 style={styles.userModalAbout} 49 onLinkPress={(_, href) => 50 Linking.openURL(href) 51 } 52 /> 53 ) : ( 54 <Null /> 55 )} 56 <Text style={styles.userModalKarma}> 57 {userData.karma} karma 58 </Text> 59 </View> 60 </TouchableOpacity> 61 </SafeAreaView> 62 ) : ( 63 <Null /> 64 ); 65 } 66 67 function Null() { 68 return <></>; 69 } 70 71 export default UserModal;