Merge branch 'beta'

Notes.md

@@ -1,3 +1,24 @@
+# Version 1.0.9 Notes
+
+## What's new?
+
+- Personal Bests are now sorted by games.
+
+## Fixes
+
+- Fixed: Cannot remove games from `MyGames`.
+- Fixed: MyGames not reloading when adding/removing games.
+- Fixed: Notifications not loading due to API-Key missing.
+
+## Known issues
+
+- App not reloading when logging out.
+- Runs with multiple runners not displaying properly.
+- Japanese users not displaying.
+- OS forced darkmode breaks `UserHeader.js` colors.
+
+---
+
 # Version 1.0.8 Notes
 
 ## What's new?

Source/App.js

@@ -12,6 +12,7 @@ import { createStore, applyMiddleware, combineReducers } from "redux";
 import thunk from "redux-thunk";
 import themeReducer from "./app/redux/themeReducer";
 
+import { useSelector } from "react-redux";
 const store = createStore(
   combineReducers({ themeReducer }),
   applyMiddleware(thunk)

Source/app.json

@@ -3,7 +3,7 @@
     "name": "SpeedrunHub",
     "slug": "speedruncomapp",
     "platforms": ["ios", "android", "web"],
-    "version": "1.0.8",
+    "version": "1.0.9",
     "orientation": "portrait",
     "icon": "./app/assets/trophy.png",
     "splash": {
@@ -22,7 +22,7 @@
     "githubUrl": "https://github.com/Asiern/SpeedrunHub",
     "android": {
       "package": "com.asiern.speedrun",
-      "versionCode": 8
+      "versionCode": 9
     }
   }
 }

Source/app/components/MyGames.js

@@ -1,15 +1,27 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View,Dimestions, Dimensions } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import GameCard from "./GameCard";
-
+import NotificationCard from "../components/NotificationCard"
+import colors from "../config/colors"
+const {width} = Dimensions.get("screen")
 export default function MyGames(props) {
   return (
     <View style={styles.conatiner}>
       <FlatList
         data={props.data}
         numColumns={3}
         keyExtractor={(item) => item.id}
+        ListEmptyComponent={
+          <NotificationCard  
+            width={width}
+            text={
+              "Start searching for your favourite games and add them to MyGames."
+            }
+            backgroundColor={colors.primary}
+            color={colors.white}
+          />
+      }
         renderItem={({ item }) => (
           <GameCard
             navigation={props.navigation}

Source/app/components/NotificationBar.js

@@ -10,13 +10,11 @@ import {
 import NotificationCard from "./NotificationCard";
 import { ActivityIndicator } from "react-native-paper";
 import colors from "../config/colors";
-import Feather from "@expo/vector-icons/Feather";
 
 const NotificationBar = (props) => {
   const [data, setData] = useState(null);
   const [loading, setloading] = useState(true);
   const [error, seterror] = useState(false);
-  const key = props.APIKey;
   useEffect(() => {
     let mounted = true;
 
@@ -27,11 +25,10 @@ const NotificationBar = (props) => {
         xhr.open("GET", url);
         xhr.setRequestHeader("Host", "www.speedrun.com");
         xhr.setRequestHeader("Accept", "application/json");
-        xhr.setRequestHeader("X-API-Key", key);
+        xhr.setRequestHeader("X-API-Key", props.APIKey);
         xhr.onreadystatechange = function () {
           if (xhr.readyState === 4 && mounted) {
             response = JSON.parse(xhr.responseText);
-
             setData(response.data);
             setloading(false);
           }
@@ -44,7 +41,7 @@ const NotificationBar = (props) => {
     return function cleanup() {
       mounted = false;
     };
-  }, [data]);
+  }, [data, loading]);
   if (loading) {
     return <ActivityIndicator />;
   } else if (error) {
@@ -57,7 +54,7 @@ const NotificationBar = (props) => {
             <Text style={styles.headertext}>Notifications</Text>
           </View>
         </View>
-        {key == null ? (
+        {props.APIKey == null ? (
           <NotificationCard
             width={props.width}
             text={
@@ -67,14 +64,14 @@ const NotificationBar = (props) => {
             color={colors.darkgrey}
           />
         ) : (
-          <NotificationCard
-            width={props.width}
-            text={
-              "No notifications found. Make sure your API-Key is correct or that your Speedrun.com notifications settings are correct."
-            }
-            backgroundColor={colors.green}
-            color={colors.white}
-          />
+            <NotificationCard
+              width={props.width}
+              text={
+                "No notifications were found. Make sure your API-Key and your Speedrun.com notifications settings are correct. Otherwise try restarting the app."
+              }
+              backgroundColor={colors.primary}
+              color={colors.white}
+            />
         )}
       </View>
     );

Source/app/components/PB.js

@@ -1,95 +1,45 @@
-import React, { PureComponent } from "react";
+import React, { useEffect, useState } from "react";
 import {
   StyleSheet,
-  View,
-  Image,
   Text,
   TouchableOpacity,
+  View,
   Linking,
 } from "react-native";
 import colors from "../config/colors";
-export default class PB extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      categoryid: this.props.categoryid,
-      category: this.props.category,
-      place: this.props.place,
-      time: this.props.time,
-      runner: this.props.runner,
-      runnerid: this.props.runnerid,
-      cover:
-        "https://www.speedrun.com/themes/" +
-        this.props.abbreviation +
-        "/cover-64.png",
-      game: this.props.game,
-      abbreviation: this.props.abbreviation,
-      weblink: this.props.weblink,
-      loading: true,
-    };
-  }
-  loadInBrowser = (link) => {
+
+const PB = (props) => {
+  function loadInBrowser(link) {
     Linking.openURL(link).catch((err) =>
       console.error("Couldn't load page", err)
     );
-  };
-  componentDidMount() {
-    try {
-      this.timeConverter();
-      this.FetchUser(this.state.runnerid);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-  timeConverter() {
-    var result = this.state.time.toLowerCase();
-    result = result.substr(2, result.lenght);
-    this.setState({ time: result });
   }
-  async FetchUser(runnerid) {
-    const url = "https://www.speedrun.com/api/v1/users/" + runnerid;
-    const response = await fetch(url);
-    const data = await response.json();
-    this.setState({ loading: false, runner: data.data.names.international });
+  function timeConverter(time) {
+    var result = time.toLowerCase();
+    return result.substr(2, result.lenght);
   }
-  render() {
-    return (
-      <TouchableOpacity
-        style={styles.container}
-        onPress={() => this.loadInBrowser(this.state.weblink)}
-      >
-        <View style={styles.game}>
-          <Image
-            style={styles.cover}
-            source={{ uri: this.state.cover }}
-          ></Image>
-        </View>
-        <View style={styles.category}>
-          <Text style={styles.text}>{this.state.category}</Text>
-        </View>
-        <View style={styles.place}>
-          <Text style={styles.accenttext}>{this.state.place}</Text>
-        </View>
+  return (
+    <TouchableOpacity
+      onPress={() => loadInBrowser(props.weblink)}
+      style={styles.container}
+    >
+      <View style={styles.place}>
+        <Text style={styles.accenttext}>{props.place}</Text>
+      </View>
+      <View style={styles.category}>
+        <Text style={styles.text}>{props.category}</Text>
+      </View>
+      <View style={styles.time}>
+        <Text style={styles.text}>{timeConverter(props.time)}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
 
-        <View style={styles.time}>
-          <Text style={styles.text}>{this.state.time}</Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-}
 const styles = StyleSheet.create({
-  shadow: {
-    shadowColor: "gold",
-    shadowOffset: { width: 5, height: 5 },
-    shadowOpacity: 0.9,
-
-    // add shadows for Android only
-    // No options for shadow color, shadow offset, shadow opacity like iOS
-    elevation: 1,
-  },
   container: {
-    paddingVertical: 20,
+    marginHorizontal: 10,
+    paddingVertical: 15,
     flexDirection: "row",
     flex: 1,
     alignItems: "center",
@@ -102,29 +52,20 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.9,
     elevation: 1,
   },
-  game: {
+  place: {
     flex: 3,
-    //backgroundColor: "dodgerblue",
     alignItems: "center",
   },
   category: {
-    flex: 5,
-    //backgroundColor: "gold"
-    alignItems: "center",
-  },
-  place: {
-    flex: 3,
-    //backgroundColor: "tomato",
+    flex: 6,
     alignItems: "center",
   },
   runner: {
-    flex: 5,
-    //backgroundColor: "green",
+    flex: 8,
     alignItems: "center",
   },
   time: {
     flex: 8,
-    //backgroundColor: "orange",
     alignItems: "center",
   },
   text: {
@@ -138,9 +79,6 @@ const styles = StyleSheet.create({
     fontSize: 15,
     color: colors.primary,
   },
-  cover: {
-    height: 60,
-    width: 45,
-  },
 });
-module.export = PB;
+
+export default PB;