diff --git a/components/pages/(tablet_pages)/tablet_components/UsersList.tsx b/components/pages/(tablet_pages)/tablet_components/UsersList.tsx index 22a9b67..e893cb3 100644 --- a/components/pages/(tablet_pages)/tablet_components/UsersList.tsx +++ b/components/pages/(tablet_pages)/tablet_components/UsersList.tsx @@ -7,33 +7,43 @@ 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); + const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom); useEffect(() => { refetchFamilyMembers(); }, []); const sortedMembers = useMemo(() => { - const filtered = familyMembers - ?.filter((member) => member.userType !== ProfileType.FAMILY_DEVICE); + 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 = { + 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]; @@ -66,8 +76,11 @@ const UsersList = () => { key={index} source={{ uri: member.pfp }} style={styles.pfp} - borderRadius={200} - imageStyle={{ borderWidth: 2, borderColor: "red" }} + imageStyle={{ + borderRadius: 200, + borderWidth: 2, + borderColor: member.eventColor || colorMap.teal + }} /> ) : ( { backgroundColor={member.eventColor || colorMap.teal} > - {member.firstName.at(0)} - {member.lastName.at(0)} + {member.firstName.charAt(0)} + {member.lastName.charAt(0)} )} @@ -118,4 +131,4 @@ const styles = StyleSheet.create({ }, }); -export default UsersList; +export default UsersList; \ No newline at end of file diff --git a/components/pages/calendar/EventCell.tsx b/components/pages/calendar/EventCell.tsx index 2494621..c99fe12 100644 --- a/components/pages/calendar/EventCell.tsx +++ b/components/pages/calendar/EventCell.tsx @@ -73,7 +73,7 @@ export const EventCell: React.FC = React.memo(( const styles = StyleSheet.create({ eventCell: { flex: 1, - borderRadius: 4, + borderRadius: 5, paddingHorizontal: 8, paddingBottom: 8, height: '100%',