saving config

app/mobile/src/dashboard/Dashboard.jsx

@@ -1,4 +1,4 @@
-import { TextInput, TouchableOpacity, View, Text, Modal, FlatList, KeyboardAvoidingView } from 'react-native';
+import { TextInput, Alert, Switch, TouchableOpacity, View, Text, Modal, FlatList, KeyboardAvoidingView } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import Ionicons from '@expo/vector-icons/AntDesign';
 import { styles } from './Dashboard.styled';
@@ -12,6 +12,20 @@ export function Dashboard(props) {
   const { config, server, token } = location.state;
   const { state, actions } = useDashboard(config, server, token); 
 
+  const saveConfig = async () => {
+    try {
+      await actions.saveConfig();
+      actions.hideEditConfig();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Save Settings',
+        'Please try again.',
+      );
+    }
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
@@ -67,16 +81,58 @@ export function Dashboard(props) {
               <Text style={styles.modalHeaderText}>Settings:</Text>
             </View>
             <View style={styles.modalBody}>
-              <TextInput style={styles.input} value={state.hostname} onChangeText={actions.setHostname}
+              <TextInput style={styles.input} value={state.domain} onChangeText={actions.setDomain}
                   autoCorrect={false} autoCapitalize="none" placeholder="Federated Host" />
-              <TextInput style={styles.input} value={state.storage} onChangeText={actions.setStorage}
+              <TextInput style={styles.input} value={state.storage}
+                  onChangeText={actions.setStorage}
                   keyboardType='numeric' placeholder="Storage Limit (GB) / Account" />
+              <Text style={styles.modalLabel}>Account Key Type:</Text>
+              <View style={styles.keyType}>
+                <TouchableOpacity style={styles.optionLeft} activeOpacity={1}
+                    onPress={() => actions.setKeyType('RSA2048')}>
+                  { state.keyType === 'RSA2048' && (
+                    <View style={styles.selected} />
+                  )}
+                  { state.keyType === 'RSA4096' && (
+                    <View style={styles.radio} />
+                  )}
+                  <Text style={styles.option}>RSA 2048</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.optionRight} activeOpacity={1}
+                    onPress={() => actions.setKeyType('RSA4096')}>
+                  { state.keyType === 'RSA2048' && (
+                    <View style={styles.radio} />
+                  )}
+                  { state.keyType === 'RSA4096' && (
+                    <View style={styles.selected} />
+                  )}
+                  <Text style={styles.option}>RSA 4096</Text>
+                </TouchableOpacity>
+              </View>
+              <TouchableOpacity style={styles.media} activeOpacity={1}
+                  onPress={() => actions.setEnableImage(!state.enableImage)}>
+                <Text style={styles.modalLabel}>Enable Image Queue: </Text>
+                <Switch style={styles.switch} value={state.enableImage}
+                  onValueChange={actions.setEnableImage} trackColor={styles.track}/>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.media} activeOpacity={1}
+                  onPress={() => actions.setEnableAudio(!state.enableAudio)}>
+                <Text style={styles.modalLabel}>Enable Audio Queue: </Text>
+                <Switch style={styles.switch} value={state.enableAudio}
+                  onValueChange={actions.setEnableAudio} trackColor={styles.track}/>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.media} activeOpacity={1}
+                  onPress={() => actions.setEnableVideo(!state.enableVideo)}>
+                <Text style={styles.modalLabel}>Enable Video Queue: </Text>
+                <Switch style={styles.switch} value={state.enableVideo}
+                  onValueChange={actions.setEnableVideo} trackColor={styles.track}/>
+              </TouchableOpacity>
             </View>
             <View style={styles.modalControls}>
               <TouchableOpacity style={styles.cancel} onPress={actions.hideEditConfig}>
                 <Text>Cancel</Text>
               </TouchableOpacity>
-              <TouchableOpacity style={styles.save} onPress={actions.hideEditConfig}>
+              <TouchableOpacity style={styles.save} onPress={saveConfig}>
                 <Text style={styles.saveText}>Save</Text>
               </TouchableOpacity>
             </View>

app/mobile/src/dashboard/Dashboard.styled.js

@@ -142,11 +142,65 @@ export const styles = StyleSheet.create({
   modalBody: {
     padding: 8,
   },
+  modalLabel: {
+    paddingTop: 8,
+    color: Colors.text,
+  },
+  keyType: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: 8,
+  },
+  option: {
+    color: Colors.text,
+  },
+  optionLeft: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  optionRight: {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  radio: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderColor: Colors.primary,
+    borderWidth: 1,
+    marginRight: 8,
+  },
+  selected: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderColor: Colors.primary,
+    borderWidth: 1,
+    marginRight: 8,
+    backgroundColor: Colors.background,
+  },
   input: {
     marginTop: 4,
-    marginBottom: 4,
     backgroundColor: Colors.white,
     padding: 4,
     borderRadius: 4,
+    marginBottom: 16,
+    fontSize: 16,
+    color: Colors.text,
+  },
+  switch: {
+    transform: [{ scaleX: .7 }, { scaleY: .7 }],
+  },
+  track: {
+    false: Colors.grey,
+    true: Colors.background,
+  },
+  media: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 8,
   },
 });

app/mobile/src/dashboard/useDashboard.hook.js

@@ -4,6 +4,7 @@ import { AppContext } from 'context/AppContext';
 import { getNodeStatus } from 'api/getNodeStatus';
 import { setNodeStatus } from 'api/setNodeStatus';
 import { getNodeConfig } from 'api/getNodeConfig';
+import { setNodeConfig } from 'api/setNodeConfig';
 import { getNodeAccounts } from 'api/getNodeAccounts';
 import { getAccountImageUrl } from 'api/getAccountImageUrl';
 
@@ -16,8 +17,12 @@ export function useDashboard(config, server, token) {
     addUser: false,
     accessUser: false,
     accessId: null,
-    hostname: null,
+    domain: null,
     storage: null,
+    keyType: null,
+    enableImage: true,
+    enableAudio: true,
+    enableVideo: true,
   });
 
   const navigate = useNavigate();
@@ -44,6 +49,11 @@ export function useDashboard(config, server, token) {
     updateState({ accounts: accounts.map(setAccountItem) });
   };
 
+  useEffect(() => {
+    const { keyType, accountStorage, domain, enableImage, enableAudio, enableVideo } = config;
+    updateState({ keyType, storage: accountStorage.toString(), domain, enableImage, enableAudio, enableVideo });
+  }, [config]);
+
   useEffect(() => {
     refreshAccounts();
   }, []);
@@ -73,13 +83,29 @@ export function useDashboard(config, server, token) {
     hideAccessUser: () => {
       updateState({ accessUser: false });
     },
-    setHostname: (hostname) => {
+    setDomain: (domain) => {
-      updateState({ hostname });
+      updateState({ domain });
     },
     setStorage: (storage) => {
-      console.log(">>> ", storage, Number(storage.replace(/[^0-9]/g, '')));
       updateState({ storage: Number(storage.replace(/[^0-9]/g, '')) });
     },
+    setEnableImage: (enableImage) => {
+      updateState({ enableImage });
+    },
+    setEnableAudio: (enableAudio) => {
+      updateState({ enableAudio });
+    },
+    setEnableVideo: (enableVideo) => {
+      updateState({ enableVideo });
+    },
+    setKeyType: (keyType) => {
+      updateState({ keyType });
+    },
+    saveConfig: async () => {
+      const { storage, domain, keyType, enableImage, enableAudio, enableVideo } = state;
+      const config = { accountStorage: Number(storage), domain, keyType, enableImage, enableAudio, enableVideo };
+      await setNodeConfig(server, token, config);
+    },
   };
 
   return { state, actions };