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 branch 'refs/heads/dev'

Browse Source 
# Conflicts:
#	components/pages/calendar/ManuallyAddEventModal.tsx
This commit is contained in:
Milan Paunovic
2024-12-15 14:34:49 +01:00
parent fe9ee5334d d30ed9b130
commit 67c896b9c6
5 changed files with 164 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/pages/settings/SettingsPage.tsx
View File

@ -43,7 +43,7 @@ const SettingsPage = () => {
{pageIndex == 0 && (
<View flexG centerH marginH-30 marginT-30>
<Button
disabled={isntParent}
disabled={false}
backgroundColor="white"
style={styles.mainBtn}
children={
@ -63,7 +63,7 @@ const SettingsPage = () => {
onPress={() => setPageIndex(1)}
/>
<Button
disabled={isntParent}
disabled={false}
backgroundColor="white"
style={styles.mainBtn}
children={

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

@ -169,20 +169,22 @@ const MyGroup: React.FC<MyGroupProps> = ({
>
{member.pfp ? (
<ImageBackground
style={[
styles.pfp,
(member.eventColor && {
borderWidth: 2,
borderColor: member.eventColor,
}) ||
undefined,
]}
borderRadius={10.56}
style={[
styles.pfp,
(member.eventColor && {
borderWidth: 2,
borderColor: member.eventColor,
}) ||
undefined,
]}
source={{ uri: member.pfp || undefined }}
/>
) : (
<View
style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]}
style={[
styles.pfp,
{ backgroundColor: member.eventColor || colorMap.pink },
]}
/>
)}
<View row marginL-10 centerV>
@ -212,7 +214,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
{!!caregivers.length && (
<View style={styles.card}>
<Text style={styles.subTit} marginB-10 marginT-15>
<Text style={styles.subTit} marginB-10>
Caregivers
</Text>
{caregivers?.map((member) => (
@ -223,71 +225,104 @@ const MyGroup: React.FC<MyGroupProps> = ({
style={styles.familyCard}
row
centerV
padding-10
paddingT-10
>
<Avatar
source={{ uri: member?.pfp ?? undefined }}
size={40}
backgroundColor={Colors.grey60}
/>
<View marginL-10>
<Text text70M>
{member.pfp ? (
<ImageBackground
style={[
styles.pfp,
(member.eventColor && {
borderWidth: 2,
borderColor: member.eventColor,
}) ||
undefined,
]}
source={{ uri: member.pfp || undefined }}
/>
) : (
<View
style={[
styles.pfp,
{ backgroundColor: member.eventColor || colorMap.pink },
]}
/>
)}
<View row marginL-10 centerV>
<Text style={styles.name}>
{member.firstName} {member.lastName}
</Text>
<Text text90 grey40>
Caregiver
</Text>
</View>
<View flex-1 />
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
user={member}
/>
<View flexG />
<View row centerV gap-10>
<Text style={styles.userType}>Caregiver</Text>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
user={member}
/>
{profileData?.userType === ProfileType.PARENT && (
<UserOptions user={member} />
)}
</View>
</Card>
))}
</View>
)}
{!!familyDevices.length && (
<>
<Text text70 marginB-10 marginT-15>
<View style={styles.card}>
<Text style={styles.subTit} marginB-10>
Family Devices
</Text>
{familyDevices?.map((member, index) => (
<Card
enableShadow={false}
elevation={0}
key={`${member.firstName}_${member.lastName}_${index}`}
key={`${member.firstName}_${index}`}
style={styles.familyCard}
row
centerV
padding-10
paddingT-10
>
<Avatar
source={{ uri: member?.pfp ?? undefined }}
size={40}
backgroundColor={Colors.grey60}
/>
<View marginL-10>
<Text text70M>{member.firstName}</Text>
<Text text90 grey40>
Family Device
</Text>
{member.pfp ? (
<ImageBackground
style={[
styles.pfp,
(member.eventColor && {
borderWidth: 2,
borderColor: member.eventColor,
}) ||
undefined,
]}
imageStyle={{ borderRadius: 10.56 }}
source={{ uri: member.pfp || undefined }}
/>
) : (
<View
style={[
styles.pfp,
{ backgroundColor: member.eventColor || colorMap.pink },
]}
/>
)}
<View row marginL-10 centerV>
<Text style={styles.name}>{member.firstName}</Text>
</View>
<View flexG />
<View row centerV gap-10>
<Text style={styles.userType}>Family Device</Text>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
user={member}
/>
{profileData?.userType === ProfileType.PARENT && (
<UserOptions user={member} />
)}
</View>
<View flex-1 />
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
user={member}
/>
</Card>
))}
</>
</View>
)}
</View>
</ScrollView>
@ -630,7 +665,12 @@ const styles = StyleSheet.create({
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13,
},
pfp: { aspectRatio: 1, width: 37.03, borderRadius: 10.56 },
pfp: {
aspectRatio: 1,
width: 37.03,
borderRadius: 10.56,
overflow: "hidden",
},
userType: {
fontFamily: "Manrope_500Medium",
fontSize: 12,

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

@ -15,7 +15,7 @@ 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 { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import { colorMap } from "@/constants/colorMap";
@ -24,9 +24,13 @@ import { AntDesign } from "@expo/vector-icons";
import { useDeleteUser } from "@/hooks/firebase/useDeleteUser";
import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName";
import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
const MyProfile = () => {
const { user, profileData } = useAuthContext();
const { data: familyMembers } = useGetFamilyMembers();
const [takenColors, setTakenColors] = useState<string[]>([]);
const { data: hhName, refetch: refetchHHName } = useGetHouseholdName(
profileData.familyId
);
@ -91,6 +95,15 @@ const MyProfile = () => {
handleUpdateHouseholdName();
}, [householdName]);
useEffect(() => {
if (familyMembers) {
const colors = familyMembers
.filter(member => member?.eventColor && member.uid !== user?.uid)
.map(member => member.eventColor!);
setTakenColors(colors);
}
}, [familyMembers]);
useEffect(() => {
if (profileData) {
setFirstName(profileData.firstName || "");
@ -214,18 +227,22 @@ const MyProfile = () => {
)}
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Household
</Text>
<TextField
text70
placeholder="Household name"
style={styles.txtBox}
value={householdName}
onChangeText={async (value) => {
setHouseholdName(value);
}}
/>
{profileData?.userType == ProfileType.PARENT && (
<>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Household
</Text>
<TextField
text70
placeholder="Household name"
style={styles.txtBox}
value={householdName}
onChangeText={async (value) => {
setHouseholdName(value);
}}
/>
</>
)}
<Text text80 marginT-10 marginB-7 style={styles.label}>
First name
</Text>
@ -267,75 +284,75 @@ const MyProfile = () => {
Color Preference
</Text>
<View row spread>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)} disabled={takenColors.includes(colorMap.pink)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.pink) ? 0.1 : 1}]} 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}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} 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}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)} disabled={takenColors.includes(colorMap.green)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} 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}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} 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}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}disabled={takenColors.includes(colorMap.purple)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
</View>
<View row spread marginT-10>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)}>
<View style={styles.colorBox} backgroundColor={colorMap.navy}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)} disabled={takenColors.includes(colorMap.navy)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.navy) ? 0.1 : 1}]} 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}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.red)} disabled={takenColors.includes(colorMap.red)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.red) ? 0.1 : 1}]} 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.indigo)}>
<View style={styles.colorBox} backgroundColor={colorMap.indigo}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)} disabled={takenColors.includes(colorMap.indigo)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.indigo) ? 0.1 : 1}]} backgroundColor={colorMap.indigo}>
{selectedColor == colorMap.indigo && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)}>
<View style={styles.colorBox} backgroundColor={colorMap.emerald}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)} disabled={takenColors.includes(colorMap.emerald)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.emerald) ? 0.1 : 1}]} backgroundColor={colorMap.emerald}>
{selectedColor == colorMap.emerald && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)}>
<View style={styles.colorBox} backgroundColor={colorMap.violet}>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)} disabled={takenColors.includes(colorMap.violet)}>
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.violet) ? 0.1 : 1}]} backgroundColor={colorMap.violet}>
{selectedColor == colorMap.violet && (
<AntDesign name="check" size={30} color="white" />
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>

8
components/pages/todos/ToDosList.tsx
View File

@ -7,9 +7,9 @@ import {AntDesign} from "@expo/vector-icons";
import {IToDo} from "@/hooks/firebase/types/todoData";
import DropdownIcon from "@/assets/svgs/DropdownIcon";
import {Dropdown} from "react-native-element-dropdown";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import {StyleSheet} from "react-native";
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
const FILTER_OPTIONS = {
ME: "Me",
@ -108,13 +108,11 @@ const resolveFilterOptions = (members, user) => {
return options;
}
const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
const ToDosList = ({ isSettings, members }: { isSettings?: boolean, members?: Array<UserProfile> }) => {
const { toDos } = useToDosContext();
const [groupedToDos, setGroupedToDos] = useState([]);
const { user } = useAuthContext()
const { data: members } = useGetFamilyMembers();
const [expandedGroups, setExpandedGroups] = useState<{
[key: string]: boolean;
@ -130,7 +128,7 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
let selectedOption = options?.find((option) => option.value === user?.uid);
setSelectedFilter(selectedOption);
}, []);
}, [members]);
useEffect(() => {
if (toDos && selectedFilter) {

5
components/pages/todos/ToDosPage.tsx
View File

@ -11,11 +11,14 @@ import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
import UserChoresProgress from "./user-chores/UserChoresProgress";
import { useAtom } from "jotai";
import { toDosPageIndex } from "../calendar/atoms";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
const ToDosPage = () => {
const { profileData } = useAuthContext();
const [pageIndex, setPageIndex] = useAtom(toDosPageIndex);
const { data: members } = useGetFamilyMembers();
const { width, height } = Dimensions.get("screen");
const pageLink = (
<TouchableOpacity onPress={() => setPageIndex(1)}>
@ -65,7 +68,7 @@ const ToDosPage = () => {
/>
</View>
)}
<ToDosList />
<ToDosList members={members} />
</View>
</View>
)}