mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +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 { 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;
|
@ -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%',
|
||||||
|
@ -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',
|
||||||
|
Reference in New Issue
Block a user