ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 00:24:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into dev

Browse Source
This commit is contained in:
ivic00
2024-11-30 18:02:28 +01:00
parent 01b4fc2e33 dfe7301f6d
commit 92e879c3fc
53 changed files with 3816 additions and 2115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.idea/git_toolbox_blame.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="GitToolBoxBlameSettings">
<option name="version" value="2" />
</component>
</project>

7
.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@ -0,0 +1,7 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
<inspection_tool class="t" enabled="true" level="TEXT ATTRIBUTES" enabled_by_default="true" editorAttributes="CONSIDERATION_ATTRIBUTES" />
</profile>
</component>

6
.idea/jsLinters/eslint.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="EslintConfiguration">
<option name="fix-on-save" value="true" />
</component>
</project>

2
android/app/src/main/res/values/strings.xml
View File

@ -1,5 +1,5 @@
<resources>
<string name="app_name">"Cally "</string>
<string name="app_name">\"Cally \"</string>
<string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
<string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
<string name="expo_system_ui_user_interface_style" translatable="false">light</string>

7
app.json
View File

@ -13,11 +13,14 @@
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": false,
"supportsTablet": true,
"bundleIdentifier": "com.cally.app",
"googleServicesFile": "./ios/GoogleService-Info.plist",
"buildNumber": "74",
"usesAppleSignIn": true
"usesAppleSignIn": true,
"infoPlist": {
"ITSAppUsesNonExemptEncryption": false
}
},
"android": {
"adaptiveIcon": {

614
app/(auth)/_layout.tsx
View File

@ -1,15 +1,9 @@
import React, { useEffect } from "react";
import { Drawer } from "expo-router/drawer";
import { useSignOut } from "@/hooks/firebase/useSignOut";
import { DrawerContentScrollView } from "@react-navigation/drawer";
import {
Button,
ButtonSize,
Text,
TouchableOpacity,
View,
} from "react-native-ui-lib";
import { ImageBackground, StyleSheet } from "react-native";
import React from "react";
import {Drawer} from "expo-router/drawer";
import {useSignOut} from "@/hooks/firebase/useSignOut";
import {DrawerContentScrollView, DrawerNavigationOptions, DrawerNavigationProp} from "@react-navigation/drawer";
import {Button, ButtonSize, Text, TouchableOpacity, View,} from "react-native-ui-lib";
import {ImageBackground, StyleSheet} from "react-native";
import DrawerButton from "@/components/shared/DrawerButton";
import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@ -17,127 +11,165 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
import { useSetAtom } from "jotai";
import {useSetAtom} from "jotai";
import {
isFamilyViewAtom,
settingsPageIndex,
toDosPageIndex,
userSettingsView,
isFamilyViewAtom,
settingsPageIndex,
toDosPageIndex,
userSettingsView,
} from "@/components/pages/calendar/atoms";
import Ionicons from "@expo/vector-icons/Ionicons";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
import {DeviceType} from "expo-device";
import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
import DrawerIcon from "@/assets/svgs/DrawerIcon";
import {RouteProp} from "@react-navigation/core";
type DrawerParamList = {
index: undefined;
calendar: undefined;
todos: undefined;
};
type NavigationProp = DrawerNavigationProp<DrawerParamList>;
interface ViewSwitchProps {
navigation: NavigationProp;
}
interface HeaderRightProps {
routeName: keyof DrawerParamList;
navigation: NavigationProp;
}
const MemoizedViewSwitch = React.memo<ViewSwitchProps>(({navigation}) => (
<View marginR-16>
<ViewSwitch navigation={navigation}/>
</View>
));
const HeaderRight = React.memo<HeaderRightProps>(({routeName, navigation}) => {
const showViewSwitch = ["calendar", "todos", "index"].includes(routeName);
if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
return null;
}
return <MemoizedViewSwitch navigation={navigation}/>;
});
export default function TabLayout() {
const { mutateAsync: signOut } = useSignOut();
const setIsFamilyView = useSetAtom(isFamilyViewAtom);
const setPageIndex = useSetAtom(settingsPageIndex);
const setUserView = useSetAtom(userSettingsView);
const setToDosIndex = useSetAtom(toDosPageIndex);
const {mutateAsync: signOut} = useSignOut();
const setIsFamilyView = useSetAtom(isFamilyViewAtom);
const setPageIndex = useSetAtom(settingsPageIndex);
const setUserView = useSetAtom(userSettingsView);
const setToDosIndex = useSetAtom(toDosPageIndex);
return (
<Drawer
initialRouteName={"index"}
detachInactiveScreens
screenOptions={({ navigation, route }) => ({
const screenOptions = ({
navigation,
route,
}: {
navigation: DrawerNavigationProp<DrawerParamList>;
route: RouteProp<DrawerParamList>;
}): DrawerNavigationOptions => ({
headerShown: true,
headerTitleAlign:
Device.deviceType === DeviceType.TABLET ? "left" : "center",
headerTitleAlign: Device.deviceType === DeviceType.TABLET ? "left" : "center",
headerTitleStyle: {
fontFamily: "Manrope_600SemiBold",
fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
fontFamily: "Manrope_600SemiBold",
fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
},
headerLeft: (props) => (
<TouchableOpacity
onPress={navigation.toggleDrawer}
style={{ marginLeft: 16 }}
>
<DrawerIcon />
</TouchableOpacity>
headerLeft: () => (
<TouchableOpacity
onPress={navigation.toggleDrawer}
style={{marginLeft: 16}}
>
<DrawerIcon/>
</TouchableOpacity>
),
headerRight: () => {
// Only show ViewSwitch on calendar and todos pages
const showViewSwitch = ["calendar", "todos", "index"].includes(
route.name
);
return Device.deviceType === DeviceType.TABLET && showViewSwitch ? (
<View marginR-16>
<ViewSwitch navigation={navigation} />
</View>
) : null;
const showViewSwitch = ["calendar", "todos", "index"].includes(route.name);
if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
return null;
}
return <MemoizedViewSwitch navigation={navigation}/>;
},
drawerStyle: {
width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
backgroundColor: "#f9f8f7",
height: "100%",
width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
backgroundColor: "#f9f8f7",
height: "100%",
},
})}
drawerContent={(props) => {
return (
<DrawerContentScrollView {...props} style={{}}>
<View centerV marginH-30 marginT-20 marginB-20 row>
<ImageBackground
source={require("../../assets/images/splash.png")}
style={{
backgroundColor: "transparent",
height: 51.43,
aspectRatio: 1,
marginRight: 8,
}}
/>
<Text style={styles.title}>Welcome to Cally</Text>
</View>
<View
style={{
flexDirection: "row",
paddingHorizontal: 30,
}}
>
<View style={{ flex: 1, paddingRight: 5 }}>
<DrawerButton
title={"Calendar"}
color="rgb(7, 184, 199)"
bgColor={"rgb(231, 248, 250)"}
pressFunc={() => {
props.navigation.navigate("calendar");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavCalendarIcon />}
/>
<DrawerButton
color="#50be0c"
title={"Groceries"}
bgColor={"#eef9e7"}
pressFunc={() => {
props.navigation.navigate("grocery");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavGroceryIcon />}
/>
<DrawerButton
color="#ea156d"
title={"Feedback"}
bgColor={"#fdedf4"}
pressFunc={() => {
props.navigation.navigate("feedback");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<FeedbackNavIcon />}
/>
</View>
<View style={{ flex: 1, paddingRight: 0 }}>
{/*<DrawerButton
})
return (
<Drawer
initialRouteName={"index"}
detachInactiveScreens
screenOptions={screenOptions}
drawerContent={(props) => {
return (
<DrawerContentScrollView {...props} style={{}}>
<View centerV marginH-30 marginT-20 marginB-20 row>
<ImageBackground
source={require("../../assets/images/splash.png")}
style={{
backgroundColor: "transparent",
height: 51.43,
aspectRatio: 1,
marginRight: 8,
}}
/>
<Text style={styles.title}>Welcome to Cally</Text>
</View>
<View
style={{
flexDirection: "row",
paddingHorizontal: 30,
}}
>
<View style={{flex: 1, paddingRight: 5}}>
<DrawerButton
title={"Calendar"}
color="rgb(7, 184, 199)"
bgColor={"rgb(231, 248, 250)"}
pressFunc={() => {
props.navigation.navigate("calendar");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavCalendarIcon/>}
/>
<DrawerButton
color="#50be0c"
title={"Groceries"}
bgColor={"#eef9e7"}
pressFunc={() => {
props.navigation.navigate("grocery");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavGroceryIcon/>}
/>
<DrawerButton
color="#ea156d"
title={"Feedback"}
bgColor={"#fdedf4"}
pressFunc={() => {
props.navigation.navigate("feedback");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<FeedbackNavIcon/>}
/>
</View>
<View style={{flex: 1, paddingRight: 0}}>
{/*<DrawerButton
color="#fd1775"
title={"My Reminders"}
bgColor={"#ffe8f2"}
@ -150,184 +182,184 @@ export default function TabLayout() {
/>
}
/>*/}
<DrawerButton
color="#8005eb"
title={"To Do's"}
bgColor={"#f3e6fd"}
pressFunc={() => {
props.navigation.navigate("todos");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavToDosIcon />}
/>
<DrawerButton
color="#e0ca03"
title={"Brain Dump"}
bgColor={"#fffacb"}
pressFunc={() => {
props.navigation.navigate("brain_dump");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavBrainDumpIcon />}
/>
<DrawerButton
color="#e0ca03"
title={"Notifications"}
bgColor={"#ffdda1"}
pressFunc={() => {
props.navigation.navigate("notifications");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={
<Ionicons
name="notifications-outline"
size={24}
color={"#ffa200"}
/>
}
/>
</View>
</View>
<Button
onPress={() => {
props.navigation.navigate("settings");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
label={"Manage Settings"}
labelStyle={styles.label}
iconSource={() => (
<View
backgroundColor="#ededed"
width={60}
height={60}
style={{ borderRadius: 50 }}
marginR-10
centerV
centerH
>
<NavSettingsIcon />
</View>
)}
backgroundColor="white"
color="#464039"
paddingV-30
marginH-30
borderRadius={18.55}
style={{ elevation: 0 }}
/>
<DrawerButton
color="#8005eb"
title={"To Do's"}
bgColor={"#f3e6fd"}
pressFunc={() => {
props.navigation.navigate("todos");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavToDosIcon/>}
/>
<DrawerButton
color="#e0ca03"
title={"Brain Dump"}
bgColor={"#fffacb"}
pressFunc={() => {
props.navigation.navigate("brain_dump");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavBrainDumpIcon/>}
/>
<DrawerButton
color="#e0ca03"
title={"Notifications"}
bgColor={"#ffdda1"}
pressFunc={() => {
props.navigation.navigate("notifications");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
icon={
<Ionicons
name="notifications-outline"
size={24}
color={"#ffa200"}
/>
}
/>
</View>
</View>
<Button
onPress={() => {
props.navigation.navigate("settings");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
setIsFamilyView(false);
}}
label={"Manage Settings"}
labelStyle={styles.label}
iconSource={() => (
<View
backgroundColor="#ededed"
width={60}
height={60}
style={{borderRadius: 50}}
marginR-10
centerV
centerH
>
<NavSettingsIcon/>
</View>
)}
backgroundColor="white"
color="#464039"
paddingV-30
marginH-30
borderRadius={18.55}
style={{elevation: 0}}
/>
<Button
size={ButtonSize.large}
marginH-10
marginT-12
paddingV-15
style={{
marginTop: 50,
backgroundColor: "transparent",
borderWidth: 1.3,
borderColor: "#fd1775",
}}
label="Sign out of Cally"
color="#fd1775"
labelStyle={styles.signOut}
onPress={() => signOut()}
<Button
size={ButtonSize.large}
marginH-10
marginT-12
paddingV-15
style={{
marginTop: 50,
backgroundColor: "transparent",
borderWidth: 1.3,
borderColor: "#fd1775",
}}
label="Sign out of Cally"
color="#fd1775"
labelStyle={styles.signOut}
onPress={() => signOut()}
/>
</DrawerContentScrollView>
);
}}
>
<Drawer.Screen
name="index"
options={{
drawerLabel: "Calendar",
title:
Device.deviceType === DeviceType.TABLET
? "Family Calendar"
: "Calendar",
}}
/>
</DrawerContentScrollView>
);
}}
>
<Drawer.Screen
name="index"
options={{
drawerLabel: "Calendar",
title:
Device.deviceType === DeviceType.TABLET
? "Family Calendar"
: "Calendar",
}}
/>
<Drawer.Screen
name="calendar"
options={{
drawerLabel: "Calendar",
title:
Device.deviceType === DeviceType.TABLET
? "Family Calendar"
: "Calendar",
drawerItemStyle: { display: "none" },
}}
/>
<Drawer.Screen
name="brain_dump"
options={{
drawerLabel: "Brain Dump",
title: "Brain Dump",
}}
/>
<Drawer.Screen
name="settings"
options={{
drawerLabel: "Settings",
title: "Settings",
}}
/>
<Drawer.Screen
name="grocery"
options={{
drawerLabel: "Grocery",
title: "Grocery",
}}
/>
<Drawer.Screen
name="reminders"
options={{
drawerLabel: "Reminders",
title: "Reminders",
}}
/>
<Drawer.Screen
name="todos"
options={{
drawerLabel: "To-Do",
title:
Device.deviceType === DeviceType.TABLET
? "Family To Do's"
: "To Do's",
}}
/>
<Drawer.Screen
name="notifications"
options={{
drawerLabel: "Notifications",
title: "Notifications",
}}
/>
<Drawer.Screen
name="feedback"
options={{ drawerLabel: "Feedback", title: "Feedback" }}
/>
</Drawer>
);
<Drawer.Screen
name="calendar"
options={{
drawerLabel: "Calendar",
title:
Device.deviceType === DeviceType.TABLET
? "Family Calendar"
: "Calendar",
drawerItemStyle: {display: "none"},
}}
/>
<Drawer.Screen
name="brain_dump"
options={{
drawerLabel: "Brain Dump",
title: "Brain Dump",
}}
/>
<Drawer.Screen
name="settings"
options={{
drawerLabel: "Settings",
title: "Settings",
}}
/>
<Drawer.Screen
name="grocery"
options={{
drawerLabel: "Grocery",
title: "Grocery",
}}
/>
<Drawer.Screen
name="reminders"
options={{
drawerLabel: "Reminders",
title: "Reminders",
}}
/>
<Drawer.Screen
name="todos"
options={{
drawerLabel: "To-Do",
title:
Device.deviceType === DeviceType.TABLET
? "Family To Do's"
: "To Do's",
}}
/>
<Drawer.Screen
name="notifications"
options={{
drawerLabel: "Notifications",
title: "Notifications",
}}
/>
<Drawer.Screen
name="feedback"
options={{drawerLabel: "Feedback", title: "Feedback"}}
/>
</Drawer>
);
}
const styles = StyleSheet.create({
signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
title: {
fontSize: 26.13,
fontFamily: "Manrope_600SemiBold",
color: "#262627",
},
signOut: {fontFamily: "Poppins_500Medium", fontSize: 15},
label: {fontFamily: "Poppins_400Medium", fontSize: 15},
title: {
fontSize: 26.13,
fontFamily: "Manrope_600SemiBold",
color: "#262627",
},
});

169
app/(auth)/calendar/index.tsx
View File

@ -1,105 +1,86 @@
import React, { useState } from "react";
import { ScrollView, RefreshControl, View } from "react-native";
import { useAtom } from "jotai";
import React from "react";
import {RefreshControl, ScrollView, View} from "react-native";
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";
import {DeviceType} from "expo-device";
import {useCalSync} from "@/hooks/useCalSync";
import {colorMap} from "@/constants/colorMap";
export default function Screen() {
const [refreshing, setRefreshing] = useState(false);
const [shouldRefresh, setShouldRefresh] = useAtom(refreshTriggerAtom);
const isTablet = Device.deviceType === DeviceType.TABLET;
const {resyncAllCalendars, isSyncing} = useCalSync();
const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
const onRefresh = React.useCallback(async () => {
try {
await resyncAllCalendars();
} catch (error) {
console.error("Refresh failed:", error);
}
}, [resyncAllCalendars]);
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: 0 }}>
{Device.deviceType === DeviceType.TABLET ? (
<TabletCalendarPage />
) : (
<CalendarPage />
)}
</View>
<ScrollView
style={{
position: "absolute",
top: 0,
left: isTablet ? "15%" : 0,
height: isTablet ? "9%" : "4%",
width: isTablet ? "62%" : "100%",
zIndex: 50,
backgroundColor: "transparent",
}}
contentContainerStyle={{
flex: 1,
justifyContent: "center",
paddingRight: 200,
}}
refreshControl={
<RefreshControl
const refreshControl = (
<RefreshControl
colors={[
colorMap.pink,
colorMap.green,
colorMap.orange,
colorMap.purple,
colorMap.teal,
colorMap.pink,
colorMap.green,
colorMap.orange,
colorMap.purple,
colorMap.teal,
]}
tintColor={colorMap.pink}
progressBackgroundColor={"white"}
refreshing={refreshing || isSyncing}
progressBackgroundColor="white"
refreshing={isSyncing}
onRefresh={onRefresh}
style={{
position: "absolute",
left: "50%", // Position at screen center
transform: [
// Offset by half its own width
{ translateX: -20 }, // Assuming the refresh control is ~40px wide
],
}}
/>
}
bounces={true}
showsVerticalScrollIndicator={false}
pointerEvents={refreshing || isSyncing ? "auto" : "none"}
/>
</View>
);
}
style={isTablet ? {
position: "absolute",
left: "50%",
transform: [{translateX: -20}],
} : undefined}
/>
);
if (isTablet) {
return (
<View style={{flex: 1}}>
<View style={{flex: 1, zIndex: 0}}>
<TabletCalendarPage/>
</View>
<ScrollView
style={{
position: "absolute",
top: 0,
left: "15%",
height: "9%",
width: "62%",
zIndex: 50,
backgroundColor: "transparent",
}}
contentContainerStyle={{
flex: 1,
justifyContent: "center",
paddingRight: 200,
}}
refreshControl={refreshControl}
bounces={true}
showsVerticalScrollIndicator={false}
pointerEvents={isSyncing ? "auto" : "none"}
/>
</View>
);
}
return (
<ScrollView
style={{flex: 1, height: "100%"}}
contentContainerStyle={{flex: 1, height: "100%"}}
refreshControl={refreshControl}
bounces={true}
showsVerticalScrollIndicator={false}
>
<View style={{flex: 1}}>
<CalendarPage/>
</View>
</ScrollView>
);
}

29
app/(auth)/todos/index.tsx
View File

@ -1,25 +1,16 @@
import TabletChoresPage from "@/components/pages/(tablet_pages)/chores/TabletChoresPage";
import AddChore from "@/components/pages/todos/AddChore";
import ProgressCard from "@/components/pages/todos/ProgressCard";
import ToDoItem from "@/components/pages/todos/ToDoItem";
import ToDosList from "@/components/pages/todos/ToDosList";
import ToDosPage from "@/components/pages/todos/ToDosPage";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { useAuthContext } from "@/contexts/AuthContext";
import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
import { AntDesign } from "@expo/vector-icons";
import { ScrollView } from "react-native-gesture-handler";
import { Button, ButtonSize, View, Text, Constants } from "react-native-ui-lib";
import {ToDosContextProvider} from "@/contexts/ToDosContext";
import * as Device from "expo-device";
export default function Screen() {
return (
<ToDosContextProvider>
{Device.deviceType === Device.DeviceType.TABLET ? (
<TabletChoresPage />
) : (
<ToDosPage />
)}
</ToDosContextProvider>
);
return (
<ToDosContextProvider>
{Device.deviceType === Device.DeviceType.TABLET ? (
<TabletChoresPage/>
) : (
<ToDosPage/>
)}
</ToDosContextProvider>
);
}

135
components/pages/(tablet_pages)/ViewSwitch.tsx
View File

@ -1,89 +1,68 @@
import { SegmentedControl, View } from "react-native-ui-lib";
import React, { memo, useCallback, useEffect, useRef, useState } from "react";
import React, { memo, useCallback } from "react";
import { StyleSheet } from "react-native";
import { NavigationProp, useNavigationState } from "@react-navigation/native";
const ViewSwitch = memo(function ViewSwitch({
navigation,
}: {
navigation: any;
}) {
const isNavigating = useRef(false);
const navigationState = useNavigationState((state) => state);
const [selectedIndex, setSelectedIndex] = useState(
navigationState.index === 6 ? 1 : 0
);
interface ViewSwitchProps {
navigation: NavigationProp<any>;
}
// Sync the selected index with navigation state
useEffect(() => {
const newIndex = navigationState.index === 6 ? 1 : 0;
if (selectedIndex !== newIndex) {
setSelectedIndex(newIndex);
}
isNavigating.current = false;
}, [navigationState.index]);
const ViewSwitch = memo(function ViewSwitch({ navigation }: ViewSwitchProps) {
const currentIndex = useNavigationState((state) => state.index === 6 ? 1 : 0);
const handleSegmentChange = useCallback(
(index: number) => {
if (isNavigating.current) return;
if (index === selectedIndex) return;
const handleSegmentChange = useCallback(
(index: number) => {
if (index === currentIndex) return;
navigation.navigate(index === 0 ? "calendar" : "todos");
},
[navigation, currentIndex]
);
isNavigating.current = true;
setSelectedIndex(index);
// Delay navigation slightly to allow the segment control to update
requestAnimationFrame(() => {
navigation.navigate(index === 0 ? "calendar" : "todos");
});
console.log(selectedIndex)
},
[navigation, selectedIndex]
);
return (
<View style={styles.container}>
<SegmentedControl
segments={[
{ label: "Calendar", segmentLabelStyle: styles.labelStyle },
{ label: "To Do's", segmentLabelStyle: styles.labelStyle },
]}
containerStyle={styles.segmentContainer}
style={styles.segment}
backgroundColor="#ebebeb"
inactiveColor="black"
activeColor="white"
activeBackgroundColor="#ea156c"
outlineColor="white"
outlineWidth={3}
onChangeIndex={handleSegmentChange}
initialIndex={selectedIndex}
/>
</View>
);
return (
<View style={styles.container}>
<SegmentedControl
segments={[
{ label: "Calendar", segmentLabelStyle: styles.labelStyle },
{ label: "To Do's", segmentLabelStyle: styles.labelStyle },
]}
containerStyle={styles.segmentContainer}
style={styles.segment}
backgroundColor="#ebebeb"
inactiveColor="black"
activeColor="white"
activeBackgroundColor="#ea156c"
outlineColor="white"
outlineWidth={3}
onChangeIndex={handleSegmentChange}
initialIndex={currentIndex}
/>
</View>
);
});
export default ViewSwitch;
const styles = StyleSheet.create({
container: {
borderRadius: 30,
backgroundColor: "#ebebeb",
shadowColor: "#000",
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
},
segmentContainer: {
height: 44,
width: 220,
},
segment: {
borderRadius: 50,
borderWidth: 0,
height: 44,
},
labelStyle: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
container: {
borderRadius: 30,
backgroundColor: "#ebebeb",
shadowColor: "#000",
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
},
segmentContainer: {
height: 44,
width: 220,
},
segment: {
borderRadius: 50,
borderWidth: 0,
height: 44,
},
labelStyle: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
});
export default ViewSwitch;

42
components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
View File

@ -1,9 +1,7 @@
import React, { useEffect } from "react";
import { View, Text } from "react-native-ui-lib";
import React, {useEffect} from "react";
import {Text, View} from "react-native-ui-lib";
import * as ScreenOrientation from "expo-screen-orientation";
import TabletContainer from "../tablet_components/TabletContainer";
import ToDosPage from "../../todos/ToDosPage";
import ToDosList from "../../todos/ToDosList";
import SingleUserChoreList from "./SingleUserChoreList";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ImageBackground, StyleSheet } from "react-native";
@ -12,13 +10,13 @@ import { ScrollView } from "react-native-gesture-handler";
import { ProfileType } from "@/contexts/AuthContext";
const TabletChoresPage = () => {
const { data: users } = useGetFamilyMembers();
// Function to lock the screen orientation to landscape
const lockScreenOrientation = async () => {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
);
};
const {data: users} = useGetFamilyMembers();
// Function to lock the screen orientation to landscape
const lockScreenOrientation = async () => {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
);
};
useEffect(() => {
lockScreenOrientation(); // Lock orientation when the component mounts
@ -34,7 +32,7 @@ const TabletChoresPage = () => {
<ScrollView horizontal>
<View row gap-25 padding-25>
{users
?.filter(member => member.userType !== ProfileType.FAMILY_DEVICE)
?.filter((member) => member.userType !== ProfileType.FAMILY_DEVICE)
.map((user, index) => (
<View key={index}>
<View row centerV>
@ -81,16 +79,16 @@ const TabletChoresPage = () => {
};
const styles = StyleSheet.create({
pfp: {
width: 46.74,
aspectRatio: 1,
borderRadius: 13.33,
},
name: {
fontFamily: "Manrope_600SemiBold",
fontSize: 22.43,
color: "#2c2c2c",
},
pfp: {
width: 46.74,
aspectRatio: 1,
borderRadius: 13.33,
},
name: {
fontFamily: "Manrope_600SemiBold",
fontSize: 22.43,
color: "#2c2c2c",
},
});
export default TabletChoresPage;

1
components/pages/brain_dump/DumpList.tsx
View File

@ -3,7 +3,6 @@ import React from "react";
import { useBrainDumpContext } from "@/contexts/DumpContext";
import { FlatList } from "react-native";
import BrainDumpItem from "./DumpItem";
import LinearGradient from "react-native-linear-gradient";
const DumpList = (props: { searchText: string }) => {
const { brainDumps } = useBrainDumpContext();

254
components/pages/calendar/CalendarHeader.tsx
View File

@ -1,131 +1,153 @@
import React, { memo } from "react";
import {
Button,
Picker,
PickerModes,
SegmentedControl,
Text,
View,
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { modeMap, months } from "./constants";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
import { format, isSameDay } from "date-fns";
import { useAuthContext } from "@/contexts/AuthContext";
import {useIsMutating} from "react-query";
import React, {memo} from "react";
import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {months} from "./constants";
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {format, isSameDay} from "date-fns";
import * as Device from "expo-device";
import {Mode} from "react-native-big-calendar";
import { FontAwesome5 } from '@expo/vector-icons';
export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const isTablet = Device.deviceType === Device.DeviceType.TABLET;
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
if (selectedMode) {
setTimeout(() => {
setMode(selectedMode as "day" | "week" | "month");
}, 150);
}
};
const segments = isTablet
? [{label: "D"}, {label: "W"}, {label: "M"}]
: [{label: "D"}, {label: "3D"}, {label: "M"}];
const handleMonthChange = (month: string) => {
const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear();
const newMonthIndex = months.indexOf(month);
const handleSegmentChange = (index: number) => {
let selectedMode: Mode;
if (isTablet) {
selectedMode = ["day", "week", "month"][index] as Mode;
} else {
selectedMode = ["day", "3days", "month"][index] as Mode;
}
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate);
};
if (selectedMode) {
setTimeout(() => {
setMode(selectedMode as "day" | "week" | "month" | "3days");
}, 150);
}
};
const isSelectedDateToday = isSameDay(selectedDate, new Date());
const handleMonthChange = (month: string) => {
const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear();
const newMonthIndex = months.indexOf(month);
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
>
<View row centerV gap-3>
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
{selectedDate.getFullYear()}
</Text>
<Picker
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
}}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month} />
))}
</Picker>
</View>
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate);
};
<View row centerV>
{!isSelectedDateToday && (
<Button
size={"xSmall"}
marginR-0
avoidInnerPadding
const isSelectedDateToday = isSameDay(selectedDate, new Date());
const getInitialIndex = () => {
if (isTablet) {
switch (mode) {
case "day": return 0;
case "week": return 1;
case "month": return 2;
default: return 1;
}
} else {
switch (mode) {
case "day": return 0;
case "3days": return 1;
case "month": return 2;
default: return 1;
}
}
};
return (
<View
style={{
borderRadius: 50,
backgroundColor: "white",
borderWidth: 0.7,
borderColor: "#dadce0",
height: 30,
paddingHorizontal: 10,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
labelStyle={{
fontSize: 12,
color: "black",
fontFamily: "Manrope_500Medium",
}}
label={format(new Date(), "dd/MM/yyyy")}
onPress={() => {
setSelectedDate(new Date());
}}
/>
)}
>
<View row centerV gap-3>
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
{selectedDate.getFullYear()}
</Text>
<Picker
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{fontFamily: "Manrope_500Medium", fontSize: 17, width: 85}}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
}}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
))}
</Picker>
</View>
<View>
<SegmentedControl
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
<View row centerV>
<Button
size={"xSmall"}
marginR-1
avoidInnerPadding
style={styles.todayButton}
onPress={() => setSelectedDate(new Date())}
>
<MaterialIcons name="calendar-today" size={30} color="#5f6368" />
<Text style={styles.todayDate}>{format(new Date(), "d")}</Text>
</Button>
<View>
<SegmentedControl
segments={segments}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={getInitialIndex()}
/>
</View>
</View>
</View>
</View>
</View>
);
);
});
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
});
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
todayButton: {
backgroundColor: "transparent",
borderWidth: 0,
height: 30,
width: 30,
alignItems: 'center',
justifyContent: 'center',
},
todayDate: {
position: 'absolute',
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
color: "#5f6368",
top: '30%',
},
});

1
components/pages/calendar/CalendarPage.tsx
View File

@ -1,6 +1,5 @@
import React from "react";
import { View } from "react-native-ui-lib";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { InnerCalendar } from "@/components/pages/calendar/InnerCalendar";
export default function CalendarPage() {

763
components/pages/calendar/EventCalendar.tsx
View File

@ -1,61 +1,397 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Calendar } from "react-native-big-calendar";
import { ActivityIndicator, ScrollView, StyleSheet, View, ViewStyle } from "react-native";
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import React, {useCallback, useEffect, useMemo, useState} from "react";
import {Calendar} from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, TouchableOpacity, View, ViewStyle} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
isAllDayAtom, isFamilyViewAtom,
isAllDayAtom,
isFamilyViewAtom,
modeAtom,
refreshTriggerAtom,
selectedDateAtom,
selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms";
import { useAuthContext } from "@/contexts/AuthContext";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
import { Text } from "react-native-ui-lib";
import { addDays, compareAsc, isWithinInterval, subDays } from "date-fns";
import {useAuthContext} from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
import {Text} from "react-native-ui-lib";
import {addDays, compareAsc, format, isWithinInterval, subDays} from "date-fns";
import {useCalSync} from "@/hooks/useCalSync";
import {useSyncEvents} from "@/hooks/useSyncOnScroll";
import {colorMap} from "@/constants/colorMap";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import CachedImage from "expo-cached-image";
interface EventCalendarProps {
calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number;
calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number;
}
const getTotalMinutes = () => {
const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
};
const processEventsForSideBySide = (events: CalendarEvent[]) => {
if (!events) return [];
// Group events by day and time slot
const timeSlots: { [key: string]: CalendarEvent[] } = {};
events.forEach(event => {
const startDate = new Date(event.start);
const endDate = new Date(event.end);
// If it's an all-day event, mark it and add it directly
if (event.allDay) {
const key = `${startDate.toISOString().split('T')[0]}-allday`;
if (!timeSlots[key]) timeSlots[key] = [];
timeSlots[key].push({
...event,
isAllDayEvent: true,
width: 1,
xPos: 0
});
return;
}
// Handle multi-day events
if (startDate.toDateString() !== endDate.toDateString()) {
// Create array of dates between start and end
const dates = [];
let currentDate = new Date(startDate);
while (currentDate <= endDate) {
dates.push(new Date(currentDate));
currentDate.setDate(currentDate.getDate() + 1);
}
// Create segments for each day
dates.forEach((date, index) => {
const isFirstDay = index === 0;
const isLastDay = index === dates.length - 1;
let segmentStart, segmentEnd;
if (isFirstDay) {
// First day: use original start time to end of day
segmentStart = new Date(startDate);
segmentEnd = new Date(date);
segmentEnd.setHours(23, 59, 59);
} else if (isLastDay) {
// Last day: use start of day to original end time
segmentStart = new Date(date);
segmentStart.setHours(0, 0, 0);
segmentEnd = new Date(endDate);
} else {
// Middle days: full day
segmentStart = new Date(date);
segmentStart.setHours(0, 0, 0);
segmentEnd = new Date(date);
segmentEnd.setHours(23, 59, 59);
}
const key = `${segmentStart.toISOString().split('T')[0]}-${segmentStart.getHours()}`;
if (!timeSlots[key]) timeSlots[key] = [];
timeSlots[key].push({
...event,
start: segmentStart,
end: segmentEnd,
isMultiDaySegment: true,
isFirstDay,
isLastDay,
originalStart: startDate,
originalEnd: endDate,
allDay: true // Mark multi-day events as all-day events
});
});
} else {
// Regular event
const key = `${startDate.toISOString().split('T')[0]}-${startDate.getHours()}`;
if (!timeSlots[key]) timeSlots[key] = [];
timeSlots[key].push(event);
}
});
// Process all time slots
return Object.values(timeSlots).flatMap(slotEvents => {
// Sort events by start time
slotEvents.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
// Find overlapping events (only for non-all-day events)
return slotEvents.map((event, index) => {
// If it's an all-day or multi-day event, return as is
if (event.allDay || event.isMultiDaySegment) {
return {
...event,
width: 1,
xPos: 0
};
}
// Handle regular events
const overlappingEvents = slotEvents.filter((otherEvent, otherIndex) => {
if (index === otherIndex || otherEvent.allDay || otherEvent.isMultiDaySegment) return false;
const eventStart = new Date(event.start);
const eventEnd = new Date(event.end);
const otherStart = new Date(otherEvent.start);
const otherEnd = new Date(otherEvent.end);
return (eventStart < otherEnd && eventEnd > otherStart);
});
const total = overlappingEvents.length + 1;
const position = index % total;
return {
...event,
width: 1 / total,
xPos: position / total
};
});
});
};
const renderEvent = (event: CalendarEvent & {
width: number;
xPos: number;
isMultiDaySegment?: boolean;
isFirstDay?: boolean;
isLastDay?: boolean;
originalStart?: Date;
originalEnd?: Date;
isAllDayEvent?: boolean;
allDay?: boolean;
eventColor?: string;
attendees?: string[];
creatorId?: string;
pfp?: string;
firstName?: string;
lastName?: string;
notes?: string;
hideHours?: boolean;
}, props: any) => {
const {data: familyMembers} = useGetFamilyMembers();
const attendees = useMemo(() => {
if (!familyMembers || !event.attendees) return event?.creatorId ? [event?.creatorId] : [];
return familyMembers.filter(member => event?.attendees?.includes(member?.uid!));
}, [familyMembers, event.attendees]);
if (event.allDay && !!event.isMultiDaySegment) {
return (
<TouchableOpacity
{...props}
style={[
props.style,
{
width: '100%',
flexDirection: 'row',
alignItems: 'center'
}
]}
>
<Text style={styles.allDayEventText} numberOfLines={1}>
{event.title}
{event.isMultiDaySegment &&
` (${format(new Date(event.start), 'MMM d')} - ${format(new Date(event.end), 'MMM d')})`
}
</Text>
</TouchableOpacity>
);
}
const originalStyle = Array.isArray(props.style) ? props.style[0] : props.style;
console.log('Rendering event:', {
title: event.title,
start: event.start,
end: event.end,
width: event.width,
xPos: event.xPos,
isMultiDaySegment: event.isMultiDaySegment
});
// Ensure we have Date objects
const startDate = event.start instanceof Date ? event.start : new Date(event.start);
const endDate = event.end instanceof Date ? event.end : new Date(event.end);
const hourHeight = props.hourHeight || 60;
const startHour = startDate.getHours();
const startMinutes = startDate.getMinutes();
const topPosition = (startHour + startMinutes / 60) * hourHeight;
const endHour = endDate.getHours();
const endMinutes = endDate.getMinutes();
const duration = (endHour + endMinutes / 60) - (startHour + startMinutes / 60);
const height = duration * hourHeight;
const formatTime = (date: Date) => {
const hours = date.getHours();
const minutes = date.getMinutes();
const ampm = hours >= 12 ? 'pm' : 'am';
const formattedHours = hours % 12 || 12;
const formattedMinutes = minutes.toString().padStart(2, '0');
return `${formattedHours}:${formattedMinutes}${ampm}`;
};
const timeString = event.isMultiDaySegment
? event.isFirstDay
? `${formatTime(startDate)} → 12:00PM`
: event.isLastDay
? `12:00am → ${formatTime(endDate)}`
: 'All day'
: `${formatTime(startDate)} - ${formatTime(endDate)}`;
return (
<TouchableOpacity
{...props}
style={[
originalStyle,
{
position: 'absolute',
width: `${event.width * 100}%`,
left: `${event.xPos * 100}%`,
top: topPosition,
height: height,
zIndex: event.isMultiDaySegment ? 1 : 2,
shadowRadius: 2,
overflow: "hidden"
}
]}
>
<View
style={{
flex: 1,
backgroundColor: event.eventColor,
borderRadius: 4,
padding: 8,
justifyContent: 'space-between'
}}
>
<View>
<Text
style={{
color: 'white',
fontSize: 12,
fontFamily: "PlusJakartaSans_500Medium",
fontWeight: '600',
marginBottom: 4
}}
numberOfLines={1}
>
{event.title}
</Text>
<Text
style={{
color: 'white',
fontSize: 10,
fontFamily: "PlusJakartaSans_500Medium",
opacity: 0.8
}}
>
{timeString}
</Text>
</View>
{/* Attendees Section */}
{attendees?.length > 0 && (
<View style={{flexDirection: 'row', marginTop: 8, height: 27.32}}>
{attendees?.filter(x=>x?.firstName).slice(0, 5).map((attendee, index) => (
<View
key={attendee?.uid}
style={{
position: 'absolute',
left: index * 19,
width: 20,
height: 20,
borderRadius: 50,
borderWidth: 2,
borderColor: '#f2f2f2',
overflow: 'hidden',
backgroundColor: attendee.eventColor || colorMap.pink,
}}
>
{attendee.pfp ? (
<CachedImage
source={{uri: attendee.pfp}}
style={{width: '100%', height: '100%'}}
cacheKey={attendee.pfp}
/>
) : (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{
color: 'white',
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
}}>
{attendee?.firstName?.at(0)}
{attendee?.lastName?.at(0)}
</Text>
</View>
)}
</View>
))}
{attendees.length > 3 && (
<View style={{
position: 'absolute',
left: 3 * 19,
width: 27.32,
height: 27.32,
borderRadius: 50,
borderWidth: 2,
borderColor: '#f2f2f2',
backgroundColor: colorMap.pink,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{
color: 'white',
fontFamily: "Manrope_600SemiBold",
fontSize: 12,
}}>
+{attendees.length - 3}
</Text>
</View>
)}
</View>
)}
</View>
</TouchableOpacity>
);
};
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({ calendarHeight }) => {
const { data: events, isLoading, refetch } = useGetEvents();
const { profileData, user } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const [isFamilyView] = useAtom(isFamilyViewAtom);
({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData, user} = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const [isFamilyView] = useAtom(isFamilyViewAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const shouldRefresh = useAtomValue(refreshTriggerAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const {isSyncing} = useSyncEvents()
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
useCalSync()
const {isSyncing} = useSyncEvents()
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
useCalSync()
const todaysDate = new Date();
const todaysDate = new Date();
const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
// console.log({event});
const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week" || mode === "3days") {
setEditVisible(true);
setEventForEdit(event);
} else {
setMode("day");
@ -65,209 +401,195 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
[setEditVisible, setEventForEdit, mode]
);
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day");
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week" || mode === "3days") {
setSelectedNewEndDate(date);
} else {
setMode("day");
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handlePressDayHeader = useCallback(
(date: Date) => {
if (mode === "day") {
setIsAllDay(true);
setSelectedNewEndDate(date);
setEditVisible(true);
}
if (mode === 'week')
{
setSelectedDate(date)
const handlePressDayHeader = useCallback(
(date: Date) => {
if (mode === "day") {
setIsAllDay(true);
setSelectedNewEndDate(date);
setEditVisible(true);
}
if (mode === 'week' || mode === '3days') {
setSelectedDate(date)
setMode("day")
}
},
[mode, setSelectedNewEndDate]
);
setMode("day")
}
},
[mode, setSelectedNewEndDate]
);
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date);
},
[setSelectedDate]
);
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date);
},
[setSelectedDate]
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => {
let eventColor = event.eventColor;
if (!isFamilyView && (event.attendees?.includes(user?.uid!) || event.creatorId! === user?.uid)) {
eventColor = profileData?.eventColor ?? colorMap.teal;
}
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => {
let eventColor = event.eventColor;
if (!isFamilyView && (event.attendees?.includes(user?.uid) || event.creatorId === user?.uid)) {
eventColor = profileData?.eventColor ?? colorMap.teal;
}
return {backgroundColor: eventColor, fontSize: 14}
},
[]
);
return { backgroundColor: eventColor , fontSize: 14}
},
[]
);
const memoizedWeekStartsOn = useMemo(
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData]
);
const memoizedWeekStartsOn = useMemo(
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData]
);
const isSameDate = useCallback((date1: Date, date2: Date) => {
return (
date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear()
);
}, []);
// console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek,
const dayHeaderColor = useMemo(() => {
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
}, [selectedDate, mode]);
const isSameDate = useCallback((date1: Date, date2: Date) => {
return (
date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear()
);
}, []);
const dateStyle = useMemo(() => {
if (mode === "week" || mode === "3days") return undefined;
return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader
: styles.otherDayHeader;
}, [selectedDate, mode]);
const dayHeaderColor = useMemo(() => {
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
}, [selectedDate, mode]);
const memoizedHeaderContentStyle = useMemo(() => {
if (mode === "day") {
return styles.dayModeHeader;
} else if (mode === "week" || mode === "3days") {
return styles.weekModeHeader;
} else if (mode === "month") {
return styles.monthModeHeader;
} else {
return {};
}
}, [mode]);
const {enrichedEvents, filteredEvents} = useMemo(() => {
const startTime = Date.now();
const dateStyle = useMemo(() => {
if (mode === "week") return undefined;
return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader
: styles.otherDayHeader;
}, [selectedDate, mode]);
const startOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1;
const endOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1;
const memoizedHeaderContentStyle = useMemo(() => {
if (mode === "day") {
return styles.dayModeHeader;
} else if (mode === "week") {
return styles.weekModeHeader;
} else if (mode === "month") {
return styles.monthModeHeader;
} else {
return {};
}
}, [mode]);
const filteredEvents =
events?.filter(
(event) =>
event.start &&
event.end &&
isWithinInterval(event.start, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset),
}) &&
isWithinInterval(event.end, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset),
})
) ?? [];
const { enrichedEvents, filteredEvents } = useMemo(() => {
const startTime = Date.now(); // Start timer
const enrichedEvents = filteredEvents.reduce((acc, event) => {
const dateKey = event.start.toISOString().split("T")[0];
acc[dateKey] = acc[dateKey] || [];
acc[dateKey].push({
...event,
overlapPosition: false,
overlapCount: 0,
});
const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
acc[dateKey].sort((a: { start: any; }, b: { start: any; }) => compareAsc(a.start, b.start));
const filteredEvents =
events?.filter(
(event) =>
event.start &&
event.end &&
isWithinInterval(event.start, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset),
}) &&
isWithinInterval(event.end, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset),
})
) ?? [];
return acc;
}, {} as Record<string, CalendarEvent[]>);
const enrichedEvents = filteredEvents.reduce((acc, event) => {
const dateKey = event.start.toISOString().split("T")[0];
acc[dateKey] = acc[dateKey] || [];
acc[dateKey].push({
...event,
overlapPosition: false,
overlapCount: 0,
});
const endTime = Date.now();
// console.log("memoizedEvents computation time:", endTime - startTime, "ms");
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
return {enrichedEvents, filteredEvents};
}, [events, selectedDate, mode]);
return acc;
}, {} as Record<string, CalendarEvent[]>);
const renderCustomDateForMonth = (date: Date) => {
const circleStyle = useMemo<ViewStyle>(
() => ({
width: 30,
height: 30,
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
}),
[]
);
const endTime = Date.now();
// console.log("memoizedEvents computation time:", endTime - startTime, "ms");
const defaultStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
}),
[circleStyle]
);
return { enrichedEvents, filteredEvents };
}, [events, selectedDate, mode]);
const currentDateStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
backgroundColor: "#4184f2",
}),
[circleStyle]
);
const renderCustomDateForMonth = (date: Date) => {
const circleStyle = useMemo<ViewStyle>(
() => ({
width: 30,
height: 30,
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
}),
[]
);
const renderDate = useCallback(
(date: Date) => {
const isCurrentDate = isSameDate(todaysDate, date);
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
const defaultStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
}),
[circleStyle]
);
return (
<View style={{alignItems: "center"}}>
<View style={appliedStyle}>
<Text style={{color: isCurrentDate ? "white" : "black"}}>
{date.getDate()}
</Text>
</View>
</View>
);
},
[todaysDate, currentDateStyle, defaultStyle]
);
const currentDateStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
backgroundColor: "#4184f2",
}),
[circleStyle]
);
return renderDate(date);
};
const renderDate = useCallback(
(date: Date) => {
const isCurrentDate = isSameDate(todaysDate, date);
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
const processedEvents = useMemo(() => {
return processEventsForSideBySide(filteredEvents);
}, [filteredEvents]);
return (
<View style={{ alignItems: "center" }}>
<View style={appliedStyle}>
<Text style={{ color: isCurrentDate ? "white" : "black" }}>
{date.getDate()}
</Text>
</View>
</View>
);
},
[todaysDate, currentDateStyle, defaultStyle] // dependencies
);
useEffect(() => {
setOffsetMinutes(getTotalMinutes());
}, [events, mode]);
return renderDate(date);
};
useEffect(() => {
setOffsetMinutes(getTotalMinutes());
}, [events, mode]);
useEffect(() => {
refetch()
.then(() => {
console.log('✅ Events refreshed successfully');
})
.catch((error) => {
console.error('❌ Events refresh failed:', error);
});
}, [shouldRefresh, refetch])
if (isLoading) {
return (
<View style={styles.loadingContainer}>
{isSyncing && <Text>Syncing...</Text>}
if (isLoading) {
return (
<View style={styles.loadingContainer}>
{isSyncing && <Text>Syncing...</Text>}
<ActivityIndicator size="large" color="#0000ff"/>
</View>
);
}
// console.log(enrichedEvents, filteredEvents)
return (
<>
return (
<>
{isSyncing && (
<View style={styles.loadingContainer}>
{isSyncing && <Text>Syncing...</Text>}
@ -278,12 +600,13 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
bodyContainerStyle={styles.calHeader}
swipeEnabled
mode={mode}
// enableEnrichedEvents={true}
sortedMonthView
// enrichedEventsByDate={enrichedEvents}
events={filteredEvents}
// renderEvent={renderEvent}
eventCellStyle={memoizedEventCellStyle}
allDayEventCellStyle={memoizedEventCellStyle}
// enableEnrichedEvents={true}
// enrichedEventsByDate={enrichedEvents}
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
@ -318,14 +641,14 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
dayHeaderHighlightColor={"white"}
showAdjacentMonths
headerContainerStyle={mode !== "month" ? {
overflow:"hidden",
overflow: "hidden",
} : {}}
hourStyle={styles.hourStyle}
onPressDateHeader={handlePressDayHeader}
onPressDateHeader={handlePressDayHeader}
ampm
// renderCustomDateForMonth={renderCustomDateForMonth}
/>
<View style={{backgroundColor: 'white', height: 50, width: '100%'}} />
<View style={{backgroundColor: 'white', height: 50, width: '100%'}}/>
</>
);
@ -381,4 +704,16 @@ const styles = StyleSheet.create({
fontSize: 12,
fontFamily: "Manrope_500Medium",
},
eventCell: {
flex: 1,
borderRadius: 4,
padding: 4,
height: '100%',
justifyContent: 'center',
},
eventTitle: {
color: 'white',
fontSize: 12,
fontFamily: "PlusJakartaSans_500Medium",
},
});

61
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -39,6 +39,7 @@ import BinIcon from "@/assets/svgs/BinIcon";
import DeleteEventDialog from "./DeleteEventDialog";
import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
import {addHours, startOfHour, startOfMinute} from "date-fns";
const daysOfWeek = [
{ label: "Monday", value: "monday" },
@ -86,7 +87,6 @@ export const ManuallyAddEventModal = () => {
if(allDayAtom === true) setIsAllDay(true);
}, [allDayAtom])
const [startTime, setStartTime] = useState(() => {
const date = initialDate ?? new Date();
if (
@ -104,27 +104,11 @@ export const ManuallyAddEventModal = () => {
const [endTime, setEndTime] = useState(() => {
if (editEvent?.end) {
const date = new Date(editEvent.end);
date.setSeconds(0, 0);
return date;
return new Date(editEvent.end);
}
const baseDate = editEvent?.end ?? initialDate ?? new Date();
const date = new Date(baseDate);
if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
date.setHours(date.getHours() + 1);
return date;
return addHours(startOfHour(baseDate), 1);
});
const [startDate, setStartDate] = useState(initialDate ?? new Date());
const [endDate, setEndDate] = useState(
@ -161,38 +145,17 @@ export const ManuallyAddEventModal = () => {
setIsPrivate(editEvent?.private || false);
setStartTime(() => {
const date = new Date(initialDate ?? new Date());
const minutes = date.getMinutes();
date.setMinutes(0, 0, 0);
if (minutes >= 30) {
date.setHours(date.getHours() + 1);
}
const date = initialDate ?? new Date();
date.setSeconds(0, 0);
return date;
});
setEndTime(() => {
if (editEvent?.end) {
const date = new Date(editEvent.end);
date.setSeconds(0, 0);
return date;
return startOfMinute(new Date(editEvent.end));
}
const baseDate = editEvent?.end ?? initialDate ?? new Date();
const date = new Date(baseDate);
if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
date.setHours(date.getHours() + 1);
return date;
return addHours(startOfHour(baseDate), 1);
});
setStartDate(initialDate ?? new Date());
@ -260,7 +223,7 @@ export const ManuallyAddEventModal = () => {
startDate: finalStartDate,
endDate: finalEndDate,
allDay: isAllDay,
attendees: selectedAttendees,
attendees: selectedAttendees,
notes: details,
location: location
};
@ -282,10 +245,10 @@ export const ManuallyAddEventModal = () => {
Alert.alert('Alert', 'Title field cannot be empty');
return false;
}
if (!selectedAttendees || selectedAttendees?.length === 0) {
Alert.alert('Alert', 'Cannot have an event without any attendees');
return false;
}
// if (!selectedAttendees || selectedAttendees?.length === 0) {
// Alert.alert('Alert', 'Cannot have an event without any attendees');
// return false;
// }
return true;
}

10
components/pages/calendar/atoms.ts
View File

@ -1,15 +1,21 @@
import { atom } from "jotai";
import * as Device from "expo-device";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
const getDefaultMode = () => {
const isTablet = Device.deviceType === Device.DeviceType.TABLET;
return isTablet ? "week" : "3days";
};
export const editVisibleAtom = atom<boolean>(false);
export const isAllDayAtom = atom<boolean>(false);
export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
export const isFamilyViewAtom = atom<boolean>(false);
export const modeAtom = atom<"week" | "month" | "day">("week");
export const modeAtom = atom<"week" | "month" | "day" | "3days">(getDefaultMode());
export const selectedDateAtom = atom<Date>(new Date());
export const selectedNewEventDateAtom = atom<Date | undefined>(undefined);
export const settingsPageIndex = atom<number>(0);
export const userSettingsView = atom<boolean>(true);
export const toDosPageIndex = atom<number>(0);
export const refreshTriggerAtom = atom<boolean>(false);
export const refreshEnabledAtom = atom<boolean>(true);
export const refreshEnabledAtom = atom<boolean>(true);

5
components/pages/calendar/constants.ts
View File

@ -1,7 +1,8 @@
export const modeMap = new Map([
[0, "day"],
[1, "week"],
[2, "month"],
[1, "3days"],
[2, "week"],
[3, "month"]
]);
export const months = [

3
components/pages/calendar/interfaces.ts
View File

@ -1,8 +1,9 @@
export interface CalendarEvent {
id?: number | string; // Unique identifier for the event
user?: string;
creatorId?: string;
title: string; // Event title or name
description?: string; // Optional description for the event
description?: string; // Optiional description for the event
start: Date; // Start date and time of the event
end: Date; // End date and time of the event
location?: string; // Optional event location

1
components/pages/feedback/AddFeedback.tsx
View File

@ -11,7 +11,6 @@ import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView
import { Dimensions, Platform, StyleSheet } from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { useBrainDumpContext } from "@/contexts/DumpContext";
import KeyboardManager from "react-native-keyboard-manager";
import { useFeedbackContext } from "@/contexts/FeedbackContext";

3
components/pages/feedback/EditFeedback.tsx
View File

@ -14,9 +14,6 @@ import PenIcon from "@/assets/svgs/PenIcon";
import BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import RemindersIcon from "@/assets/svgs/RemindersIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import { IFeedback, useFeedbackContext } from "@/contexts/FeedbackContext";
import FeedbackDialog from "./FeedbackDialog";

1
components/pages/grocery/AddGroceryItem.tsx
View File

@ -2,7 +2,6 @@ import {Dimensions, StyleSheet} from "react-native";
import React from "react";
import {Button, View,} from "react-native-ui-lib";
import {useGroceryContext} from "@/contexts/GroceryContext";
import {FontAwesome6} from "@expo/vector-icons";
import PlusIcon from "@/assets/svgs/PlusIcon";
const { width } = Dimensions.get("screen");

58
components/pages/main/SignInPage.tsx
View File

@ -26,6 +26,20 @@ import { DeviceType } from "expo-device";
if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
const firebaseAuthErrors: { [key: string]: string } = {
'auth/invalid-email': 'Please enter a valid email address',
'auth/user-disabled': 'This account has been disabled. Please contact support',
'auth/user-not-found': 'No account found with this email address',
'auth/wrong-password': 'Incorrect password. Please try again',
'auth/email-already-in-use': 'An account with this email already exists',
'auth/operation-not-allowed': 'This login method is not enabled. Please contact support',
'auth/weak-password': 'Password should be at least 6 characters',
'auth/invalid-credential': 'Invalid login credentials. Please try again',
'auth/network-request-failed': 'Network error. Please check your internet connection',
'auth/too-many-requests': 'Too many failed login attempts. Please try again later',
'auth/invalid-login-credentials': 'Invalid email or password. Please try again',
};
const SignInPage = () => {
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
@ -56,21 +70,25 @@ const SignInPage = () => {
const router = useRouter();
const handleSignIn = async () => {
await signIn({ email, password });
if (!isError) {
Toast.show({
type: "success",
text1: "Login successful!",
});
} else {
Toast.show({
type: "error",
text1: "Error logging in",
text2: `${error}`,
});
}
};
const handleSignIn = async () => {
try {
await signIn({ email, password });
Toast.show({
type: "success",
text1: "Login successful!",
});
} catch (error: any) {
const errorCode = error?.code || 'unknown-error';
const errorMessage = firebaseAuthErrors[errorCode] || 'An unexpected error occurred. Please try again';
Toast.show({
type: "error",
text1: "Error logging in",
text2: errorMessage,
});
}
};
return (
<SafeAreaView style={{ flex: 1 }}>
@ -146,11 +164,11 @@ const SignInPage = () => {
backgroundColor="#fd1775"
/>
{isError && (
<Text center style={{ marginBottom: 20 }}>{`${
error?.toString()?.split("]")?.[1]
}`}</Text>
)}
{isError && (
<Text center style={{ marginBottom: 20 }}>
{firebaseAuthErrors[error?.code] || 'An unexpected error occurred. Please try again'}
</Text>
)}
<View row centerH marginB-5 gap-5>
<Text style={styles.jakartaLight}>Don't have an account?</Text>

191
components/pages/notifications/NotificationsPage.tsx
View File

@ -1,15 +1,123 @@
import {FlatList, StyleSheet} from "react-native";
import React from "react";
import {ActivityIndicator, Animated, FlatList, StyleSheet} from "react-native";
import React, {useCallback, useState} from "react";
import {Card, Text, View} from "react-native-ui-lib";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import {useGetNotifications} from "@/hooks/firebase/useGetNotifications";
import {Notification, useGetNotifications} from "@/hooks/firebase/useGetNotifications";
import {formatDistanceToNow} from "date-fns";
import {useRouter} from "expo-router";
import {useSetAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {Swipeable} from 'react-native-gesture-handler';
import {useDeleteNotification} from "@/hooks/firebase/useDeleteNotification";
const NotificationsPage = () => {
const {data: notifications} = useGetNotifications()
interface NotificationItemProps {
item: Notification;
onDelete: (id: string) => void;
onPress: () => void;
isDeleting: boolean;
}
console.log(notifications?.[0])
const NotificationItem: React.FC<NotificationItemProps> = React.memo(({
item,
onDelete,
onPress,
isDeleting
}) => {
const renderRightActions = useCallback((
progress: Animated.AnimatedInterpolation<number>,
dragX: Animated.AnimatedInterpolation<number>
) => {
const trans = dragX.interpolate({
inputRange: [-100, 0],
outputRange: [0, 100],
extrapolate: 'clamp'
});
return (
<Animated.View
style={[
styles.deleteAction,
{
transform: [{translateX: trans}],
},
]}
>
<Text style={styles.deleteActionText}>Delete</Text>
</Animated.View>
);
}, []);
return (
<Swipeable
renderRightActions={renderRightActions}
onSwipeableRightOpen={() => onDelete(item.id)}
overshootRight={false}
enabled={!isDeleting}
>
<Card
padding-20
marginB-10
onPress={onPress}
activeOpacity={0.6}
enableShadow={false}
style={styles.card}
>
{isDeleting && (
<View style={styles.loadingOverlay}>
<ActivityIndicator color="#000" size="large"/>
</View>
)}
<Text text70>{item.content}</Text>
<View row spread marginT-10>
<Text text90>
{formatDistanceToNow(new Date(item.timestamp), {addSuffix: true})}
</Text>
<Text text90>
{item.timestamp.toLocaleDateString()}
</Text>
</View>
</Card>
</Swipeable>
);
});
const NotificationsPage: React.FC = () => {
const setSelectedDate = useSetAtom(selectedDateAtom);
const setMode = useSetAtom(modeAtom);
const {data: notifications} = useGetNotifications();
const deleteNotification = useDeleteNotification();
const {push} = useRouter();
const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
const goToEventDay = useCallback((notification: Notification) => () => {
if (notification?.date) {
setSelectedDate(notification.date);
setMode("day")
}
push({pathname: "/calendar"});
}, [push, setSelectedDate]);
const handleDelete = useCallback((notificationId: string) => {
setDeletingIds(prev => new Set(prev).add(notificationId));
deleteNotification.mutate(notificationId, {
onSettled: () => {
setDeletingIds(prev => {
const newSet = new Set(prev);
newSet.delete(notificationId);
return newSet;
});
}
});
}, [deleteNotification]);
const renderNotificationItem = useCallback(({item}: { item: Notification }) => (
<NotificationItem
item={item}
onDelete={handleDelete}
onPress={goToEventDay(item)}
isDeleting={deletingIds.has(item.id)}
/>
), [handleDelete, goToEventDay, deletingIds]);
return (
<View flexG height={"100%"}>
@ -18,40 +126,57 @@ const NotificationsPage = () => {
<HeaderTemplate
message={"Welcome to your notifications!"}
isWelcome={false}
children={
<Text
style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
>
See your notifications here.
</Text>
}
/>
>
<Text style={styles.subtitle}>
See your notifications here.
</Text>
</HeaderTemplate>
</View>
<FlatList contentContainerStyle={{paddingBottom: 10, paddingHorizontal: 25}}
data={notifications ?? []}
renderItem={({item}) => <Card padding-20 gap-10 marginB-10>
<Text text70>{item.content}</Text>
<View row spread>
<Text
text90>{formatDistanceToNow(new Date(item.timestamp), {addSuffix: true})}</Text>
<Text text90>{item.timestamp.toLocaleDateString()}</Text>
</View>
</Card>}/>
</View>
<FlatList
contentContainerStyle={styles.listContainer}
data={notifications ?? []}
renderItem={renderNotificationItem}
keyExtractor={(item) => item.id}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
searchField: {
borderWidth: 0.7,
borderColor: "#9b9b9b",
borderRadius: 15,
height: 42,
paddingLeft: 10,
marginVertical: 20,
listContainer: {
paddingBottom: 10,
paddingHorizontal: 25,
},
card: {
width: '100%',
backgroundColor: 'white',
},
subtitle: {
fontFamily: "Manrope_400Regular",
fontSize: 14,
},
deleteAction: {
backgroundColor: '#FF3B30',
justifyContent: 'center',
alignItems: 'flex-end',
paddingRight: 30,
marginBottom: 10,
width: 100,
borderRadius: 10,
},
deleteActionText: {
color: 'white',
fontWeight: '600',
},
loadingOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
},
});
export default NotificationsPage;
export default NotificationsPage

163
components/pages/onboarding/OnboardingFlow.tsx
View File

@ -1,91 +1,88 @@
import { Image } from "react-native";
import React, { useRef } from "react";
import { View, Text, Button, TextField } from "react-native-ui-lib";
import {Image, StyleSheet} from "react-native";
import React, {useRef} from "react";
import {Button, Text, TextField, View} from "react-native-ui-lib";
import Onboarding from "react-native-onboarding-swiper";
import { StyleSheet } from "react-native";
import { useAuthContext } from "@/contexts/AuthContext";
import { useSignUp } from "@/hooks/firebase/useSignUp";
const OnboardingFlow = () => {
const onboardingRef = useRef(null);
const { mutateAsync: signUp } = useSignUp();
return (
<Onboarding
showPagination={false}
ref={onboardingRef}
containerStyles={{ backgroundColor: "#f9f8f7" }}
imageContainerStyles={{
paddingBottom: 0,
paddingTop: 0,
}}
pages={[
{
backgroundColor: "#f9f8f7",
image: (
<Image
source={require("../../../assets/images/splash-clock.png")}
height={10}
width={10}
/>
),
title: <Text text30>Welcome to Cally</Text>,
subtitle: (
<View paddingB-250 marginH-20 spread>
<Text text50R>Lightening Mental Loads, One Family at a Time</Text>
<Button
label="Continue"
style={{ backgroundColor: "#fd1775" }}
onPress={() => onboardingRef?.current?.goToPage(1, true)}
/>
</View>
),
},
{
backgroundColor: "#f9f8f7",
title: <Text>Get started with Cally</Text>,
image: (
<Image
source={require("../../../assets/images/splash-clock.png")}
height={10}
width={10}
/>
),
subtitle: (
<View
style={{
marginBottom: "auto",
width: "100%",
}}
>
<View marginH-30>
{/*<TextField style={styles.textfield} placeholder="First name" />*/}
{/*<TextField style={styles.textfield} placeholder="Last name" />*/}
<TextField style={styles.textfield} placeholder="Email" />
<TextField style={styles.textfield} placeholder="Password" />
<Button
label="Login"
backgroundColor="#ea156c"
onPress={() => {
console.log("Onboarding Done");
}}
/>
</View>
</View>
),
},
]}
/>
);
const OnboardingFlow = () => {
const onboardingRef = useRef(null);
return (
<Onboarding
showPagination={false}
ref={onboardingRef}
containerStyles={{backgroundColor: "#f9f8f7"}}
imageContainerStyles={{
paddingBottom: 0,
paddingTop: 0,
}}
pages={[
{
backgroundColor: "#f9f8f7",
image: (
<Image
source={require("../../../assets/images/splash-clock.png")}
height={10}
width={10}
/>
),
title: <Text text30>Welcome to Cally</Text>,
subtitle: (
<View paddingB-250 marginH-20 spread>
<Text text50R>Lightening Mental Loads, One Family at a Time</Text>
<Button
label="Continue"
style={{backgroundColor: "#fd1775"}}
onPress={() => onboardingRef?.current?.goToPage(1, true)}
/>
</View>
),
},
{
backgroundColor: "#f9f8f7",
title: <Text>Get started with Cally</Text>,
image: (
<Image
source={require("../../../assets/images/splash-clock.png")}
height={10}
width={10}
/>
),
subtitle: (
<View
style={{
marginBottom: "auto",
width: "100%",
}}
>
<View marginH-30>
{/*<TextField style={styles.textfield} placeholder="First name" />*/}
{/*<TextField style={styles.textfield} placeholder="Last name" />*/}
<TextField style={styles.textfield} placeholder="Email"/>
<TextField style={styles.textfield} placeholder="Password"/>
<Button
label="Login"
backgroundColor="#ea156c"
onPress={() => {
console.log("Onboarding Done");
}}
/>
</View>
</View>
),
},
]}
/>
);
};
export default OnboardingFlow;
const styles = StyleSheet.create({
textfield: {
backgroundColor: "white",
marginVertical: 10,
padding: 30,
height: 45,
borderRadius: 50,
},
textfield: {
backgroundColor: "white",
marginVertical: 10,
padding: 30,
height: 45,
borderRadius: 50,
},
});

1
components/pages/settings/user_components/DeleteProfileDialogs.tsx
View File

@ -2,7 +2,6 @@ import React, { useState } from "react";
import { Dialog, Button, Text, View } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather } from "@expo/vector-icons";
import {useDeleteUser} from "@/hooks/firebase/useDeleteUser";
interface ConfirmationDialogProps {
visible: boolean;

2
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -33,8 +33,6 @@ import KeyboardManager, {
} from "react-native-keyboard-manager";
import { ScrollView } from "react-native-gesture-handler";
import { useUploadProfilePicture } from "@/hooks/useUploadProfilePicture";
import { ImagePickerAsset } from "expo-image-picker";
import MenuDotsIcon from "@/assets/svgs/MenuDotsIcon";
import UserOptions from "./UserOptions";
import { colorMap } from "@/constants/colorMap";

38
components/pages/settings/user_settings_views/MyProfile.tsx
View File

@ -270,35 +270,35 @@ const MyProfile = () => {
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
{selectedColor == colorMap.orange && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
{selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
@ -307,35 +307,35 @@ const MyProfile = () => {
<TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)}>
<View style={styles.colorBox} backgroundColor={colorMap.navy}>
{selectedColor == colorMap.navy && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
<View style={styles.colorBox} backgroundColor={colorMap.red}>
{selectedColor == colorMap.red && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.gray)}>
<View style={styles.colorBox} backgroundColor={colorMap.gray}>
{selectedColor == colorMap.gray && (
<AntDesign name="check" size={30} color="white" />
<TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)}>
<View style={styles.colorBox} backgroundColor={colorMap.indigo}>
{selectedColor == colorMap.indigo && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.yellow)}>
<View style={styles.colorBox} backgroundColor={colorMap.yellow}>
{selectedColor == colorMap.yellow && (
<AntDesign name="check" size={30} color="white" />
<TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)}>
<View style={styles.colorBox} backgroundColor={colorMap.emerald}>
{selectedColor == colorMap.emerald && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.sky)}>
<View style={styles.colorBox} backgroundColor={colorMap.sky}>
{selectedColor == colorMap.sky && (
<AntDesign name="check" size={30} color="white" />
<TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)}>
<View style={styles.colorBox} backgroundColor={colorMap.violet}>
{selectedColor == colorMap.violet && (
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>

1
components/pages/settings/user_settings_views/UserMenu.tsx
View File

@ -9,7 +9,6 @@ import {
import QRCode from "react-native-qrcode-svg";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";

110
components/pages/todos/AddChore.tsx
View File

@ -1,68 +1,66 @@
import { Dimensions, StyleSheet } from "react-native";
import React, { useState } from "react";
import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
import { AntDesign } from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import {StyleSheet} from "react-native";
import React, {useState} from "react";
import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
import AddChoreDialog from "./AddChoreDialog";
import PlusIcon from "@/assets/svgs/PlusIcon";
const AddChore = () => {
const [isVisible, setIsVisible] = useState<boolean>(false);
const [isVisible, setIsVisible] = useState<boolean>(false);
return (
<View
row
spread
paddingH-20
style={{
position: "absolute",
bottom: 15,
width: "100%",
}}
>
<View style={styles.buttonContainer}>
<Button
marginB-30
size={ButtonSize.large}
style={styles.button}
onPress={() => setIsVisible(!isVisible)}
return (
<View
row
spread
paddingH-20
style={{
position: "absolute",
bottom: 15,
width: "100%",
}}
>
<PlusIcon />
<Text
white
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
marginL-5
>
Create new to do
</Text>
</Button>
</View>
{isVisible && (
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
)}
</View>
);
<View style={styles.buttonContainer}>
<Button
marginB-30
size={ButtonSize.large}
style={styles.button}
onPress={() => setIsVisible(!isVisible)}
>
<PlusIcon/>
<Text
white
style={{fontFamily: "Manrope_600SemiBold", fontSize: 15}}
marginL-5
>
Create new to do
</Text>
</Button>
</View>
{isVisible && (
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
)}
</View>
);
};
export default AddChore;
const styles = StyleSheet.create({
gradient: {
height: 150,
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
},
buttonContainer: {
width: "100%",
alignItems: "center",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
height: 53.26,
borderRadius: 30,
width: 335,
},
gradient: {
height: 150,
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
},
buttonContainer: {
width: "100%",
alignItems: "center",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
height: 53.26,
borderRadius: 30,
width: 335,
},
});

75
components/pages/todos/ProgressCard.tsx
View File

@ -1,44 +1,43 @@
import { View, Text, Button } from "react-native-ui-lib";
import {Text, View} from "react-native-ui-lib";
import React from "react";
import { Fontisto } from "@expo/vector-icons";
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
import { useToDosContext } from "@/contexts/ToDosContext";
import {ProgressBar} from "react-native-ui-lib/src/components/progressBar";
import {useToDosContext} from "@/contexts/ToDosContext";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
const ProgressCard = ({children}: {children?: React.ReactNode}) => {
const { maxPoints } = useToDosContext();
return (
<View
backgroundColor="white"
marginB-5
padding-15
style={{ borderRadius: 22 }}
>
<View row centerV>
<FireworksOrangeIcon />
<Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
You have earned XX points this week!{" "}
</Text>
</View>
<ProgressBar
progress={50}
progressColor="#ea156c"
style={{
height: 21,
backgroundColor: "#fcf2f6",
marginTop: 15,
marginBottom: 5,
}}
/>
<View row spread>
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
<Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
</View>
<View centerV centerH>
{children}
</View>
</View>
);
const ProgressCard = ({children}: { children?: React.ReactNode }) => {
const {maxPoints} = useToDosContext();
return (
<View
backgroundColor="white"
marginB-5
padding-15
style={{borderRadius: 22}}
>
<View row centerV>
<FireworksOrangeIcon/>
<Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
You have earned XX points this week!{" "}
</Text>
</View>
<ProgressBar
progress={50}
progressColor="#ea156c"
style={{
height: 21,
backgroundColor: "#fcf2f6",
marginTop: 15,
marginBottom: 5,
}}
/>
<View row spread>
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
<Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
</View>
<View centerV centerH>
{children}
</View>
</View>
);
};
export default ProgressCard;

1
components/pages/todos/family-chores/FamilyChart.tsx
View File

@ -1,5 +1,4 @@
import React from "react";
import { View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
const FamilyChart = () => {

1
components/pages/todos/user-chores/UserChart.tsx
View File

@ -1,5 +1,4 @@
import React from "react";
import { View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
const UserChart = () => {

346
components/pages/todos/user-chores/UserChoresProgress.tsx
View File

@ -1,191 +1,181 @@
import {
View,
Text,
ProgressBar,
Button,
ButtonSize,
Modal,
Dialog,
TouchableOpacity,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import {Button, ButtonSize, Dialog, ProgressBar, Text, TouchableOpacity, View,} from "react-native-ui-lib";
import React, {useState} from "react";
import {StyleSheet} from "react-native";
import UserChart from "./UserChart";
import ProgressCard from "../ProgressCard";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { ScrollView } from "react-native-gesture-handler";
import { PanViewDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import {AntDesign, Ionicons} from "@expo/vector-icons";
import {ScrollView} from "react-native-gesture-handler";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
const UserChoresProgress = ({
setPageIndex,
}: {
setPageIndex: (value: number) => void;
setPageIndex,
}: {
setPageIndex: (value: number) => void;
}) => {
const [modalVisible, setModalVisible] = useState<boolean>(false);
return (
<View marginT-20 paddingB-20>
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<View row marginT-4 marginB-10 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to To Do's
</Text>
</View>
</TouchableOpacity>
<View>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 20 }}>
Your To Do's Progress Report
</Text>
</View>
<View row spread marginT-25 marginB-5>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
Daily Goal
</Text>
</View>
<ProgressCard />
<View row spread marginT-15 marginB-8>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
Points Earned This Week
</Text>
</View>
<View style={styles.card} paddingL-10>
<UserChart />
</View>
<View row spread marginT-20 marginB-8 centerV>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
Total Reward Points
</Text>
<Button
size={ButtonSize.small}
label="Spend my points"
color="#50be0c"
backgroundColor="#ebf2e4"
onPress={() => setModalVisible(true)}
labelStyle={{
fontSize: 13,
fontFamily: "Manrope_400Regular",
}}
iconSource={() => (
<AntDesign
name="gift"
size={20}
style={{ marginRight: 5 }}
color="#50be0c"
/>
)}
/>
</View>
<View style={styles.card}>
<View row centerV>
<FireworksOrangeIcon color="#8005eb" />
<Text
marginL-8
text70
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
const [modalVisible, setModalVisible] = useState<boolean>(false);
return (
<View marginT-20 paddingB-20>
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
You have 1200 points saved!
</Text>
</View>
<ProgressBar
progress={80}
progressColor="#ff9900"
style={{
height: 21,
backgroundColor: "#faeedb",
marginTop: 15,
marginBottom: 5,
}}
/>
<View row spread>
<Text style={{ fontSize: 13, color: "#858585" }}>0</Text>
<Text style={{ fontSize: 13, color: "#858585" }}>5000</Text>
</View>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<View row marginT-4 marginB-10 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{paddingBottom: 3}}
/>
<Text
style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
color="#979797"
>
Return to To Do's
</Text>
</View>
</TouchableOpacity>
<View>
<Text style={{fontFamily: "Manrope_700Bold", fontSize: 20}}>
Your To Do's Progress Report
</Text>
</View>
<View row spread marginT-25 marginB-5>
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
Daily Goal
</Text>
</View>
<ProgressCard/>
<View row spread marginT-15 marginB-8>
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
Points Earned This Week
</Text>
</View>
<View style={styles.card} paddingL-10>
<UserChart/>
</View>
<View row spread marginT-20 marginB-8 centerV>
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
Total Reward Points
</Text>
<Button
size={ButtonSize.small}
label="Spend my points"
color="#50be0c"
backgroundColor="#ebf2e4"
onPress={() => setModalVisible(true)}
labelStyle={{
fontSize: 13,
fontFamily: "Manrope_400Regular",
}}
iconSource={() => (
<AntDesign
name="gift"
size={20}
style={{marginRight: 5}}
color="#50be0c"
/>
)}
/>
</View>
<View style={styles.card}>
<View row centerV>
<FireworksOrangeIcon color="#8005eb"/>
<Text
marginL-8
text70
style={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
>
You have 1200 points saved!
</Text>
</View>
<ProgressBar
progress={80}
progressColor="#ff9900"
style={{
height: 21,
backgroundColor: "#faeedb",
marginTop: 15,
marginBottom: 5,
}}
/>
<View row spread>
<Text style={{fontSize: 13, color: "#858585"}}>0</Text>
<Text style={{fontSize: 13, color: "#858585"}}>5000</Text>
</View>
</View>
</ScrollView>
<Dialog
visible={modalVisible}
onDismiss={() => setModalVisible(false)}
children={
<View style={styles.card} paddingH-35 paddingT-35>
<Text text60 center marginB-35 style={{fontFamily: 'Manrope_600SemiBold'}}>
How would you like to spend your points?
</Text>
<Button
label="Skip a Chore Cor a Day - 150 pts"
text70
marginB-15
backgroundColor="#05a8b6"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Extra Screen Time - 100 pts"
text70
marginB-15
backgroundColor="#ea156c"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Movie Night - 50 pts"
text70
marginB-15
backgroundColor="#7305d4"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Ice Cream Treat - 25 pts"
text70
marginB-15
backgroundColor="#e28800"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<TouchableOpacity onPress={() => setModalVisible(false)}>
<Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}}>
Go back to my to dos
</Text>
</TouchableOpacity>
</View>
}
/>
</View>
</ScrollView>
<Dialog
visible={modalVisible}
onDismiss={() => setModalVisible(false)}
children={
<View style={styles.card} paddingH-35 paddingT-35>
<Text text60 center marginB-35 style={{fontFamily: 'Manrope_600SemiBold'}}>
How would you like to spend your points?
</Text>
<Button
label="Skip a Chore Cor a Day - 150 pts"
text70
marginB-15
backgroundColor="#05a8b6"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Extra Screen Time - 100 pts"
text70
marginB-15
backgroundColor="#ea156c"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Movie Night - 50 pts"
text70
marginB-15
backgroundColor="#7305d4"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<Button
label="Ice Cream Treat - 25 pts"
text70
marginB-15
backgroundColor="#e28800"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
/>
<TouchableOpacity onPress={() => setModalVisible(false)}>
<Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}} >
Go back to my to dos
</Text>
</TouchableOpacity>
</View>
}
/>
</View>
);
);
};
const styles = StyleSheet.create({
pfpSmall: {
width: 30,
aspectRatio: 1,
borderRadius: 50,
marginHorizontal: 2,
},
pfpBig: {
width: 50,
aspectRatio: 1,
borderRadius: 50,
},
card: {
backgroundColor: "white",
borderRadius: 20,
padding: 20,
},
bigButtonText:{
fontFamily: 'Manrope_400Regular'
}
pfpSmall: {
width: 30,
aspectRatio: 1,
borderRadius: 50,
marginHorizontal: 2,
},
pfpBig: {
width: 50,
aspectRatio: 1,
borderRadius: 50,
},
card: {
backgroundColor: "white",
borderRadius: 20,
padding: 20,
},
bigButtonText: {
fontFamily: 'Manrope_400Regular'
}
});
export default UserChoresProgress;

5
constants/colorMap.ts
View File

@ -8,5 +8,8 @@ export const colorMap = {
red: '#ff1637',
gray: '#607d8b',
yellow: '#ffc107',
sky: '#2196f3'
sky: '#2196f3',
indigo: '#4F46E5',
emerald: '#059669',
violet: '#7C3AED',
};

22
contexts/AuthContext.tsx
View File

@ -164,19 +164,15 @@ export const AuthContextProvider: FC<{ children: ReactNode }> = ({children}) =>
}
}, [user, ready, redirectOverride]);
// useEffect(() => {
// const handleNotification = async (notification: Notifications.Notification) => {
// const eventId = notification?.request?.content?.data?.eventId;
//
// // if (eventId) {
// queryClient.invalidateQueries(['events']);
// // }
// };
//
// const sub = Notifications.addNotificationReceivedListener(handleNotification);
//
// return () => sub.remove();
// }, []);
useEffect(() => {
const handleNotification = async (notification: Notifications.Notification) => {
queryClient.invalidateQueries(["notifications"]);
};
const sub = Notifications.addNotificationReceivedListener(handleNotification);
return () => sub.remove();
}, []);
if (!ready) {
return null;

2
contexts/DumpContext.tsx
View File

@ -2,9 +2,7 @@ import { useCreateNote } from "@/hooks/firebase/useCreateNote";
import { useDeleteNote } from "@/hooks/firebase/useDeleteNote";
import { useGetNotes } from "@/hooks/firebase/useGetNotes";
import { useUpdateNote } from "@/hooks/firebase/useUpdateNote";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { createContext, useContext, useState } from "react";
import { create } from "react-test-renderer";
export interface IBrainDump {
id: number;

137
contexts/FeedbackContext.tsx
View File

@ -1,87 +1,84 @@
import { useCreateFeedback } from "@/hooks/firebase/useCreateFeedback";
import { useDeleteFeedback } from "@/hooks/firebase/useDeleteFeedback";
import { useGetFeedbacks } from "@/hooks/firebase/useGetFeedbacks";
import { useUpdateFeedback } from "@/hooks/firebase/useUpdateFeedback";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { createContext, useContext, useState } from "react";
import {useCreateFeedback} from "@/hooks/firebase/useCreateFeedback";
import {useDeleteFeedback} from "@/hooks/firebase/useDeleteFeedback";
import {useGetFeedbacks} from "@/hooks/firebase/useGetFeedbacks";
import {useUpdateFeedback} from "@/hooks/firebase/useUpdateFeedback";
import {createContext, useContext, useState} from "react";
export interface IFeedback {
id: number;
title: string;
text: string;
id: number;
title: string;
text: string;
}
interface IFeedbackContext {
feedbacks: IFeedback[] | undefined;
isAddingFeedback: boolean;
setIsAddingFeedback: (value: boolean) => void;
addFeedback: (BrainDump: IFeedback) => void;
updateFeedback: (id: number, changes: Partial<IFeedback>) => void;
deleteFeedback: (id: number) => void;
feedbacks: IFeedback[] | undefined;
isAddingFeedback: boolean;
setIsAddingFeedback: (value: boolean) => void;
addFeedback: (BrainDump: IFeedback) => void;
updateFeedback: (id: number, changes: Partial<IFeedback>) => void;
deleteFeedback: (id: number) => void;
}
const FeedbackContext = createContext<IFeedbackContext | undefined>(undefined);
export const FeedbackProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const {
mutateAsync: createFeedback,
isLoading: isAdding,
isError,
} = useCreateFeedback();
const { data: feedbacks } = useGetFeedbacks();
const { mutate: deleteFeedbackMutate } = useDeleteFeedback();
const { mutate: updateFeedbackMutate } = useUpdateFeedback();
children,
}) => {
const {
mutateAsync: createFeedback,
} = useCreateFeedback();
const {data: feedbacks} = useGetFeedbacks();
const {mutate: deleteFeedbackMutate} = useDeleteFeedback();
const {mutate: updateFeedbackMutate} = useUpdateFeedback();
const [isAddingFeedback, setIsAddingFeedback] = useState<boolean>(false);
const [isAddingFeedback, setIsAddingFeedback] = useState<boolean>(false);
const addFeedback = (Feedback: IFeedback) => {
createFeedback({ title: Feedback.title, text: Feedback.text });
};
const addFeedback = (Feedback: IFeedback) => {
createFeedback({title: Feedback.title, text: Feedback.text});
};
const updateFeedback = (id: number, changes: Partial<IFeedback>) => {
updateFeedbackMutate(
{
id: id,
changes: changes,
},
{
onSuccess: (data) => {
console.log("Feedback updated successfully", data);
},
onError: (error) => {
console.error("Failed to update feedback:", error);
},
}
const updateFeedback = (id: number, changes: Partial<IFeedback>) => {
updateFeedbackMutate(
{
id: id,
changes: changes,
},
{
onSuccess: (data) => {
console.log("Feedback updated successfully", data);
},
onError: (error) => {
console.error("Failed to update feedback:", error);
},
}
);
};
const deleteFeedback = (id: number) => {
deleteFeedbackMutate(id.toString(), {
onSuccess: () => {
console.log("Feedback deleted successfully");
},
onError: (error) => {
console.error("Failed to delete feedback:", error);
},
});
};
return (
<FeedbackContext.Provider
value={{
feedbacks,
isAddingFeedback,
setIsAddingFeedback,
addFeedback,
updateFeedback,
deleteFeedback,
}}
>
{children}
</FeedbackContext.Provider>
);
};
const deleteFeedback = (id: number) => {
deleteFeedbackMutate(id.toString(), {
onSuccess: () => {
console.log("Feedback deleted successfully");
},
onError: (error) => {
console.error("Failed to delete feedback:", error);
},
});
};
return (
<FeedbackContext.Provider
value={{
feedbacks,
isAddingFeedback,
setIsAddingFeedback,
addFeedback,
updateFeedback,
deleteFeedback,
}}
>
{children}
</FeedbackContext.Provider>
);
};
export const useFeedbackContext = () => useContext(FeedbackContext)!;

1
contexts/RemindersContext.tsx
View File

@ -1,4 +1,3 @@
import { View, Text } from "react-native";
import React, { createContext, useContext, useState } from "react";
export interface IReminder {
id: number;

5
eas.json
View File

@ -11,7 +11,10 @@
},
"preview": {
"distribution": "internal",
"channel": "preview"
"channel": "production",
"android": {
"buildType": "apk"
}
},
"production": {
"channel": "production",

1582
firebase/functions/index.js
View File

File diff suppressed because it is too large Load Diff

51
hooks/firebase/types/profileTypes.ts
View File

@ -1,10 +1,29 @@
import {ProfileType} from "@/contexts/AuthContext";
export type ProfileType = 'parent' | 'child';
export interface User {
uid: string;
email: string | null;
export interface CalendarAccount {
accessToken: string;
refreshToken?: string;
resourceId?: string;
email?: string;
expiresAt?: Date;
}
export interface GoogleAccount extends CalendarAccount {
scope?: string;
}
export interface MicrosoftAccount extends CalendarAccount {
subscriptionId?: string;
}
export interface AppleAccount extends CalendarAccount {
identityToken?: string;
}
export type CalendarAccounts = {
[email: string]: GoogleAccount | MicrosoftAccount | AppleAccount;
};
export interface UserProfile {
userType: ProfileType;
firstName: string;
@ -21,23 +40,7 @@ export interface UserProfile {
eventColor?: string | null;
timeZone?: string | null;
firstDayOfWeek?: string | null;
googleAccounts?: Object;
microsoftAccounts?: Object;
appleAccounts?: Object;
}
export interface ParentProfile extends UserProfile {
userType: ProfileType.PARENT;
childrenIds: string[];
}
export interface ChildProfile extends UserProfile {
userType: ProfileType.CHILD;
birthday: Date;
parentId: string;
}
export interface CaregiverProfile extends UserProfile {
userType: ProfileType.CAREGIVER;
contact: string;
}
googleAccounts?: { [email: string]: GoogleAccount };
microsoftAccounts?: { [email: string]: MicrosoftAccount };
appleAccounts?: { [email: string]: AppleAccount };
}

10
hooks/firebase/useCreateEvent.ts
View File

@ -24,6 +24,7 @@ export const useCreateEvent = () => {
.doc(docId)
.set({
...eventData,
attendees: (eventData.attendees?.length ?? 0) === 0 ?? [currentUser?.uid],
creatorId: currentUser?.uid,
familyId: profileData?.familyId
}, {merge: true});
@ -37,15 +38,12 @@ export const useCreateEvent = () => {
} catch (e) {
console.error(e);
}
},
onSuccess: () => {
queryClients.invalidateQueries("events")
}
})
}
export const useCreateEventsFromProvider = () => {
const { user: currentUser } = useAuthContext();
const {user: currentUser} = useAuthContext();
const queryClient = useQueryClient();
return useMutation({
@ -66,14 +64,14 @@ export const useCreateEventsFromProvider = () => {
// Event doesn't exist, so add it
return firestore()
.collection("Events")
.add({ ...eventData, creatorId: currentUser?.uid });
.add({...eventData, creatorId: currentUser?.uid});
} else {
// Event exists, update it
const docId = snapshot.docs[0].id;
return firestore()
.collection("Events")
.doc(docId)
.set({ ...eventData, creatorId: currentUser?.uid }, { merge: true });
.set({...eventData, creatorId: currentUser?.uid}, {merge: true});
}
});

37
hooks/firebase/useDeleteNotification.ts Normal file
View File

@ -0,0 +1,37 @@
import {useMutation, useQueryClient} from "react-query";
import {useAuthContext} from "@/contexts/AuthContext";
import firestore from "@react-native-firebase/firestore";
import {Notification} from "@/hooks/firebase/useGetNotifications";
export const useDeleteNotification = () => {
const queryClient = useQueryClient();
const {user} = useAuthContext();
return useMutation({
mutationFn: async (id: string) => {
await firestore()
.collection("Notifications")
.doc(id)
.delete();
},
onMutate: async (deletedId) => {
await queryClient.cancelQueries(["notifications", user?.uid]);
const previousNotifications = queryClient.getQueryData<Notification[]>(["notifications", user?.uid]);
queryClient.setQueryData<Notification[]>(["notifications", user?.uid], (old) =>
old?.filter((notification) => notification?.id! !== deletedId) ?? []
);
return {previousNotifications};
},
onError: (_err, _deletedId, context) => {
if (context?.previousNotifications) {
queryClient.setQueryData(["notifications", user?.uid], context.previousNotifications);
}
},
onSettled: () => {
queryClient.invalidateQueries(["notifications", user?.uid]);
},
});
};

235
hooks/firebase/useGetEvents.ts
View File

@ -1,80 +1,202 @@
import { useQuery } from "react-query";
import {useQuery, useQueryClient} from "react-query";
import firestore from "@react-native-firebase/firestore";
import { useAuthContext } from "@/contexts/AuthContext";
import { useAtomValue } from "jotai";
import { isFamilyViewAtom } from "@/components/pages/calendar/atoms";
import { colorMap } from "@/constants/colorMap";
import {useAuthContext} from "@/contexts/AuthContext";
import {useAtomValue} from "jotai";
import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
import {colorMap} from "@/constants/colorMap";
import {uuidv4} from "@firebase/util";
import {useEffect} from "react";
const createEventHash = (event: any): string => {
const str = `${event.startDate?.seconds || ''}-${event.endDate?.seconds || ''}-${
event.title || ''
}-${event.location || ''}-${event.allDay ? 'true' : 'false'}`;
let hash = 0;
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash;
}
return hash.toString(36);
};
export const useGetEvents = () => {
const { user, profileData } = useAuthContext();
const {user, profileData} = useAuthContext();
const isFamilyView = useAtomValue(isFamilyViewAtom);
const queryClient = useQueryClient();
useEffect(() => {
if (!profileData?.familyId) {
console.log('[SYNC] No family ID available, skipping listener setup');
return;
}
console.log('[SYNC] Setting up sync listener', {
familyId: profileData.familyId,
userId: user?.uid,
isFamilyView
});
const unsubscribe = firestore()
.collection('Households')
.where("familyId", "==", profileData.familyId)
.onSnapshot((snapshot) => {
console.log('[SYNC] Snapshot received', {
empty: snapshot.empty,
size: snapshot.size,
changes: snapshot.docChanges().length
});
snapshot.docChanges().forEach((change) => {
console.log('[SYNC] Processing change', {
type: change.type,
docId: change.doc.id,
newData: change.doc.data()
});
if (change.type === 'modified') {
const data = change.doc.data();
console.log('[SYNC] Modified document data', {
hasLastSyncTimestamp: !!data?.lastSyncTimestamp,
hasLastUpdateTimestamp: !!data?.lastUpdateTimestamp,
allFields: Object.keys(data || {})
});
if (data?.lastSyncTimestamp) {
console.log('[SYNC] Sync timestamp change detected', {
timestamp: data.lastSyncTimestamp.toDate(),
householdId: change.doc.id,
queryKey: ["events", user?.uid, isFamilyView]
});
console.log('[SYNC] Invalidating queries...');
queryClient.invalidateQueries(["events", user?.uid, isFamilyView]);
console.log('[SYNC] Queries invalidated');
} else {
console.log('[SYNC] Modified document without lastSyncTimestamp', {
householdId: change.doc.id
});
}
}
});
}, (error) => {
console.error('[SYNC] Listener error:', {
message: error.message,
code: error.code,
stack: error.stack
});
});
console.log('[SYNC] Listener setup complete');
return () => {
console.log('[SYNC] Cleaning up sync listener', {
familyId: profileData.familyId,
userId: user?.uid
});
unsubscribe();
};
}, [profileData?.familyId, user?.uid, isFamilyView, queryClient]);
return useQuery({
queryKey: ["events", user?.uid, isFamilyView],
queryFn: async () => {
console.log(`Fetching events - Family View: ${isFamilyView}, User: ${user?.uid}`);
const db = firestore();
const userId = user?.uid;
const familyId = profileData?.familyId;
let allEvents = [];
// If family view is active, include family, creator, and attendee events
if (isFamilyView) {
const familyQuery = db.collection("Events").where("familyId", "==", familyId);
const attendeeQuery = db.collection("Events").where("attendees", "array-contains", userId);
const [publicFamilyEvents, privateCreatorEvents, privateAttendeeEvents, userAttendeeEvents, userCreatorEvents] = await Promise.all([
// Public family events
db.collection("Events")
.where("familyId", "==", familyId)
.where("private", "==", false)
.get(),
const [familySnapshot, attendeeSnapshot] = await Promise.all([
familyQuery.get(),
attendeeQuery.get(),
// Private events user created
db.collection("Events")
.where("familyId", "==", familyId)
.where("private", "==", true)
.where("creatorId", "==", userId)
.get(),
// Private events user is attending
db.collection("Events")
.where("private", "==", true)
.where("attendees", "array-contains", userId)
.get(),
// All events where user is attendee
db.collection("Events")
.where("attendees", "array-contains", userId)
.get(),
// ALL events where user is creator (regardless of attendees)
db.collection("Events")
.where("creatorId", "==", userId)
.get()
]);
// Collect all events
const familyEvents = familySnapshot.docs.map(doc => doc.data());
const attendeeEvents = attendeeSnapshot.docs.map(doc => doc.data());
console.log(`Found ${publicFamilyEvents.size} public events, ${privateCreatorEvents.size} private creator events, ${privateAttendeeEvents.size} private attendee events, ${userAttendeeEvents.size} user attendee events, ${userCreatorEvents.size} user creator events`);
// console.log("Family events not in creator query: ", familyEvents.filter(event => !creatorEvents.some(creatorEvent => creatorEvent.id === event.id)));
allEvents = [...familyEvents, ...attendeeEvents];
allEvents = [
...publicFamilyEvents.docs.map(doc => ({...doc.data(), id: doc.id})),
...privateCreatorEvents.docs.map(doc => ({...doc.data(), id: doc.id})),
...privateAttendeeEvents.docs.map(doc => ({...doc.data(), id: doc.id})),
...userAttendeeEvents.docs.map(doc => ({...doc.data(), id: doc.id})),
...userCreatorEvents.docs.map(doc => ({...doc.data(), id: doc.id}))
];
} else {
// Only include creator and attendee events when family view is off
const creatorQuery = db.collection("Events").where("creatorId", "==", userId);
const attendeeQuery = db.collection("Events").where("attendees", "array-contains", userId);
const [creatorSnapshot, attendeeSnapshot] = await Promise.all([
creatorQuery.get(),
attendeeQuery.get(),
const [creatorEvents, attendeeEvents] = await Promise.all([
db.collection("Events")
.where("creatorId", "==", userId)
.get(),
db.collection("Events")
.where("attendees", "array-contains", userId)
.get()
]);
const creatorEvents = creatorSnapshot.docs.map(doc => doc.data());
const attendeeEvents = attendeeSnapshot.docs.map(doc => doc.data());
console.log(`Found ${creatorEvents.size} creator events, ${attendeeEvents.size} attendee events`);
allEvents = [...creatorEvents, ...attendeeEvents];
allEvents = [
...creatorEvents.docs.map(doc => ({...doc.data(), id: doc.id})),
...attendeeEvents.docs.map(doc => ({...doc.data(), id: doc.id}))
];
}
// Use a Map to ensure uniqueness only for events with IDs
const uniqueEventsMap = new Map();
const processedHashes = new Set();
allEvents.forEach(event => {
if (event.id) {
uniqueEventsMap.set(event.id, event); // Ensure uniqueness for events with IDs
const eventHash = createEventHash(event);
console.log(`Processing ${uniqueEventsMap.size} unique events`);
const processedEvent = {
...event,
id: event.id || uuidv4(),
creatorId: event.creatorId || userId
};
// Only add the event if we haven't seen this hash before
if (!processedHashes.has(eventHash)) {
processedHashes.add(eventHash);
uniqueEventsMap.set(processedEvent.id, processedEvent);
} else {
uniqueEventsMap.set(uuidv4(), event); // Generate a temp key for events without ID
console.log(`Duplicate event detected and skipped using hash: ${eventHash}`);
}
});
const uniqueEvents = Array.from(uniqueEventsMap.values());
// Filter out private events unless the user is the creator
const filteredEvents = uniqueEvents.filter(event => {
if (event.private) {
return event.creatorId === userId;
}
return true;
});
console.log(`Processing ${uniqueEventsMap.size} unique events after deduplication`);
// Attach event colors and return the final list of events
return await Promise.all(
filteredEvents.map(async (event) => {
const processedEvents = await Promise.all(
Array.from(uniqueEventsMap.values()).map(async (event) => {
const profileSnapshot = await db
.collection("Profiles")
.doc(event.creatorId)
@ -85,19 +207,28 @@ export const useGetEvents = () => {
return {
...event,
id: event.id || Math.random().toString(36).slice(2, 9), // Generate temp ID if missing
title: event.title,
start: new Date(event.startDate.seconds * 1000),
end: new Date(event.endDate.seconds * 1000),
start: event.allDay
? new Date(new Date(event.startDate.seconds * 1000).setHours(0, 0, 0, 0))
: new Date(event.startDate.seconds * 1000),
end: event.allDay
? new Date(new Date(event.endDate.seconds * 1000).setHours(0, 0, 0, 0))
: new Date(event.endDate.seconds * 1000),
hideHours: event.allDay,
eventColor,
notes: event.notes,
};
})
);
console.log(`Events processing completed, returning ${processedEvents.length} events`);
return processedEvents;
},
staleTime: Infinity,
cacheTime: Infinity,
staleTime: 5 * 60 * 1000,
cacheTime: 30 * 60 * 1000,
keepPreviousData: true,
onError: (error) => {
console.error('Error fetching events:', error);
}
});
};
};

49
hooks/firebase/useGetNotifications.ts
View File

@ -1,11 +1,35 @@
import {useQuery} from "react-query";
import { useQuery } from "react-query";
import firestore from "@react-native-firebase/firestore";
import {useAuthContext} from "@/contexts/AuthContext";
import { useAuthContext } from "@/contexts/AuthContext";
interface FirestoreTimestamp {
seconds: number;
nanoseconds: number;
}
interface NotificationFirestore {
creatorId: string;
familyId: string;
content: string;
eventId: string;
timestamp: FirestoreTimestamp;
date?: FirestoreTimestamp;
}
export interface Notification {
id: string;
creatorId: string;
familyId: string;
content: string;
eventId: string;
timestamp: Date;
date?: Date;
}
export const useGetNotifications = () => {
const { user, profileData } = useAuthContext();
return useQuery({
return useQuery<Notification[], Error>({
queryKey: ["notifications", user?.uid],
queryFn: async () => {
const snapshot = await firestore()
@ -14,16 +38,17 @@ export const useGetNotifications = () => {
.get();
return snapshot.docs.map((doc) => {
const data = doc.data();
const data = doc.data() as NotificationFirestore;
return {...data, timestamp: new Date(data.timestamp.seconds * 1000 + data.timestamp.nanoseconds / 1e6)} as {
creatorId: string,
familyId: string,
content: string,
eventId: string,
timestamp: Date,
return {
id: doc.id,
...data,
timestamp: new Date(data.timestamp.seconds * 1000 + data.timestamp.nanoseconds / 1e6),
date: data.date ? new Date(data.date.seconds * 1000 + data.date.nanoseconds / 1e6) : undefined
};
});
}
})
},
refetchOnWindowFocus: true,
staleTime: 60000,
});
};

3
hooks/firebase/useSignOut.ts
View File

@ -1,11 +1,14 @@
import {useMutation} from "react-query";
import auth from "@react-native-firebase/auth";
import {useRouter} from "expo-router";
export const useSignOut = () => {
const {replace} = useRouter();
return useMutation({
mutationKey: ["signOut"],
mutationFn: async () => {
await auth().signOut()
replace("/(unauth)")
}
});
}

295
hooks/useCalSync.ts
View File

@ -2,7 +2,7 @@ import {useAuthContext} from "@/contexts/AuthContext";
import {useEffect} from "react";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import {useFetchAndSaveGoogleEvents} from "@/hooks/useFetchAndSaveGoogleEvents";
import {useFetchAndSaveOutlookEvents} from "@/hooks/useFetchAndSaveOutlookEvents";
import {useFetchAndSaveMicrosoftEvents} from "@/hooks/useFetchAndSaveOutlookEvents";
import {useFetchAndSaveAppleEvents} from "@/hooks/useFetchAndSaveAppleEvents";
import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";
@ -10,14 +10,12 @@ import * as AuthSession from "expo-auth-session";
import * as AppleAuthentication from "expo-apple-authentication";
import * as Notifications from 'expo-notifications';
import {useQueryClient} from "react-query";
import {AppleAccount, GoogleAccount, MicrosoftAccount} from "@/hooks/firebase/types/profileTypes";
const googleConfig = {
androidClientId:
"406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
iosClientId:
"406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
webClientId:
"406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
androidClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
iosClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
webClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
scopes: [
"email",
"profile",
@ -39,18 +37,32 @@ const microsoftConfig = {
"Calendars.ReadWrite",
"User.Read",
],
authorizationEndpoint:
"https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
authorizationEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
};
interface SyncResponse {
success: boolean;
eventCount?: number;
error?: string;
}
interface CalendarSyncResult {
data: {
success: boolean;
eventCount: number;
message?: string;
error?: string;
}
}
export const useCalSync = () => {
const {profileData} = useAuthContext();
const queryClient = useQueryClient();
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} = useFetchAndSaveGoogleEvents();
const {mutateAsync: fetchAndSaveOutlookEvents, isLoading: isSyncingOutlook} = useFetchAndSaveOutlookEvents();
const {mutateAsync: fetchAndSaveOutlookEvents, isLoading: isSyncingOutlook} = useFetchAndSaveMicrosoftEvents();
const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} = useFetchAndSaveAppleEvents();
WebBrowser.maybeCompleteAuthSession();
@ -72,134 +84,106 @@ export const useCalSync = () => {
}
);
console.log(response)
const userInfo = await userInfoResponse.json();
const googleMail = userInfo.email;
let googleAccounts = profileData?.googleAccounts || {};
const updatedGoogleAccounts = {
...googleAccounts,
[googleMail]: {accessToken, refreshToken},
const googleAccount: GoogleAccount = {
accessToken,
refreshToken,
email: googleMail,
expiresAt: new Date(Date.now() + 3600 * 1000),
scope: googleConfig.scopes.join(' ')
};
console.log({refreshToken})
await updateUserData({
newUserData: {googleAccounts: updatedGoogleAccounts},
newUserData: {
googleAccounts: {
...profileData?.googleAccounts,
[googleMail]: googleAccount
}
},
});
await fetchAndSaveGoogleEvents({
token: accessToken,
refreshToken: refreshToken,
email: googleMail,
});
await fetchAndSaveGoogleEvents({email: googleMail});
}
} catch (error) {
console.error("Error during Google sign-in:", error);
throw error;
}
};
const handleMicrosoftSignIn = async () => {
try {
console.log("Starting Microsoft sign-in...");
const authRequest = new AuthSession.AuthRequest({
clientId: microsoftConfig.clientId,
scopes: microsoftConfig.scopes,
redirectUri: microsoftConfig.redirectUri,
responseType: AuthSession.ResponseType.Code,
usePKCE: true, // Enable PKCE
usePKCE: true,
});
console.log("Auth request created:", authRequest);
const authResult = await authRequest.promptAsync({
authorizationEndpoint: microsoftConfig.authorizationEndpoint,
});
console.log("Auth result:", authResult);
if (authResult.type === "success" && authResult.params?.code) {
const code = authResult.params.code;
console.log("Authorization code received:", code);
// Exchange authorization code for tokens
const tokenResponse = await fetch(microsoftConfig.tokenEndpoint, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: `client_id=${
microsoftConfig.clientId
}&redirect_uri=${encodeURIComponent(
body: `client_id=${microsoftConfig.clientId}&redirect_uri=${encodeURIComponent(
microsoftConfig.redirectUri
)}&grant_type=authorization_code&code=${code}&code_verifier=${
authRequest.codeVerifier
}&scope=${encodeURIComponent(
"https://graph.microsoft.com/Calendars.ReadWrite offline_access User.Read"
)}`,
}&scope=${encodeURIComponent(microsoftConfig.scopes.join(' '))}`,
});
console.log("Token response status:", tokenResponse.status);
if (!tokenResponse.ok) {
const errorText = await tokenResponse.text();
console.error("Token exchange failed:", errorText);
return;
throw new Error(await tokenResponse.text());
}
const tokenData = await tokenResponse.json();
console.log("Token data received:", tokenData);
if (tokenData?.access_token) {
console.log("Access token received, fetching user info...");
// Fetch user info from Microsoft Graph API to get the email
const userInfoResponse = await fetch(
"https://graph.microsoft.com/v1.0/me",
{
headers: {
Authorization: `Bearer ${tokenData.access_token}`,
},
}
);
const userInfo = await userInfoResponse.json();
console.log("User info received:", userInfo);
if (userInfo.error) {
console.error("Error fetching user info:", userInfo.error);
} else {
const outlookMail = userInfo.mail || userInfo.userPrincipalName;
let microsoftAccounts = profileData?.microsoftAccounts;
const updatedMicrosoftAccounts = microsoftAccounts
? {...microsoftAccounts, [outlookMail]: tokenData.access_token}
: {[outlookMail]: tokenData.access_token};
await updateUserData({
newUserData: {microsoftAccounts: updatedMicrosoftAccounts},
});
await fetchAndSaveOutlookEvents(
tokenData.access_token,
outlookMail
);
console.log("User data updated successfully.");
const userInfoResponse = await fetch(
"https://graph.microsoft.com/v1.0/me",
{
headers: {
Authorization: `Bearer ${tokenData.access_token}`,
},
}
}
} else {
console.warn("Authentication was not successful:", authResult);
);
const userInfo = await userInfoResponse.json();
const outlookMail = userInfo.mail || userInfo.userPrincipalName;
const microsoftAccount: MicrosoftAccount = {
accessToken: tokenData.access_token,
refreshToken: tokenData.refresh_token,
email: outlookMail,
expiresAt: new Date(Date.now() + tokenData.expires_in * 1000),
};
await updateUserData({
newUserData: {
microsoftAccounts: {
...profileData?.microsoftAccounts,
[outlookMail]: microsoftAccount
}
},
});
await fetchAndSaveOutlookEvents({email: outlookMail});
}
} catch (error) {
console.error("Error during Microsoft sign-in:", error);
throw error;
}
};
const handleAppleSignIn = async () => {
try {
console.log("Starting Apple Sign-in...");
const credential = await AppleAuthentication.signInAsync({
requestedScopes: [
AppleAuthentication.AppleAuthenticationScope.EMAIL,
@ -207,117 +191,124 @@ export const useCalSync = () => {
],
});
console.log("Apple sign-in result:", credential);
alert(JSON.stringify(credential))
const appleToken = credential.identityToken;
const appleMail = credential.email!;
if (appleToken) {
console.log("Apple ID token received. Fetch user info if needed...");
const appleAccount: AppleAccount = {
accessToken: appleToken,
email: appleMail,
identityToken: credential.identityToken!,
expiresAt: new Date(Date.now() + 3600 * 1000)
};
let appleAcounts = profileData?.appleAccounts;
const updatedAppleAccounts = appleAcounts
? {...appleAcounts, [appleMail]: appleToken}
: {[appleMail]: appleToken};
const updatedAppleAccounts = {
...profileData?.appleAccounts,
[appleMail]: appleAccount
};
await updateUserData({
newUserData: {appleAccounts: updatedAppleAccounts},
});
console.log("User data updated with Apple ID token.");
await fetchAndSaveAppleEvents({token: appleToken, email: appleMail!});
} else {
console.warn(
"Apple authentication was not successful or email was hidden."
);
await fetchAndSaveAppleEvents({email: appleMail});
}
} catch (error) {
console.error("Error during Apple Sign-in:", error);
}
};
const resyncAllCalendars = async (): Promise<void> => {
try {
const syncPromises: Promise<void>[] = [];
const results: SyncResponse[] = [];
if (profileData?.googleAccounts) {
console.log(profileData.googleAccounts)
for (const [email, emailAcc] of Object.entries(profileData.googleAccounts)) {
if(emailAcc?.accessToken) {
syncPromises.push(fetchAndSaveGoogleEvents({ token: emailAcc?.accessToken, refreshToken: emailAcc?.refreshToken, email }));
for (const email of Object.keys(profileData.googleAccounts)) {
try {
const result = await fetchAndSaveGoogleEvents({email});
results.push({
success: result.success,
eventCount: result.eventCount
});
} catch (error: any) {
console.error(`Failed to sync Google calendar ${email}:`, error);
results.push({
success: false,
error: error.message
});
}
}
}
if (profileData?.microsoftAccounts) {
for (const [email, accessToken] of Object.entries(profileData.microsoftAccounts)) {
syncPromises.push(fetchAndSaveOutlookEvents(accessToken, email));
for (const email of Object.keys(profileData.microsoftAccounts)) {
try {
const result = await fetchAndSaveOutlookEvents({email});
results.push({
success: result.success,
eventCount: result.eventCount
});
} catch (error: any) {
console.error(`Failed to sync Microsoft calendar ${email}:`, error);
results.push({
success: false,
error: error.message
});
}
}
}
if (profileData?.appleAccounts) {
for (const [email, token] of Object.entries(profileData.appleAccounts)) {
syncPromises.push(fetchAndSaveAppleEvents({ token, email }));
for (const email of Object.keys(profileData.appleAccounts)) {
try {
const result = await fetchAndSaveAppleEvents({email});
results.push({
success: true,
});
} catch (error: any) {
console.error(`Failed to sync Apple calendar ${email}:`, error);
results.push({
success: false,
error: error.message
});
}
}
}
await Promise.all(syncPromises);
console.log("All calendars have been resynced.");
const successCount = results.filter(r => r.success).length;
const failCount = results.filter(r => !r.success).length;
const totalEvents = results.reduce((sum, r) => sum + (r.eventCount || 0), 0);
if (failCount > 0) {
console.error(`${failCount} calendar syncs failed, ${successCount} succeeded`);
results.filter(r => !r.success).forEach(r => {
console.error('Sync failed:', r.error);
});
} else if (successCount > 0) {
console.log(`Successfully synced ${successCount} calendars with ${totalEvents} total events`);
} else {
console.log("No calendars to sync");
}
} catch (error) {
console.error("Error resyncing calendars:", error);
console.error("Error in resyncAllCalendars:", error);
throw error;
}
};
let isConnectedToGoogle = false;
if (profileData?.googleAccounts) {
Object.values(profileData?.googleAccounts).forEach((item) => {
if (item !== null) {
isConnectedToGoogle = true;
return;
}
});
}
let isConnectedToMicrosoft = false;
const microsoftAccounts = profileData?.microsoftAccounts;
if (microsoftAccounts) {
Object.values(profileData?.microsoftAccounts).forEach((item) => {
if (item !== null) {
isConnectedToMicrosoft = true;
return;
}
});
}
let isConnectedToApple = false;
if (profileData?.appleAccounts) {
Object.values(profileData?.appleAccounts).forEach((item) => {
if (item !== null) {
isConnectedToApple = true;
return;
}
});
}
const isConnectedToGoogle = Object.values(profileData?.googleAccounts || {}).some(account => !!account);
const isConnectedToMicrosoft = Object.values(profileData?.microsoftAccounts || {}).some(account => !!account);
const isConnectedToApple = Object.values(profileData?.appleAccounts || {}).some(account => !!account);
useEffect(() => {
const handleNotification = async (notification: Notifications.Notification) => {
const eventId = notification?.request?.content?.data?.eventId;
// await resyncAllCalendars();
queryClient.invalidateQueries(["events"]);
};
const sub = Notifications.addNotificationReceivedListener(handleNotification);
return () => sub.remove();
}, []);
return {
handleAppleSignIn,
handleMicrosoftSignIn,
@ -334,5 +325,5 @@ export const useCalSync = () => {
isSyncingApple,
resyncAllCalendars,
isSyncing: isSyncingApple || isSyncingOutlook || isSyncingGoogle
}
}
};
};

118
hooks/useFetchAndSaveGoogleEvents.ts
View File

@ -1,107 +1,37 @@
import { useMutation, useQueryClient } from "react-query";
import { fetchGoogleCalendarEvents } from "@/calendar-integration/google-calendar-utils";
import { useAuthContext } from "@/contexts/AuthContext";
import { useCreateEventsFromProvider } from "@/hooks/firebase/useCreateEvent";
import { useClearTokens } from "@/hooks/firebase/useClearTokens";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import {useMutation, useQueryClient} from "react-query";
import {useAuthContext} from "@/contexts/AuthContext";
import functions from "@react-native-firebase/functions";
interface SyncResponse {
success: boolean;
eventCount: number;
message?: string;
}
export const useFetchAndSaveGoogleEvents = () => {
const queryClient = useQueryClient();
const { profileData } = useAuthContext();
const { mutateAsync: createEventsFromProvider } = useCreateEventsFromProvider();
const { mutateAsync: clearToken } = useClearTokens();
const { mutateAsync: updateUserData } = useUpdateUserData();
return useMutation({
mutationKey: ["fetchAndSaveGoogleEvents", "sync"],
mutationFn: async ({ token, email, date, refreshToken }: { token?: string; refreshToken?: string; email?: string; date?: Date }) => {
const baseDate = date || new Date();
const timeMin = new Date(baseDate.setMonth(baseDate.getMonth() - 1)).toISOString().slice(0, -5) + "Z";
const timeMax = new Date(baseDate.setMonth(baseDate.getMonth() + 2)).toISOString().slice(0, -5) + "Z";
mutationFn: async ({ email }: { email?: string }) => {
if (!email || !profileData?.googleAccounts?.[email]) {
throw new Error("No valid Google account found");
}
console.log("Token: ", token);
try {
const response = await functions()
.httpsCallable('triggerGoogleSync')({ email });
const tryFetchEvents = async (isRetry = false) => {
try {
const response = await fetchGoogleCalendarEvents(
token,
email,
profileData?.familyId,
timeMin,
timeMax
);
if (!response.success) {
await clearToken({ email: email!, provider: "google" });
return; // Stop refetching if clearing the token
}
console.log("Google Calendar events fetched:", response);
const items = response?.googleEvents?.map((item) => {
if (item.allDay) {
item.startDate = new Date(item.startDate.setHours(0, 0, 0, 0));
item.endDate = item.startDate;
}
return item;
}) || [];
await createEventsFromProvider(items);
} catch (error) {
console.error("Error fetching Google Calendar events:", error);
if (!isRetry) {
const refreshedToken = await handleRefreshToken(email, refreshToken);
if (refreshedToken) {
await updateUserData({
newUserData: {
googleAccounts: {
...profileData.googleAccounts,
[email!]: { ...profileData.googleAccounts[email!], accessToken: refreshedToken },
},
},
});
return tryFetchEvents(true); // Retry once after refreshing
} else {
await clearToken({ email: email!, provider: "google" });
console.error(`Token refresh failed; token cleared for ${email}`);
throw error;
}
} else {
console.error(`Retry failed after refreshing token for user ${profileData?.email}:`, error.message);
throw error;
}
}
};
return tryFetchEvents();
return response.data as SyncResponse;
} catch (error: any) {
console.error("Error initiating Google Calendar sync:", error);
throw new Error(error.details?.message || error.message || "Failed to sync calendar");
}
},
onSuccess: () => {
onSuccess: (data) => {
queryClient.invalidateQueries(["events"]);
},
console.log(`Successfully synced ${data.eventCount} events`);
}
});
};
async function handleRefreshToken(email: string, refreshToken: string) {
if (!refreshToken) return null;
try {
const response = await fetch('https://oauth2.googleapis.com/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
grant_type: 'refresh_token',
refresh_token: refreshToken,
client_id: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
}),
});
const data = await response.json();
return data.access_token;
} catch (error) {
console.error("Error refreshing Google token:", error);
return null;
}
}

159
hooks/useFetchAndSaveOutlookEvents.ts
View File

@ -1,41 +1,144 @@
import {useMutation, useQueryClient} from "react-query";
import {useAuthContext} from "@/contexts/AuthContext";
import {useCreateEventsFromProvider} from "@/hooks/firebase/useCreateEvent";
import {fetchMicrosoftCalendarEvents} from "@/calendar-integration/microsoft-calendar-utils";
import { useMutation, useQueryClient } from "react-query";
import { useAuthContext } from "@/contexts/AuthContext";
import { useSetUserData } from "@/hooks/firebase/useSetUserData";
import functions from '@react-native-firebase/functions';
import * as AuthSession from 'expo-auth-session';
export const useFetchAndSaveOutlookEvents = () => {
const queryClient = useQueryClient()
const {profileData} = useAuthContext();
const {mutateAsync: createEventsFromProvider} = useCreateEventsFromProvider();
interface SyncResponse {
success: boolean;
eventCount: number;
message?: string;
}
return useMutation({
interface SyncError extends Error {
code?: string;
details?: {
requiresReauth?: boolean;
message?: string;
};
}
const microsoftConfig = {
clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af",
scopes: [
"openid",
"profile",
"email",
"offline_access",
"Calendars.ReadWrite",
"User.Read",
],
redirectUri: AuthSession.makeRedirectUri({path: "settings"})
};
export const useFetchAndSaveMicrosoftEvents = () => {
const queryClient = useQueryClient();
const { profileData } = useAuthContext();
const { mutateAsync: setUserData } = useSetUserData();
const handleReauth = async (email: string) => {
try {
const authRequest = new AuthSession.AuthRequest({
clientId: microsoftConfig.clientId,
scopes: microsoftConfig.scopes,
redirectUri: microsoftConfig.redirectUri,
responseType: AuthSession.ResponseType.Code,
usePKCE: true,
});
const result = await authRequest.promptAsync({
authorizationEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
});
if (result.type === 'success' && result.params?.code) {
const tokenResponse = await fetch('https://login.microsoftonline.com/common/oauth2/v2.0/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
client_id: microsoftConfig.clientId,
scope: microsoftConfig.scopes.join(' '),
code: result.params.code,
redirect_uri: microsoftConfig.redirectUri,
grant_type: 'authorization_code',
code_verifier: authRequest.codeVerifier || '',
}),
});
const tokens = await tokenResponse.json();
await setUserData({
newUserData: {
microsoftAccounts: {
...profileData?.microsoftAccounts,
[email]: {
accessToken: tokens.access_token,
refreshToken: tokens.refresh_token,
email,
}
}
}
});
return true;
}
return false;
} catch (error) {
console.error('Microsoft reauth error:', error);
return false;
}
};
return useMutation<SyncResponse, SyncError, { email?: string }>({
mutationKey: ["fetchAndSaveOutlookEvents", "sync"],
mutationFn: async ({token, email, date}: { token?: string; email?: string, date?: Date }) => {
const baseDate = date || new Date();
const timeMin = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() - 1));
const timeMax = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() + 1));
mutationFn: async ({ email }: { email?: string }) => {
if (!email) {
throw new Error("Email is required");
}
console.log("Token: ", token ?? profileData?.microsoftToken);
if (!profileData?.microsoftAccounts?.[email]) {
throw new Error("No valid Microsoft account found");
}
try {
const response = await fetchMicrosoftCalendarEvents(
token ?? profileData?.microsoftToken,
email ?? profileData?.outlookMail,
profileData?.familyId,
timeMin.toISOString().slice(0, -5) + "Z",
timeMax.toISOString().slice(0, -5) + "Z"
);
const response = await functions()
.httpsCallable('triggerMicrosoftSync')({ email });
return response.data as SyncResponse;
} catch (error: any) {
console.error("Microsoft sync error:", error);
// Check if we need to reauthenticate
if (error.details?.requiresReauth ||
error.code === 'functions/failed-precondition' ||
error.code === 'functions/unauthenticated') {
console.log('Attempting Microsoft reauth...');
const reauthSuccessful = await handleReauth(email);
if (reauthSuccessful) {
// Retry the sync with new tokens
console.log('Retrying sync after reauth...');
const retryResponse = await functions()
.httpsCallable('triggerMicrosoftSync')({ email });
return retryResponse.data as SyncResponse;
}
}
console.log(response);
const items = response ?? [];
await createEventsFromProvider(items);
} catch (error) {
console.error("Error fetching and saving Outlook events: ", error);
throw error;
}
},
onSuccess: () => {
queryClient.invalidateQueries(["events"])
onSuccess: (data) => {
queryClient.invalidateQueries(["events"]);
console.log(`Successfully synced ${data.eventCount} Microsoft events`);
},
onError: (error) => {
console.error('Microsoft sync failed:', {
message: error.message,
code: error.code,
details: error.details
});
}
});
};

99
hooks/useSyncOnScroll.ts
View File

@ -3,10 +3,16 @@ import { useAuthContext } from "@/contexts/AuthContext";
import { useAtomValue } from "jotai";
import { useFetchAndSaveGoogleEvents } from "./useFetchAndSaveGoogleEvents";
import { useFetchAndSaveAppleEvents } from "./useFetchAndSaveAppleEvents";
import { useFetchAndSaveOutlookEvents } from "./useFetchAndSaveOutlookEvents";
import { useFetchAndSaveMicrosoftEvents } from "./useFetchAndSaveOutlookEvents";
import { selectedDateAtom } from "@/components/pages/calendar/atoms";
import { addDays, subDays, isBefore, isAfter, format } from "date-fns";
interface SyncResponse {
success: boolean;
eventCount?: number;
error?: string;
}
export const useSyncEvents = () => {
const { profileData } = useAuthContext();
const selectedDate = useAtomValue(selectedDateAtom);
@ -15,12 +21,18 @@ export const useSyncEvents = () => {
const [lowerBoundDate, setLowerBoundDate] = useState<Date>(subDays(selectedDate, 6 * 30));
const [upperBoundDate, setUpperBoundDate] = useState<Date>(addDays(selectedDate, 6 * 30));
const [isSyncing, setIsSyncing] = useState(false);
const [error, setError] = useState(null);
const [error, setError] = useState<Error | null>(null);
const [syncStats, setSyncStats] = useState<{
total: number;
success: number;
failed: number;
events: number;
}>({ total: 0, success: 0, failed: 0, events: 0 });
const syncedRanges = useState<Set<string>>(new Set())[0];
const { mutateAsync: fetchAndSaveGoogleEvents } = useFetchAndSaveGoogleEvents();
const { mutateAsync: fetchAndSaveOutlookEvents } = useFetchAndSaveOutlookEvents();
const { mutateAsync: fetchAndSaveOutlookEvents } = useFetchAndSaveMicrosoftEvents();
const { mutateAsync: fetchAndSaveAppleEvents } = useFetchAndSaveAppleEvents();
const generateRangeKey = (startDate: Date, endDate: Date) => {
@ -41,26 +53,71 @@ export const useSyncEvents = () => {
}
if (isBefore(selectedDate, lowerBoundDate) || isAfter(selectedDate, upperBoundDate)) {
const results: SyncResponse[] = [];
const stats = { total: 0, success: 0, failed: 0, events: 0 };
try {
const googleEvents = Object.entries(profileData?.googleAccounts || {}).map(([email, { accessToken }]) =>
fetchAndSaveGoogleEvents({ token: accessToken, email, date: selectedDate })
);
if (profileData?.googleAccounts) {
for (const [email] of Object.entries(profileData.googleAccounts)) {
try {
stats.total++;
const result = await fetchAndSaveGoogleEvents({ email }) as SyncResponse;
if (result.success) {
stats.success++;
stats.events += result.eventCount || 0;
} else {
stats.failed++;
}
results.push(result);
} catch (err) {
stats.failed++;
console.error(`Failed to sync Google calendar for ${email}:`, err);
}
}
}
const outlookEvents = Object.entries(profileData?.microsoftAccounts || {}).map(([email, token]) =>
fetchAndSaveOutlookEvents({ token, email, date: selectedDate })
);
if (profileData?.microsoftAccounts) {
for (const [email] of Object.entries(profileData.microsoftAccounts)) {
try {
stats.total++;
const result = await fetchAndSaveOutlookEvents({ email });
if (result.success) {
stats.success++;
stats.events += result.eventCount || 0;
} else {
stats.failed++;
}
results.push(result);
} catch (err) {
stats.failed++;
console.error(`Failed to sync Microsoft calendar for ${email}:`, err);
}
}
}
const appleEvents = Object.entries(profileData?.appleAccounts || {}).map(([email, token]) =>
fetchAndSaveAppleEvents({ token, email, date: selectedDate })
);
await Promise.all([...googleEvents, ...outlookEvents, ...appleEvents]);
if (profileData?.appleAccounts) {
for (const [email] of Object.entries(profileData.appleAccounts)) {
try {
stats.total++;
const result = await fetchAndSaveAppleEvents({ email });
} catch (err) {
stats.failed++;
console.error(`Failed to sync Apple calendar for ${email}:`, err);
}
}
}
setSyncStats(stats);
setLastSyncDate(selectedDate);
setLowerBoundDate(newLowerBound);
setUpperBoundDate(newUpperBound);
syncedRanges.add(rangeKey);
} catch (err) {
if (stats.failed > 0) {
throw new Error(`Failed to sync ${stats.failed} calendars`);
}
} catch (err: any) {
console.error("Error syncing events:", err);
setError(err);
} finally {
@ -69,7 +126,16 @@ export const useSyncEvents = () => {
} else {
setIsSyncing(false);
}
}, [selectedDate, lowerBoundDate, upperBoundDate, profileData, fetchAndSaveGoogleEvents, fetchAndSaveOutlookEvents, fetchAndSaveAppleEvents, syncedRanges]);
}, [
selectedDate,
lowerBoundDate,
upperBoundDate,
profileData,
fetchAndSaveGoogleEvents,
fetchAndSaveOutlookEvents,
fetchAndSaveAppleEvents,
syncedRanges
]);
useEffect(() => {
syncEvents();
@ -81,5 +147,6 @@ export const useSyncEvents = () => {
lastSyncDate,
lowerBoundDate,
upperBoundDate,
syncStats,
};
};

8
ios/cally.xcodeproj/project.pbxproj
View File

@ -450,11 +450,11 @@
);
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
PRODUCT_BUNDLE_IDENTIFIER = com.cally.app;
PRODUCT_NAME = Cally;
PRODUCT_NAME = "Cally";
SWIFT_OBJC_BRIDGING_HEADER = "cally/cally-Bridging-Header.h";
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = 1;
TARGETED_DEVICE_FAMILY = "1,2";
VERSIONING_SYSTEM = "apple-generic";
};
name = Debug;
@ -484,10 +484,10 @@
);
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
PRODUCT_BUNDLE_IDENTIFIER = com.cally.app;
PRODUCT_NAME = Cally;
PRODUCT_NAME = "Cally";
SWIFT_OBJC_BRIDGING_HEADER = "cally/cally-Bridging-Header.h";
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = 1;
TARGETED_DEVICE_FAMILY = "1,2";
VERSIONING_SYSTEM = "apple-generic";
};
name = Release;

4
ios/cally/Info.plist
View File

@ -48,6 +48,8 @@
</array>
<key>CFBundleVersion</key>
<string>74</string>
<key>ITSAppUsesNonExemptEncryption</key>
<false/>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSAppTransportSecurity</key>
@ -154,6 +156,8 @@
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
</array>
<key>UILaunchStoryboardName</key>
<string>SplashScreen</string>

2
package.json
View File

@ -9,8 +9,10 @@
"ios": "TAMAGUI_TARGET=native npx expo run:ios",
"ios-native": "TAMAGUI_TARGET=native npx expo run:ios --device",
"dev-ios": "TAMAGUI_TARGET=native npx eas-cli build --profile development --platform ios",
"dev-android": "TAMAGUI_TARGET=native npx eas-cli build --profile development --platform android",
"build-ios": "TAMAGUI_TARGET=native npx eas-cli build --profile production --platform ios",
"build-android": "TAMAGUI_TARGET=native npx eas-cli build --profile production --platform android",
"build-apk": "TAMAGUI_TARGET=native eas build -p android --profile preview",
"build-cicd": "TAMAGUI_TARGET=native npx eas-cli build --profile production --platform all --non-interactive --no-wait --auto-submit ",
"build-ios-cicd": "TAMAGUI_TARGET=native npx eas-cli build --profile production --platform ios --non-interactive --no-wait --auto-submit ",
"build-dev-ios": "TAMAGUI_TARGET=native npx eas-cli build --profile development --platform ios",