cally/app/(auth)/calendar/index.tsx

import React, { useState } from "react";
import { ScrollView, RefreshControl, View } from "react-native";
import { useAtom } from "jotai";
import CalendarPage from "@/components/pages/calendar/CalendarPage";
import { refreshTriggerAtom } from "@/components/pages/calendar/atoms";
import { colorMap } from "@/constants/colorMap";
import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
import { DeviceType } from "expo-device";
import * as Device from "expo-device";
import { useCalSync } from "@/hooks/useCalSync";
import Toast from "react-native-toast-message";

export default function Screen() {
  const [refreshing, setRefreshing] = useState(false);
  const [shouldRefresh, setShouldRefresh] = useAtom(refreshTriggerAtom);

  const {
    isConnectedToGoogle,
    isConnectedToMicrosoft,
    isConnectedToApple,
    resyncAllCalendars,
    isSyncing,
  } = useCalSync();

  const onRefresh = React.useCallback(async () => {
    setRefreshing(true);

    const minimumDelay = new Promise((resolve) => setTimeout(resolve, 1000));

    try {
      if (isConnectedToGoogle || isConnectedToMicrosoft || isConnectedToApple) {
        await Promise.all([resyncAllCalendars(), minimumDelay]);
      } else {
        await minimumDelay;
      }
    } catch (error) {
      console.error("Refresh failed:", error);
    } finally {
      setRefreshing(false);
      setShouldRefresh((prev) => !prev);
    }
  }, [
    resyncAllCalendars,
    isConnectedToGoogle,
    isConnectedToMicrosoft,
    isConnectedToApple,
  ]);

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, zIndex: -2 }}>
        {Device.deviceType === DeviceType.TABLET ? (
          <TabletCalendarPage />
        ) : (
          <CalendarPage />
        )}
      </View>

      <ScrollView
        style={{
          position: "absolute",
          top: 0,
          left: Device.deviceType === DeviceType.TABLET ? "15%" : 0,
          right: Device.deviceType === DeviceType.TABLET ? "25%" : 0,
          height: Device.deviceType === DeviceType.TABLET ? "9%" : "12%",
          width: Device.deviceType === DeviceType.TABLET ? "62%" : "100%",
          zIndex: 100,
          backgroundColor: "transparent",
        }}
        contentContainerStyle={{ flex: 1 }}
        refreshControl={
          <RefreshControl
            colors={[
              colorMap.pink,
              colorMap.green,
              colorMap.orange,
              colorMap.purple,
              colorMap.teal,
            ]}
            tintColor={colorMap.pink}
            progressBackgroundColor={"white"}
            refreshing={refreshing || isSyncing}
            onRefresh={onRefresh}
          />
        }
        bounces={true}
        showsVerticalScrollIndicator={false}
        pointerEvents={refreshing || isSyncing ? "auto" : "none"}
      />
    </View>
  );
}