swimtracker-app/views/WifiSelectionView.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  ActivityIndicator,
} from "react-native";
import SetupView from '../components/SetupView';
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
import { connect } from 'react-redux';
import { changeSwimTrackerHostname } from '../state/Reducer';


function WifiListElement(props) {
  let iconName = "wifi-strength-" + props.strength;
  if (props.lock) {
    iconName += "-lock";
  }

  return (
    <TouchableOpacity onPress={props.onPress}>
      <View style={wifiListElementStyles.container}>
        <MaterialIcon style={wifiListElementStyles.icon} name={iconName}></MaterialIcon>
        <Text style={wifiListElementStyles.text} >{props.text}</Text>
      </View>
    </TouchableOpacity>
  )
}
const wifiListElementStyles = {
  container: {
    backgroundColor: "rgba(255,255,255,0.4)",
    borderRadius: 5,
    width: "100%",
    height: 50,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 8,
    marginBottom: 8,
  },
  icon: {
    fontSize: 25,
    color: "rgba(255,255,255,1)",
    marginLeft: 15,
    marginRight: 15,
  },
  text: {
    color: "rgba(255,255,255,1)",
    fontSize: 18,
    width: "100%"
  }
};

// ---------------------------------------------------------------------------------------------

class WifiSelectionView extends React.Component {
  constructor() {
    super();
    this.state = { wifiInfo: [] };
    this.mounted = false;
  }

  processDeviceResponse(response) {
    // sort from strong to weak
    response.sort((e1, e2) => {
      if (e1.rssi > e2.rssi)
        return -1;
      if (e1.rssi < e2.rssi)
        return 1;
      else
        return 0;
    });

    let ssidsAlreadyAdded = {};
    let result = [];
    for (let i = 0; i < response.length; i++) {
      if (response[i].ssid in ssidsAlreadyAdded)
        continue;

      const locked = (response[i].sec != "open");
      let strength = 1;
      if (response[i].rssi > -30)
        strength = 4;
      else if (response[i].rssi > -67)
        strength = 3;
      else if (response[i].rssi > -70)
        strength = 2;

      result.push({ ssid: response[i].ssid, locked: locked, strength: strength });
      ssidsAlreadyAdded[response[i].ssid] = true;
    }
    return result;
  }

  componentDidMount() {
    let component = this;
    component.mounted = true;
    this.props.device.conn.scanWifiNetworks().then(
      (result) => {
        if(component.mounted) {
          this.setState({ wifiInfo: this.processDeviceResponse(result) })
        }
      }
    );
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
    let inner;

    if (this.state.wifiInfo.length > 0) {
      inner = (
        <View style={styles.listContainer}>
          <ScrollView style={{centerContent: true, paddingTop: 20}}>
            {this.state.wifiInfo.map(e => (
              <WifiListElement
                text={e.ssid}
                strength={e.strength}
                lock={e.locked}
                key={e.ssid}
                onPress={() => {
                  this.props.navigation.navigate("WifiPasswordView", {
                    ssid: e.ssid,
                    lock: e.locked,
                    strength: e.strength,
                    confirmPwInput: false,
                    buttonText: "OK",
                    subText: "Please enter the password for your home WiFi",
                    onSubmit: (ssid, pw) => {
                      console.log("1");
                      this.props.device.conn.wifiSetModeSTA(ssid, pw);
                      console.log("2", this.props.deviceReportedHostname, changeSwimTrackerHostname, this.props);
                      this.props.dispatch(changeSwimTrackerHostname(this.props.deviceReportedHostname));
                      console.log("3");
                    },
                  });
                }}>
              </WifiListElement>)
            )}
          </ScrollView>
        </View>
      )
    }
    else {
      inner = (
        <View style={{ alignItems: "center",  justifyContent:"center", height: "100%" }}>
          <View style={{ paddingBottom: 20 }}><Text style={{ fontSize: 16, color: "#fff"}}>Scanning WiFi networks</Text></View>
          <ActivityIndicator size="large" color="#ffffff" />
        </View>
      )
    }

    return (
      <SetupView
        headerText="WiFi Connection"
        lowerLeftButtonText="My WiFi wasn't found"
        onLowerLeftButtonPress={() => {
          this.props.navigation.navigate("WifiPasswordView", {
            ssid: "swimtracker-E2842S", // todo real id here
            lock: true,
            strength: 4,
            confirmPwInput: true,
            buttonText: "Set Password",
            subText: "Use this option only if you're home WiFi doesn't reach the SwimTracker. The SwimTracker creates its own WiFi with the password you set here.",
            onSubmit: (ssid, pw) => {
              this.props.device.conn.wifiSetModeAP(pw);
            },
          });
        }}
        lowerRightButtonText="Need help?"
      >
        {inner}
      </SetupView>
    )
  }
}


const styles = StyleSheet.create({
  listContainer: {
    height: "75%",
    flex: 1,
  }
});

const mapStateToProps = (state) => {
  return { deviceReportedHostname: state.deviceState.deviceReportedHostname };
};

export default connect(mapStateToProps)(WifiSelectionView);