display high scores

squarenotsquare/src/screens/HighScore.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { BackHandler, SafeAreaView, Text, TouchableOpacity, View } from "react-native";
 import { styles } from './styles/AppStyles';
 import Slider from "../components/Slider";
@@ -8,36 +8,65 @@ import DbAPI from "../realm/DbAPI";
 
 function HighScore(){
   const dispatch = useDispatch();
-  const scores = useRef(DbAPI.getHighScores());
+  const scores = useRef([]);
+  const [scoresLoaded, setScoresLoaded] = useState(false);
 
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', () => {return true});
   }, [])
 
+  useEffect(() => {
+    if (!scoresLoaded) {
+      loadScores()
+        .then(() => {
+          setTimeout( () => {
+            setScoresLoaded(true);
+          }, 1000)
+      });
+    }
+  }, [scoresLoaded])
+
   function onPressMainMenu(){
     dispatch(goHome());
   }
 
-  const now = new Date(Date.now());
+  async function loadScores(){
+    scores.current = DbAPI.getHighScores();
+  }
+
+  function renderScore(score, index){
+    return (
+      <Text key={index} style={[styles.largeFont, styles.darkText, styles.leftText]}>
+        {(index+1) + '. '}
+        <Text style={[styles.greyText]}>
+          {score.value + ' - ' + score.user}
+        </Text>
+      </Text>
+    )
+  }
+
+  function renderScores(){
+    return scores.current.map((score, index) => {
+      return renderScore(score, index);
+    })
+  }
 
   return (
     <SafeAreaView style={[styles.flex]}>
-      <View style={[styles.flex, styles.spaceAround]}>
-        <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
-          Not Implemented
-        </Text>
-      </View>
       <View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}>
         <Slider origin={400} duration={750} delay={0}>
           <TouchableOpacity
             onPress={onPressMainMenu}
-            style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}
+            style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow, styles.smallMargin]}
           >
             <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
               Main Menu
             </Text>
           </TouchableOpacity>
         </Slider>
+        <View style={[styles.flex]}>
+          {renderScores()}
+        </View>
       </View>
     </SafeAreaView>
   )