diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx index cd4313667..0194fb66b 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx @@ -57,6 +57,7 @@ export interface Props extends ListItemProps { openMenuIndex: number | null setOpenMenuIndex: React.Dispatch> currentTeam: IOrganizationTeamWithMStatus | null + canNavigate: boolean } export const ListItemContent: React.FC = observer( @@ -152,12 +153,15 @@ const ListCardItem: React.FC = observer((props) => { taskEdition.setEditMode(false) taskEdition.setEstimateEditMode(false) props.setOpenMenuIndex(null) - isTaskScreen - ? navigation.navigate("TaskScreen", { taskId: memberInfo?.memberTask?.id }) - : navigation.navigate("Profile", { - userId: memberInfo.memberUser.id, - activeTab: "worked", - }) + + if (memberInfo.memberTask && props.canNavigate) { + isTaskScreen + ? navigation.navigate("TaskScreen", { taskId: memberInfo.memberTask?.id }) + : navigation.navigate("Profile", { + userId: memberInfo.memberUser.id, + activeTab: "worked", + }) + } } const currentMember = props.currentTeam?.members.find( (currentMember) => currentMember.id === props.member.id, diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx index 726b58d53..1a524b352 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx @@ -1,209 +1,269 @@ /* 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 { View, TouchableOpacity, ViewStyle, TextStyle, Text, Dimensions, LogBox, FlatList } from 'react-native'; +import React, { FC, SetStateAction, useState } from "react" +import { + View, + TouchableOpacity, + ViewStyle, + TextStyle, + Text, + Dimensions, + LogBox, + FlatList, +} 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 { + $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); - }} + 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 ? ( + <> + + - - {translate('accountVerificationModal.verify')} - - - ) : null} - + 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} + - {/* Users activity list */} - - index.toString()} - renderItem={({ item, index }) => { - if (index === 0) { - return ( - - ); - } else if (index === 1) { - return ( - - ); - } else { - return ( - - ); + {/* 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 ( + + ) + } + }} + ListFooterComponent={ + } - }} - ListFooterComponent={} - /> - - - ) : ( - setShowCreateTeamModal(true)} /> - )} - - )} - - - ); -}; + /> + + + ) : ( + setShowCreateTeamModal(true)} /> + )} + + )} + + + ) + } const CurrentUserCard: FC<{ - member: OT_Member; - openMenuIndex: number | null; - setOpenMenuIndex: React.Dispatch>; - currentTeam: IOrganizationTeamWithMStatus | null; -}> = ({ member, openMenuIndex, setOpenMenuIndex, currentTeam }) => { + member: OT_Member + openMenuIndex: number | null + setOpenMenuIndex: React.Dispatch> + currentTeam: IOrganizationTeamWithMStatus | null + canNavigate: boolean +}> = ({ member, openMenuIndex, setOpenMenuIndex, currentTeam, canNavigate }) => { return ( - ); -}; + ) +} const OtherMembersList: FC<{ - members: OT_Member[]; - openMenuIndex: number | null; - setOpenMenuIndex: React.Dispatch>; - currentTeam: IOrganizationTeamWithMStatus | null; -}> = ({ members, openMenuIndex, setOpenMenuIndex, currentTeam }) => { + members: OT_Member[] + openMenuIndex: number | null + setOpenMenuIndex: React.Dispatch> + currentTeam: IOrganizationTeamWithMStatus | null + canNavigate: boolean +}> = ({ members, openMenuIndex, setOpenMenuIndex, currentTeam, canNavigate }) => { return ( )} /> - ); -}; + ) +} 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 ( @@ -265,24 +328,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, @@ -291,20 +354,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, +}