fixed issue with pfp in tablet view

This commit is contained in:
ivic00
2025-01-16 15:50:19 +01:00
parent 0c1bed62d9
commit 9c3b9b3663
3 changed files with 43 additions and 20 deletions

View File

@ -7,33 +7,43 @@ import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { selectedUserAtom } from "@/components/pages/calendar/atoms"; import { selectedUserAtom } from "@/components/pages/calendar/atoms";
type UserProfile = {
uid: string;
firstName: string;
lastName: string;
userType: string;
eventColor: string;
pfp?: string;
};
const UsersList = () => { const UsersList = () => {
const { user: currentUser } = useAuthContext(); const { user: currentUser } = useAuthContext();
const { data: familyMembers, refetch: refetchFamilyMembers } = const { data: familyMembers, refetch: refetchFamilyMembers } =
useGetFamilyMembers(); useGetFamilyMembers();
const [selectedUser, setSelectedUser] = useAtom(selectedUserAtom); const [selectedUser, setSelectedUser] = useAtom<UserProfile | null>(selectedUserAtom);
useEffect(() => { useEffect(() => {
refetchFamilyMembers(); refetchFamilyMembers();
}, []); }, []);
const sortedMembers = useMemo(() => { const sortedMembers = useMemo(() => {
const filtered = familyMembers const filtered = familyMembers?.filter(
?.filter((member) => member.userType !== ProfileType.FAMILY_DEVICE); (member) => member.userType !== ProfileType.FAMILY_DEVICE
) || [];
const currentUserData = filtered?.find(m => m.uid === currentUser?.uid); const currentUserData = filtered.find(m => m.uid === currentUser?.uid);
const parents = filtered?.filter(m => m.userType === ProfileType.PARENT && 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 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 caregivers = filtered.filter(m => m.userType === ProfileType.CAREGIVER && m.uid !== currentUser?.uid);
const familyViewOption = { const familyViewOption: UserProfile = {
uid: 'family-view', uid: 'family-view',
firstName: 'Family', firstName: 'Family',
lastName: 'View', lastName: 'View',
userType: 'Family View', userType: 'Family View',
eventColor: colorMap.pink eventColor: colorMap.pink
}; };
return currentUserData return currentUserData
? [currentUserData, ...parents, ...children, familyViewOption, ...caregivers] ? [currentUserData, ...parents, ...children, familyViewOption, ...caregivers]
: [...parents, ...children, familyViewOption, ...caregivers]; : [...parents, ...children, familyViewOption, ...caregivers];
@ -66,8 +76,11 @@ const UsersList = () => {
key={index} key={index}
source={{ uri: member.pfp }} source={{ uri: member.pfp }}
style={styles.pfp} style={styles.pfp}
borderRadius={200} imageStyle={{
imageStyle={{ borderWidth: 2, borderColor: "red" }} borderRadius: 200,
borderWidth: 2,
borderColor: member.eventColor || colorMap.teal
}}
/> />
) : ( ) : (
<View <View
@ -77,8 +90,8 @@ const UsersList = () => {
backgroundColor={member.eventColor || colorMap.teal} backgroundColor={member.eventColor || colorMap.teal}
> >
<Text color="white"> <Text color="white">
{member.firstName.at(0)} {member.firstName.charAt(0)}
{member.lastName.at(0)} {member.lastName.charAt(0)}
</Text> </Text>
</View> </View>
)} )}
@ -118,4 +131,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default UsersList; export default UsersList;

View File

@ -73,7 +73,7 @@ export const EventCell: React.FC<EventCellProps> = React.memo((
const styles = StyleSheet.create({ const styles = StyleSheet.create({
eventCell: { eventCell: {
flex: 1, flex: 1,
borderRadius: 4, borderRadius: 5,
paddingHorizontal: 8, paddingHorizontal: 8,
paddingBottom: 8, paddingBottom: 8,
height: '100%', height: '100%',

View File

@ -106,12 +106,20 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
const memoizedEventCellStyle = useCallback( const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => { (event: CalendarEvent) => {
let eventColor = event.eventColor; let eventColor = event.eventColor ?? colorMap.teal;
let textColor = getEventTextColor(eventColor);
if (!isFamilyView && (event.attendees?.includes(user?.uid!) || event.creatorId! === user?.uid)) { if (!isFamilyView && (event.attendees?.includes(user?.uid!) || event.creatorId! === user?.uid)) {
eventColor = profileData?.eventColor ?? colorMap.teal; eventColor = profileData?.eventColor ?? colorMap.teal;
textColor = getEventTextColor(eventColor);
}
return {
backgroundColor: eventColor,
fontSize: 14,
textColor: textColor, // Try adding explicit textColor
style: {
color: textColor // And nested style
}
} }
return {backgroundColor: eventColor, fontSize: 14, color: getEventTextColor(event?.eventColor)}
}, },
[] []
); );
@ -212,6 +220,8 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
// renderEvent={renderEvent} // renderEvent={renderEvent}
eventCellStyle={memoizedEventCellStyle} eventCellStyle={memoizedEventCellStyle}
allDayEventCellStyle={memoizedEventCellStyle} allDayEventCellStyle={memoizedEventCellStyle}
// eventCellTextColor={'#919191'}
//allDayEventCellTextColor={'#919191'}
// enableEnrichedEvents={true} // enableEnrichedEvents={true}
// enrichedEventsByDate={enrichedEvents} // enrichedEventsByDate={enrichedEvents}
onPressEvent={handlePressEvent} onPressEvent={handlePressEvent}
@ -313,7 +323,7 @@ const styles = StyleSheet.create({
}, },
eventCell: { eventCell: {
flex: 1, flex: 1,
borderRadius: 4, borderRadius: 5,
padding: 4, padding: 4,
height: '100%', height: '100%',
justifyContent: 'center', justifyContent: 'center',