on/off switch for notifs - no actual notifs yet

app/App.js

@@ -30,8 +30,6 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import I18n from './i18n';
 import AsyncStorage from '@react-native-community/async-storage'
 
-
-
 const Tab = createBottomTabNavigator();
 
 AsyncStorage.getItem('language')
@@ -40,6 +38,15 @@ AsyncStorage.getItem('language')
 	I18n.locale = token;
   });
 
+AsyncStorage.getItem('announcementNotifs')
+	.then((token) => { 
+	console.log("announcementNotifs: " + token);
+	});
+AsyncStorage.getItem('eventNotifs')
+	.then((token) => { 
+	console.log("eventNotifs: " + token);
+	});
+
 class App extends React.Component {
 	state = {
 		loaded: false

app/Images.js

@@ -29,6 +29,8 @@ const Images = {
     announcements:require('./assets/announcements.png'),
     resources:require('./assets/resources.png'),
     polls:require('./assets/polls.png'),
+    notifs:require('./assets/notifs.png'),
+    lang:require('./assets/lang.png'),
 }
 
 export default Images;

app/Languages/en.js

@@ -47,12 +47,17 @@ export default {
     },
     settings: {
         settings: "Settings",
-        language: "Language"
+        language: "Language",
+        notifications: "Notifications",
     },
     language: {
         SelectLanguage: "Select Language",
         English: "English",
         Spanish: "Spanish",
         note: "*App will reload on language change"
+    },
+    notifications: {
+        announcements: "Announcements",
+        events: "Calendar Events"
     }
 }

app/Languages/es.js

@@ -47,12 +47,17 @@ export default {
     },
     settings: {
         settings: "Configuraciones",
-        language: "Idioma"
+        language: "Idioma",
+        notifications: "ESNotifications"
     },
     language: {
         SelectLanguage: "Seleccione el idioma",
         English: "Inglés",
         Spanish: "Español",
         note: "*La aplicación se recargará al cambiar de idioma"
+    },
+    notifications: {
+        announcements: "ESAnnouncements",
+        events: "ESCalendar Events"
     }
 }

app/Notifications.js

@@ -0,0 +1,122 @@
+import React, { Component, useState } from 'react';
+import { 
+    Platform, 
+    StyleSheet, 
+    TouchableOpacity, 
+    Text, 
+    ScrollView, 
+    View, 
+    Switch 
+} from 'react-native';
+import I18n from './i18n';
+import AsyncStorage from '@react-native-community/async-storage'
+
+const STORAGE_KEY_ANNOUNCEMENT = "announcementNotifs"
+const STORAGE_KEY_EVENT = "eventNotifs"
+
+function parseBoolean (val) {
+
+    if (val == "true") {
+        return true;
+    }
+    else if (val == "false") {
+        return false;
+    }
+}
+
+function AnnouncementNotifs() {
+    
+    const [ isEnabled, setIsEnabled ] = React.useState()
+
+    React.useEffect(() => {
+        const checkAsync = async () => {
+            const value = await AsyncStorage.getItem('announcementNotifs')
+            if (value !== undefined || value !== null){
+                
+                setIsEnabled(parseBoolean(value))
+            } else {
+                setIsEnabled(false)
+                AsyncStorage.setItem('announcementNotifs', JSON.stringify('false'))
+            }
+        }
+        checkAsync()
+    }, [])
+    
+    const toggleSwitch = () => {
+        AsyncStorage.getItem('announcementNotifs')
+        .then((token) => {
+            const temp = parseBoolean(token)
+            AsyncStorage.setItem('announcementNotifs', JSON.stringify(!temp))
+            setIsEnabled(!isEnabled)
+        })
+    }
+    return (
+        <View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 20, alignContent: 'center'}}>
+            <Text style = {{fontSize: 22}}>{I18n.t('notifications.announcements')}</Text>
+            <Switch
+                trackColor={{ false: "#767577", true: "red" }}
+                thumbColor= "white"
+                ios_backgroundColor="white"
+                onValueChange={toggleSwitch}
+                value={isEnabled}
+            />    
+        </View>
+    )
+}
+
+function EventNotifs() {
+    const [ isEnabled, setIsEnabled ] = React.useState()
+
+    React.useEffect(() => {
+        const checkAsync = async () => {
+            const value = await AsyncStorage.getItem('eventNotifs')
+            if (value !== undefined || value !== null){
+                
+                setIsEnabled(parseBoolean(value))
+            } else {
+                setIsEnabled(false)
+                AsyncStorage.setItem('eventNotifs', JSON.stringify('false'))
+            }
+        }
+        checkAsync()
+    }, [])
+    
+    const toggleSwitch = () => {
+        AsyncStorage.getItem('eventNotifs')
+        .then((token) => {
+            const temp = parseBoolean(token)
+            AsyncStorage.setItem('eventNotifs', JSON.stringify(!temp))
+            setIsEnabled(!isEnabled)
+        })
+    }
+
+    return (
+        <View style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 20, alignContent: 'center'}}>
+            <Text style = {{fontSize: 22}}>{I18n.t('notifications.events')}</Text>
+            <Switch
+                trackColor={{ false: "#767577", true: "red" }}
+                thumbColor= "white"
+                ios_backgroundColor="white"
+                onValueChange={toggleSwitch}
+                value={isEnabled}
+            />
+        </View>
+    )
+}
+
+class Notifications extends Component {
+    
+
+  render() {
+
+    return (
+
+        <View style = {{flex: 1, backgroundColor: 'white', padding: 20}}>
+            <AnnouncementNotifs />
+            <EventNotifs />
+        </View>
+   );
+  }
+}
+
+export default Notifications

app/Settings.js

@@ -23,11 +23,12 @@ import {
 
 import styles from './styles/morestyles'
 import LinearGradient from 'react-native-linear-gradient'
-
+import Images from './Images'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 import I18n from './i18n';
 import Language from './Language'
+import Notifications from './Notifications'
 
 const Stack = createStackNavigator()
 
@@ -42,10 +43,12 @@ class SettingSwitch extends React.Component {
 			<View style={{flex:1,backgroundColor:'red'}}>
 				<FlatList
 					data={[
-						{name:"Language",key:"language"},
+						{name:"Language",key:"language", img:Images.lang},
+						{name:"Notifications",key:"notifications", img:Images.notifs},
 					]}
 					renderItem={({item})=>
 						<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
+							<Image source = {item.img} style = {{height: 40, width: 40, marginRight: 10, tintColor: '#e3e3e3'}}/>
 							<Text style={styles.moretext}>{I18n.t('settings.' + item.key)}</Text>
 						</TouchableOpacity>
 					}
@@ -69,7 +72,7 @@ class Settings extends React.Component {
 						name="Chooser" 
 						component={SettingSwitch}
 						options={{
-							title:'Settingss',
+							title:'Settings',
 							headerTitleStyle:styles.headerTitle,
 							headerBackground: ()=>background
 						}}
@@ -84,6 +87,16 @@ class Settings extends React.Component {
 							headerBackground: ()=>background
 						}}
 					/>
+					<Stack.Screen 
+						name="notifications" 
+						component={Notifications}
+						options={{
+							title:'Notifications',
+							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerLeft:null,
+							headerBackground: ()=>background
+						}}
+					/>
 				</Stack.Navigator>
 			</NavigationContainer>
 		)