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

Get Events fix

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-20 12:41:33 +02:00
parent 3275e64479
commit a9c02e880f
13 changed files with 486 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,7 @@ export default function TabLayout() {
return (
<Drawer
initialRouteName={"index"}
detachInactiveScreens
screenOptions={{
headerShown: true,
drawerStyle: {

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

@ -1,11 +1,8 @@
import React from "react";
import CalendarPage from "@/components/pages/calendar/CalendarPage";
import {SettingsContextProvider} from "@/contexts/SettingsContext";
export default function Screen() {
return (
<SettingsContextProvider>
<CalendarPage/>
</SettingsContextProvider>
<CalendarPage/>
);
}

5
app/(auth)/settings/index.tsx
View File

@ -1,11 +1,8 @@
import SettingsPage from "@/components/pages/settings/SettingsPage";
import {SettingsContextProvider} from "@/contexts/SettingsContext";
import React from "react";
export default function Screen() {
return (
<SettingsContextProvider>
<SettingsPage/>
</SettingsContextProvider>
<SettingsPage/>
);
}

3
app/_layout.tsx
View File

@ -54,6 +54,9 @@ import {QueryClient, QueryClientProvider} from "react-query";
import {TextProps, ThemeManager, Toast, Typography,} from "react-native-ui-lib";
import {Platform} from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';
import {enableScreens} from 'react-native-screens';
enableScreens(true)
SplashScreen.preventAutoHideAsync();

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

@ -6,26 +6,25 @@ import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom)
const [mode, setMode] = useAtom(modeAtom)
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
if (selectedMode) {
setMode(selectedMode as "day" | "week" | "month");
setTimeout(() => {
setMode(selectedMode as "day" | "week" | "month");
}, 150);
}
};
const handleMonthChange = (month: string) => {
const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear();
const newMonthIndex = months.indexOf(month);
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate);
};
@ -89,14 +88,4 @@ const styles = StyleSheet.create({
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
calHeader: {
borderWidth: 0,
},
dayModeHeader: {
alignSelf: "flex-start",
justifyContent: "space-between",
alignContent: "center",
width: 38,
right: 42,
},
});

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

@ -1,4 +1,4 @@
import React, {memo} from 'react';
import React, {useCallback, useMemo} from 'react';
import {Calendar} from "react-native-big-calendar";
import {StyleSheet} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
@ -11,44 +11,71 @@ import {
selectedNewEventDateAtom
} from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
interface EventCalendarProps {
calendarHeight: number;
}
export const EventCalendar: React.FC<EventCalendarProps> = memo(({calendarHeight}) => {
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
const {data: events} = useGetEvents();
const {profileData} = useAuthContext()
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom)
const [mode, setMode] = useAtom(modeAtom)
const setEditVisible = useSetAtom(editVisibleAtom)
const setEventForEdit = useSetAtom(eventForEditAtom)
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom)
const {profileData} = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const mode = useAtomValue(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
console.log("Events: ", events)
const handlePressEvent = useCallback((event: CalendarEvent) => {
setEditVisible(true);
setEventForEdit(event);
}, [setEditVisible, setEventForEdit]);
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day") {
setSelectedNewEndDate(date);
} else {
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handleSwipeEnd = useCallback((date: Date) => {
setSelectedDate(date);
}, [setSelectedDate]);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
[]
);
const memoizedWeekStartsOn = useMemo(
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData]
);
const memoizedHeaderContentStyle = useMemo(
() => (mode === "day" ? styles.dayModeHeader : {}),
[mode]
);
return (
<Calendar
bodyContainerStyle={styles.calHeader}
swipeEnabled
mode={mode}
events={events ?? []}
eventCellStyle={(event) => ({backgroundColor: event.eventColor})}
onPressEvent={(event) => {
setEditVisible(true);
setEventForEdit(event);
}}
weekStartsOn={profileData?.firstDayOfWeek === "Mondays" ? 1 : 0}
eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
activeDate={selectedDate}
date={selectedDate}
onPressCell={mode === "day" ? setSelectedNewEndDate: (date) => {
setSelectedDate(date)
setMode("day")
}}
headerContentStyle={mode === "day" ? styles.dayModeHeader : {}}
onSwipeEnd={(date) => {
setSelectedDate(date);
}}
onPressCell={handlePressCell}
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd}
/>
);
});
@ -68,4 +95,4 @@ const styles = StyleSheet.create({
width: 38,
right: 42,
},
});
});

2
components/pages/settings/CalendarSettingsPage.tsx
View File

@ -2,7 +2,6 @@ import {AntDesign, Ionicons} from "@expo/vector-icons";
import React, {useCallback, useEffect, useState} from "react";
import {Button, Checkbox, Text, View} from "react-native-ui-lib";
import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
import {colorMap} from "@/contexts/SettingsContext";
import {TouchableOpacity} from "react-native-gesture-handler";
import {useAuthContext} from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
@ -19,6 +18,7 @@ import {useFetchAndSaveOutlookEvents} from "@/hooks/useFetchAndSaveOutlookEvents
import {useFetchAndSaveAppleEvents} from "@/hooks/useFetchAndSaveAppleEvents";
import * as AppleAuthentication from 'expo-apple-authentication';
import ExpoLocalization from "expo-localization/src/ExpoLocalization";
import {colorMap} from "@/constants/colorMap";
const googleConfig = {
androidClientId:

7
constants/colorMap.ts Normal file
View File

@ -0,0 +1,7 @@
export const colorMap = {
pink: "#ea156c",
orange: "#e28800",
green: "#46a80a",
teal: "#05a8b6",
purple: "#7305d4",
};

53
contexts/SettingsContext.tsx
View File

@ -1,53 +0,0 @@
import { createContext, FC, ReactNode, useContext, useState } from "react";
import { useAuthContext } from "./AuthContext";
export const colorMap = {
pink: "#ea156c",
orange: "#e28800",
green: "#46a80a",
teal: "#05a8b6",
purple: "#7305d4",
};
interface IUserDetails {
email: string | undefined;
firstName: string;
lastName: string;
}
interface ISettingsContext {
calendarColor: string;
userDetails: IUserDetails;
editUserDetails: (details: Partial<IUserDetails>) => void;
setCalendarColor: (color: string) => void;
}
const SettingsContext = createContext<ISettingsContext>(undefined!);
export const SettingsContextProvider: FC<{ children: ReactNode }> = ({
children,
}) => {
const { user } = useAuthContext();
const [userDetails, setUserDetails] = useState<IUserDetails>({
email: user?.email?.toString(),
firstName: "",
lastName: "",
});
const [calendarColor, setCalendarColor] = useState<string>(colorMap.pink);
const editUserDetails = (details: Partial<IUserDetails>) => {
setUserDetails((prevDetails) => ({
...prevDetails,
...details,
}));
};
return (
<SettingsContext.Provider
value={{ calendarColor, setCalendarColor, userDetails, editUserDetails }}
>
{children}
</SettingsContext.Provider>
);
};
export const useSettingsContext = () => useContext(SettingsContext)!;

30
hooks/firebase/useGetEvents.ts
View File

@ -1,29 +1,39 @@
import {useQuery} from "react-query";
import firestore from "@react-native-firebase/firestore";
import {useAuthContext} from "@/contexts/AuthContext";
import {colorMap} from "@/contexts/SettingsContext";
import {useAtomValue} from "jotai";
import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
import {colorMap} from "@/constants/colorMap";
export const useGetEvents = () => {
const {user, profileData} = useAuthContext();
const isFamilyView = useAtomValue(isFamilyViewAtom)
const isFamilyView = useAtomValue(isFamilyViewAtom);
return useQuery({
queryKey: ["events", user?.uid, isFamilyView],
queryFn: async () => {
const db = firestore();
const userId = user?.uid; // Assuming user is defined
const familyId = profileData?.familyId; // Assuming profileData is defined
const userId = user?.uid;
const familyId = profileData?.familyId;
let allEvents = [];
if (isFamilyView) {
const familyQuery = db.collection("Events").where("familyID", "==", familyId);
const familySnapshot = await familyQuery.get();
const familyEvents = familySnapshot.docs.map(doc => doc.data());
const creatorQuery = db.collection("Events").where("creatorId", "==", userId);
const attendeeQuery = db.collection("Events").where("attendees", "array-contains", userId);
allEvents = [...familyEvents];
const [familySnapshot, creatorSnapshot, attendeeSnapshot] = await Promise.all([
familyQuery.get(),
creatorQuery.get(),
attendeeQuery.get(),
]);
const familyEvents = familySnapshot.docs.map(doc => doc.data());
const creatorEvents = creatorSnapshot.docs.map(doc => doc.data());
const attendeeEvents = attendeeSnapshot.docs.map(doc => doc.data());
allEvents = [...familyEvents, ...creatorEvents, ...attendeeEvents];
} else {
const creatorQuery = db.collection("Events").where("creatorId", "==", userId);
const attendeeQuery = db.collection("Events").where("attendees", "array-contains", userId);
@ -51,7 +61,7 @@ export const useGetEvents = () => {
.get();
const profileData = profileSnapshot.data();
const eventColor = profileData?.eventColor || colorMap.pink; // Default color if not found
const eventColor = profileData?.eventColor || colorMap.pink;
return {
id: event.id,
@ -65,6 +75,6 @@ export const useGetEvents = () => {
);
},
staleTime: Infinity,
cacheTime: Infinity
cacheTime: Infinity,
});
};
};

2
ios/Podfile
View File

@ -14,7 +14,7 @@ install! 'cocoapods',
prepare_react_native_project!
target 'cally' do
# pod 'IQKeyboardManagerSwift', :git => 'https://github.com/douglasjunior/IQKeyboardManager.git', :branch => 'react-native-keyboard-manager'
pod 'IQKeyboardManagerSwift', :git => 'https://github.com/douglasjunior/IQKeyboardManager.git', :branch => 'react-native-keyboard-manager'
use_expo_modules!
config = use_native_modules!

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

@ -562,7 +562,10 @@
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
OTHER_LDFLAGS = "$(inherited) ";
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
USE_HERMES = true;
@ -631,7 +634,10 @@
);
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = NO;
OTHER_LDFLAGS = "$(inherited) ";
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
USE_HERMES = true;

941
yarn.lock
View File

File diff suppressed because it is too large Load Diff