Merge pull request #1812 from ever-co/bug/isemailverified-and-image-u…

…ndefined-errors

added nullish operators to fix errors

apps/mobile/app/components/TeamDropdown/DropDown.tsx

@@ -55,7 +55,7 @@ const DropDown: FC<Props> = observer(function CreateTeamModal({
 							style={styles.teamImage}
 							size={40}
 							source={{
-								uri: activeTeam.image?.thumbUrl || activeTeam.logo || activeTeam.image?.fullUrl
+								uri: activeTeam?.image?.thumbUrl || activeTeam?.logo || activeTeam?.image?.fullUrl
 							}}
 						/>
 					) : (

apps/mobile/app/components/TeamDropdown/DropDownSection.tsx

@@ -143,11 +143,11 @@ const DropItem: FC<IDropItem> = observer(function DropItem({ team, changeTeam, i
 	return (
 		<View style={styles.indDropDown}>
 			<TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => changeTeam(team)}>
-				{team.image?.thumbUrl || team.logo || team.image?.fullUrl ? (
+				{team?.image?.thumbUrl || team?.logo || team?.image?.fullUrl ? (
 					<Avatar.Image
 						style={styles.teamImage}
 						size={30}
-						source={{ uri: team.image?.thumbUrl || team.logo || team.image?.fullUrl }}
+						source={{ uri: team?.image?.thumbUrl || team?.logo || team.image?.fullUrl }}
 					/>
 				) : (
 					<Avatar.Text
@@ -165,7 +165,7 @@ const DropItem: FC<IDropItem> = observer(function DropItem({ team, changeTeam, i
 						fontFamily: isActiveTeam ? typography.primary.semiBold : typography.primary.normal
 					}}
 				>
-					{limitTextCharaters({ text: team.name, numChars: resized ? 12 : 20 })} ({team.members.length})
+					{limitTextCharaters({ text: team?.name, numChars: resized ? 12 : 20 })} ({team?.members.length})
 				</Text>
 			</TouchableOpacity>
 			<TouchableOpacity onPress={() => navigateToSettings(team)}>

apps/mobile/app/screens/Authenticated/ProfileScreen/components/ProfileHeader.tsx

@@ -1,29 +1,24 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
-import React from "react"
-import { View, StyleSheet } from "react-native"
-import { typography, useAppTheme } from "../../../../theme"
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { typography, useAppTheme } from '../../../../theme';
 
 // COMPONENTS
-import { Text } from "../../../../components"
-import { IUser } from "../../../../services/interfaces/IUserData"
-import ProfileImage from "../../../../components/ProfileImage"
-import { observer } from "mobx-react-lite"
-import { useStores } from "../../../../models"
-import { Avatar } from "react-native-paper"
-import { limitTextCharaters } from "../../../../helpers/sub-text"
-import { imgTitle } from "../../../../helpers/img-title"
+import { Text } from '../../../../components';
+import { IUser } from '../../../../services/interfaces/IUserData';
+import ProfileImage from '../../../../components/ProfileImage';
+import { observer } from 'mobx-react-lite';
+import { useStores } from '../../../../models';
+import { Avatar } from 'react-native-paper';
+import { limitTextCharaters } from '../../../../helpers/sub-text';
+import { imgTitle } from '../../../../helpers/img-title';
 
 const ProfileHeader = observer((member: IUser) => {
-	const { colors, dark } = useAppTheme()
+	const { colors, dark } = useAppTheme();
 	return (
-		<View
-			style={[
-				styles.container,
-				{ backgroundColor: !dark ? "rgba(255, 255, 255, 0.5)" : colors.background },
-			]}
-		>
-			<View style={{ flexDirection: "row" }}>
+		<View style={[styles.container, { backgroundColor: !dark ? 'rgba(255, 255, 255, 0.5)' : colors.background }]}>
+			<View style={{ flexDirection: 'row' }}>
 				<ProfileImage user={member} size={70} />
 				<View style={styles.containerInfo}>
 					<Text style={[styles.name, { color: colors.primary }]}>{member?.name}</Text>
@@ -32,21 +27,21 @@ const ProfileHeader = observer((member: IUser) => {
 			</View>
 			<View
 				style={{
-					flexDirection: "column",
-					justifyContent: "flex-end",
-					paddingBottom: 10,
+					flexDirection: 'column',
+					justifyContent: 'flex-end',
+					paddingBottom: 10
 				}}
 			>
 				<UserTeam />
 			</View>
 		</View>
-	)
-})
+	);
+});
 
 const UserTeam = observer(() => {
 	const {
-		teamStore: { activeTeam },
-	} = useStores()
+		teamStore: { activeTeam }
+	} = useStores();
 
 	return (
 		<View style={styles.activeTeamContainer}>
@@ -55,10 +50,7 @@ const UserTeam = observer(() => {
 					style={styles.teamImage}
 					size={16}
 					source={{
-						uri:
-							activeTeam.image?.thumbUrl ||
-							activeTeam.logo ||
-							activeTeam.image?.fullUrl,
+						uri: activeTeam?.image?.thumbUrl || activeTeam?.logo || activeTeam?.image?.fullUrl
 					}}
 				/>
 			) : (
@@ -72,59 +64,59 @@ const UserTeam = observer(() => {
 
 			<Text style={styles.activeTeamTxt}>{`${limitTextCharaters({
 				text: activeTeam?.name,
-				numChars: 16,
+				numChars: 16
 			})} `}</Text>
 		</View>
-	)
-})
+	);
+});
 
 const styles = StyleSheet.create({
 	activeTeamContainer: {
-		alignItems: "center",
-		backgroundColor: "#F5F5F5",
+		alignItems: 'center',
+		backgroundColor: '#F5F5F5',
 		borderRadius: 60,
-		flexDirection: "row",
+		flexDirection: 'row',
 		gap: 3,
 		paddingHorizontal: 4,
-		paddingVertical: 0,
+		paddingVertical: 0
 	},
 	activeTeamTxt: {
 		fontFamily: typography.fonts.PlusJakartaSans.semiBold,
 		fontSize: 8,
-		fontWeight: "600",
+		fontWeight: '600'
 
 		// left: 12,
 	},
 	container: {
-		backgroundColor: "#fff",
-		flexDirection: "row",
-		justifyContent: "space-between",
+		backgroundColor: '#fff',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
 		paddingBottom: 24,
 		paddingHorizontal: 20,
-		paddingTop: 14,
+		paddingTop: 14
 	},
 	containerInfo: {
-		justifyContent: "center",
-		marginLeft: 10,
+		justifyContent: 'center',
+		marginLeft: 10
 	},
 	email: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.secondary.medium,
-		fontSize: 12,
+		fontSize: 12
 	},
 	name: {
-		color: "#282048",
+		color: '#282048',
 		fontFamily: typography.primary.semiBold,
-		fontSize: 18,
+		fontSize: 18
 	},
 	prefix: {
 		fontFamily: typography.fonts.PlusJakartaSans.semiBold,
 		fontSize: 8,
-		fontWeight: "600",
+		fontWeight: '600'
 	},
 	teamImage: {
-		backgroundColor: "#C1E0EA",
-	},
-})
+		backgroundColor: '#C1E0EA'
+	}
+});
 
-export default ProfileHeader
+export default ProfileHeader;

apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx

@@ -26,14 +26,14 @@ const TaskFilter = ({ profile, hook }: { profile: IUserProfile; hook: ITaskFilte
 			<FilterPopup hook={hook} visible={showFilterPopup} onDismiss={() => setShowFilterPopup(false)} />
 			<View style={{ ...$wrapButtons, backgroundColor: colors.background }}>
 				<TouchableOpacity
-					disabled={!profile.userProfile.isEmailVerified}
+					disabled={!profile.userProfile?.isEmailVerified}
 					onPress={() => setShowModal(true)}
 					style={[
 						$assignStyle,
 						{
 							backgroundColor: colors.background,
 							borderColor: colors.secondary,
-							opacity: profile.userProfile.isEmailVerified ? 1 : 0.5
+							opacity: profile.userProfile?.isEmailVerified ? 1 : 0.5
 						}
 					]}
 				>

apps/mobile/app/screens/Authenticated/TeamScreen/components/AcceptInviteModal.tsx

@@ -110,8 +110,8 @@ const AcceptInviteModal: FC<Props> = function InviteUserModal({
 			<View style={[styles.mainContainer, { backgroundColor: colors.background }]}>
 				<View style={{ width: '100%' }}>
 					<View style={styles.contentContainer}>
-						{invitation?.teams[0].image ? (
-							<Avatar.Image size={70} source={{ uri: invitation.teams[0].image.thumbUrl }} />
+						{invitation?.teams[0]?.image ? (
+							<Avatar.Image size={70} source={{ uri: invitation.teams[0].image?.thumbUrl }} />
 						) : (
 							<Avatar.Text size={70} label={imgTitle(invitation?.teams[0].name || '')} />
 						)}

apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx

@@ -75,25 +75,25 @@ const UserHeaderCard = ({ member, user }: { member: OT_Member; user: IUser }) =>
 
 	return (
 		<View style={styles.wrapProfileImg}>
-			{user.image?.thumbUrl || user.imageUrl || user.image?.fullUrl ? (
+			{user?.image?.thumbUrl || user?.imageUrl || user?.image?.fullUrl ? (
 				<Avatar.Image
 					style={styles.teamImage}
 					size={40}
 					source={{
-						uri: user.image?.thumbUrl || user.imageUrl || user.image?.fullUrl
+						uri: user?.image?.thumbUrl || user?.imageUrl || user?.image?.fullUrl
 					}}
 				/>
 			) : (
 				<Avatar.Text
 					style={styles.teamImage}
 					size={40}
-					label={imgTitleProfileAvatar(user.name)}
+					label={imgTitleProfileAvatar(user?.name)}
 					labelStyle={styles.prefix}
 				/>
 			)}
 			<TimerStatus status={getTimerStatusValue(timerStatus, currentMember, currentTeam?.public)} />
 			<Text style={[styles.name, { color: colors.primary }]} numberOfLines={1} ellipsizeMode="tail">
-				{user.name}
+				{user?.name}
 			</Text>
 		</View>
 	);