mirror of
https://github.com/urosran/cally.git
synced 2025-07-09 22:57:16 +00:00
134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
import { View, Text, TouchableOpacity } from "react-native-ui-lib";
|
|
import React, { useEffect, useMemo } from "react";
|
|
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
|
import { ImageBackground, StyleSheet } from "react-native";
|
|
import { colorMap } from "@/constants/colorMap";
|
|
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
|
import { useAtom } from "jotai";
|
|
import { selectedUserAtom } from "@/components/pages/calendar/atoms";
|
|
|
|
type UserProfile = {
|
|
uid: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
userType: string;
|
|
eventColor: string;
|
|
pfp?: string;
|
|
};
|
|
|
|
const UsersList = () => {
|
|
const { user: currentUser } = useAuthContext();
|
|
const { data: familyMembers, refetch: refetchFamilyMembers } =
|
|
useGetFamilyMembers();
|
|
const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom);
|
|
|
|
useEffect(() => {
|
|
refetchFamilyMembers();
|
|
}, []);
|
|
|
|
const sortedMembers = useMemo(() => {
|
|
const filtered = familyMembers?.filter(
|
|
(member) => member.userType !== ProfileType.FAMILY_DEVICE
|
|
) || [];
|
|
|
|
const currentUserData = filtered.find(m => m.uid === currentUser?.uid);
|
|
const parents = filtered.filter(m => m.userType === ProfileType.PARENT && m.uid !== currentUser?.uid);
|
|
const children = filtered.filter(m => m.userType === ProfileType.CHILD && m.uid !== currentUser?.uid);
|
|
const caregivers = filtered.filter(m => m.userType === ProfileType.CAREGIVER && m.uid !== currentUser?.uid);
|
|
|
|
const familyViewOption: UserProfile = {
|
|
uid: 'family-view',
|
|
firstName: 'Family',
|
|
lastName: 'View',
|
|
userType: 'Family View',
|
|
eventColor: colorMap.pink
|
|
};
|
|
|
|
return currentUserData
|
|
? [currentUserData, ...parents, ...children, familyViewOption, ...caregivers]
|
|
: [...parents, ...children, familyViewOption, ...caregivers];
|
|
}, [familyMembers, currentUser]);
|
|
|
|
const capitalizeFirstLetter = (str: string) => {
|
|
if (!str) return "";
|
|
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
|
|
};
|
|
|
|
return (
|
|
<View centerH paddingT-10 marginB-70>
|
|
{sortedMembers?.map((member, index) => (
|
|
<TouchableOpacity
|
|
key={member.uid}
|
|
onPress={() => {
|
|
if (member.uid === 'family-view') {
|
|
setSelectedUser(null);
|
|
} else {
|
|
setSelectedUser(selectedUser?.uid === member.uid ? null : member);
|
|
}
|
|
}}
|
|
style={[
|
|
styles.memberContainer,
|
|
selectedUser?.uid === member.uid && styles.selectedMember,
|
|
]}
|
|
>
|
|
{member.pfp ? (
|
|
<ImageBackground
|
|
key={index}
|
|
source={{ uri: member.pfp }}
|
|
style={styles.pfp}
|
|
imageStyle={{
|
|
borderRadius: 200,
|
|
borderWidth: 2,
|
|
borderColor: member.eventColor || colorMap.teal
|
|
}}
|
|
/>
|
|
) : (
|
|
<View
|
|
key={index}
|
|
style={styles.pfp}
|
|
center
|
|
backgroundColor={member.eventColor || colorMap.teal}
|
|
>
|
|
<Text color="white">
|
|
{member.firstName.charAt(0)}
|
|
{member.lastName.charAt(0)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
<Text style={styles.fName}>{member.firstName}</Text>
|
|
<Text style={styles.role}>
|
|
{capitalizeFirstLetter(member.userType)}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
pfp: {
|
|
aspectRatio: 1,
|
|
width: 113,
|
|
borderRadius: 100,
|
|
marginBottom: 8,
|
|
},
|
|
fName: {
|
|
fontFamily: "Manrope_600SemiBold",
|
|
fontSize: 18.15,
|
|
},
|
|
role: {
|
|
fontFamily: "Manrope_600SemiBold",
|
|
fontSize: 12.95,
|
|
color: "#9b9b9b",
|
|
marginBottom: 20,
|
|
},
|
|
memberContainer: {
|
|
alignItems: "center",
|
|
marginBottom: 20,
|
|
},
|
|
selectedMember: {
|
|
opacity: 1,
|
|
},
|
|
});
|
|
|
|
export default UsersList; |