adujstments

components/pages/(tablet_pages)/ViewSwitch.tsx

@@ -1,30 +1,46 @@
-import { SegmentedControl, View } from "react-native-ui-lib";
-import React, { memo, useCallback } from "react";
-import { StyleSheet } from "react-native";
-import { NavigationProp, useNavigationState } from "@react-navigation/native";
+import {SegmentedControl, View} from "react-native-ui-lib";
+import React, {memo, useCallback, useMemo, useRef, useEffect} from "react";
+import {StyleSheet} from "react-native";
+import {NavigationProp, useNavigationState} from "@react-navigation/native";
 
 interface ViewSwitchProps {
     navigation: NavigationProp<any>;
 }
 
-const ViewSwitch = memo(function ViewSwitch({ navigation }: ViewSwitchProps) {
+const ViewSwitch = memo(function ViewSwitch({navigation}: ViewSwitchProps) {
     const currentIndex = useNavigationState((state) => state.index === 6 ? 1 : 0);
+    const isInitialMount = useRef(true);
+    const navigationPending = useRef(false);
+
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+    }, []);
 
     const handleSegmentChange = useCallback(
         (index: number) => {
-            if (index === currentIndex) return;
-            navigation.navigate(index === 0 ? "calendar" : "todos");
+            if (navigationPending.current) return;
+
+            navigationPending.current = true;
+            setTimeout(() => {
+                navigation.navigate(index === 0 ? "calendar" : "todos");
+                navigationPending.current = false;
+            }, 300);
         },
-        [navigation, currentIndex]
+        [navigation]
     );
 
+    const segments = useMemo(() => [
+        {label: "Calendar", segmentLabelStyle: styles.labelStyle},
+        {label: "To Dos", segmentLabelStyle: styles.labelStyle},
+    ], []);
+
     return (
         <View style={styles.container}>
             <SegmentedControl
-                segments={[
-                    { label: "Calendar", segmentLabelStyle: styles.labelStyle },
-                    { label: "To Dos", segmentLabelStyle: styles.labelStyle },
-                ]}
+                segments={segments}
                 containerStyle={styles.segmentContainer}
                 style={styles.segment}
                 backgroundColor="#ebebeb"
@@ -45,7 +61,7 @@ const styles = StyleSheet.create({
         borderRadius: 30,
         backgroundColor: "#ebebeb",
         shadowColor: "#000",
-        shadowOffset: { width: 0, height: 0 },
+        shadowOffset: {width: 0, height: 0},
         shadowOpacity: 0,
         shadowRadius: 0,
         elevation: 0,
@@ -65,4 +81,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default ViewSwitch;
+export default ViewSwitch;

components/pages/calendar/CalendarHeader.tsx

@@ -1,4 +1,4 @@
-import React, {memo, useState, useMemo, useCallback} from "react";
+import React, {memo, useCallback, useMemo, useState} from "react";
 import {StyleSheet} from "react-native";
 import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
 import {MaterialIcons} from "@expo/vector-icons";
@@ -71,29 +71,32 @@ export const CalendarHeader = memo(() => {
     }, [mode]);
 
     const renderMonthPicker = () => (
-        <View row centerV gap-1 flexS>
-            {isTablet && (
-                <Text style={styles.yearText}>
-                    {selectedDate.getFullYear()}
-                </Text>
-            )}
-            <Picker
-                value={months[selectedDate.getMonth()]}
-                placeholder="Select Month"
-                style={styles.monthPicker}
-                mode={PickerModes.SINGLE}
-                onChange={value => handleMonthChange(value as string)}
-                trailingAccessory={<MaterialIcons name="keyboard-arrow-down"/>}
-                topBarProps={{
-                    title: selectedDate.getFullYear().toString(),
-                    titleStyle: styles.yearText,
-                }}
-            >
-                {months.map(month => (
-                    <Picker.Item key={month} label={month} value={month}/>
-                ))}
-            </Picker>
-        </View>
+        <>
+            {isTablet && <View flexG/>}
+            <View row centerV gap-1 flexS>
+                {isTablet && (
+                    <Text style={styles.yearText}>
+                        {selectedDate.getFullYear()}
+                    </Text>
+                )}
+                <Picker
+                    value={months[selectedDate.getMonth()]}
+                    placeholder="Select Month"
+                    style={styles.monthPicker}
+                    mode={PickerModes.SINGLE}
+                    onChange={value => handleMonthChange(value as string)}
+                    trailingAccessory={<MaterialIcons name="keyboard-arrow-down"/>}
+                    topBarProps={{
+                        title: selectedDate.getFullYear().toString(),
+                        titleStyle: styles.yearText,
+                    }}
+                >
+                    {months.map(month => (
+                        <Picker.Item key={month} label={month} value={month}/>
+                    ))}
+                </Picker>
+            </View>
+        </>
     );
 
     return (