added keyboard avoiding view, also some nullish operators to prevent …

…errors with profile images
ever-co · Nov 29, 2023 · c0fa044 · c0fa044
1 parent 00a1668
commit c0fa044
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 184 deletions.
diff --git a/apps/mobile/app/components/ProfileImage.tsx b/apps/mobile/app/components/ProfileImage.tsx
@@ -1,60 +1,58 @@
 /* eslint-disable react-native/no-unused-styles */
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
-import React, { FC, useMemo } from "react"
-import { View, StyleSheet } from "react-native"
-import { Avatar } from "react-native-paper"
-import { IUser } from "../services/interfaces/IUserData"
-import { typography, useAppTheme } from "../theme"
-import { imgTitleProfileAvatar } from "../helpers/img-title-profile-avatar"
-import { useOrganizationTeam } from "../services/hooks/useOrganization"
-import { useTimer } from "../services/hooks/useTimer"
-import { getTimerStatusValue } from "../helpers/get-timer-status"
+import React, { FC, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Avatar } from 'react-native-paper';
+import { IUser } from '../services/interfaces/IUserData';
+import { typography, useAppTheme } from '../theme';
+import { imgTitleProfileAvatar } from '../helpers/img-title-profile-avatar';
+import { useOrganizationTeam } from '../services/hooks/useOrganization';
+import { useTimer } from '../services/hooks/useTimer';
+import { getTimerStatusValue } from '../helpers/get-timer-status';
 import {
 	idleStatusIconLarge,
 	onlineAndTrackingTimeStatusIconLarge,
 	pauseStatusIconLarge,
-	suspendedStatusIconLarge,
-} from "./svgs/icons"
-import { SvgXml } from "react-native-svg"
+	suspendedStatusIconLarge
+} from './svgs/icons';
+import { SvgXml } from 'react-native-svg';
 
 interface Props {
-	user: IUser
-	size?: number
+	user: IUser;
+	size?: number;
 }
 const ProfileImage: FC<Props> = ({ user, size }) => {
-	const { colors } = useAppTheme()
+	const { colors } = useAppTheme();
 
-	const { currentTeam } = useOrganizationTeam()
+	const { currentTeam } = useOrganizationTeam();
 
-	const currentMember = currentTeam?.members?.find(
-		(currentMember) => currentMember.employee.userId === user.id,
-	)
+	const currentMember = currentTeam?.members?.find((currentMember) => currentMember?.employee?.userId === user?.id);
 
-	const { timerStatus } = useTimer()
+	const { timerStatus } = useTimer();
 
-	const status = getTimerStatusValue(timerStatus, currentMember, currentTeam?.public)
+	const status = getTimerStatusValue(timerStatus, currentMember, currentTeam?.public);
 
 	const imageUrl = useMemo(
 		() => user?.image?.thumbUrl || user?.image?.fullUrl || user?.imageUrl,
-		[user?.image?.thumb, user],
-	)
+		[user?.image?.thumb, user]
+	);
 
-	let iconSvgXml = ""
+	let iconSvgXml = '';
 
 	switch (status) {
-		case "online":
-			iconSvgXml = onlineAndTrackingTimeStatusIconLarge
-			break
-		case "pause":
-			iconSvgXml = pauseStatusIconLarge
-			break
-		case "idle":
-			iconSvgXml = idleStatusIconLarge
-			break
-		case "suspended":
-			iconSvgXml = suspendedStatusIconLarge
-			break
+		case 'online':
+			iconSvgXml = onlineAndTrackingTimeStatusIconLarge;
+			break;
+		case 'pause':
+			iconSvgXml = pauseStatusIconLarge;
+			break;
+		case 'idle':
+			iconSvgXml = idleStatusIconLarge;
+			break;
+		case 'suspended':
+			iconSvgXml = suspendedStatusIconLarge;
+			break;
 	}
 
 	return (
@@ -68,16 +66,16 @@ const ProfileImage: FC<Props> = ({ user, size }) => {
 							width: size,
 							height: size,
 							borderColor:
-								status === "online"
-									? "#6EE7B7"
-									: status === "pause"
-									? "#EFCF9E"
-									: status === "idle"
-									? "#F5BEBE"
-									: "#DCD6D6",
+								status === 'online'
+									? '#6EE7B7'
+									: status === 'pause'
+									? '#EFCF9E'
+									: status === 'idle'
+									? '#F5BEBE'
+									: '#DCD6D6'
 						}}
 						source={{
-							uri: imageUrl,
+							uri: imageUrl
 						}}
 					/>
 				) : (
@@ -89,13 +87,13 @@ const ProfileImage: FC<Props> = ({ user, size }) => {
 							width: size,
 							height: size,
 							borderColor:
-								status === "online"
-									? "#6EE7B7"
-									: status === "pause"
-									? "#EFCF9E"
-									: status === "idle"
-									? "#F5BEBE"
-									: "#DCD6D6",
+								status === 'online'
+									? '#6EE7B7'
+									: status === 'pause'
+									? '#EFCF9E'
+									: status === 'idle'
+									? '#F5BEBE'
+									: '#DCD6D6'
 						}}
 						labelStyle={styles.prefix}
 					/>
@@ -107,41 +105,41 @@ const ProfileImage: FC<Props> = ({ user, size }) => {
 						borderRadius: 100,
 						width: 25,
 						height: 25,
-						position: "absolute",
+						position: 'absolute',
 						backgroundColor:
-							status === "online"
-								? "#6EE7B7"
-								: status === "pause"
-								? "#EFCF9E"
-								: status === "idle"
-								? "#F5BEBE"
-								: "#DCD6D6",
-						alignItems: "center",
-						justifyContent: "center",
+							status === 'online'
+								? '#6EE7B7'
+								: status === 'pause'
+								? '#EFCF9E'
+								: status === 'idle'
+								? '#F5BEBE'
+								: '#DCD6D6',
+						alignItems: 'center',
+						justifyContent: 'center',
 						borderColor: colors.background,
-						borderWidth: 3,
+						borderWidth: 3
 					}}
 				>
 					<SvgXml xml={iconSvgXml} />
 				</View>
 			</View>
 		</View>
-	)
-}
-export default ProfileImage
+	);
+};
+export default ProfileImage;
 
 const styles = StyleSheet.create({
 	container: {
-		alignItems: "center",
-		height: "10%",
+		alignItems: 'center',
+		height: '10%'
 	},
 	prefix: {
 		fontFamily: typography.fonts.PlusJakartaSans.light,
 		fontSize: 42,
-		fontWeight: "200",
+		fontWeight: '200'
 	},
 	profileImage: {
 		borderRadius: 200,
-		borderWidth: 3,
-	},
-})
+		borderWidth: 3
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/TransferOwnership.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/TransferOwnership.tsx
@@ -12,7 +12,9 @@ import {
 	Animated,
 	Dimensions,
 	TouchableOpacity,
-	FlatList
+	FlatList,
+	KeyboardAvoidingView,
+	Platform
 } from 'react-native';
 import { Text } from 'react-native-paper';
 // COMPONENTS
@@ -65,9 +67,13 @@ const ModalPopUp = ({ visible, children }) => {
 					height: '100%'
 				}}
 			/>
-			<View style={$modalBackGround}>
+			<KeyboardAvoidingView
+				keyboardVerticalOffset={Platform.OS === 'android' ? 20 : 0}
+				style={$modalBackGround}
+				behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+			>
 				<Animated.View style={{ transform: [{ scale: scaleValue }] }}>{children}</Animated.View>
-			</View>
+			</KeyboardAvoidingView>
 		</Modal>
 	);
 };