changes to calendar and UI

components/pages/calendar/CalendarPage.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useRef, useState } from "react";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
+import { Calendar } from "react-native-big-calendar";
+import {
+  Picker,
+  PickerModes,
+  SegmentedControl,
+  View,
+  Text
+} from "react-native-ui-lib";
+import { MaterialIcons } from "@expo/vector-icons";
+import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
+import { useAuthContext } from "@/contexts/AuthContext";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
+import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
+import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext";
+import { useSettingsContext } from "@/contexts/SettingsContext";
+import EditEventDialog from "./EditEventDialog";
+
+const modeMap = new Map([
+  [0, "day"],
+  [1, "week"],
+  [2, "month"],
+]);
+
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export default function CalendarPage() {
+  const { calendarColor } = useSettingsContext();
+  const [editVisible, setEditVisible] = useState<boolean>(false);
+  const [eventForEdit, setEventForEdit] = useState<CalendarEvent>();
+
+  const styles = StyleSheet.create({
+    segmentslblStyle: {
+      fontSize: 14,
+    },
+    calHeader: {
+      borderWidth: 0,
+    },
+  });
+
+  const { profileData } = useAuthContext();
+  const [isFamilyView, setIsFamilyView] = useState<boolean>(true);
+  const [calendarHeight, setCalendarHeight] = useState(0);
+  const [mode, setMode] = useState<"week" | "month" | "day">("week");
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [selectedNewEventDate, setSelectedNewEndDate] = useState<
+    Date | undefined
+  >(undefined);
+
+  const calendarContainerRef = useRef(null);
+  const { events, familyEvents } = useCalendarContext();
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setCalendarHeight(height);
+  };
+
+  const handleSegmentChange = (index: number) => {
+    const selectedMode = modeMap.get(index);
+    if (selectedMode) {
+      setMode(selectedMode as "day" | "week" | "month");
+    }
+  };
+
+  const handleMonthChange = (month: string) => {
+    // Get the current day and year
+    const currentDay = selectedDate.getDate();
+    const currentYear = selectedDate.getFullYear();
+
+    // Find the new month index
+    const newMonthIndex = months.indexOf(month);
+
+    // Create a new Date object with the selected month, preserving day and year
+    const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
+
+    // Update both selectedDate and activeDate in the Calendar component
+    setSelectedDate(updatedDate);
+  };
+
+  return (
+    <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,
+          }}
+        >
+          <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={isFamilyView ? familyEvents : events}
+            eventCellStyle={{ backgroundColor: isFamilyView ? '#46a80a' : calendarColor }}
+            onPressEvent={(event) => {
+              setEditVisible(true);
+              setEventForEdit(event);
+            }}
+            height={calendarHeight}
+            activeDate={selectedDate}
+            date={selectedDate}
+            onPressCell={setSelectedNewEndDate}
+          />
+        )}
+      </View>
+      <CalendarViewSwitch viewSwitch={setIsFamilyView} />
+      <AddEventDialog />
+      {eventForEdit && (
+        <EditEventDialog
+          isVisible={editVisible}
+          setIsVisible={() => {
+            setEditVisible(!editVisible);
+          }}
+          event={eventForEdit}
+        />
+      )}
+
+      <ManuallyAddEventModal
+        key={`${selectedNewEventDate}`}
+        initialDate={selectedNewEventDate}
+        show={!!selectedNewEventDate}
+        close={() => setSelectedNewEndDate(undefined)}
+      />
+    </View>
+  );
+}