calendar changes, fixes

app/(auth)/calendar/index.tsx

@@ -2,11 +2,9 @@ import React, { useRef, useState } from "react";
 import { LayoutChangeEvent, StyleSheet } from "react-native";
 import { Calendar } from "react-native-big-calendar";
 import {
-  Button,
   Picker,
   PickerModes,
   SegmentedControl,
-  Text,
   View,
 } from "react-native-ui-lib";
 import { MaterialIcons } from "@expo/vector-icons";
@@ -54,7 +52,7 @@ export default function Screen() {
   const handleSegmentChange = (index: number) => {
     const selectedMode = modeMap.get(index);
     if (selectedMode) {
-      setMode(selectedMode as "week" | "month" | "day");
+      setMode(selectedMode as "day" | "week" | "month");
     }
   };
 
@@ -71,81 +69,77 @@ export default function Screen() {
   console.log(events);
 
   return (
-    <View style={{ flex: 1, height: "100%", padding: 10 }}>
-      <HeaderTemplate
-        message={"Let's get your week started!"}
-        isWelcome={true}
-      />
+      <View style={{ flex: 1, height: "100%", padding: 10 }}>
+        <HeaderTemplate
+          message={"Let's get your week started!"}
+          isWelcome={true}
+        />
 
-      <View
-        style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
-        ref={calendarContainerRef}
-        onLayout={onLayout}
-      >
         <View
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
-            paddingHorizontal: 10,
-            paddingVertical: 8,
-            borderRadius: 20,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            backgroundColor: "white",
-            marginBottom: 10,
-          }}
+          style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
+          ref={calendarContainerRef}
+          onLayout={onLayout}
         >
-          <Picker
-            value={months[selectedDate.getMonth()]} // Get the month from the date
-            placeholder={"Select Month"}
-            mode={PickerModes.SINGLE}
-            onChange={(itemValue) => handleMonthChange(itemValue as string)}
-            trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
-          >
-            {months.map((month) => (
-              <Picker.Item key={month} label={month} value={month} />
-            ))}
-          </Picker>
-
-          <View>
-            <SegmentedControl
-              segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
-              backgroundColor="#ececec"
-              inactiveColor="#919191"
-              activeBackgroundColor="#ea156c"
-              activeColor="white"
-              outlineColor="white"
-              outlineWidth={3}
-              style={{ backgroundColor: "green" }}
-              segmentLabelStyle={styles.segmentslblStyle}
-              onChangeIndex={handleSegmentChange}
-              initialIndex={
-                [...modeMap.entries()].find(
-                  ([_, value]) => value === mode
-                )?.[0] || 1
-              }
-            />
-          </View>
-        </View>
-
-        {calendarHeight > 0 && (
-          <Calendar
-          bodyContainerStyle={styles.calHeader}
-            mode={mode}
-            events={events ?? []}
-            height={calendarHeight}
-            activeDate={selectedDate}
-            onSwipeEnd={(newDate) => {
-              console.log(newDate);
-              setSelectedDate(newDate);
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingHorizontal: 10,
+              paddingVertical: 8,
+              borderRadius: 20,
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              backgroundColor: "white",
+              marginBottom: 10,
             }}
-          />
-        )}
-      </View>
+          >
+            <Picker
+              value={months[selectedDate.getMonth()]} // Get the month from the date
+              placeholder={"Select Month"}
+              mode={PickerModes.SINGLE}
+              onChange={(itemValue) => handleMonthChange(itemValue as string)}
+              trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
+            >
+              {months.map((month) => (
+                <Picker.Item key={month} label={month} value={month} />
+              ))}
+            </Picker>
+
+            <View>
+              <SegmentedControl
+                segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
+                backgroundColor="#ececec"
+                inactiveColor="#919191"
+                activeBackgroundColor="#ea156c"
+                activeColor="white"
+                outlineColor="white"
+                outlineWidth={3}
+                style={{ backgroundColor: "green" }}
+                segmentLabelStyle={styles.segmentslblStyle}
+                onChangeIndex={handleSegmentChange}
+                initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
+              />
+            </View>
+          </View>
+
+          {calendarHeight > 0 && (
+            <Calendar
+              bodyContainerStyle={styles.calHeader}
+              mode={mode}
+              events={events ?? []}
+              height={calendarHeight}
+              activeDate={selectedDate}
+              onSwipeEnd={(newDate) => {
+                console.log(newDate);
+                setSelectedDate(newDate);
+              }}
+            />
+          )}
+        </View>
         <CalendarViewSwitch />
-      <AddEventDialog />
-    </View>
+        <AddEventDialog />
+      </View>
   );
 }
 
@@ -154,6 +148,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   calHeader: {
-    borderWidth: 0
+    borderWidth: 0,
   },
 });