Some refactoring, better error handling and inform the user of the server responses

App.js

@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
   container: {
     display: "flex",
     paddingHorizontal: 80,
-    paddingVertical: 80,
+    paddingVertical: 40,
     flex: 1,
     backgroundColor: "#1d1d1b"
   },
@@ -36,6 +36,6 @@ const styles = StyleSheet.create({
     marginRight: "auto"
   },
   logoContainer: {
-    padding: 20
+    paddingBottom: 30
   }
 });

components/GameList.js

 import React, { Component, Fragment } from "react";
-import {
-  TouchableHighlight,
-  Modal,
-  Picker,
-  Text,
-  StyleSheet,
-  View,
-  TextInput,
-  Button
-} from "react-native";
+import { Picker, Text, StyleSheet } from "react-native";
 
 import LocationTracker from "./LocationTracker";
+import PasswordPopup from "./PasswordPopup";
+import MessagePopup from "./MessagePopup";
 
 class GameList extends Component {
   constructor(props) {
@@ -23,6 +16,9 @@ class GameList extends Component {
       selectedFaction: null,
       factionPassword: null,
       passwordPopupVisible: false,
+      messagePopupVisible: false,
+      message: "",
+      messageTitle: "",
       editForm: false,
       userLocation: {
         latitude: null,
@@ -39,18 +35,25 @@ class GameList extends Component {
     this.getGames();
   }
 
-  setPopupVisible(visible) {
-    this.setState({ passwordPopupVisible: visible });
+  setPopupVisible(popup, visible) {
+    this.setState({ [popup]: visible });
   }
 
   // Get all the games from the server and set the state to the first game
   async getGames() {
-    await fetch("https://tacs-testing.cf:8443/game/listgames")
-      .then(response => response.json())
+    await fetch("https://tacs-testing.cf:8443/game/listgames", {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      }
+    })
+      .then(res => res.json())
       .then(games => {
+        const newGames = [{ name: "- -" }, ...games];
         this.setState({
-          games,
-          selectedGame: games[0]
+          games: newGames,
+          selectedGame: newGames[0]
         });
       })
       .catch(error => {
@@ -107,6 +110,15 @@ class GameList extends Component {
     }
   }
 
+  handlePasswordChange = factionPassword => {
+    this.setState({ factionPassword });
+  };
+
+  handlePopupClose = () => {
+    console.log("Koitetaa settaa selected faction: " + this.state.factions[0]);
+    this.setState({ selectedFaction: this.state.factions[0] });
+  };
+  // There's lots of bad solutions here beware! (at least it should work)
   joinFaction() {
     fetch("https://tacs-testing.cf:8443/faction/join-faction", {
       method: "PUT",
@@ -121,12 +133,32 @@ class GameList extends Component {
         game: this.state.selectedGame.id
       })
     })
-      .then(response => response.json())
       .then(response => {
-        console.log(response);
+        if (response.ok) {
+          console.log("Homma OK!");
+          this.setState({
+            message: `Joined the faction`,
+            messagePopupVisible: true
+          });
+        }
+        return response.json();
+      })
+      .then(response => {
+        if (response.message) {
+          this.setState({
+            message: response.message,
+            messagePopupVisible: true,
+            selectedFaction: this.state.factions[0]
+          });
+        }
       })
       .catch(error => {
-        console.log(error);
+        this.setState({
+          message: "PERKELE : " + error.message,
+          messagePopupVisible: true,
+          selectedFaction: this.state.factions[0]
+        });
+        console.log("VIRHE: " + error);
       });
   }
   // Toggles the tracking boolean (some thought mistake somewhere makes this kinda weird ¯\_(ツ)_/¯ )
@@ -255,54 +287,6 @@ class GameList extends Component {
     clearInterval(this.intervalID);
   }
   render() {
-    const passwordPopup = (
-      <Modal
-        animationType="fade"
-        transparent={true}
-        visible={this.state.passwordPopupVisible}
-        onRequestClose={() => {
-          Alert.alert("Modal has been closed.");
-        }}
-      >
-        <View style={styles.popupContainer}>
-          <View style={styles.popup}>
-            <Text style={styles.popupTitle}>{`Enter the password`}</Text>
-            <TextInput
-              style={styles.popupInput}
-              placeholder="password"
-              secureTextEntry={true}
-              value={this.state.factionPassword}
-              onChangeText={factionPassword =>
-                this.setState({ factionPassword })
-              }
-            />
-            <View style={styles.popupBottom}>
-              <View style={styles.popupButton}>
-                <Button
-                  color="#424242"
-                  onPress={() => {
-                    this.setPopupVisible(!this.state.passwordPopupVisible);
-                  }}
-                  title="Close"
-                />
-              </View>
-              <View style={styles.popupButton}>
-                <Button
-                  color="#424242"
-                  onPress={() => {
-                    this.joinFaction();
-                    this.setPopupVisible(!this.state.passwordPopupVisible);
-                    this.setState({ factionPassword: "" });
-                  }}
-                  title="Submit"
-                />
-              </View>
-            </View>
-          </View>
-        </View>
-      </Modal>
-    );
-
     if (this.state.games.length > 0) {
       const items = (
         <Fragment>
@@ -334,7 +318,23 @@ class GameList extends Component {
               </Picker>
             </Fragment>
           )}
-          {this.state.passwordPopupVisible && passwordPopup}
+          {this.state.passwordPopupVisible && (
+            <PasswordPopup
+              handlePasswordChange={this.handlePasswordChange.bind(this)}
+              joinFaction={this.joinFaction.bind(this)}
+              setPopupVisible={this.setPopupVisible.bind(this)}
+              factionPassword={this.state.factionPassword}
+              passwordPopupVisible={this.state.passwordPopupVisible}
+              handlePopupClose={this.handlePopupClose.bind(this)}
+            />
+          )}
+          {this.state.messagePopupVisible && (
+            <MessagePopup
+              setPopupVisible={this.setPopupVisible.bind(this)}
+              message={this.state.message}
+              messagePopupVisible={this.state.messagePopupVisible}
+            />
+          )}
           <LocationTracker
             tracking={this.state.tracking}
             handleTrackingChange={this.handleTrackingChange.bind(this)}
@@ -355,37 +355,6 @@ const styles = StyleSheet.create({
     color: "#ffffff",
     paddingTop: 10,
     fontSize: 20
-  },
-  popupContainer: {
-    flex: 1,
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#00000080"
-  },
-  popup: {
-    width: 300,
-    height: "auto",
-    backgroundColor: "#1d1d1b",
-    padding: 20
-  },
-  popupTitle: {
-    color: "#ffffff",
-    fontSize: 20,
-    textAlign: "center"
-  },
-  popupBottom: {
-    padding: 10,
-    marginBottom: 30,
-    flexDirection: "row"
-  },
-  popupButton: {
-    padding: 10
-  },
-  popupInput: {
-    margin: 20,
-    padding: 5,
-    backgroundColor: "#424242"
   }
 });
 

components/Login.js

@@ -29,6 +29,7 @@ class Login extends Component {
   handleLogout = async () => {
     await this.setState({ username: null, token: null });
     await AsyncStorage.removeItem("token");
+    this.toggleView("login");
   };
 
   loadToken = async () => {

components/LoginForm.js

@@ -88,7 +88,7 @@ export class LoginForm extends React.Component {
               onPress={this.handleLogin}
             />
           </View>
-          <Text>{this.state.errorMsg}</Text>
+          <Text style={styles.tooltipText}>{this.state.errorMsg}</Text>
         </View>
       </View>
     );

components/MessagePopup.js

+import React from "react";
+import { Modal, Text, StyleSheet, View, Button } from "react-native";
+
+const MessagePopup = props => {
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={props.messagePopupVisible}
+      onRequestClose={() => {
+        Alert.alert("Modal has been closed.");
+      }}
+    >
+      <View style={styles.popupContainer}>
+        <View style={styles.popup}>
+          <Text style={styles.popupMessage}>{`${props.message}`}</Text>
+          <View style={styles.popupBottom}>
+            <View style={styles.popupButton}>
+              <Button
+                color="#424242"
+                onPress={() => {
+                  props.setPopupVisible(
+                    "messagePopupVisible",
+                    !props.messagePopupVisible
+                  );
+                }}
+                title="Close"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+// <Text style={styles.popupTitle}>{`${props.messageTitle}`}</Text>
+
+export default MessagePopup;
+
+const styles = StyleSheet.create({
+  popupContainer: {
+    flex: 1,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#00000080"
+  },
+  popup: {
+    width: 300,
+    height: "auto",
+    backgroundColor: "#1d1d1b",
+    padding: 20
+  },
+  popupTitle: {
+    color: "#ffffff",
+    fontSize: 20,
+    textAlign: "center"
+  },
+  popupMessage: {
+    color: "#ffffff",
+    fontSize: 20,
+    textAlign: "center"
+  },
+  popupBottom: {
+    padding: 10,
+    marginBottom: 30,
+    flexDirection: "row",
+    justifyContent: "center"
+  },
+  popupButton: {
+    padding: 10
+  },
+  popupInput: {
+    margin: 20,
+    padding: 5,
+    backgroundColor: "#424242"
+  }
+});

components/PasswordPopup.js

+import React from "react";
+import { Modal, Text, StyleSheet, View, TextInput, Button } from "react-native";
+
+const PasswordPopup = props => {
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={props.passwordPopupVisible}
+      onRequestClose={() => {
+        Alert.alert("Modal has been closed.");
+      }}
+    >
+      <View style={styles.popupContainer}>
+        <View style={styles.popup}>
+          <Text style={styles.popupTitle}>{`Enter the password`}</Text>
+          <TextInput
+            autoFocus
+            style={styles.popupInput}
+            placeholder="password"
+            secureTextEntry={true}
+            value={props.factionPassword}
+            onChangeText={factionPassword =>
+              props.handlePasswordChange(factionPassword)
+            }
+          />
+          <View style={styles.popupBottom}>
+            <View style={styles.popupButton}>
+              <Button
+                color="#424242"
+                onPress={() => {
+                  props.handlePasswordChange("");
+                  props.handlePopupClose();
+                  props.setPopupVisible(
+                    "passwordPopupVisible",
+                    !props.passwordPopupVisible
+                  );
+                }}
+                title="Close"
+              />
+            </View>
+            <View style={styles.popupButton}>
+              <Button
+                color="#424242"
+                onPress={() => {
+                  props.handlePasswordChange("");
+                  props.joinFaction();
+                  props.setPopupVisible(
+                    "passwordPopupVisible",
+                    !props.passwordPopupVisible
+                  );
+                }}
+                title="Submit"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default PasswordPopup;
+
+const styles = StyleSheet.create({
+  popupContainer: {
+    flex: 1,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#00000080"
+  },
+  popup: {
+    width: 300,
+    height: "auto",
+    backgroundColor: "#1d1d1b",
+    padding: 20
+  },
+  popupTitle: {
+    color: "#ffffff",
+    fontSize: 20,
+    textAlign: "center"
+  },
+  popupBottom: {
+    padding: 10,
+    marginBottom: 30,
+    flexDirection: "row"
+  },
+  popupButton: {
+    padding: 10
+  },
+  popupInput: {
+    margin: 20,
+    padding: 5,
+    backgroundColor: "#424242"
+  }
+});