ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-15 01:35:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Colors, fix family view, updated version

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-10 02:00:14 +02:00
parent 2c099740a2
commit ca0b55c494
12 changed files with 547 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<resources> <resources>
<string name="app_name">Kali - Family Planner</string> <string name="app_name">Cally - Family Planner</string>
<string name="expo_splash_screen_resize_mode" translatable="false">contain</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_splash_screen_status_bar_translucent" translatable="false">false</string>
<string name="expo_system_ui_user_interface_style" translatable="false">light</string> <string name="expo_system_ui_user_interface_style" translatable="false">light</string>

2
android/settings.gradle
View File

@ -1,4 +1,4 @@
rootProject.name = 'Kali - Family Planner' rootProject.name = 'Cally - Family Planner'
dependencyResolutionManagement { dependencyResolutionManagement {
versionCatalogs { versionCatalogs {

4
app.json
View File

@ -1,6 +1,6 @@
{ {
"expo": { "expo": {
"name": "Kali - Family Planner", "name": "Cally - Family Planner",
"slug": "cally", "slug": "cally",
"version": "1.0.0", "version": "1.0.0",
"orientation": "portrait", "orientation": "portrait",
@ -16,7 +16,7 @@
"supportsTablet": true, "supportsTablet": true,
"bundleIdentifier": "com.cally.app", "bundleIdentifier": "com.cally.app",
"googleServicesFile": "./ios/GoogleService-Info.plist", "googleServicesFile": "./ios/GoogleService-Info.plist",
"buildNumber": "18" "buildNumber": "19"
}, },
"android": { "android": {
"adaptiveIcon": { "adaptiveIcon": {

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

@ -1,21 +1,14 @@
import React, { useEffect, useRef, useState } from "react"; import React, {useRef, useState} from "react";
import { LayoutChangeEvent, StyleSheet } from "react-native"; import {LayoutChangeEvent, StyleSheet} from "react-native";
import { Calendar } from "react-native-big-calendar"; import {Calendar} from "react-native-big-calendar";
import { import {Picker, PickerModes, SegmentedControl, View} from "react-native-ui-lib";
Picker, import {MaterialIcons} from "@expo/vector-icons";
PickerModes, import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
SegmentedControl,
View,
Text
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
import { useAuthContext } from "@/contexts/AuthContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate"; import HeaderTemplate from "@/components/shared/HeaderTemplate";
import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch"; import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal"; import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";
import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext"; import {CalendarEvent} from "@/contexts/CalendarContext";
import { useSettingsContext } from "@/contexts/SettingsContext"; import {useSettingsContext} from "@/contexts/SettingsContext";
import EditEventDialog from "./EditEventDialog"; import EditEventDialog from "./EditEventDialog";
import {useGetEvents} from "@/hooks/firebase/useGetEvents"; import {useGetEvents} from "@/hooks/firebase/useGetEvents";
@ -41,7 +34,7 @@ const months = [
]; ];
export default function CalendarPage() { export default function CalendarPage() {
const { calendarColor } = useSettingsContext(); const {calendarColor} = useSettingsContext();
const [editVisible, setEditVisible] = useState<boolean>(false); const [editVisible, setEditVisible] = useState<boolean>(false);
const [eventForEdit, setEventForEdit] = useState<CalendarEvent>(); const [eventForEdit, setEventForEdit] = useState<CalendarEvent>();
@ -54,7 +47,6 @@ export default function CalendarPage() {
}, },
}); });
const { profileData } = useAuthContext();
const [isFamilyView, setIsFamilyView] = useState<boolean>(true); const [isFamilyView, setIsFamilyView] = useState<boolean>(true);
const [calendarHeight, setCalendarHeight] = useState(0); const [calendarHeight, setCalendarHeight] = useState(0);
const [mode, setMode] = useState<"week" | "month" | "day">("week"); const [mode, setMode] = useState<"week" | "month" | "day">("week");
@ -64,11 +56,10 @@ export default function CalendarPage() {
>(undefined); >(undefined);
const calendarContainerRef = useRef(null); const calendarContainerRef = useRef(null);
// const { events, familyEvents } = useCalendarContext(); const {data: events} = useGetEvents(isFamilyView)
const {data: events} = useGetEvents()
const onLayout = (event: LayoutChangeEvent) => { const onLayout = (event: LayoutChangeEvent) => {
const { height } = event.nativeEvent.layout; const {height} = event.nativeEvent.layout;
setCalendarHeight(height); setCalendarHeight(height);
}; };
@ -80,29 +71,25 @@ export default function CalendarPage() {
}; };
const handleMonthChange = (month: string) => { const handleMonthChange = (month: string) => {
// Get the current day and year
const currentDay = selectedDate.getDate(); const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear(); const currentYear = selectedDate.getFullYear();
// Find the new month index
const newMonthIndex = months.indexOf(month); const newMonthIndex = months.indexOf(month);
// Create a new Date object with the selected month, preserving day and year
const updatedDate = new Date(currentYear, newMonthIndex, currentDay); const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
// Update both selectedDate and activeDate in the Calendar component
setSelectedDate(updatedDate); setSelectedDate(updatedDate);
}; };
return ( return (
<View style={{ flex: 1, height: "100%", padding: 10 }}> <View style={{flex: 1, height: "100%", padding: 10}}>
<HeaderTemplate <HeaderTemplate
message={"Let's get your week started!"} message={"Let's get your week started!"}
isWelcome={true} isWelcome={true}
/> />
<View <View
style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }} style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
ref={calendarContainerRef} ref={calendarContainerRef}
onLayout={onLayout} onLayout={onLayout}
> >
@ -125,23 +112,23 @@ export default function CalendarPage() {
placeholder={"Select Month"} placeholder={"Select Month"}
mode={PickerModes.SINGLE} mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)} onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />} trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
> >
{months.map((month) => ( {months.map((month) => (
<Picker.Item key={month} label={month} value={month} /> <Picker.Item key={month} label={month} value={month}/>
))} ))}
</Picker> </Picker>
<View> <View>
<SegmentedControl <SegmentedControl
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]} segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
backgroundColor="#ececec" backgroundColor="#ececec"
inactiveColor="#919191" inactiveColor="#919191"
activeBackgroundColor="#ea156c" activeBackgroundColor="#ea156c"
activeColor="white" activeColor="white"
outlineColor="white" outlineColor="white"
outlineWidth={3} outlineWidth={3}
style={{ backgroundColor: "green" }} style={{backgroundColor: "green"}}
segmentLabelStyle={styles.segmentslblStyle} segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange} onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2} initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
@ -154,7 +141,7 @@ export default function CalendarPage() {
bodyContainerStyle={styles.calHeader} bodyContainerStyle={styles.calHeader}
mode={mode} mode={mode}
events={isFamilyView ? events ?? [] : events ?? []} events={isFamilyView ? events ?? [] : events ?? []}
eventCellStyle={{ backgroundColor: isFamilyView ? '#46a80a' : calendarColor }} eventCellStyle={(event) => ({backgroundColor: event.eventColor})}
onPressEvent={(event) => { onPressEvent={(event) => {
setEditVisible(true); setEditVisible(true);
setEventForEdit(event); setEventForEdit(event);
@ -166,8 +153,8 @@ export default function CalendarPage() {
/> />
)} )}
</View> </View>
<CalendarViewSwitch viewSwitch={setIsFamilyView} /> <CalendarViewSwitch viewSwitch={setIsFamilyView}/>
<AddEventDialog /> <AddEventDialog/>
{eventForEdit && ( {eventForEdit && (
<EditEventDialog <EditEventDialog
isVisible={editVisible} isVisible={editVisible}

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

@ -1,5 +1,5 @@
import {AntDesign, Ionicons} from "@expo/vector-icons"; import {AntDesign, Ionicons} from "@expo/vector-icons";
import React, {useState} from "react"; import React, {useCallback, useState} from "react";
import {Button, Checkbox, Text, View} from "react-native-ui-lib"; import {Button, Checkbox, Text, View} from "react-native-ui-lib";
import {ScrollView, StyleSheet} from "react-native"; import {ScrollView, StyleSheet} from "react-native";
import {colorMap} from "@/contexts/SettingsContext"; import {colorMap} from "@/contexts/SettingsContext";
@ -11,6 +11,7 @@ import {useAuthContext} from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData"; import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import {GoogleSignin} from "@react-native-google-signin/google-signin"; import {GoogleSignin} from "@react-native-google-signin/google-signin";
import * as AuthSession from "expo-auth-session"; import * as AuthSession from "expo-auth-session";
import debounce from "debounce";
GoogleSignin.configure({ GoogleSignin.configure({
webClientId: webClientId:
@ -40,10 +41,12 @@ const microsoftConfig = {
const CalendarSettingsPage = (props: { const CalendarSettingsPage = (props: {
setSelectedPage: (page: number) => void; setSelectedPage: (page: number) => void;
}) => { }) => {
const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
const [startDate, setStartDate] = useState<boolean>(true); const [startDate, setStartDate] = useState<boolean>(true);
const {profileData} = useAuthContext(); const {profileData} = useAuthContext();
const [selectedColor, setSelectedColor] = useState<string>(profileData?.eventColor ?? colorMap.pink);
const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(profileData?.eventColor ?? colorMap.pink);
const {mutateAsync: createEventFromProvider} = useCreateEventFromProvider(); const {mutateAsync: createEventFromProvider} = useCreateEventFromProvider();
const {mutateAsync: updateUserData} = useUpdateUserData(); const {mutateAsync: updateUserData} = useUpdateUserData();
@ -162,6 +165,28 @@ const CalendarSettingsPage = (props: {
} }
}; };
const debouncedUpdateUserData = useCallback(
debounce(async (color: string) => {
try {
await updateUserData({
newUserData: {
eventColor: color
}
});
} catch (error) {
console.error("Failed to update color:", error);
setSelectedColor(previousSelectedColor)
}
}, 500),
[]
);
const handleChangeColor = (color: string) => {
setPreviousSelectedColor(selectedColor)
setSelectedColor(color);
debouncedUpdateUserData(color);
};
return ( return (
<ScrollView> <ScrollView>
<View marginH-30> <View marginH-30>
@ -179,35 +204,35 @@ const CalendarSettingsPage = (props: {
Event Color Preference Event Color Preference
</Text> </Text>
<View row spread> <View row spread>
<TouchableOpacity onPress={() => setSelectedColor(colorMap.pink)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}> <View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && ( {selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white"/> <AntDesign name="check" size={30} color="white"/>
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => setSelectedColor(colorMap.orange)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
<View style={styles.colorBox} backgroundColor={colorMap.orange}> <View style={styles.colorBox} backgroundColor={colorMap.orange}>
{selectedColor == colorMap.orange && ( {selectedColor == colorMap.orange && (
<AntDesign name="check" size={30} color="white"/> <AntDesign name="check" size={30} color="white"/>
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => setSelectedColor(colorMap.green)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}> <View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && ( {selectedColor == colorMap.green && (
<AntDesign name="check" size={30} color="white"/> <AntDesign name="check" size={30} color="white"/>
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => setSelectedColor(colorMap.teal)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
<View style={styles.colorBox} backgroundColor={colorMap.teal}> <View style={styles.colorBox} backgroundColor={colorMap.teal}>
{selectedColor == colorMap.teal && ( {selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white"/> <AntDesign name="check" size={30} color="white"/>
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => setSelectedColor(colorMap.purple)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
<View style={styles.colorBox} backgroundColor={colorMap.purple}> <View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && ( {selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white"/> <AntDesign name="check" size={30} color="white"/>

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

@ -19,6 +19,7 @@ export interface UserProfile {
uid?: string; uid?: string;
googleToken?: string; googleToken?: string;
microsoftToken?: string; microsoftToken?: string;
eventColor?: string
} }
export interface ParentProfile extends UserProfile { export interface ParentProfile extends UserProfile {

40
hooks/firebase/useGetEvents.ts
View File

@ -1,31 +1,43 @@
import {useQuery} from "react-query"; import {useQuery} from "react-query";
import firestore from "@react-native-firebase/firestore"; import firestore from "@react-native-firebase/firestore";
import {ReactElement} from "react";
import {useAuthContext} from "@/contexts/AuthContext"; import {useAuthContext} from "@/contexts/AuthContext";
import {ICalendarEventBase} from "react-native-big-calendar"; import {colorMap} from "@/contexts/SettingsContext";
export const useGetEvents = () => { export const useGetEvents = (isFamilyView: boolean) => {
const {user} = useAuthContext() const { user, profileData } = useAuthContext();
return useQuery({ return useQuery({
queryKey: ["events", user?.uid], queryKey: ["events", user?.uid, isFamilyView],
queryFn: async () => { queryFn: async () => {
const snapshot = await firestore() const eventsQuery = firestore()
.collection("Events") .collection("Events")
.where("creatorId", "==", user?.uid) .where("creatorId", "==", user?.uid);
if (isFamilyView) {
eventsQuery.where("familyID", "==", profileData?.familyId);
}
const snapshot = await eventsQuery.get();
return await Promise.all(snapshot.docs.map(async (doc) => {
const data = doc.data();
const profileSnapshot = await firestore()
.collection("Profiles")
.doc(data.creatorId)
.get(); .get();
const events: ICalendarEventBase[] = snapshot.docs.map((doc) => { const profileData = profileSnapshot.data();
const data = doc.data(); const eventColor: string = profileData?.eventColor || colorMap.pink // Default color if not found
return { return {
title: data.title, title: data.title,
start: new Date(data.startDate.seconds * 1000), start: new Date(data.startDate.seconds * 1000),
end: new Date(data.endDate.seconds * 1000), end: new Date(data.endDate.seconds * 1000),
hideHours: data.allDay, hideHours: data.allDay,
eventColor: eventColor,
}; };
}));
},
}); });
};
return events;
}
})
}

2
hooks/firebase/useUpdateUserData.ts
View File

@ -5,7 +5,7 @@ import {UserProfile} from "@/hooks/firebase/types/profileTypes";
import {FirebaseAuthTypes} from "@react-native-firebase/auth"; import {FirebaseAuthTypes} from "@react-native-firebase/auth";
export const useUpdateUserData = () => { export const useUpdateUserData = () => {
const {user: currentUser, setProfileData, refreshProfileData} = useAuthContext(); const {user: currentUser, refreshProfileData} = useAuthContext();
return useMutation({ return useMutation({
mutationKey: ["updateUserData"], mutationKey: ["updateUserData"],

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

@ -437,7 +437,7 @@
); );
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG"; OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
PRODUCT_BUNDLE_IDENTIFIER = com.cally.app; PRODUCT_BUNDLE_IDENTIFIER = com.cally.app;
PRODUCT_NAME = "KaliFamilyPlanner"; PRODUCT_NAME = "CallyFamilyPlanner";
SWIFT_OBJC_BRIDGING_HEADER = "cally/cally-Bridging-Header.h"; SWIFT_OBJC_BRIDGING_HEADER = "cally/cally-Bridging-Header.h";
SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0; SWIFT_VERSION = 5.0;
@ -468,7 +468,7 @@
); );
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE"; OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
PRODUCT_BUNDLE_IDENTIFIER = com.cally.app; PRODUCT_BUNDLE_IDENTIFIER = com.cally.app;
PRODUCT_NAME = "KaliFamilyPlanner"; PRODUCT_NAME = "CallyFamilyPlanner";
SWIFT_OBJC_BRIDGING_HEADER = "cally/cally-Bridging-Header.h"; SWIFT_OBJC_BRIDGING_HEADER = "cally/cally-Bridging-Header.h";
SWIFT_VERSION = 5.0; SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2"; TARGETED_DEVICE_FAMILY = "1,2";

5
ios/cally/Info.plist
View File

@ -7,7 +7,7 @@
<key>CFBundleDevelopmentRegion</key> <key>CFBundleDevelopmentRegion</key>
<string>$(DEVELOPMENT_LANGUAGE)</string> <string>$(DEVELOPMENT_LANGUAGE)</string>
<key>CFBundleDisplayName</key> <key>CFBundleDisplayName</key>
<string>Kali - Family Planner</string> <string>Cally - Family Planner</string>
<key>CFBundleExecutable</key> <key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string> <string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key> <key>CFBundleIdentifier</key>
@ -45,7 +45,7 @@
</dict> </dict>
</array> </array>
<key>CFBundleVersion</key> <key>CFBundleVersion</key>
<string>18</string> <string>19</string>
<key>LSRequiresIPhoneOS</key> <key>LSRequiresIPhoneOS</key>
<true/> <true/>
<key>NSAppTransportSecurity</key> <key>NSAppTransportSecurity</key>
@ -81,6 +81,7 @@
<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> <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
</array> </array>
<key>UILaunchStoryboardName</key> <key>UILaunchStoryboardName</key>
<string>SplashScreen</string> <string>SplashScreen</string>

1
package.json
View File

@ -39,6 +39,7 @@
"@react-navigation/drawer": "^6.7.2", "@react-navigation/drawer": "^6.7.2",
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"debounce": "^2.1.1",
"expo": "~51.0.24", "expo": "~51.0.24",
"expo-auth-session": "^5.5.2", "expo-auth-session": "^5.5.2",
"expo-barcode-scanner": "~13.0.1", "expo-barcode-scanner": "~13.0.1",

735
yarn.lock
View File

File diff suppressed because it is too large Load Diff