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";


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: [] };
  }

  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() {
    this.props.device.conn.scanWifiNetworks().then(
      (result) => {
        this.setState({ wifiInfo: this.processDeviceResponse(result) })
      }
    );
  }

  render() {
    let inner;

    if (this.state.wifiInfo.length > 0) {
      inner = (
        <ScrollView>
          {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,
                buttonText: "Set Password",
                subText: "Please enter password for your home WiFi",
              }); }}>
            </WifiListElement>)
          )}
        </ScrollView>)
    }
    else {
      inner = (<ActivityIndicator size="large" color="#ffffff" />

      )
    }

    return (
      <SetupView
        headerText="WiFi Connection"
        lowerLeftButtonText="My WiFi wasn't found"
        lowerRightButtonText="Need help?"
      >
        <View style={styles.listContainer}>
          {inner}
        </View>
      </SetupView>
    )
  }
}


const styles = StyleSheet.create({
  listContainer: {
    height: "75%",
    //backgroundColor: "red",
  }
});

export default WifiSelectionView;