mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 07:07:16 +00:00
fixed issue with pfp in tablet view
This commit is contained in:
@ -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<UserProfile | null>(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
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
@ -77,8 +90,8 @@ const UsersList = () => {
|
||||
backgroundColor={member.eventColor || colorMap.teal}
|
||||
>
|
||||
<Text color="white">
|
||||
{member.firstName.at(0)}
|
||||
{member.lastName.at(0)}
|
||||
{member.firstName.charAt(0)}
|
||||
{member.lastName.charAt(0)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@ -118,4 +131,4 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
});
|
||||
|
||||
export default UsersList;
|
||||
export default UsersList;
|
@ -73,7 +73,7 @@ export const EventCell: React.FC<EventCellProps> = React.memo((
|
||||
const styles = StyleSheet.create({
|
||||
eventCell: {
|
||||
flex: 1,
|
||||
borderRadius: 4,
|
||||
borderRadius: 5,
|
||||
paddingHorizontal: 8,
|
||||
paddingBottom: 8,
|
||||
height: '100%',
|
||||
|
@ -106,12 +106,20 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(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)) {
|
||||
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}
|
||||
eventCellStyle={memoizedEventCellStyle}
|
||||
allDayEventCellStyle={memoizedEventCellStyle}
|
||||
// eventCellTextColor={'#919191'}
|
||||
//allDayEventCellTextColor={'#919191'}
|
||||
// enableEnrichedEvents={true}
|
||||
// enrichedEventsByDate={enrichedEvents}
|
||||
onPressEvent={handlePressEvent}
|
||||
@ -313,7 +323,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
eventCell: {
|
||||
flex: 1,
|
||||
borderRadius: 4,
|
||||
borderRadius: 5,
|
||||
padding: 4,
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
|
Reference in New Issue
Block a user