From bc20ab7ed93b916f9614e295ceb0792df065b1ff Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Tue, 28 Nov 2023 14:48:34 +0200 Subject: [PATCH] fixed java type error for related issue add modal --- .../LinkedIssuesBlock/blocks/ChildIssues.tsx | 88 ++++---- .../components/CreateLinkedIssueModal.tsx | 195 +++++++++--------- 2 files changed, 136 insertions(+), 147 deletions(-) diff --git a/apps/mobile/app/components/Task/LinkedIssuesBlock/blocks/ChildIssues.tsx b/apps/mobile/app/components/Task/LinkedIssuesBlock/blocks/ChildIssues.tsx index b9e571ea3..84cd4f687 100644 --- a/apps/mobile/app/components/Task/LinkedIssuesBlock/blocks/ChildIssues.tsx +++ b/apps/mobile/app/components/Task/LinkedIssuesBlock/blocks/ChildIssues.tsx @@ -1,70 +1,66 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import { StyleSheet, TouchableWithoutFeedback, View } from "react-native" -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 } from "../../../../services/interfaces/ITask" -import TaskLinkedIssue from "../components/TaskLinkedIssue" -import CreateLinkedIssueModal from "../components/CreateLinkedIssueModal" +import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native'; +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 } from '../../../../services/interfaces/ITask'; +import TaskLinkedIssue from '../components/TaskLinkedIssue'; +import CreateLinkedIssueModal from '../components/CreateLinkedIssueModal'; const ChildIssues = () => { const { - TaskStore: { detailedTask: task }, - } = useStores() - const { teamTasks: tasks, updateTask } = useTeamTasks() + TaskStore: { detailedTask: task } + } = useStores(); + const { teamTasks: tasks, updateTask } = useTeamTasks(); - const [modalOpen, setModalOpen] = useState(false) - const [isLoading, setIsLoading] = useState(false) + const [modalOpen, setModalOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); const childTasks = useMemo(() => { const children = task?.children?.reduce((acc, item) => { - const $item = tasks.find((ts) => ts?.id === item?.id) || item + const $item = tasks.find((ts) => ts?.id === item?.id) || item; if ($item) { - acc.push($item) + acc.push($item); } - return acc - }, [] as ITeamTask[]) + return acc; + }, [] as ITeamTask[]); - return children || [] - }, [task, tasks]) + return children || []; + }, [task, tasks]); const onTaskSelect = useCallback(async (childTask: ITeamTask | undefined) => { - setIsLoading(true) + setIsLoading(true); const updatedTask: ITeamTask = { ...childTask, parentId: task?.id, - parent: task, - } + parent: task + }; await updateTask(updatedTask, childTask?.id).finally(() => { - setIsLoading(false) - setModalOpen(false) - }) - }, []) + setIsLoading(false); + setModalOpen(false); + }); + }, []); - const isTaskEpic = task?.issueType === "Epic" - const isTaskStory = task?.issueType === "Story" - const childrenTasks = task?.children?.map((t) => t?.id) || [] + const isTaskEpic = task?.issueType === 'Epic'; + const isTaskStory = task?.issueType === 'Story'; + const childrenTasks = task?.children?.map((t) => t?.id) || []; const unchildTasks = tasks.filter((childTask) => { const hasChild = () => { if (isTaskEpic) { - return childTask.issueType !== "Epic" + return childTask.issueType !== 'Epic'; } else if (isTaskStory) { - return childTask.issueType !== "Epic" && childTask.issueType !== "Story" + return childTask.issueType !== 'Epic' && childTask.issueType !== 'Story'; } else { - return ( - childTask.issueType === "Bug" || - childTask.issueType === "Task" || - childTask.issueType === null - ) + return childTask.issueType === 'Bug' || childTask.issueType === 'Task' || childTask.issueType === null; } - } + }; - return childTask?.id !== task?.id && !childrenTasks.includes(childTask?.id) && hasChild() - }) + return childTask?.id !== task?.id && !childrenTasks.includes(childTask?.id) && hasChild(); + }); return ( { ))} - ) -} + ); +}; -export default ChildIssues +export default ChildIssues; const styles = StyleSheet.create({ - headerElement: { alignItems: "center", flexDirection: "row", gap: 10 }, - verticalSeparator: { borderRightColor: "#B1AEBC", borderRightWidth: 1, height: 20 }, -}) + headerElement: { alignItems: 'center', flexDirection: 'row', gap: 10 }, + verticalSeparator: { borderRightColor: '#B1AEBC', borderRightWidth: 1, height: 20 } +}); diff --git a/apps/mobile/app/components/Task/LinkedIssuesBlock/components/CreateLinkedIssueModal.tsx b/apps/mobile/app/components/Task/LinkedIssuesBlock/components/CreateLinkedIssueModal.tsx index ad3874b15..ffdb437b4 100644 --- a/apps/mobile/app/components/Task/LinkedIssuesBlock/components/CreateLinkedIssueModal.tsx +++ b/apps/mobile/app/components/Task/LinkedIssuesBlock/components/CreateLinkedIssueModal.tsx @@ -10,26 +10,26 @@ import { StyleSheet, ActivityIndicator, Pressable, - TextInput, -} from "react-native" -import React, { ReactElement, useCallback, useEffect, useRef, useState } from "react" -import ComboBox from "../../../../screens/Authenticated/TimerScreen/components/ComboBox" -import { translate } from "../../../../i18n" -import IssuesModal from "../../../IssuesModal" -import { useStores } from "../../../../models" -import { useTaskInput } from "../../../../services/hooks/features/useTaskInput" -import { Feather } from "@expo/vector-icons" -import { ITeamTask } from "../../../../services/interfaces/ITask" -import { BlurView } from "expo-blur" -import { useAppTheme, typography } from "../../../../theme" + TextInput +} from 'react-native'; +import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react'; +import ComboBox from '../../../../screens/Authenticated/TimerScreen/components/ComboBox'; +import { translate } from '../../../../i18n'; +import IssuesModal from '../../../IssuesModal'; +import { useStores } from '../../../../models'; +import { useTaskInput } from '../../../../services/hooks/features/useTaskInput'; +import { Feather } from '@expo/vector-icons'; +import { ITeamTask } from '../../../../services/interfaces/ITask'; +import { BlurView } from 'expo-blur'; +import { useAppTheme, typography } from '../../../../theme'; interface ICreateLinkedIssueModal { - visible: boolean - onDismiss: () => void - task: ITeamTask - taskItems?: ITeamTask[] - onTaskPress?: (childTask: ITeamTask) => void - isLoading?: boolean + visible: boolean; + onDismiss: () => void; + task: ITeamTask; + taskItems?: ITeamTask[]; + onTaskPress?: (childTask: ITeamTask) => void; + isLoading?: boolean; } const CreateLinkedIssueModal: React.FC = ({ @@ -38,11 +38,11 @@ const CreateLinkedIssueModal: React.FC = ({ task, taskItems, onTaskPress, - isLoading, + isLoading }) => { - const { colors } = useAppTheme() + const { colors } = useAppTheme(); - const taskInput = useTaskInput() + const taskInput = useTaskInput(); const { setEditMode, setQuery, @@ -51,29 +51,29 @@ const CreateLinkedIssueModal: React.FC = ({ // isModalOpen, hasCreateForm, handleTaskCreation, - createLoading, - } = taskInput + createLoading + } = taskInput; - const [combxShow, setCombxShow] = useState(true) - const inputRef = useRef(null) + const [combxShow, setCombxShow] = useState(true); + const inputRef = useRef(null); const { - TimerStore: { localTimerStatus }, - } = useStores() + TimerStore: { localTimerStatus } + } = useStores(); const closeCombox = useCallback(() => { - setCombxShow(false) - }, [setCombxShow]) + setCombxShow(false); + }, [setCombxShow]); useEffect(() => { - setEditMode(true) - setCombxShow(true) - }, [editMode, combxShow]) + setEditMode(true); + setCombxShow(true); + }, [editMode, combxShow]); useEffect(() => { if (!editMode) { - inputRef.current?.blur() + inputRef.current?.blur(); } - }, [editMode]) + }, [editMode]); return ( @@ -82,17 +82,17 @@ const CreateLinkedIssueModal: React.FC = ({ style={[ styles.wrapInput, { - flexDirection: "row", - alignItems: "center", + flexDirection: 'row', + alignItems: 'center', borderColor: colors.border, - backgroundColor: colors.background, - }, + backgroundColor: colors.background + } ]} > - {!editMode && activeTask ? `#${activeTask.taskNumber} ` : ""} + {!editMode && activeTask ? `#${activeTask.taskNumber} ` : ''} = ({ { backgroundColor: colors.background, color: colors.primary, - width: "80%", - opacity: localTimerStatus.running ? 0.5 : 1, - }, + width: '80%', + opacity: localTimerStatus.running ? 0.5 : 1 + } ]} - placeholder={translate("myWorkScreen.taskFieldPlaceholder")} - defaultValue={""} + placeholder={translate('myWorkScreen.taskFieldPlaceholder')} + defaultValue={''} autoFocus={false} autoCapitalize="none" autoCorrect={false} @@ -120,7 +120,7 @@ const CreateLinkedIssueModal: React.FC = ({ {hasCreateForm && editMode && !createLoading ? ( { - handleTaskCreation() + handleTaskCreation(); // setEditMode(false) }} > @@ -128,9 +128,7 @@ const CreateLinkedIssueModal: React.FC = ({ ) : null} - {createLoading ? ( - - ) : null} + {createLoading ? : null} {combxShow && ( = ({ )} - ) -} + ); +}; -export default CreateLinkedIssueModal +export default CreateLinkedIssueModal; interface IModal { - visible: boolean - children: ReactElement[] | ReactElement - onDismiss: () => void - isLoading: boolean + visible: boolean; + children: ReactElement[] | ReactElement; + onDismiss: () => void; + isLoading: boolean; } const ModalPopUp: React.FC = ({ visible, children, onDismiss, isLoading }) => { - const [showModal, setShowModal] = React.useState(visible) - const scaleValue = React.useRef(new Animated.Value(0)).current - const modalRef = useRef(null) - const { colors } = useAppTheme() + const [showModal, setShowModal] = React.useState(visible); + const scaleValue = React.useRef(new Animated.Value(0)).current; + const modalRef = useRef(null); + const { colors } = useAppTheme(); React.useEffect(() => { - toggleModal() - }, [visible]) + toggleModal(); + }, [visible]); const toggleModal = () => { if (visible) { - setShowModal(true) + setShowModal(true); Animated.spring(scaleValue, { toValue: 1, - useNativeDriver: true, - }).start() + useNativeDriver: true + }).start(); } else { - setTimeout(() => setShowModal(false), 200) + setTimeout(() => setShowModal(false), 200); Animated.timing(scaleValue, { toValue: 0, duration: 300, - useNativeDriver: true, - }).start() + useNativeDriver: true + }).start(); } - } + }; const handlePressOutside = (event) => { - const { locationX, locationY } = event.nativeEvent + const { locationX, locationY } = event.nativeEvent; if (modalRef.current) { modalRef.current.measureInWindow((x, y, width, height) => { - if ( - locationX < x || - locationX > x + width || - locationY < y || - locationY > y + height - ) { - onDismiss() + if (locationX < x || locationX > x + width || locationY < y || locationY > y + height) { + onDismiss(); } - }) + }); } - } + }; return ( {isLoading && } @@ -224,49 +217,49 @@ const ModalPopUp: React.FC = ({ visible, children, onDismiss, isLoading - ) -} + ); +}; const $modalBackGround: ViewStyle = { flex: 1, - justifyContent: "center", -} + justifyContent: 'center' +}; const styles = StyleSheet.create({ container: { - alignSelf: "center", + alignSelf: 'center', borderRadius: 20, padding: 20, - width: "90%", + width: '90%' }, loading: { - right: 10, + right: 10 }, taskNumberStyle: { - color: "#7B8089", + color: '#7B8089', fontFamily: typography.primary.semiBold, fontSize: 14, - marginLeft: 5, + marginLeft: 5 }, textInput: { - backgroundColor: "#fff", + backgroundColor: '#fff', borderRadius: 10, - color: "rgba(40, 32, 72, 0.4)", + color: 'rgba(40, 32, 72, 0.4)', fontFamily: typography.fonts.PlusJakartaSans.semiBold, fontSize: 12, height: 43, paddingHorizontal: 6, paddingVertical: 13, - width: "80%", + width: '80%' }, wrapInput: { - backgroundColor: "#fff", - borderColor: "rgba(0, 0, 0, 0.1)", + backgroundColor: '#fff', + borderColor: 'rgba(0, 0, 0, 0.1)', borderRadius: 10, borderWidth: 1, height: 45, paddingHorizontal: 16, paddingVertical: 2, - width: "100%", - }, -}) + width: '100%' + } +});