Refactor to store

app/(tabs)/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar, TouchableOpacity, Image } from 'react-native';
+import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar } from 'react-native';
 // @ts-ignore
 import CalendarPicker from 'react-native-calendar-picker';
 import Ionicons from '@expo/vector-icons/Ionicons';
@@ -12,40 +12,50 @@ import { useToken } from '@/context/AppProvider';
 import { Request } from '@/services/request';
 import List from '@/components/List';
 import { useIsFocused } from '@react-navigation/core';
+import { useSelector } from 'react-redux';
 
 export default function HomeScreen() {
     const colorScheme = useColorScheme() ?? 'light';
     const isFocused = useIsFocused();
+    const session = useSelector((state: any) => state.data.session);
+    const reloadCalendar = useSelector((state: any) => state.data.reloadCalendar);
     const { token, isLoading } = useToken();
     const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting
     const [ dates, setDates ] = useState<any | null>( [] );
     const [ types, setTypes ] = useState<any | null>( [] );
 
+    // Load session
+    useEffect( () => {
+        setName(session.name);
+    }, [session, isFocused]);
+
     useEffect( () => {
         if (token) {
-            Request.post( 'calendar', { token: token } ).then( (response) => {
-                if (response.success) {
-                    // Set name
-                    setName( response.name );
-
-                    // Set dates
-                    let calendarDates: any[] = [];
-                    response.dates.forEach( (date: any) => {
-                        calendarDates.push( {
-                            date: new Date( date.date ),
-                            style: { backgroundColor: date.color },
-                            textStyle: { color: Colors.white },
-                            allowDisabled: true,
-                        } )
-                    } )
-                    setDates( calendarDates );
-
-                    // Set types
-                    setTypes( response.types );
-                }
-            } )
+            loadCalendar();
         }
-    }, [ isFocused ] );
+    }, [ reloadCalendar, isFocused ] );
+
+    // Load calendar data
+    const loadCalendar = () => {
+        Request.post( 'calendar', { token: token } ).then( (response) => {
+            if (response.success) {
+                // Set dates
+                let calendarDates: any[] = [];
+                response.dates.forEach( (date: any) => {
+                    calendarDates.push( {
+                        date: new Date( date.date ),
+                        style: { backgroundColor: date.color },
+                        textStyle: { color: Colors.white },
+                        allowDisabled: true,
+                    } )
+                } )
+                setDates( calendarDates );
+
+                // Set types
+                setTypes( response.types );
+            }
+        } )
+    }
 
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background, }}>

app/(tabs)/map.tsx

@@ -10,13 +10,13 @@ import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import List from '@/components/List';
 import { Request } from '@/services/request';
-import { useToken } from '@/context/AppProvider';
 import { useIsFocused } from '@react-navigation/core';
+import { useSelector } from 'react-redux';
 
 export default function MapScreen() {
     const colorScheme = useColorScheme() ?? 'light';
-    const { token, isLoading } = useToken();
     const isFocused = useIsFocused();
+    const session = useSelector((state: any) => state.data.session);
 
     const [ types, setTypes ] = useState<any>( [] );
     const [ coordinates, setCoordinates ] = useState<any>( [] );
@@ -24,17 +24,8 @@ export default function MapScreen() {
 
     // Load session
     useEffect( () => {
-        if (token) {
-            Request.post( 'sessions/get', { token: token } ).then( (response) => {
-                console.log('session', response);
-                if (response.success) {
-                    const { session } = response;
-
-                    setCoordinates([session.coordinates.longitude, session.coordinates.latitude]);
-                }
-            } )
-        }
-    }, [isFocused]);
+        setCoordinates([session.coordinates.longitude, session.coordinates.latitude]);
+    }, [session, isFocused]);
 
     // Load markers and types
     useEffect( () => {

app/(tabs)/settings.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import { useRouter } from 'expo-router';
 import Ionicons from '@expo/vector-icons/Ionicons';
+import { useSelector } from 'react-redux';
 
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
@@ -19,10 +20,13 @@ import { useToken } from '@/context/AppProvider';
 import { Message } from '@/services/message';
 import { Request } from '@/services/request';
 import CustomModal from '@/components/EditModal';
+import { store } from '@/store/store';
+import { setSession, setReloadCalendar } from '@/store/dataStore';
 
 export default function SettingsScreen() {
     const colorScheme = useColorScheme() ?? 'light';
     const { token, isLoading } = useToken();
+    const session = useSelector((state: any) => state.data.session);
     const router = useRouter();
 
     // Name
@@ -37,22 +41,13 @@ export default function SettingsScreen() {
     const [ addressModalVisible, setAddressModalVisible ] = useState( false );
 
     useEffect( () => {
-        // Load current session
-        if (token) {
-            Request.post( 'sessions/get', { token: token } ).then( (response) => {
-                if (response.success) {
-                    const { session } = response;
-
-                    setSessionData( session );
-                }
-            } )
-        }
-    }, [] );
+        setSessionData( session );
+    }, [session] );
 
     // Set session data in view
     const setSessionData = (session: any) => {
         // Name
-        setName( session.name )
+        setName( session.name );
 
         // Address
         setZipcode( session.address.zipcode );
@@ -61,7 +56,7 @@ export default function SettingsScreen() {
         setCity( session.address.city );
     }
 
-    // Handle
+    // Handle save settings
     const handleSave = (inputValues: Record<string, string>) => {
         let postData: any = { token: token };
 
@@ -69,21 +64,27 @@ export default function SettingsScreen() {
             postData[ 'name' ] = inputValues.name;
         }
 
+        let addressChanged = false;
+
         if (inputValues.zipcode) {
             postData[ 'zipcode' ] = inputValues.zipcode;
+            addressChanged = true;
         }
 
         if (inputValues.houseNumber) {
             postData[ 'houseNumber' ] = inputValues.houseNumber;
+            addressChanged = true;
         }
 
         Request.post( 'sessions/update', postData )
                .then( (response) => {
-                   console.log( 'save', response );
-
                    if (response.success) {
                        setSessionData( response.session );
 
+                       // Save to store
+                       store.dispatch(setSession(response.session))
+                       store.dispatch(setReloadCalendar(addressChanged))
+
                        Message.success( 'Opgeslagen!' )
                    } else {
                        Message.error( response.message );
@@ -91,6 +92,7 @@ export default function SettingsScreen() {
                } );
     };
 
+    // Remove session data and logout
     const logout = () => {
         Alert.alert( 'Uitloggen', 'Weet je het zeker?', [
             {

app/_layout.tsx

@@ -1,17 +1,18 @@
 import { useFonts } from 'expo-font';
-import { Slot, Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
+import { Slot, SplashScreen, Stack } from 'expo-router';
+import { Provider } from 'react-redux';
 import { useEffect } from 'react';
 import 'react-native-reanimated';
-
-import { AppProvider } from '@/context/AppProvider';
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import Toast from 'react-native-toast-message';
 import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown';
+
+import { AppProvider } from '@/context/AppProvider';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { store } from '@/store/store';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
-// SplashScreen.preventAutoHideAsync();
+SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
     const colorScheme = useColorScheme();
@@ -22,7 +23,7 @@ export default function RootLayout() {
 
     useEffect( () => {
         if (loaded) {
-            // SplashScreen.hideAsync();
+            SplashScreen.hideAsync();
         }
     }, [ loaded ] );
 
@@ -31,17 +32,19 @@ export default function RootLayout() {
     }
 
     return (
-        <AppProvider>
-            <AutocompleteDropdownContextProvider>
-                <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-                    <Stack>
-                        <Stack.Screen name="(tabs)" options={{ headerShown: false }}/>
-                        <Stack.Screen name="(onboarding)/start" options={{ headerShown: false }}/>
-                        <Stack.Screen name="index" options={{ headerShown: false }}/>
-                    </Stack>
-                    <Toast/>
-                </ThemeProvider>
-            </AutocompleteDropdownContextProvider>
-        </AppProvider>
+        <Provider store={store}>
+            <AppProvider>
+                <AutocompleteDropdownContextProvider>
+                    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+                        <Stack>
+                            <Stack.Screen name="(tabs)" options={{ headerShown: false }}/>
+                            <Stack.Screen name="(onboarding)/start" options={{ headerShown: false }}/>
+                            <Stack.Screen name="index" options={{ headerShown: false }}/>
+                        </Stack>
+                        <Toast/>
+                    </ThemeProvider>
+                </AutocompleteDropdownContextProvider>
+            </AppProvider>
+        </Provider>
     );
 }

app/index.tsx

@@ -5,6 +5,8 @@ import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
 import { useToken } from '@/context/AppProvider';
 import { Request } from '@/services/request';
+import { store } from '@/store/store';
+import { setSession } from '@/store/dataStore';
 
 
 export default function OnboardStartScreen() {
@@ -21,6 +23,9 @@ export default function OnboardStartScreen() {
         const fetchData = async () => {
             const response = await Request.post( 'sessions/get', { token: token } );
             if (response.success) {
+                // Save to store
+                store.dispatch(setSession(response.session))
+
                 // @ts-ignore
                 router.replace( '/(tabs)' );
             } else {