Merge pull request #1816 from ever-co/improve/profile-screen-task-car…

…d-navigation

added navigation when task title pressed in profile screen

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

@@ -25,6 +25,8 @@ import { secondsToTime } from '../../../../helpers/date';
 import { useTaskStatistics } from '../../../../services/hooks/features/useTaskStatics';
 import { useStores } from '../../../../models';
 import IssuesModal from '../../../../components/IssuesModal';
+import { SettingScreenNavigationProp } from '../../../../navigators/AuthenticatedNavigator';
+import { useNavigation } from '@react-navigation/native';
 
 export type ListItemProps = {
 	active?: boolean;
@@ -61,6 +63,12 @@ export const ListItemContent: React.FC<ListItemProps> = observer((props) => {
 		return (activeTaskTotalStat?.duration * 100) / props.task?.estimate || 0;
 	}, [timerStatus, props.activeAuthTask, activeTaskTotalStat]);
 
+	const navigation = useNavigation<SettingScreenNavigationProp<'TaskScreen'>>();
+
+	const navigateToTask = (taskId: string) => {
+		!editTitle && navigation.navigate('TaskScreen', { taskId });
+	};
+
 	return (
 		<TouchableNativeFeedback
 			onPressIn={() => {
@@ -97,12 +105,20 @@ export const ListItemContent: React.FC<ListItemProps> = observer((props) => {
 
 				<View style={{ marginBottom: 16 }}>
 					<View style={styles.wrapperTask}>
-						<View style={{ flexDirection: 'row', width: '80%' }}>
-							<View style={{ marginRight: 3 }}>
-								<IssuesModal task={props.task} readonly={true} />
+						<TouchableOpacity onPress={() => navigateToTask(props.task?.id)}>
+							<View style={{ flexDirection: 'row', width: '80%' }}>
+								<View style={{ marginRight: 3 }}>
+									<IssuesModal task={props.task} readonly={true} />
+								</View>
+
+								<TaskTitleDisplay
+									task={props.task}
+									editMode={editTitle}
+									setEditMode={setEditTitle}
+									navigateToTask={navigateToTask}
+								/>
 							</View>
-							<TaskTitleDisplay task={props.task} editMode={editTitle} setEditMode={setEditTitle} />
-						</View>
+						</TouchableOpacity>
 						{!enableEstimate ? (
 							<TouchableOpacity onPress={() => setEnableEstimate(true)}>
 								<AnimatedCircularProgress

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
 import React, { FC, useState } from 'react';
-import { View, StyleSheet, Text, TextInput, Pressable, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, Text, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { limitTextCharaters } from '../../../../helpers/sub-text';
 import { ITeamTask } from '../../../../services/interfaces/ITask';
 import { typography, useAppTheme } from '../../../../theme';
@@ -12,9 +12,10 @@ interface Props {
 	editMode: boolean;
 	setEditMode: (s: boolean) => unknown;
 	task: ITeamTask;
+	navigateToTask: (taskId: string) => void;
 }
 
-const TaskTitleDisplay: FC<Props> = ({ editMode, setEditMode, task }) => {
+const TaskTitleDisplay: FC<Props> = ({ editMode, setEditMode, task, navigateToTask }) => {
 	const { colors } = useAppTheme();
 	const { updateTask } = useTeamTasks();
 	const [taskTitle, setTaskTitle] = useState(task.title);
@@ -60,7 +61,7 @@ const TaskTitleDisplay: FC<Props> = ({ editMode, setEditMode, task }) => {
 	}
 
 	return (
-		<Pressable onLongPress={() => setEditMode(true)}>
+		<TouchableOpacity onLongPress={() => setEditMode(true)} onPress={() => navigateToTask(task?.id)}>
 			<View style={styles.container}>
 				<View style={styles.titleContainer}>
 					<Text style={[styles.totalTimeTitle, { marginRight: 5 }]}>#{task.number}</Text>
@@ -72,7 +73,7 @@ const TaskTitleDisplay: FC<Props> = ({ editMode, setEditMode, task }) => {
 					</Text>
 				</View>
 			</View>
-		</Pressable>
+		</TouchableOpacity>
 	);
 };