Merge branch 'beta'

Author: Asiern

Notes.md

@@ -0,0 +1,32 @@
+# Version 1.0.8 Notes
+
+## What's new?
+
+- Now you can add/remove games from MyGames from GameInfo.
+- Moved MyGames to an unique file `MyGames.js` and changed from .map to Flatlist.
+- Added Notification Bar messages when API-Key is missing and Notifications are empty.
+
+## Fixes
+
+- Fixed: App not reloading when logging in.
+- Fixed: Notifications issue when API-Key was not provided.
+- Fixed: Login screen buttons.
+- Fixed: Profiles with no country not displaying properly.
+- Fixed: Login `SKIP` button not working.
+
+## Performance
+
+- Optimized notifications load.
+- Removed unused packages.
+- Removed unused code.
+- Game search, user search and home now use hooks instead of React Components.
+- Small optimizations.
+- Profile
+
+## Known issues
+
+- App not reloading when logging out.
+- MyGames not reloading when adding/removing games.
+- Runs with multiple runners not displaying properly.
+- Japanese users not displaying.
+- OS forced darkmode breaks `UserHeader.js` colors.

Source/App.js

@@ -1,38 +1,59 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import AsyncStorage from "@react-native-community/async-storage";
+import { ActivityIndicator } from "react-native";
+
+//Screens
 import Navigation from "./app/screens/Navigation";
 import Login from "./app/screens/Login";
 
-export default class App extends Component {
-  _isMounted = false;
-  constructor(props) {
-    super();
-    this.state = {
-      Loggedin: true,
-    };
-  }
-  async componentDidMount() {
-    this._isMounted = true;
-    if (this._isMounted) {
-      const Loggedin = await AsyncStorage.getItem("@Loggedin");
+//Themes
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware, combineReducers } from "redux";
+import thunk from "redux-thunk";
+import themeReducer from "./app/redux/themeReducer";
 
-      if (Loggedin == "true") {
-        this.setState({ Loggedin: true });
-      } else if (Loggedin == "false") {
-        this.setState({ Loggedin: false });
-      } else {
-        null;
-      }
-    }
-  }
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-  render() {
-    if (this.state.Loggedin) {
-      return <Navigation />;
-    } else {
-      return <Login />;
+const store = createStore(
+  combineReducers({ themeReducer }),
+  applyMiddleware(thunk)
+);
+
+export default function App() {
+  const [loading, setLoading] = useState(true);
+  const [Loggedin, setLoggedin] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+    if (mounted) {
+      (async () => {
+        const LOGGEDIN = await AsyncStorage.getItem("@Loggedin");
+        if (LOGGEDIN == "true") {
+          setLoggedin(true);
+          setLoading(false);
+        } else if (LOGGEDIN == "false") {
+          setLoggedin(false);
+          setLoading(false);
+        } else {
+          setLoading(false);
+        }
+      })();
     }
+
+    return function cleanup() {
+      mounted = false;
+    };
+  }, [Loggedin]);
+
+  if (loading) {
+    return <ActivityIndicator />;
+  } else {
+    return (
+      <Provider store={store}>
+        {Loggedin == true ? (
+          <Navigation function={() => setLoggedin()} />
+        ) : (
+          <Login function={() => setLoggedin()} />
+        )}
+      </Provider>
+    );
   }
 }

Source/app.json

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

Source/app/components/Game.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Text, View, StyleSheet } from "react-native";
+
+import colors from "../config/colors";
+const Game = (props) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{props.title}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 15,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    marginTop: 10,
+    borderRadius: 10,
+    shadowColor: "gold",
+    shadowOffset: { width: 5, height: 5 },
+    shadowOpacity: 0.9,
+    elevation: 5,
+    margin: 10,
+  },
+  text: {
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    fontSize: 15,
+  },
+});
+export default Game;

Source/app/components/GameCard.js

@@ -1,64 +1,36 @@
-import React, { Component } from "react";
+import React from "react";
 import { StyleSheet, ImageBackground, View } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 
-class GameCard extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      id: this.props.id,
-      abbreviation: this.props.abbreviation,
-      cover:
-        "https://www.speedrun.com/themes/" +
-        this.props.abbreviation +
-        "/cover-256.png",
-    };
-  }
-
-  render() {
-    const shadow = {
-      width: 110,
-      height: 153,
-      color: "#000000",
-      radius: 10,
-      opacity: 0.6,
-      x: 5,
-      y: 5,
-      style: { marginVertical: 5 },
-    };
-    return (
-      <View style={{ padding: 2 }}>
-        <TouchableOpacity
-          onPress={() =>
-            this.props.navigation.navigate("Game Info", {
-              id: this.state.id,
-              name: "name",
-              abbreviation: this.state.abbreviation,
-            })
-          }
-          style={styles.container}
-        >
-          <ImageBackground
-            source={{ uri: this.state.cover }}
-            style={styles.image}
-            imageStyle={{ borderRadius: 10 }}
-          ></ImageBackground>
-        </TouchableOpacity>
-      </View>
-    );
-  }
+export default function GameCard(props) {
+  return (
+    <View style={{ padding: 2 }}>
+      <TouchableOpacity
+        onPress={() =>
+          props.navigation.navigate("Game Info", {
+            id: props.id,
+            name: "name",
+            abbreviation: props.abbreviation,
+          })
+        }
+        style={styles.container}
+      >
+        <ImageBackground
+          source={{
+            uri:
+              "https://www.speedrun.com/themes/" +
+              props.abbreviation +
+              "/cover-256.png",
+          }}
+          style={styles.image}
+          imageStyle={{ borderRadius: 10 }}
+        ></ImageBackground>
+      </TouchableOpacity>
+    </View>
+  );
 }
-const styles = StyleSheet.create({
-  shadow: {
-    backgroundColor: "white",
-    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: 5,
-  },
+const styles = StyleSheet.create({
   container: {
     width: 113,
     height: 160,
@@ -77,5 +49,3 @@ const styles = StyleSheet.create({
     flexDirection: "row",
   },
 });
-
-export default GameCard;

Source/app/components/Games.js

@@ -1,69 +1,56 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import { View, StyleSheet } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import GameCard from "./GameCard";
 import colors from "../config/colors";
 import { SearchBar } from "react-native-elements";
 
-class Games extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      games: [],
-      search: "",
-      loading: true,
-    };
-  }
-  updateSearch = (input) => {
-    this.setState({ search: input });
+export default function Games(props) {
+  const [games, setGames] = useState([]);
+  const [search, setSearch] = useState("");
+
+  function updateSearch(input) {
+    setSearch(input);
     const gameeurl = "https://www.speedrun.com/api/v1/games?name=" + input;
     //Fetch url for users
-    this.Fetch(gameeurl);
-  };
-  async Fetch(gameurl) {
+    Fetch(gameeurl);
+  }
+  async function Fetch(gameurl) {
     //Users
     const gameresponse = await fetch(gameurl);
     const gamedata = await gameresponse.json();
 
     //Load data to state
-    this.setState({
-      loading: false,
-      games: gamedata.data,
-    });
-  }
-
-  render() {
-    const { search } = this.state;
-    return (
-      <View style={styles.container}>
-        <SearchBar
-          placeholder="Search for games"
-          onChangeText={this.updateSearch}
-          value={search}
-          platform="ios"
-        />
-        <FlatList
-          style={styles.flatList}
-          numColumns={3}
-          keyExtractor={(item) => item.id}
-          data={this.state.games}
-          renderItem={({ item }) => (
-            <GameCard
-              navigation={this.props.navigation}
-              id={item.id}
-              abbreviation={item.abbreviation}
-            />
-          )}
-        ></FlatList>
-      </View>
-    );
+    setGames(gamedata.data);
   }
+  return (
+    <View style={styles.container}>
+      <SearchBar
+        placeholder="Search for games"
+        onChangeText={updateSearch}
+        value={search}
+        platform="ios"
+      />
+      <FlatList
+        style={styles.flatList}
+        numColumns={3}
+        keyExtractor={(item) => item.id}
+        data={games}
+        renderItem={({ item }) => (
+          <GameCard
+            navigation={props.navigation}
+            id={item.id}
+            abbreviation={item.abbreviation}
+          />
+        )}
+      ></FlatList>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    //marginTop: Constants.statusBarHeight,
     backgroundColor: colors.light,
   },
   flatList: {
@@ -72,21 +59,4 @@ const styles = StyleSheet.create({
     flex: 1,
     alignSelf: "center",
   },
-  gamecontainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    flex: 2,
-    justifyContent: "space-around",
-  },
-  headercontainer: {
-    backgroundColor: colors.primary,
-  },
-  headertext: {
-    color: colors.white,
-    fontSize: 25,
-    padding: 15,
-    fontWeight: "bold",
-    alignSelf: "center",
-  },
 });
-export default Games;