From c97e56138bda5fc0a7031b2c8945ab0ad8b4dc3e Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Fri, 17 Nov 2023 11:38:52 +0200 Subject: [PATCH] added nullish operator to fix errors --- .../app/components/TeamDropdown/DropDown.tsx | 2 +- .../TeamDropdown/DropDownSection.tsx | 6 +- .../components/ProfileHeader.tsx | 98 ++-- .../ProfileScreen/components/TaskFilter.tsx | 4 +- .../components/AcceptInviteModal.tsx | 4 +- .../TeamScreen/components/UserHeaderCard.tsx | 8 +- .../Authenticated/TeamScreen/index.tsx | 499 ++++++++---------- 7 files changed, 285 insertions(+), 336 deletions(-) diff --git a/apps/mobile/app/components/TeamDropdown/DropDown.tsx b/apps/mobile/app/components/TeamDropdown/DropDown.tsx index 4d70c5025..82733f7ff 100644 --- a/apps/mobile/app/components/TeamDropdown/DropDown.tsx +++ b/apps/mobile/app/components/TeamDropdown/DropDown.tsx @@ -55,7 +55,7 @@ const DropDown: FC = 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 }} /> ) : ( diff --git a/apps/mobile/app/components/TeamDropdown/DropDownSection.tsx b/apps/mobile/app/components/TeamDropdown/DropDownSection.tsx index dc2be3d7b..ca36e9fc8 100644 --- a/apps/mobile/app/components/TeamDropdown/DropDownSection.tsx +++ b/apps/mobile/app/components/TeamDropdown/DropDownSection.tsx @@ -143,11 +143,11 @@ const DropItem: FC = observer(function DropItem({ team, changeTeam, i return ( changeTeam(team)}> - {team.image?.thumbUrl || team.logo || team.image?.fullUrl ? ( + {team?.image?.thumbUrl || team?.logo || team?.image?.fullUrl ? ( ) : ( = 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}) navigateToSettings(team)}> diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ProfileHeader.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ProfileHeader.tsx index a32feaa3c..e81cca182 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ProfileHeader.tsx +++ b/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 ( - - + + {member?.name} @@ -32,21 +27,21 @@ const ProfileHeader = observer((member: IUser) => { - ) -}) + ); +}); const UserTeam = observer(() => { const { - teamStore: { activeTeam }, - } = useStores() + teamStore: { activeTeam } + } = useStores(); return ( @@ -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(() => { {`${limitTextCharaters({ text: activeTeam?.name, - numChars: 16, + numChars: 16 })} `} - ) -}) + ); +}); 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; diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx index f06dc7cd3..6d383f85d 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx +++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskFilter.tsx @@ -26,14 +26,14 @@ const TaskFilter = ({ profile, hook }: { profile: IUserProfile; hook: ITaskFilte setShowFilterPopup(false)} /> setShowModal(true)} style={[ $assignStyle, { backgroundColor: colors.background, borderColor: colors.secondary, - opacity: profile.userProfile.isEmailVerified ? 1 : 0.5 + opacity: profile.userProfile?.isEmailVerified ? 1 : 0.5 } ]} > diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/AcceptInviteModal.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/AcceptInviteModal.tsx index 54b180543..380c66c2a 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/AcceptInviteModal.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/AcceptInviteModal.tsx @@ -110,8 +110,8 @@ const AcceptInviteModal: FC = function InviteUserModal({ - {invitation?.teams[0].image ? ( - + {invitation?.teams[0]?.image ? ( + ) : ( )} diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx index 8a5f46f5d..eb47b647d 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx @@ -75,25 +75,25 @@ const UserHeaderCard = ({ member, user }: { member: OT_Member; user: IUser }) => return ( - {user.image?.thumbUrl || user.imageUrl || user.image?.fullUrl ? ( + {user?.image?.thumbUrl || user?.imageUrl || user?.image?.fullUrl ? ( ) : ( )} - {user.name} + {user?.name} ); diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx index 1a524b352..55d533f55 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable camelcase */ -import React, { FC, SetStateAction, useState } from "react" +import React, { FC, SetStateAction, useState } from 'react'; import { View, TouchableOpacity, @@ -11,258 +11,215 @@ import { Dimensions, LogBox, FlatList, -} from "react-native" + StatusBar +} from 'react-native'; // TYPES -import { AuthenticatedTabScreenProps } from "../../../navigators/AuthenticatedNavigator" +import { AuthenticatedTabScreenProps } from '../../../navigators/AuthenticatedNavigator'; // COMPONENTS -import { Screen } from "../../../components" -import InviteUserModal from "./components/InviteUserModal" -import ListCardItem from "./components/ListCardItem" +import { Screen } from '../../../components'; +import InviteUserModal from './components/InviteUserModal'; +import ListCardItem from './components/ListCardItem'; // STYLES -import { GLOBAL_STYLE as GS } from "../../../../assets/ts/styles" -import { spacing, typography, useAppTheme } from "../../../theme" -import HomeHeader from "../../../components/HomeHeader" -import DropDown from "../../../components/TeamDropdown/DropDown" -import CreateTeamModal from "../../../components/CreateTeamModal" -import { useStores } from "../../../models" -import InviteCardItem from "./components/InviteCardItem" -import { BlurView } from "expo-blur" -import { useOrganizationTeam } from "../../../services/hooks/useOrganization" -import { translate } from "../../../i18n" -import useTeamScreenLogic from "./logics/useTeamScreenLogic" -import TeamScreenSkeleton from "./components/TeamScreenSkeleton" -import AcceptInviteModal from "./components/AcceptInviteModal" -import { useAcceptInviteModal } from "../../../services/hooks/features/useAcceptInviteModal" -import NoTeam from "../../../components/NoTeam" -import VerifyAccountModal from "./components/VerifyAccount" -import { useVerifyEmail } from "../../../services/hooks/features/useVerifyEmail" -import { - IOrganizationTeamWithMStatus, - OT_Member, -} from "../../../services/interfaces/IOrganizationTeam" -import { IInvitation } from "../../../services/interfaces/IInvite" +import { GLOBAL_STYLE as GS } from '../../../../assets/ts/styles'; +import { spacing, typography, useAppTheme } from '../../../theme'; +import HomeHeader from '../../../components/HomeHeader'; +import DropDown from '../../../components/TeamDropdown/DropDown'; +import CreateTeamModal from '../../../components/CreateTeamModal'; +import { useStores } from '../../../models'; +import InviteCardItem from './components/InviteCardItem'; +import { BlurView } from 'expo-blur'; +import { useOrganizationTeam } from '../../../services/hooks/useOrganization'; +import { translate } from '../../../i18n'; +import useTeamScreenLogic from './logics/useTeamScreenLogic'; +import TeamScreenSkeleton from './components/TeamScreenSkeleton'; +import AcceptInviteModal from './components/AcceptInviteModal'; +import { useAcceptInviteModal } from '../../../services/hooks/features/useAcceptInviteModal'; +import NoTeam from '../../../components/NoTeam'; +import VerifyAccountModal from './components/VerifyAccount'; +import { useVerifyEmail } from '../../../services/hooks/features/useVerifyEmail'; +import { IOrganizationTeamWithMStatus, OT_Member } from '../../../services/interfaces/IOrganizationTeam'; +import { IInvitation } from '../../../services/interfaces/IInvite'; -const { width, height } = Dimensions.get("window") -export const AuthenticatedTeamScreen: FC> = - function AuthenticatedTeamScreen(_props) { - const { colors, dark } = useAppTheme() - LogBox.ignoreAllLogs() - // Get authentificate data - const { - teamStore: { teamInvitations }, - TimerStore: { localTimerStatus }, - } = useStores() +const { width, height } = Dimensions.get('window'); +export const AuthenticatedTeamScreen: FC> = function AuthenticatedTeamScreen( + _props +) { + const { colors, dark } = useAppTheme(); + LogBox.ignoreAllLogs(); + // Get authentificate data + const { + teamStore: { teamInvitations }, + TimerStore: { localTimerStatus } + } = useStores(); - const { - $otherMembers, - createOrganizationTeam, - isTeamManager, - currentUser, - activeTeam, - currentTeam, - } = useOrganizationTeam() - const { - setShowCreateTeamModal, - setShowInviteModal, - showCreateTeamModal, - showInviteModal, - // setShowMoreMenu, - isLoading, - isTeamModalOpen, - setIsTeamModalOpen, - } = useTeamScreenLogic() - const { openModal, closeModal, activeInvitation, onAcceptInvitation, onRejectInvitation } = - useAcceptInviteModal() - const [showVerifyAccountModal, setShowVerifyAccountModal] = useState(false) - const [isScrolling, setIsScrolling] = useState(false) + const { $otherMembers, createOrganizationTeam, isTeamManager, currentUser, activeTeam, currentTeam } = + useOrganizationTeam(); + const { + setShowCreateTeamModal, + setShowInviteModal, + showCreateTeamModal, + showInviteModal, + // setShowMoreMenu, + isLoading, + isTeamModalOpen, + setIsTeamModalOpen + } = useTeamScreenLogic(); + const { openModal, closeModal, activeInvitation, onAcceptInvitation, onRejectInvitation } = useAcceptInviteModal(); + const [showVerifyAccountModal, setShowVerifyAccountModal] = useState(false); + const [isScrolling, setIsScrolling] = useState(false); - const { - resendAccountVerificationCode, - isLoading: isLoadingEmailVerification, - verifyEmailByCode, - } = useVerifyEmail() + const { + resendAccountVerificationCode, + isLoading: isLoadingEmailVerification, + verifyEmailByCode + } = useVerifyEmail(); - const [openMenuIndex, setOpenMenuIndex] = useState(null) + const [openMenuIndex, setOpenMenuIndex] = useState(null); - return ( - <> - {showInviteModal && } - - {isLoading ? ( - - ) : ( - <> - setShowInviteModal(false)} - /> - setShowVerifyAccountModal(false)} - isLoading={isLoadingEmailVerification} - verifyEmailByCode={verifyEmailByCode} - userEmail={currentUser?.employee.user.email} - resendAccountVerificationCode={() => - resendAccountVerificationCode(currentUser.employee.user.email) - } - /> - closeModal()} - invitation={activeInvitation} - onAcceptInvitation={onAcceptInvitation} - onRejectInvitation={onRejectInvitation} - /> - setShowCreateTeamModal(false)} - /> - - {activeTeam ? ( - <> - - - setShowCreateTeamModal(true)} - isAccountVerified={ - currentUser?.employee.user.isEmailVerified - } - /> - - {isTeamManager && - currentUser.employee.user.isEmailVerified ? ( - setShowInviteModal(true)} - > - - {translate("teamScreen.inviteButton")} - - - ) : isTeamManager && - !currentUser.employee.user.isEmailVerified ? ( - { - setShowVerifyAccountModal(true) - resendAccountVerificationCode( - currentUser.employee.user.email, - ) - }} - > - - {translate("accountVerificationModal.verify")} - - - ) : null} + return ( + <> + {showInviteModal && } + + + {isLoading ? ( + + ) : ( + <> + setShowInviteModal(false)} /> + setShowVerifyAccountModal(false)} + isLoading={isLoadingEmailVerification} + verifyEmailByCode={verifyEmailByCode} + userEmail={currentUser?.employee.user.email} + resendAccountVerificationCode={() => + resendAccountVerificationCode(currentUser.employee.user.email) + } + /> + closeModal()} + invitation={activeInvitation} + onAcceptInvitation={onAcceptInvitation} + onRejectInvitation={onRejectInvitation} + /> + setShowCreateTeamModal(false)} + /> + + {activeTeam ? ( + <> + + + setShowCreateTeamModal(true)} + isAccountVerified={currentUser?.employee?.user?.isEmailVerified} + /> - - {/* Users activity list */} - - setIsScrolling(false)} - onScrollBeginDrag={() => setIsScrolling(true)} - data={[currentUser, $otherMembers, teamInvitations]} - showsVerticalScrollIndicator={false} - bounces={false} - keyExtractor={(item, index) => index.toString()} - renderItem={({ item, index }) => { - if (index === 0) { - return ( - - ) - } else if (index === 1) { - return ( - - ) - } else { - return ( - - ) - } + {isTeamManager && currentUser?.employee?.user?.isEmailVerified ? ( + setShowInviteModal(true)} + > + + {translate('teamScreen.inviteButton')} + + + ) : isTeamManager && !currentUser?.employee?.user?.isEmailVerified ? ( + { + setShowVerifyAccountModal(true); + resendAccountVerificationCode(currentUser.employee.user.email); }} - ListFooterComponent={ - + > + + {translate('accountVerificationModal.verify')} + + + ) : null} + + + {/* Users activity list */} + + setIsScrolling(false)} + onScrollBeginDrag={() => setIsScrolling(true)} + data={[currentUser, $otherMembers, teamInvitations]} + showsVerticalScrollIndicator={false} + bounces={false} + keyExtractor={(item, index) => index.toString()} + renderItem={({ item, index }) => { + if (index === 0) { + return ( + + ); + } else if (index === 1) { + return ( + + ); + } else { + return ( + + ); } - /> - - - ) : ( - setShowCreateTeamModal(true)} /> - )} - - )} - - - ) - } + }} + ListFooterComponent={} + /> + + + ) : ( + setShowCreateTeamModal(true)} /> + )} + + )} + + + ); +}; const CurrentUserCard: FC<{ - member: OT_Member - openMenuIndex: number | null - setOpenMenuIndex: React.Dispatch> - currentTeam: IOrganizationTeamWithMStatus | null - canNavigate: boolean + member: OT_Member; + openMenuIndex: number | null; + setOpenMenuIndex: React.Dispatch>; + currentTeam: IOrganizationTeamWithMStatus | null; + canNavigate: boolean; }> = ({ member, openMenuIndex, setOpenMenuIndex, currentTeam, canNavigate }) => { return ( @@ -275,15 +232,15 @@ const CurrentUserCard: FC<{ canNavigate={canNavigate} /> - ) -} + ); +}; const OtherMembersList: FC<{ - members: OT_Member[] - openMenuIndex: number | null - setOpenMenuIndex: React.Dispatch> - currentTeam: IOrganizationTeamWithMStatus | null - canNavigate: boolean + members: OT_Member[]; + openMenuIndex: number | null; + setOpenMenuIndex: React.Dispatch>; + currentTeam: IOrganizationTeamWithMStatus | null; + canNavigate: boolean; }> = ({ members, openMenuIndex, setOpenMenuIndex, currentTeam, canNavigate }) => { return ( @@ -303,14 +260,14 @@ const OtherMembersList: FC<{ )} /> - ) -} + ); +}; const InvitationsList: FC<{ - invitations: IInvitation[] - $otherMembers: OT_Member[] - openMenuIndex: number | null - setOpenMenuIndex: React.Dispatch> + invitations: IInvitation[]; + $otherMembers: OT_Member[]; + openMenuIndex: number | null; + setOpenMenuIndex: React.Dispatch>; }> = ({ invitations, $otherMembers, openMenuIndex, setOpenMenuIndex }) => { return ( @@ -328,24 +285,24 @@ const InvitationsList: FC<{ )} /> - ) -} + ); +}; const $container: ViewStyle = { - ...GS.flex1, -} + ...GS.flex1 +}; const $cardContainer: ViewStyle = { ...GS.flex1, - paddingHorizontal: spacing.small, -} + paddingHorizontal: spacing.small +}; const $blurContainer: ViewStyle = { height, - width: "100%", - position: "absolute", + width: '100%', + position: 'absolute', top: 0, - zIndex: 1001, -} + zIndex: 1001 +}; const $inviteButton: ViewStyle = { width: width / 3, @@ -354,20 +311,20 @@ const $inviteButton: ViewStyle = { paddingVertical: 10, borderRadius: 10, borderWidth: 2, - justifyContent: "center", - alignItems: "center", -} + justifyContent: 'center', + alignItems: 'center' +}; const $inviteButtonText: TextStyle = { fontSize: 14, fontFamily: typography.fonts.PlusJakartaSans.semiBold, - color: "#3826A6", -} + color: '#3826A6' +}; const $wrapTeam: ViewStyle = { - flexDirection: "row", - width: "100%", + flexDirection: 'row', + width: '100%', padding: 20, - justifyContent: "space-between", - alignItems: "center", - zIndex: 999, -} + justifyContent: 'space-between', + alignItems: 'center', + zIndex: 999 +};