SHARE
TWEET

Untitled

a guest Jun 18th, 2019 48 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74. import React from "react";
  75. import { StyleSheet, View, Text, FlatList } from "react-native";
  76. import firebase from 'firebase/app';
  77.  
  78.  
  79.  
  80.  
  81. export default class Card extends React.Component {
  82.   constructor(props) {
  83.     super(props);
  84.     this.state = {
  85.       highScoreList: null,
  86.       isDataLoaded: false
  87.     }
  88.   }
  89.  
  90.  
  91.   componentDidMount() {
  92.     const hList = [];
  93.     const ref = firebase.database().ref('users')
  94.     ref.orderByChild('hours').on('child_added', function(snapshot) {
  95.       hList.push({
  96.         id: snapshot.key,
  97.         hours: snapshot.val().hours,
  98.         name: snapshot.val().name
  99.       });
  100.     });
  101.  
  102.     this.setState({
  103.       highScoreList: hList,
  104.       isDataLoaded: true
  105.     })
  106.    
  107.  
  108.  
  109.   }
  110.  
  111.  
  112.  
  113.   render(){
  114.     if(this.state.isDataLoaded && this.state.highScoreList){
  115.       console.log("Innafor state")
  116.       console.log(this.state.highScoreList)
  117.      
  118.       return (
  119.         <View style={styles.card}>
  120.           {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user.name}        {user.hours}</Text>)}
  121.         </View>
  122.       )
  123.     }else{
  124.       console.log("State var tom")
  125.       return (<Text> Waiting for data</Text>)
  126.     }
  127.   }
  128.    
  129. }
  130.  
  131.  
  132. const styles = StyleSheet.create({
  133.   card: {
  134.     flex: 1, flexDirection: 'row',
  135.     backgroundColor: "#fff",
  136.     paddingVertical: 20,
  137.     paddingHorizontal: 10,
  138.     borderRadius: 20,
  139.     minHeight: 333
  140.   },
  141.   text: {
  142.     fontSize: 30,
  143.     marginBottom: 20,
  144.     color: "black",
  145.   },
  146. });
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top