ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2026-10-23 10:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source 
# Conflicts:
#	ios/cally/Info.plist
This commit is contained in:
Milan Paunovic
2024-10-21 10:05:05 +02:00
parent ac19cdf7f6 a8eb2ff48b
commit 3add262f84
21 changed files with 638 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/pages/calendar/ManuallyAddEventModal.tsx
+1 -1
View File
@@ -421,7 +421,7 @@ export const ManuallyAddEventModal = () => {
</View>
<View marginL-35>
<AssigneesDisplay setSlectedAttendees={setSelectedAttendees}
<AssigneesDisplay setSelectedAttendees={setSelectedAttendees}
selectedAttendees={selectedAttendees}/>
</View>
components/pages/settings/CalendarSettingsPage.tsx
+226 -116
View File
@@ -90,8 +90,11 @@ const CalendarSettingsPage = (props: {
const userInfo = await userInfoResponse.json();
const googleMail = userInfo.email;
let googleAccounts = profileData?.googleAccounts;
const updatedGoogleAccounts = googleAccounts ? {...googleAccounts, [googleMail]: accessToken} : {[googleMail]: accessToken};
await updateUserData({
newUserData: {googleToken: accessToken, googleMail: googleMail},
newUserData: {googleAccounts: updatedGoogleAccounts},
});
await fetchAndSaveGoogleEvents({token: accessToken, email: googleMail})
@@ -171,9 +174,12 @@ const CalendarSettingsPage = (props: {
} else {
const outlookMail = userInfo.mail || userInfo.userPrincipalName;
let microsoftAccounts = profileData?.microsoftAccounts;
const updatedMicrosoftAccounts = microsoftAccounts ? {...microsoftAccounts, [outlookMail]: tokenData.access_token} : {[outlookMail]: tokenData.access_token};
// Update user data with Microsoft token and email
await updateUserData({
newUserData: {microsoftToken: tokenData.access_token, outlookMail: outlookMail},
newUserData: {microsoftAccounts: updatedMicrosoftAccounts},
});
await fetchAndSaveOutlookEvents(tokenData.access_token, outlookMail)
@@ -263,21 +269,61 @@ const CalendarSettingsPage = (props: {
debouncedUpdateUserData(color);
};
const clearToken = async (provider: "google" | "outlook" | "apple") => {
const clearToken = async (provider: "google" | "outlook" | "apple", email: string) => {
const newUserData: Partial<UserProfile> = {};
if (provider === "google") {
newUserData.googleToken = null;
newUserData.googleMail = null;
let googleAccounts = profileData?.googleAccounts;
if (googleAccounts) {
googleAccounts[email] = null;
newUserData.googleAccounts = googleAccounts;
}
} else if (provider === "outlook") {
newUserData.microsoftToken = null;
newUserData.outlookMail = null;
let microsoftAccounts = profileData?.microsoftAccounts;
if (microsoftAccounts) {
microsoftAccounts[email] = null;
newUserData.microsoftAccounts = microsoftAccounts;
}
} else if (provider === "apple") {
newUserData.appleToken = null;
newUserData.appleMail = null;
let appleAccounts = profileData?.appleAccounts;
if (appleAccounts) {
appleAccounts[email] = null;
newUserData.appleAccounts = appleAccounts;
}
}
await updateUserData({newUserData});
};
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;
}
});
}
return (
<ScrollView>
<View marginH-30 marginB-30>
@@ -378,8 +424,8 @@ const CalendarSettingsPage = (props: {
</Text>
<Button
onPress={() => !profileData?.googleToken ? promptAsync() : clearToken("google")}
label={profileData?.googleToken ? `Disconnect ${profileData.googleMail}` : "Connect Google"}
onPress={() => promptAsync()}
label={"Connect Google"}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
@@ -393,9 +439,30 @@ const CalendarSettingsPage = (props: {
color="black"
text70BL
/>
{profileData?.googleAccounts ? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
const googleToken = profileData?.googleAccounts?.[googleMail];
return googleToken && <Button
key={googleMail}
onPress={() => clearToken("google", googleMail)}
label={`Disconnect ${googleMail}`}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
}}
iconSource={() => (
<View marginR-15>
<GoogleIcon/>
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
}) : null}
<Button
onPress={() => !profileData?.appleToken ? handleAppleSignIn() : clearToken("google")}
label={profileData?.appleToken ? `Disconnect ${profileData.appleMail}` : "Connect Apple"}
onPress={() => handleAppleSignIn()}
label={"Connect Apple"}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
@@ -409,9 +476,30 @@ const CalendarSettingsPage = (props: {
color="black"
text70BL
/>
{profileData?.appleAccounts ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
const appleToken = profileData?.appleAccounts?.[appleEmail];
return appleToken && <Button
key={appleEmail}
onPress={() => clearToken("apple", appleEmail)}
label={`Disconnect ${appleEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
}}
iconSource={() => (
<View marginR-15>
<AppleIcon/>
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
}) : null}
<Button
onPress={() => !profileData?.microsoftToken ? handleMicrosoftSignIn() : clearToken("outlook")}
label={profileData?.microsoftToken ? `Disconnect ${profileData.outlookMail}` : "Connect Outlook"}
onPress={() => handleMicrosoftSignIn()}
label={"Connect Outlook"}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
@@ -425,8 +513,28 @@ const CalendarSettingsPage = (props: {
color="black"
text70BL
/>
{profileData?.microsoftAccounts ? Object.keys(profileData?.microsoftAccounts)?.map((microsoftEmail) => {
const microsoftToken = profileData?.microsoftAccounts?.[microsoftEmail];
return microsoftToken && <Button
key={microsoftEmail}
onPress={() => clearToken("outlook", microsoftEmail)}
label={`Disconnect ${microsoftEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
}}
iconSource={() => (
<View marginR-15>
<OutlookIcon/>
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
}) : null}
{(profileData?.googleMail || profileData?.outlookMail || profileData?.appleMail) && (
{(isConnectedToGoogle || isConnectedToMicrosoft || isConnectedToApple) && (
<>
<Text style={styles.subTitle} marginT-30 marginB-20>
Connected Calendars
@@ -434,111 +542,113 @@ const CalendarSettingsPage = (props: {
<View style={styles.noPaddingCard}>
<View style={{marginTop: 20}}>
{!!profileData?.googleMail && (
<TouchableOpacity
onPress={() => fetchAndSaveGoogleEvents({
token: profileData?.googleToken!,
email: profileData?.googleMail!
})}
>
<View row paddingR-20 center>
<Button
disabled={isSyncingGoogle}
onPress={() => fetchAndSaveGoogleEvents({
token: profileData?.googleToken!,
email: profileData?.googleMail!
})}
label={`Sync ${profileData?.googleMail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
iconSource={() => (
<View marginR-15>
<GoogleIcon/>
</View>
{profileData?.googleAccounts && Object.keys(profileData?.googleAccounts)?.map((googleEmail) => {
const googleToken = profileData?.googleAccounts?.[googleEmail];
return googleToken && (
<TouchableOpacity
onPress={() => fetchAndSaveGoogleEvents({token: googleToken, email: googleEmail})}
>
<View row paddingR-20 center>
<Button
disabled={isSyncingGoogle}
onPress={() => fetchAndSaveGoogleEvents({token: googleToken, email: googleEmail})}
label={`Sync ${googleEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
iconSource={() => (
<View marginR-15>
<GoogleIcon/>
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{isSyncingGoogle ? (
<ActivityIndicator/>
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
</View>
</TouchableOpacity>
)
})}
{isSyncingGoogle ? (
<ActivityIndicator/>
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
)}
</View>
</TouchableOpacity>
)}
{!!profileData?.appleMail && (
<TouchableOpacity
onPress={() => fetchAndSaveAppleEvents({
email: profileData?.appleMail!,
token: profileData?.appleToken!
})}>
<View row paddingR-20 center>
<Button
disabled={isSyncingApple}
onPress={() => fetchAndSaveAppleEvents({
email: profileData?.appleMail!,
token: profileData?.appleToken!
})}
label={`Sync ${profileData?.appleMail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
iconSource={() => (
<View marginR-15>
<AppleIcon/>
</View>
{profileData?.appleAccounts && Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
const appleToken = profileData?.appleAccounts?.[appleEmail];
return appleToken && (
<TouchableOpacity
onPress={() => fetchAndSaveAppleEvents({
email: appleEmail,
token: appleToken
})}>
<View row paddingR-20 center>
<Button
disabled={isSyncingApple}
onPress={() => fetchAndSaveAppleEvents({
email: appleEmail,
token: appleToken
})}
label={`Sync ${appleEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
iconSource={() => (
<View marginR-15>
<AppleIcon/>
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{isSyncingApple ? (
<ActivityIndicator/>
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{isSyncingApple ? (
<ActivityIndicator/>
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
)}
</View>
</TouchableOpacity>
)}
</View>
</TouchableOpacity>
)
})}
{!!profileData?.outlookMail && (
<TouchableOpacity
onPress={() => fetchAndSaveOutlookEvents({
token: profileData?.microsoftToken!,
email: profileData?.outlookMail!
})}
>
<View row paddingR-20 center>
<Button
disabled={isSyncingOutlook}
onPress={() => fetchAndSaveOutlookEvents({
token: profileData?.microsoftToken!,
email: profileData?.outlookMail!
})}
label={`Sync ${profileData?.outlookMail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
iconSource={() => (
<View marginR-15>
<OutlookIcon/>
</View>
{profileData?.microsoftAccounts && Object.keys(profileData?.microsoftAccounts)?.map((microsoftEmail) => {
const microsoftToken = profileData?.microsoftAccounts?.[microsoftEmail];
return microsoftToken && (
<TouchableOpacity
onPress={() => fetchAndSaveOutlookEvents({
token: microsoftToken,
email: microsoftEmail
})}
>
<View row paddingR-20 center>
<Button
disabled={isSyncingOutlook}
onPress={() => fetchAndSaveOutlookEvents({
token: microsoftToken,
email: microsoftEmail
})}
label={`Sync ${microsoftEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
iconSource={() => (
<View marginR-15>
<OutlookIcon/>
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{isSyncingOutlook ? (
<ActivityIndicator/>
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{isSyncingOutlook ? (
<ActivityIndicator/>
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
)}
</View>
</TouchableOpacity>
)}
</View>
</TouchableOpacity>
)
})}
</View>
</View>
</>
components/pages/settings/user_settings_views/MyGroup.tsx
+2 -2
View File
@@ -174,7 +174,7 @@ const MyGroup = () => {
padding-10
>
<Avatar
source={{uri: "https://via.placeholder.com/60"}}
source={{uri: member?.pfp ?? undefined}}
size={40}
backgroundColor={Colors.grey60}
/>
@@ -213,7 +213,7 @@ const MyGroup = () => {
padding-10
>
<Avatar
source={{uri: "https://via.placeholder.com/60"}}
source={{uri: member?.pfp ?? undefined}}
size={40}
backgroundColor={Colors.grey60}
/>
components/pages/settings/user_settings_views/MyProfile.tsx
+95 -52
View File
@@ -1,30 +1,34 @@
import {Colors, Picker, Text, TextField, View} from "react-native-ui-lib";
import React, {useEffect, useRef, useState} from "react";
import {ImageBackground, StyleSheet} from "react-native";
import {StyleSheet, TouchableOpacity} from "react-native";
import {ScrollView} from "react-native-gesture-handler";
import * as ImagePicker from "expo-image-picker";
import {Colors, Image, Picker, Text, TextField, View} from "react-native-ui-lib";
import Ionicons from "@expo/vector-icons/Ionicons";
import * as tz from "tzdata";
import * as Localization from "expo-localization";
import debounce from "debounce";
import {useAuthContext} from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import Ionicons from "@expo/vector-icons/Ionicons";
import * as tz from 'tzdata';
import * as Localization from 'expo-localization';
import debounce from "debounce";
import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture";
const MyProfile = () => {
const {user, profileData} = useAuthContext();
const [timeZone, setTimeZone] = useState<string>(profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone);
const [timeZone, setTimeZone] = useState<string>(
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
);
const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
const [firstName, setFirstName] = useState<string>(
profileData?.firstName || ""
);
const [profileImage, setProfileImage] = useState<string | ImagePicker.ImagePickerAsset | null>(profileData?.pfp || null);
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: changeProfilePicture} = useChangeProfilePicture();
const isFirstRender = useRef(true);
const handleUpdateUserData = async () => {
await updateUserData({newUserData: {firstName, lastName, timeZone}});
}
};
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
@@ -34,22 +38,68 @@ const MyProfile = () => {
return;
}
debouncedUserDataUpdate();
}, [timeZone, lastName, firstName]);
}, [timeZone, lastName, firstName, profileImage]);
useEffect(() => {
if (profileData) {
setFirstName(profileData.firstName || "");
setLastName(profileData.lastName || "");
// setProfileImage(profileData.pfp || null);
setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!);
}
}, [profileData]);
const pickImage = async () => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!permissionResult.granted) {
alert("Permission to access camera roll is required!");
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
if (!result.canceled) {
setProfileImage(result.assets[0].uri);
changeProfilePicture(result.assets[0])
}
};
const handleClearImage = async () => {
await updateUserData({newUserData: {pfp: null}});
setProfileImage(null)
}
const pfpUri = profileImage && typeof profileImage === 'object' && 'uri' in profileImage ? profileImage.uri : profileImage;
return (
<ScrollView style={{paddingBottom: 100, flex: 1}}>
<View style={styles.card}>
<Text style={styles.subTit}>Your Profile</Text>
<View row spread paddingH-15 centerV marginV-15>
<ImageBackground
style={styles.pfp}
source={require("../../../../assets/images/profile-picture.png")}
/>
<TouchableOpacity onPress={pickImage}>
<Image
key={pfpUri}
style={styles.pfp}
source={pfpUri ? {uri: pfpUri} : null}
/>
</TouchableOpacity>
<Text style={styles.photoSet} color="#50be0c">
Change Photo
</Text>
<Text style={styles.photoSet}>Remove Photo</Text>
<TouchableOpacity onPress={pickImage}>
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
{profileData?.pfp ? "Change" : "Add"} Photo
</Text>
</TouchableOpacity>
{profileData?.pfp && (
<TouchableOpacity onPress={handleClearImage}>
<Text style={styles.photoSet}>Remove Photo</Text>
</TouchableOpacity>
)}
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 style={styles.label}>
@@ -94,24 +144,27 @@ const MyProfile = () => {
<Text style={styles.jakarta12}>Time Zone</Text>
<View style={styles.viewPicker}>
<Picker
// editable={!isLoading}
value={timeZone}
onChange={(item) => {
setTimeZone(item as string)
}}
onChange={(item) => setTimeZone(item as string)}
showSearch
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15
}}>
<Ionicons name={"chevron-down"} style={{alignSelf: "center"}} size={20}
color={"#000000"}/>
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{alignSelf: "center"}}
size={20}
color={"#000000"}
/>
</View>
}
>
@@ -123,9 +176,11 @@ const MyProfile = () => {
);
};
const timeZoneItems = Object.keys(tz.zones).sort().map((zone) => (
<Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/>
));
const timeZoneItems = Object.keys(tz.zones)
.sort()
.map((zone) => (
<Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/>
));
const styles = StyleSheet.create({
card: {
@@ -139,7 +194,7 @@ const styles = StyleSheet.create({
pfp: {
aspectRatio: 1,
width: 65.54,
backgroundColor: "green",
backgroundColor: "gray",
borderRadius: 20,
},
txtBox: {
@@ -150,7 +205,7 @@ const styles = StyleSheet.create({
padding: 15,
height: 45,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13
fontSize: 13,
},
subTit: {
fontFamily: "Manrope_500Medium",
@@ -159,11 +214,11 @@ const styles = StyleSheet.create({
label: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12,
color: "#a1a1a1"
color: "#a1a1a1",
},
photoSet: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13.07
fontSize: 13.07,
},
jakarta12: {
paddingVertical: 10,
@@ -171,18 +226,6 @@ const styles = StyleSheet.create({
fontSize: 12,
color: "#a1a1a1",
},
picker: {
borderRadius: 50,
paddingVertical: 12,
paddingHorizontal: 16,
backgroundColor: Colors.grey80,
marginBottom: 16,
borderColor: Colors.grey50,
borderWidth: 1,
marginTop: -20,
height: 40,
zIndex: 10,
},
viewPicker: {
borderRadius: 50,
backgroundColor: Colors.grey80,
@@ -204,4 +247,4 @@ const styles = StyleSheet.create({
},
});
export default MyProfile;
export default MyProfile;
components/pages/todos/AddChore.tsx
+45 -53
View File
@@ -1,64 +1,56 @@
import { 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 {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 AddChoreDialog from "./AddChoreDialog";
const AddChore = () => {
const [isVisible, setIsVisible] = useState<boolean>(false);
const [isVisible, setIsVisible] = useState<boolean>(false);
return (
<LinearGradient
colors={["transparent", "#f9f8f7"]}
locations={[0, 0.5]}
style={styles.gradient}
>
<View style={styles.buttonContainer}>
<Button
marginH-25
size={ButtonSize.large}
style={styles.button}
onPress={() => setIsVisible(!isVisible)}
return (
<LinearGradient
colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
locations={[0, 0.5, 1]}
style={styles.gradient}
>
<AntDesign name="plus" size={24} color="white" />
<Text white text60R marginL-10>
Add To Do
</Text>
</Button>
</View>
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
</LinearGradient>
);
<View style={styles.buttonContainer}>
<Button
marginH-25
size={ButtonSize.large}
style={styles.button}
onPress={() => setIsVisible(!isVisible)}
>
<AntDesign name="plus" size={24} color="white"/>
<Text white text60R marginL-10>
Create new to do
</Text>
</Button>
</View>
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
</LinearGradient>
);
};
export default AddChore;
const styles = StyleSheet.create({
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
gradient: {
height: "25%",
position: "absolute",
bottom: 0,
width: "100%",
},
buttonContainer: {
position: "absolute",
bottom: 25,
width: "100%",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 20,
},
topBtn: {
backgroundColor: "white",
color: "#05a8b6",
},
rotateSwitch: {
marginLeft: 35,
marginBottom: 10,
marginTop: 25,
},
});
gradient: {
height: 150,
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
},
buttonContainer: {
width: "100%",
alignItems: "center",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 30,
},
});
components/pages/todos/AddChoreDialog.tsx
+47 -20
View File
@@ -1,4 +1,4 @@
import { View, Text, Button, Switch } from "react-native-ui-lib";
import {View, Text, Button, Switch, PickerModes} from "react-native-ui-lib";
import React, { useRef, useState } from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
@@ -15,6 +15,7 @@ import { Dimensions, StyleSheet } from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { IToDo } from "@/hooks/firebase/types/todoData";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
interface IAddChoreDialog {
isVisible: boolean;
@@ -29,6 +30,7 @@ const defaultTodo = {
date: new Date(),
rotate: false,
repeatType: "Every week",
assignees: []
};
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
@@ -36,12 +38,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const [todo, setTodo] = useState<IToDo>(
addChoreDialogProps.selectedTodo ?? defaultTodo
);
const [selectedAssignees, setSelectedAssignees] = useState<string[]>(addChoreDialogProps?.selectedTodo?.assignees ?? []);
const { width, height } = Dimensions.get("screen");
const [points, setPoints] = useState<number>(todo.points);
const {data: members} = useGetFamilyMembers();
const handleClose = () => {
setTodo(defaultTodo);
setSelectedAssignees([]);
addChoreDialogProps.setIsVisible(false);
};
@@ -95,12 +100,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
onPress={() => {
try {
if (addChoreDialogProps.selectedTodo) {
updateToDo({ ...todo, points: points });
updateToDo({ ...todo, points: points, assignees: selectedAssignees });
} else {
addToDo({
...todo,
done: false,
points: points,
assignees: selectedAssignees
});
}
handleClose();
@@ -182,25 +188,46 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
<Text text70R marginL-10>
Assignees
</Text>
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
/>
<View flex-1/>
<Picker
marginL-8
value={selectedAssignees}
onChange={(value) => {
setSelectedAssignees([...selectedAssignees, ...value]);
}}
style={{ marginVertical: 5 }}
mode={PickerModes.MULTI}
renderInput={() =>
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c"/>
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
/>
}
>
{members?.map((member) => (
<Picker.Item
key={member.uid}
label={member?.firstName + " " + member?.lastName}
value={member?.uid!}
/>
))}
</Picker>
</View>
<View row marginL-27 marginT-0>
<AssigneesDisplay />
<AssigneesDisplay selectedAttendees={selectedAssignees} setSelectedAttendees={setSelectedAssignees}/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text text80>Take Turns</Text>
components/pages/todos/ToDoItem.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
const { updateToDo } = useToDosContext();
const [editing, setEditing] = useState<boolean>(false);
const [visible, setVisible] = useState<boolean>(false);
const [points, setPoints] = useState(props.item.points);
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@@ -42,7 +42,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
opacity: props.item.done ? 0.3 : 1,
}}
>
<AddChoreDialog isVisible={editing} setIsVisible={setEditing} selectedTodo={props.item}/>
{visible && <AddChoreDialog isVisible={visible} setIsVisible={setVisible} selectedTodo={props.item}/>}
<View paddingB-8 row spread>
<Text
text70
@@ -52,7 +52,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
fontSize: 15,
}}
onPress={() => {
setEditing(true);
setVisible(true);
}}
>
{props.item.title}
components/pages/todos/ToDosPage.tsx
+67 -63
View File
@@ -1,79 +1,83 @@
import { View, Text, Button, ButtonSize } from "react-native-ui-lib";
import React, { useState } from "react";
import {Button, Text, View} from "react-native-ui-lib";
import React, {useState} from "react";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import AddChore from "./AddChore";
import ProgressCard from "./ProgressCard";
import ToDosList from "./ToDosList";
import { Dimensions, ScrollView } from "react-native";
import { StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import {Dimensions, ScrollView, StyleSheet} from "react-native";
import {TouchableOpacity} from "react-native-gesture-handler";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
import UserChoresProgress from "./user-chores/UserChoresProgress";
const ToDosPage = () => {
const [pageIndex, setPageIndex] = useState<number>(0);
const { profileData } = useAuthContext();
const { width, height } = Dimensions.get("screen");
const pageLink = (
<TouchableOpacity onPress={() => setPageIndex(1)}>
<Text color="#ea156d" style={{ fontSize: 14 }}>
View family progress
</Text>
</TouchableOpacity>
);
return (
<View paddingH-25 backgroundColor="#f9f8f7" height={"100%"} width={width}>
{pageIndex == 0 && (
<View>
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
<View>
<HeaderTemplate
message="Here are your To Do's"
isWelcome={true}
link={profileData?.userType == ProfileType.PARENT && pageLink}
/>
{profileData?.userType == ProfileType.CHILD && (
<View marginB-25>
<ProgressCard
children={
<Button
backgroundColor="transparent"
onPress={() => setPageIndex(2)}
>
<Text
style={{
textDecorationLine: "underline",
color: "#05a8b6",
}}
const [pageIndex, setPageIndex] = useState<number>(0);
const {profileData} = useAuthContext();
const {width, height} = Dimensions.get("screen");
const pageLink = (
<TouchableOpacity onPress={() => setPageIndex(1)}>
<Text color="#ea156d" style={{fontSize: 14}}>
View family progress
</Text>
</TouchableOpacity>
);
return (
<>
<View paddingH-25 backgroundColor="#f9f8f7" height={"100%"} width={width}>
{pageIndex == 0 && (
<View>
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
View your full progress report here
</Text>
</Button>
}
/>
</View>
)}
<ToDosList />
<View>
<HeaderTemplate
message="Here are your To Do's"
isWelcome={true}
link={profileData?.userType == ProfileType.PARENT && pageLink}
/>
{profileData?.userType == ProfileType.CHILD && (
<View marginB-25>
<ProgressCard
children={
<Button
backgroundColor="transparent"
onPress={() => setPageIndex(2)}
>
<Text
style={{
textDecorationLine: "underline",
color: "#05a8b6",
}}
>
View your full progress report here
</Text>
</Button>
}
/>
</View>
)}
<ToDosList/>
</View>
</ScrollView>
</View>
)}
{pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex}/>}
{pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex}/>}
</View>
</ScrollView>
{profileData?.userType == ProfileType.PARENT && <AddChore />}
</View>
)}
{pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex} />}
{pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
</View>
);
{
profileData?.userType == ProfileType.PARENT && <AddChore/>
}
</>
)
;
};
const styles = StyleSheet.create({
linkBtn: {
backgroundColor: "transparent",
padding: 0,
},
linkBtn: {
backgroundColor: "transparent",
padding: 0,
},
});
export default ToDosPage;
components/shared/AssigneesDisplay.tsx
+8 -8
View File
@@ -1,23 +1,23 @@
import React from "react";
import {ImageBackground, StyleSheet} from "react-native";
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import {StyleSheet} from "react-native";
import {Image, Text, TouchableOpacity, View} from "react-native-ui-lib";
import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
const AssigneesDisplay = ({selectedAttendees, setSelectedAttendees}: {
selectedAttendees: string[],
setSlectedAttendees: (value: React.SetStateAction<string[]>) => void
setSelectedAttendees: (value: React.SetStateAction<string[]>) => void
}) => {
const {data: members} = useGetFamilyMembers(true);
const selectedMembers = members?.filter((x) => selectedAttendees.includes(x?.uid!));
const selectedMembers = members?.filter((x) => selectedAttendees?.includes(x?.uid!));
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
};
const removeAttendee = (uid: string) => {
setSlectedAttendees((prev) => prev.filter((x) => x !== uid));
setSelectedAttendees((prev) => prev.filter((x) => x !== uid));
}
return (
@@ -26,7 +26,7 @@ const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
<TouchableOpacity key={member.uid} style={styles.assigneeWrapper}
onPress={() => removeAttendee(member.uid!)}>
{member?.pfp ? (
<ImageBackground
<Image
source={{uri: member?.pfp}}
style={styles.image}
children={<RemoveAssigneeBtn/>}
@@ -42,7 +42,7 @@ const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
</TouchableOpacity>
))}
{selectedAttendees.length === 0 && <Text>No attendees added</Text>}
{selectedAttendees?.length === 0 && <Text>No attendees added</Text>}
</View>
);
};