App.js

import { useState, useEffect } from 'react';
import { Text, View, TextInput, Pressable, ScrollView } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import AsyncStorage from '@react-native-async-storage/async-storage';
import styles from './styles.js';
import API from './API.js';
import commandList from './commandList.js';

export default function App() {
  const [selectedCommand, setSelectedCommand] = useState(0);
  const [volume, setVolume] = useState(0);
  const [settings, setSettings] = useState({});
  const [routerIpAddress, setRouterIpAddress] = useState(settings.ControlRouterIPAddress);
  const [routerPortNumber, setRouterPortNumber] = useState(settings.ControlRouterPortNumber);
  const [deviceIpAddress, setDeviceIpAddress] = useState(settings.DeviceIPAddress);
  const [devicePortNumber, setDevicePortNumber] = useState(settings.DevicePortNumber);
  const [responseMessage, setResponseMessage] = useState('');
  const [displaySettings, setDisplaySettings] = useState(false);

  const getSettings = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('basic-rotel-a14-settings');
      const retrievedSettings = jsonValue != null ? JSON.parse(jsonValue) : null;
      if (retrievedSettings == null) {
        setResponseMessage(`USING DEFAULT SETTINGS`);
        await storeSettings({
          ControlRouterIPAddress: '192.168.1.243',
          ControlRouterPortNumber: 9590,
          DeviceIPAddress: '192.168.1.174',
          DevicePortNumber: 9590
        });
        setSettings({
          ControlRouterIPAddress: '192.168.1.243',
          ControlRouterPortNumber: 9590,
          DeviceIPAddress: '192.168.1.174',
          DevicePortNumber: 9590
        });
      }
      setSettings(retrievedSettings);
      return retrievedSettings;
    } catch (e) {
      setResponseMessage(`Error reading settings data: ${e}`);
    }
  };

  const storeSettings = async (value) => {
    try {
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem('basic-rotel-a14-settings', jsonValue);
      setResponseMessage(`SETTINGS SAVED`);
    } catch (e) {
      setResponseMessage(`Error reading settings data: ${e}`);
    }
  };

  const controlDevice = async ({ IP, Port, Command }) => await API.post(`http://${settings.ControlRouterIPAddress}:${settings.ControlRouterPortNumber}/api/control`, { DeviceIP: IP, DevicePort: Port, Command: Command });

  const sendCommand = async (command) => {
    const response = await controlDevice({ 
      IP: settings.DeviceIPAddress,
      Port: settings.DevicePortNumber,
      Command: command
    });
    if (response.response.ok) {
      if (command == 'discover?') {
        const discoverResult = response.responseBody.Response.split(' ');
        setResponseMessage(`Device Response: ${ { ip: discoverResult[0].slice(12), port: discoverResult[1].slice(5), mac: discoverResult[2].slice(4) }}`);
      }
      else {
        const result = response.responseBody.Response.split('=');
        setResponseMessage(`Device Response: ${result[1].slice(0, -1).toUpperCase().replace(/0+/g, '0').replace(/([LR])0/g, '$1 ')}`);
      }
    }
    else {
      setResponseMessage(`Device Response: Command Error - ${response.responseBody.Response}`);
    }
    return response;
  };

  const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

  const runPreset = async () => {
    try {
      await controlDevice({ 
        IP: settings.DeviceIPAddress,
        Port: settings.DevicePortNumber,
        Command: 'power_on!'
      });
      await delay(7500);
      await controlDevice({ 
        IP: settings.DeviceIPAddress,
        Port: settings.DevicePortNumber,
        Command: 'aux1!'
      });
      await delay(2500);
      await controlDevice({ 
        IP: settings.DeviceIPAddress,
        Port: settings.DevicePortNumber,
        Command: 'vol_62!'
      });
      setResponseMessage(`Device Response: ON, AUX1, VOL 62`);
    } catch (error) {
      setResponseMessage('ERROR:', error.toUpperCase());
    }
  };

  const openSettings = () => {
    setRouterIpAddress(settings.ControlRouterIPAddress);
    setRouterPortNumber(settings.ControlRouterPortNumber);
    setDeviceIpAddress(settings.DeviceIPAddress);
    setDevicePortNumber(settings.DevicePortNumber);
    setDisplaySettings(true);
  };

  const saveSettings = () => {
    setSettings({
      ControlRouterIPAddress: routerIpAddress,
      ControlRouterPortNumber: routerPortNumber,
      DeviceIPAddress: deviceIpAddress,
      DevicePortNumber: devicePortNumber
    });
    storeSettings({
      ControlRouterIPAddress: routerIpAddress,
      ControlRouterPortNumber: routerPortNumber,
      DeviceIPAddress: deviceIpAddress,
      DevicePortNumber: devicePortNumber
    });
    setDisplaySettings(false);
  };

  const restartControlRouter = async () => {
    try {
      await API.post(`http://${settings.ControlRouterIPAddress}:${settings.ControlRouterPortNumber}/api/restart`, {});
    }
    catch (error) {
    }
    setResponseMessage('SERVER IS RESTARTING...');
    setDisplaySettings(false);
  };

  useEffect(() => {
    const fetchSettings = async () => {
      const retrievedSettings = await getSettings();
      if (retrievedSettings) {
        setRouterIpAddress(retrievedSettings.ControlRouterIPAddress);
        setRouterPortNumber(retrievedSettings.ControlRouterPortNumber);
        setDeviceIpAddress(retrievedSettings.DeviceIPAddress);
        setDevicePortNumber(retrievedSettings.DevicePortNumber);
      }
    };
  
    fetchSettings();
  }, []);
  

  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1 }} style={{ flex: 1 }} keyboardShouldPersistTaps='handled'>
      <View style={styles.container}>
        <Text style={styles.header}>Rotel A14 Control</Text>
        <View style={styles.flexContainer}>
          <Pressable style={styles.button} onPress={() => runPreset()}><Text style={styles.buttonText}>On Preset</Text></Pressable>
          <Pressable style={styles.button} onPress={() => sendCommand('power_off!')}><Text style={styles.buttonText}>Off</Text></Pressable>
          <Pressable style={styles.button} onPress={() => sendCommand('power_on!')}><Text style={styles.buttonText}>On</Text></Pressable>
          <Pressable style={styles.button} onPress={() => sendCommand('mute!')}><Text style={styles.buttonText}>Toggle Mute</Text></Pressable>
        </View>
        <View style={styles.flexContainer}>
          <Text style={styles.itemText}>Command</Text>
          <Picker style={styles.picker} itemStyle={styles.pickerItem} selectedValue={selectedCommand} onValueChange={(itemValue, itemIndex) => setSelectedCommand(itemValue)}>
            <Picker.Item label='Select a Command' value='0' enabled={false} />
            { commandList.map((command) => <Picker.Item key={command.value} label={command.label} value={command.value} />) }
          </Picker>
          { <Pressable style={(selectedCommand !== 0) ? styles.button : styles.hiddenButton} onPress={() => sendCommand(selectedCommand)} disabled={(selectedCommand !== 0) ? false : true}><Text style={styles.buttonText}>{(selectedCommand !== 0) && 'Send Command'}</Text></Pressable> }
        </View>
        <View style={styles.flexContainer}>
          <Text style={styles.itemText}>Volume (0-96)</Text>
          <TextInput style={styles.textInput}
            onChangeText={(input) => setVolume(input)}
            value={volume}
            placeholder='0'
            keyboardType='number-pad'
            inputMode='numeric'
          />
          <Pressable style={styles.button} onPress={() => sendCommand(`vol_${volume}!`)}><Text style={styles.buttonText}>Send Volume</Text></Pressable>
        </View>
        <View style={styles.flexContainer}>
          <Text style={styles.statusMessage}>{responseMessage}</Text>
        </View>
        <View style={styles.flexContainer}>
          { !displaySettings && <Pressable style={styles.button} onPress={() => openSettings()}><Text style={styles.buttonText}>Settings</Text></Pressable> }
        </View>
        { displaySettings && 
          <View>
            <Text style={styles.subheader}>Control Router and Device Settings</Text>
            <View style={styles.settingsItemContainer}>
              <Text style={styles.itemText}>Control Router IP Address</Text> 
              <TextInput
                style={styles.settingsItemTextInput}
                onChangeText={(input) => setRouterIpAddress(input)}
                value={routerIpAddress}
                placeholder='192.168.0.1'
                keyboardType='number-pad'
                inputMode='numeric'
              />
            </View>
            <View style={styles.settingsItemContainer}>
              <Text style={styles.itemText}>Control Router Port Number</Text>
              <TextInput
                style={styles.settingsItemTextInput}
                onChangeText={(input) => setRouterPortNumber(input)}
                value={routerPortNumber}
                placeholder='9590'
                keyboardType='number-pad'
                inputMode='numeric'
              />
            </View>
            <View style={styles.settingsItemContainer}>
              <Text style={styles.itemText}>Device IP Address</Text> 
              <TextInput
                style={styles.settingsItemTextInput}
                onChangeText={(input) => setDeviceIpAddress(input)}
                value={deviceIpAddress}
                placeholder='192.168.0.1'
                keyboardType='number-pad'
                inputMode='numeric'
              />
            </View>
            <View style={styles.settingsItemContainer}>
              <Text style={styles.itemText}>Device Port Number</Text>
              <TextInput
                style={styles.settingsItemTextInput}
                onChangeText={(input) => setDevicePortNumber(input)}
                value={devicePortNumber}
                placeholder='9590'
                keyboardType='number-pad'
                inputMode='numeric'
              />
            </View>
            <View style={styles.flexContainer}>
              <Pressable style={styles.button} onPress={() => setDisplaySettings(false)}><Text style={styles.buttonText}>Cancel</Text></Pressable>
              <Pressable style={styles.button} onPress={() => restartControlRouter()}><Text style={styles.buttonText}>Restart Router</Text></Pressable>
              <Pressable style={styles.button} onPress={() => saveSettings()}><Text style={styles.buttonText}>Save</Text></Pressable>
            </View>
          </View>
        }
      </View>
    </ScrollView>
  );
}