WIP: Change notification settings

app/(settings)/notifications.tsx

@@ -0,0 +1,208 @@
+import React, { useEffect, useState } from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, Switch, TouchableOpacity, } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { DateTimePickerAndroid, DateTimePickerEvent } from '@react-native-community/datetimepicker';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { useSelector } from 'react-redux';
+
+import { Colors } from '@/lib/constants/Colors';
+import { useColorScheme } from '@/lib/hooks/useColorScheme';
+import { ThemedView } from '@/lib/components/ThemedView';
+import { ThemedText } from '@/lib/components/ThemedText';
+import { Request } from '@/lib/services/request';
+import { useToken } from '@/lib/context/AppProvider';
+
+export default function CategoryScreen() {
+    const colorScheme = useColorScheme() ?? 'light';
+    const navigation = useNavigation();
+    const { token } = useToken();
+    const session = useSelector( (state: any) => state.data.session );
+
+    const [ isDayBeforeEnabled, setIsDayBeforeEnabled ] = useState( true );
+    const [ dayBefore, setDayBefore ] = useState( '19:30' );
+
+    const [ isSameDayEnabled, setIsSameDayEnabled ] = useState( false );
+    const [ sameDay, setSameDay ] = useState( '08:00' );
+
+    let currentEdit = '';
+
+    // Load item from storage
+    useEffect( () => {
+        // Set page title
+        navigation.setOptions( { title: ( 'Notificaties' ) } );
+    }, [] );
+
+    useEffect( () => {
+        updateSession();
+    }, [isSameDayEnabled, sameDay, isDayBeforeEnabled, dayBefore] );
+
+    // Open time picker
+    const selectTime = (type: string) => {
+        currentEdit = type;
+
+        let time;
+        if (type === 'dayBefore') {
+            time = new Date( `1970-01-01T${dayBefore}` );
+        } else {
+            time = new Date( `1970-01-01T${sameDay}` );
+        }
+
+        if (time) {
+            DateTimePickerAndroid.open( {
+                value: time,
+                onChange,
+                mode: 'time',
+                is24Hour: true,
+            } );
+        }
+    }
+
+    // Set selected time
+    const onChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
+        if (selectedDate) {
+            // Format to time string
+            const hours = selectedDate.getHours().toString().padStart( 2, '0' );
+            const minutes = selectedDate.getMinutes().toString().padStart( 2, '0' );
+            const timeString = `${hours}:${minutes}`;
+
+            if (currentEdit === 'dayBefore') {
+                setDayBefore( timeString );
+            } else {
+                setSameDay( timeString )
+            }
+        }
+    };
+
+    const toggleDate = (type: string) => {
+        if (type === 'dayBefore') {
+            setIsDayBeforeEnabled( !isDayBeforeEnabled )
+        } else {
+            setIsSameDayEnabled( !isSameDayEnabled )
+        }
+    }
+
+    const updateSession = () => {
+        const postData = {
+            token: token,
+            notification_day_before: isDayBeforeEnabled ? dayBefore : 'off',
+            notification_same_day: isSameDayEnabled ? sameDay : 'off',
+        };
+
+        Request.post('sessions/update', postData).then((response) => {
+            console.log('response', response);
+        })
+    }
+
+    return (
+        <SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background }}>
+            <ScrollView style={styles.container}>
+                <ThemedView style={styles.listContainer}>
+                    <ThemedView style={styles.listItem}>
+                        <ThemedView style={styles.listTitle}>
+                            <Switch
+                                trackColor={{ false: '#767577', true: Colors[ colorScheme ].tint }}
+                                thumbColor={'#fff'}
+                                value={isDayBeforeEnabled}
+                                style={styles.listSwitch}
+                                onValueChange={() => toggleDate( 'dayBefore' )}
+                            />
+                            <ThemedText type="defaultSemiBold">Dag van te voren</ThemedText>
+                        </ThemedView>
+
+                        {isDayBeforeEnabled ?
+                            (
+                                <TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'dayBefore' )}>
+                                    <ThemedText style={styles.listEditText}>Om {dayBefore}</ThemedText>
+                                    <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
+                                </TouchableOpacity>
+                            ) :
+                            (
+                                <ThemedText style={styles.listEdit}>
+                                    <ThemedText style={styles.listEditText}>Uit</ThemedText>
+                                </ThemedText>
+                            )
+                        }
+
+
+                    </ThemedView>
+
+                    <ThemedView style={styles.listItem}>
+                        <ThemedView style={styles.listTitle}>
+                            <Switch
+                                trackColor={{ false: '#767577', true: Colors[ colorScheme ].tint }}
+                                thumbColor={'#fff'}
+                                value={isSameDayEnabled}
+                                style={styles.listSwitch}
+                                onValueChange={() => toggleDate( 'sameDay' )}
+                            />
+                            <ThemedText type="defaultSemiBold">Op de ophaaldag</ThemedText>
+                        </ThemedView>
+
+                        {isSameDayEnabled ?
+                            (
+                                <TouchableOpacity style={styles.listEdit} onPress={() => selectTime( 'sameDay' )}>
+                                    <ThemedText style={styles.listEditText}>Om {sameDay}</ThemedText>
+                                    <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
+                                </TouchableOpacity>
+                            ) :
+                            (
+                                <ThemedView style={styles.listEdit}>
+                                    <ThemedText style={styles.listEditText}>Uit</ThemedText>
+                                </ThemedView>
+                            )
+                        }
+
+                    </ThemedView>
+                </ThemedView>
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create( {
+    container: {
+        padding: 25,
+    },
+    htmlContainer: {
+        paddingBottom: 50,
+    },
+    listContainer: {
+        paddingBottom: 10
+    },
+    listItem: {
+        flex: 1,
+        display: 'flex',
+        gap: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingBottom: 20,
+        marginBottom: 20,
+        borderBottomWidth: 1,
+        borderBottomColor: '#f2f2f2',
+    },
+    listIcon: {
+        marginRight: 15,
+    },
+    listTitle: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    listSwitch: {
+        marginRight: 5,
+    },
+    listEdit: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        textAlign: 'right',
+    },
+    listEditText: {
+        fontWeight: '300',
+    },
+    listEditIcon: {
+        marginLeft: 10,
+    },
+} )

app/(tabs)/settings.tsx

@@ -156,7 +156,7 @@ export default function SettingsScreen() {
                                 <ThemedText type="defaultSemiBold">Notificaties</ThemedText>
                             </ThemedView>
 
-                            <TouchableOpacity style={styles.listEdit}>
+                            <TouchableOpacity style={styles.listEdit} onPress={() => router.push( '/(settings)/notifications' )}>
                                 <Ionicons size={18} name="chevron-forward" style={styles.listEditIcon}/>
                             </TouchableOpacity>
                         </ThemedView>

ios/Kliko.xcodeproj/project.pbxproj

@@ -10,12 +10,12 @@
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		22B6D72B353E11E287BB6169 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 27D0BF94BF429299CE930A12 /* PrivacyInfo.xcprivacy */; };
 		3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
 		96905EF65AED1B983A6B3ABC /* libPods-Kliko.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58EEBF8E8E6FB1BC6CAF49B5 /* libPods-Kliko.a */; };
-		A1CD5E69D3C24917ADA1B3E9 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 16D6BC1B36CF40039F343372 /* noop-file.swift */; };
+		9B8F1E3091544C9D858516E2 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8C85BCCA867947AD8AE8CC5A /* noop-file.swift */; };
 		B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */; };
 		BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
+		EE7FE5614258A0CEABD12A06 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = A8322258F32391AF1E89A3D0 /* PrivacyInfo.xcprivacy */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -25,14 +25,14 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Kliko/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Kliko/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Kliko/main.m; sourceTree = "<group>"; };
-		16D6BC1B36CF40039F343372 /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "Kliko/noop-file.swift"; sourceTree = "<group>"; };
-		27D0BF94BF429299CE930A12 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = Kliko/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		58EEBF8E8E6FB1BC6CAF49B5 /* libPods-Kliko.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Kliko.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		6C2E3173556A471DD304B334 /* Pods-Kliko.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Kliko.debug.xcconfig"; path = "Target Support Files/Pods-Kliko/Pods-Kliko.debug.xcconfig"; sourceTree = "<group>"; };
 		7A4D352CD337FB3A3BF06240 /* Pods-Kliko.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Kliko.release.xcconfig"; path = "Target Support Files/Pods-Kliko/Pods-Kliko.release.xcconfig"; sourceTree = "<group>"; };
+		8C85BCCA867947AD8AE8CC5A /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "Kliko/noop-file.swift"; sourceTree = "<group>"; };
+		A8322258F32391AF1E89A3D0 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = Kliko/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = Kliko/SplashScreen.storyboard; sourceTree = "<group>"; };
+		B8788B3992544018A83721BD /* Kliko-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "Kliko-Bridging-Header.h"; path = "Kliko/Kliko-Bridging-Header.h"; sourceTree = "<group>"; };
 		BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
-		CD312160EA4C43D0B145CBCE /* Kliko-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "Kliko-Bridging-Header.h"; path = "Kliko/Kliko-Bridging-Header.h"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-Kliko/ExpoModulesProvider.swift"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -59,9 +59,9 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB71A68108700A75B9A /* main.m */,
 				AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,
-				16D6BC1B36CF40039F343372 /* noop-file.swift */,
+				8C85BCCA867947AD8AE8CC5A /* noop-file.swift */,
-				CD312160EA4C43D0B145CBCE /* Kliko-Bridging-Header.h */,
+				B8788B3992544018A83721BD /* Kliko-Bridging-Header.h */,
-				27D0BF94BF429299CE930A12 /* PrivacyInfo.xcprivacy */,
+				A8322258F32391AF1E89A3D0 /* PrivacyInfo.xcprivacy */,
 			);
 			name = Kliko;
 			sourceTree = "<group>";
@@ -147,13 +147,13 @@
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Kliko" */;
 			buildPhases = (
 				08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,
-				F8C2CAD2187A35B023758E72 /* [Expo] Configure project */,
+				8A939BA192726F352BD2AE06 /* [Expo] Configure project */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,
-				37F35F8AA96A82DC6F39D667 /* [CP] Embed Pods Frameworks */,
+				512974145BE36F96DF860E85 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -203,7 +203,7 @@
 				BB2F792D24A3F905000567C9 /* Expo.plist in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,
-				22B6D72B353E11E287BB6169 /* PrivacyInfo.xcprivacy in Resources */,
+				EE7FE5614258A0CEABD12A06 /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -247,7 +247,7 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		37F35F8AA96A82DC6F39D667 /* [CP] Embed Pods Frameworks */ = {
+		512974145BE36F96DF860E85 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -329,7 +329,7 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Kliko/Pods-Kliko-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		F8C2CAD2187A35B023758E72 /* [Expo] Configure project */ = {
+		8A939BA192726F352BD2AE06 /* [Expo] Configure project */ = {
 			isa = PBXShellScriptBuildPhase;
 			alwaysOutOfDate = 1;
 			buildActionMask = 2147483647;
@@ -358,7 +358,7 @@
 				13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 				B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */,
-				A1CD5E69D3C24917ADA1B3E9 /* noop-file.swift in Sources */,
+				9B8F1E3091544C9D858516E2 /* noop-file.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/Podfile.lock

@@ -1528,6 +1528,8 @@ PODS:
     - React-utils (= 0.74.3)
   - RNCAsyncStorage (1.23.1):
     - React-Core
+  - RNDateTimePicker (8.2.0):
+    - React-Core
   - RNDeviceInfo (11.1.0):
     - React-Core
   - RNGestureHandler (2.16.2):
@@ -1692,6 +1694,7 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - "rnmapbox-maps (from `../node_modules/@rnmapbox/maps`)"
@@ -1868,6 +1871,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNDateTimePicker:
+    :path: "../node_modules/@react-native-community/datetimepicker"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
@@ -1967,6 +1972,7 @@ SPEC CHECKSUMS:
   React-utils: a06061b3887c702235d2dac92dacbd93e1ea079e
   ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4
   RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
+  RNDateTimePicker: 40ffda97d071a98a10fdca4fa97e3977102ccd14
   RNDeviceInfo: b899ce37a403a4dea52b7cb85e16e49c04a5b88e
   RNGestureHandler: 2282cfbcf86c360d29f44ace393203afd5c6cff7
   rnmapbox-maps: fe8c3204993ed3678f2c31b4b6ba55474e0c5899

lib/store/dataStore.tsx

@@ -19,6 +19,10 @@ const dataStore = createSlice( {
                 latitude: '',
                 longitude: '',
             },
+            notifications: {
+                dayBefore: '',
+                sameDay: '',
+            },
         },
         reloadCalendar: true,
         viewCategory: null,

package.json

@@ -17,6 +17,7 @@
     "@expo/vector-icons": "^14.0.2",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/cli-platform-ios": "^14.0.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
     "@react-navigation/native": "^6.0.2",
     "@reduxjs/toolkit": "^2.2.7",
     "@rnmapbox/maps": "^10.1.28",

yarn.lock

@@ -1773,6 +1773,13 @@
     prompts "^2.4.2"
     semver "^7.5.2"
 
+"@react-native-community/datetimepicker@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-8.2.0.tgz#f62ac4fc12bd527fbbe93934e6c1cfbb7ba570f3"
+  integrity sha512-qrUPhiBvKGuG9Y+vOqsc56RPFcHa1SU2qbAMT0hfGkoFIj3FodE0VuPVrEa8fgy7kcD5NQmkZIKgHOBLV0+hWg==
+  dependencies:
+    invariant "^2.2.4"
+
 "@react-native/assets-registry@0.74.85":
   version "0.74.85"
   resolved "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.85.tgz"