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

Merge branch 'dev' of https://github.com/urosran/cally into dev

Browse Source
This commit is contained in:
ivic00
2024-11-05 22:00:23 +01:00
parent dac3f3c0a3 9d81fa5ba5
commit d6642726e6
6 changed files with 101 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import {AntDesign, Ionicons} from "@expo/vector-icons";
import {Ionicons} from "@expo/vector-icons";
import React, {useCallback, useState} from "react";
import {Button, Checkbox, Text, View} from "react-native-ui-lib";
import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
@ -10,7 +10,6 @@ import AppleIcon from "@/assets/svgs/AppleIcon";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
import OutlookIcon from "@/assets/svgs/OutlookIcon";
import ExpoLocalization from "expo-localization/src/ExpoLocalization";
import {colorMap} from "@/constants/colorMap";
import {useSetAtom} from "jotai";
import {settingsPageIndex} from "../calendar/atoms";
import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog";
@ -53,13 +52,6 @@ const CalendarSettingsPage = () => {
setModalVisible(false);
};
const [selectedColor, setSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
);
const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
);
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: clearToken} = useClearTokens();
@ -78,22 +70,6 @@ const CalendarSettingsPage = () => {
fetchAndSaveAppleEvents
} = useCalSync()
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 debouncedUpdateFirstDayOfWeek = useCallback(
debounce(async (firstDayOfWeek: string) => {
try {
@ -114,12 +90,6 @@ const CalendarSettingsPage = () => {
debouncedUpdateFirstDayOfWeek(firstDayOfWeek);
};
const handleChangeColor = (color: string) => {
setPreviousSelectedColor(selectedColor);
setSelectedColor(color);
debouncedUpdateUserData(color);
};
return (
<ScrollView>
<TouchableOpacity onPress={() => setPageIndex(0)}>
@ -140,52 +110,6 @@ const CalendarSettingsPage = () => {
</TouchableOpacity>
<View marginH-30 marginB-30>
<Text style={styles.subTitle}>Calendar settings</Text>
<View style={styles.card}>
<Text style={styles.cardTitle} marginB-14>
Event Color Preference
</Text>
<View row spread>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<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"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && (
<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"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.purple)}
>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.card}>
<Text style={styles.cardTitle}>Weekly Start Date</Text>
<View row marginV-5 marginT-20>

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

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react";
import React, {useCallback, useEffect, useRef, useState} from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import * as ImagePicker from "expo-image-picker";
@ -20,6 +20,7 @@ import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import { colorMap } from "@/constants/colorMap";
import DeleteProfileDialogs from "../user_components/DeleteProfileDialogs";
import {AntDesign} from "@expo/vector-icons";
const MyProfile = () => {
const { user, profileData } = useAuthContext();
@ -34,6 +35,13 @@ const MyProfile = () => {
string | ImagePicker.ImagePickerAsset | null
>(profileData?.pfp || null);
const [selectedColor, setSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
);
const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
);
const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
const handleHideDeleteDialog = () => {
@ -102,6 +110,28 @@ const MyProfile = () => {
? profileImage.uri
: profileImage;
const handleChangeColor = (color: string) => {
setPreviousSelectedColor(selectedColor);
setSelectedColor(color);
debouncedUpdateUserData(color);
};
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),
[]
);
return (
<ScrollView style={{ paddingBottom: 20, flex: 1 }}>
<View style={styles.card}>
@ -215,6 +245,52 @@ const MyProfile = () => {
</Picker>
</View>
</View>
<View style={styles.card}>
<Text style={styles.cardTitle} marginB-14>
Color Preference
</Text>
<View row spread>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<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"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && (
<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"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.purple)}
>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
</View>
</View>
<Button
size="large"
backgroundColor="#ff1637"
@ -248,6 +324,17 @@ const timeZoneItems = Object.keys(tz.zones)
));
const styles = StyleSheet.create({
cardTitle: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
colorBox: {
aspectRatio: 1,
justifyContent: "center",
alignItems: "center",
width: 51,
borderRadius: 12,
},
card: {
marginVertical: 15,
backgroundColor: "white",

9
components/pages/todos/AddChoreDialog.tsx
View File

@ -25,6 +25,7 @@ import CalendarIcon from "@/assets/svgs/CalendarIcon";
import ClockOIcon from "@/assets/svgs/ClockOIcon";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import RepeatFreq from "./RepeatFreq";
import {useAuthContext} from "@/contexts/AuthContext";
interface IAddChoreDialog {
isVisible: boolean;
@ -44,6 +45,7 @@ const defaultTodo = {
};
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const {user} = useAuthContext()
const {addToDo, updateToDo} = useToDosContext();
const [todo, setTodo] = useState<IToDo>(
addChoreDialogProps.selectedTodo ?? defaultTodo
@ -57,6 +59,11 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const titleRef = useRef<TextFieldRef>(null)
const {data: members} = useGetFamilyMembers();
let sortedMembers = members?.sort((a, b) => {
if (a.uid === user?.uid) return -1;
if (b.uid === user?.uid) return 1;
return 0;
})
const handleClose = () => {
setTodo(defaultTodo);
@ -272,7 +279,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
/>
)}
>
{members?.map((member) => (
{sortedMembers?.map((member) => (
<Picker.Item
key={member.uid}
label={member?.firstName + " " + member?.lastName}

4
components/shared/PointsSlider.tsx
View File

@ -13,7 +13,7 @@ const PointsSlider = (props: {
value={props.points}
onValueChange={(value) => props.setPoints(value)}
minimumValue={0}
step={10}
step={5}
thumbTintColor="white"
minimumTrackTintColor="#91d5ff"
thumbStyle={{borderWidth: 3, borderColor: '#91d5ff'}}
@ -21,7 +21,7 @@ const PointsSlider = (props: {
/>
<View row spread>
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
<Text style={{fontSize: 13, color: '#858585'}}>50</Text>
<Text style={{fontSize: 13, color: '#858585', marginLeft: 15}}>50</Text>
<Text style={{fontSize: 13, color: '#858585'}}>100</Text>
</View>
</View>

3
hooks/firebase/useCreateTodo.ts
View File

@ -61,9 +61,8 @@ export const useCreateTodo = () => {
dates.push(newDate);
});
// TODO: for the next 52 weeks
let index = 1;
for (let i = 0; i < 4; i++) {
for (let i = 0; i < 52; i++) {
dates?.forEach((dateToAdd) => {
index ++;
let newTodoDate = addWeeks(dateToAdd, i);

2
hooks/firebase/useUpdateTodo.ts
View File

@ -73,7 +73,7 @@ export const useUpdateTodo = () => {
dates.push(newDate);
});
let todosToAddCycles = 4;
let todosToAddCycles = 52;
if (firstTodo?.repeatType === REPEAT_TYPE.EVERY_WEEK) {
todosToAddCycles = filteredTodos?.length / firstTodo?.repeatDays?.length;
}