added the create linked issues modal to related tasks block

apps/mobile/app/components/Task/LinkedIssuesBlock/blocks/RelatedIssues.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
 import { StyleSheet, TouchableWithoutFeedback, View } from "react-native"
-import React, { useMemo } from "react"
+import React, { useCallback, useMemo, useState } from "react"
 import Accordion from "../../../Accordion"
 import { AntDesign, Entypo } from "@expo/vector-icons"
 import { useStores } from "../../../../models"
 import { useTeamTasks } from "../../../../services/hooks/features/useTeamTasks"
 import { ITeamTask, LinkedTaskIssue } from "../../../../services/interfaces/ITask"
 import TaskLinkedIssue from "../components/TaskLinkedIssue"
+import CreateLinkedIssueModal from "../components/CreateLinkedIssueModal"
 
 const RelatedIssues = () => {
 	const {
@@ -16,6 +17,8 @@ const RelatedIssues = () => {
 
 	const { teamTasks: tasks } = useTeamTasks()
 
+	const [modalOpen, setModalOpen] = useState<boolean>(false)
+
 	const linkedTasks = useMemo(() => {
 		const issues = task?.linkedIssues?.reduce((acc, item) => {
 			const $item = tasks.find((ts) => ts.id === item.taskFrom.id) || item.taskFrom
@@ -33,18 +36,55 @@ const RelatedIssues = () => {
 		return issues || []
 	}, [task, tasks])
 
+	const onTaskSelect = useCallback((childTask: ITeamTask | undefined) => {
+		console.log(childTask)
+		setModalOpen(false)
+	}, [])
+
+	const isTaskEpic = task?.issueType === "Epic"
+	const isTaskStory = task?.issueType === "Story"
+	const linkedTasksItems = task?.linkedIssues?.map((t) => t.taskFrom.id) || []
+
+	const unlinkedTasks = tasks.filter((childTask) => {
+		const hasChild = () => {
+			if (isTaskEpic) {
+				return childTask.issueType !== "Epic"
+			} else if (isTaskStory) {
+				return childTask.issueType !== "Epic" && childTask.issueType !== "Story"
+			} else {
+				return (
+					childTask.issueType === "Bug" ||
+					childTask.issueType === "Task" ||
+					childTask.issueType === null
+				)
+			}
+		}
+
+		return childTask.id !== task.id && !linkedTasksItems.includes(childTask.id) && hasChild()
+	})
+
 	return (
 		<Accordion
 			titleFontSize={14}
 			arrowSize={20}
 			title="Related Issues"
 			headerElement={
 				<View style={styles.headerElement}>
-					<TouchableWithoutFeedback>
+					<TouchableWithoutFeedback onPress={() => setModalOpen(true)}>
 						<AntDesign name="plus" size={16} color="#B1AEBC" />
 					</TouchableWithoutFeedback>
 					<Entypo name="dots-three-horizontal" size={16} color="#B1AEBC" />
 					<View style={styles.verticalSeparator} />
+
+					{task && (
+						<CreateLinkedIssueModal
+							onTaskPress={onTaskSelect}
+							taskItems={unlinkedTasks}
+							task={task}
+							visible={modalOpen}
+							onDismiss={() => setModalOpen(false)}
+						/>
+					)}
 				</View>
 			}
 		>

apps/mobile/app/screens/Authenticated/TimerScreen/components/IndividualTask.tsx

@@ -98,7 +98,7 @@ const IndividualTask: FC<Props> = observer(
 				<View
 					onTouchEnd={() => {
 						isLinkedTasks
-							? onTaskPress(task)
+							? !isScrolling && onTaskPress(task)
 							: !parentTasksFilter
 							? !isScrolling && handleActiveTask(task)
 							: !isScrolling && setParent(task, childTask, onDismiss)
@@ -124,7 +124,7 @@ const IndividualTask: FC<Props> = observer(
 				<View
 					onTouchEnd={() => {
 						isLinkedTasks
-							? onTaskPress(task)
+							? !isScrolling && onTaskPress(task)
 							: !parentTasksFilter
 							? !isScrolling && handleActiveTask(task)
 							: !isScrolling && setParent(task, childTask, onDismiss)