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, }}>