SHARE
TWEET

Untitled

a guest Jun 18th, 2019 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import { StyleSheet, View, Text, FlatList } from "react-native";
  3. import firebase from 'firebase/app';
  4.  
  5.  
  6.  
  7.  
  8. export default class Card extends React.Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.state = {
  12.       highScoreList: null,
  13.       isDataLoaded: false
  14.     }
  15.   }
  16.  
  17.  
  18.   componentDidMount() {
  19.     const hList = [];
  20.     const ref = firebase.database().ref('users')
  21.     ref.orderByChild('hours').on('child_added', function(snapshot) {
  22.       //console.log(snapshot.key + " was " + snapshot.val().hours + " m tall");
  23.       hList.push({
  24.         id: snapshot.key,
  25.         hours: snapshot.val().hours,
  26.         name: snapshot.val().name
  27.       });
  28.       //console.log(JSON.stringify(hList), hList.length);
  29.       //console.log("innafor" + hList)
  30.     });
  31.     //console.log(hList)
  32.  
  33.     this.setState({
  34.       highScoreList: hList,
  35.       isDataLoaded: true
  36.     })
  37.     //console.log("utafor" + hList)
  38.    
  39.  
  40.  
  41.   }
  42.  
  43.  
  44.  
  45.   render(){
  46.     if(this.state.isDataLoaded && this.state.highScoreList){
  47.       console.log("Innafor state")
  48.       console.log(this.state.highScoreList)
  49.      
  50.       return (
  51.         <View style={styles.card}>
  52.           {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user.name}        {user.hours}</Text>)}
  53.         </View>
  54.       )
  55.     }else{
  56.       console.log("State var tom")
  57.       return (<Text> Waiting for data</Text>)
  58.     }
  59.   }
  60.    
  61. }
  62. //          {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user[key].name}        {user.hours}</Text>)}
  63.  
  64.  
  65.  
  66. const styles = StyleSheet.create({
  67.   card: {
  68.     flex: 1, flexDirection: 'row',
  69.     backgroundColor: "#fff",
  70.     paddingVertical: 20,
  71.     paddingHorizontal: 10,
  72.     borderRadius: 20,
  73.     minHeight: 333
  74.   },
  75.   text: {
  76.     fontSize: 30,
  77.     marginBottom: 20,
  78.     color: "black",
  79.   },
  80. });
  81.  
  82. /*
  83. export default props => (
  84.  
  85.   <View style={styles.card}>
  86.     <Text style={styles.text}>{props.children}</Text>
  87.   </View>
  88. );
  89.  
  90. const styles = StyleSheet.create({
  91.   card: {
  92.     backgroundColor: "#fff",
  93.     paddingVertical: 20,
  94.     paddingHorizontal: 10,
  95.     borderRadius: 20,
  96.     minHeight: 333
  97.   },
  98.   text: {
  99.     fontSize: 30,
  100.     marginBottom: 20,
  101.     color: "#4A4A4A",
  102.   },
  103. });
  104. */
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top