From b0772718eb977897d722cc69039a98c77696bdec Mon Sep 17 00:00:00 2001 From: earthyoung Date: Tue, 19 Nov 2024 01:01:10 +0900 Subject: [PATCH 1/6] =?UTF-8?q?style:=20inbox=20view=20=EC=95=88=EC=97=90?= =?UTF-8?q?=20=ED=88=AC=EB=91=90=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EC=97=90=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(tabs)/inboxView.jsx | 73 ++++++-- .../inboxView/inboxTodos/InboxTodos.jsx | 112 ------------ .../inboxView/inboxTodos/InboxTodos.tsx | 169 ++++++++++++++++++ .../todayView/dailyTodos/DailyTodos.tsx | 1 - 4 files changed, 229 insertions(+), 126 deletions(-) delete mode 100644 components/inboxView/inboxTodos/InboxTodos.jsx create mode 100644 components/inboxView/inboxTodos/InboxTodos.tsx diff --git a/app/(tabs)/inboxView.jsx b/app/(tabs)/inboxView.jsx index f69f652..2920b52 100644 --- a/app/(tabs)/inboxView.jsx +++ b/app/(tabs)/inboxView.jsx @@ -1,33 +1,76 @@ -import CategoryScroll from '@/components/CategoryScroll'; +import CategoryMainItem from '@/components/categoryView/CategoryMainItem'; +import LoadingSpinner from '@/components/common/molecules/LoadingSpinner'; // import InboxTodos from '@/components/InboxTodos'; import InboxTodos from '@/components/inboxView/inboxTodos/InboxTodos'; +import CalendarBottomSheet from '@/components/todayView/dailyTodos/calendarBottomSheet/CalendarBottomSheet'; +import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider'; import CategoryProvider from '@/contexts/CategoryContext'; import DateProvider from '@/contexts/DateContext'; import { LoginContext } from '@/contexts/LoginContext'; +import useTodoStore from '@/contexts/TodoStore'; +import useCategoriesQuery from '@/hooks/api/useCategoriesQuery'; +import useInboxTodoQuery from '@/hooks/api/useInboxTodoQuery'; import { handleLogEvent, INBOXVIEW_VIEW_EVENT } from '@/utils/logEvent'; -import React, { useContext } from 'react'; -import { SafeAreaView, StatusBar, StyleSheet, View } from 'react-native'; +import { widthPercentage } from '@/utils/responsiveSize'; +import { StatusBar } from 'expo-status-bar'; +import React, { Suspense, useContext } from 'react'; +import { useTranslation } from 'react-i18next'; +import { FlatList, SafeAreaView, StyleSheet, View } from 'react-native'; const InboxView = () => { + const { i18n } = useTranslation(); const { userId } = useContext(LoginContext); + const getLoadingText = () => { + if (i18n.language === 'ko') { + return `투두`; + } else if (i18n.language === 'en') { + return `Todo`; + } + }; handleLogEvent(INBOXVIEW_VIEW_EVENT, { time: new Date().toISOString(), userId: userId, }); + const renderCategoriesTodo = ({ item }) => { + return ( + + + + + ); + }; + + const { data: categoriesData } = useCategoriesQuery(userId); + const { data: todosData, isSuccess: isTodosDataSuccess } = + useInboxTodoQuery(userId); + const { selectedTodo } = useTodoStore(); + return ( - - - - - - - + + + + + + + } + > + + + + + ); @@ -38,6 +81,10 @@ export default InboxView; const styles = StyleSheet.create({ container: { flex: 1, + backgroundColor: 'white', + }, + bottomContainer: { + paddingHorizontal: widthPercentage(20), }, content: { flex: 1, diff --git a/components/inboxView/inboxTodos/InboxTodos.jsx b/components/inboxView/inboxTodos/InboxTodos.jsx deleted file mode 100644 index 0c50832..0000000 --- a/components/inboxView/inboxTodos/InboxTodos.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import { CategoryContext } from '@/contexts/CategoryContext'; -import { LoginContext } from '@/contexts/LoginContext'; -import useTodoStore from '@/contexts/TodoStore'; -import useInboxTodoQuery from '@/hooks/api/useInboxTodoQuery'; -import { useTodoAddMutation } from '@/hooks/api/useTodoMutations'; -import '@/locales/index'; -import { - DEFAULT_SCROLL_EVENT_THROTTLE, - handleScroll, -} from '@/utils/handleScroll'; -import { TODAYVIEW_SCROLL_EVENT } from '@/utils/logEvent'; -import { LexoRank } from 'lexorank'; -import { Fragment, useContext, useEffect } from 'react'; -import { KeyboardAvoidingView, Text } from 'react-native'; -import DraggableFlatList, { - ScaleDecorator, -} from 'react-native-draggable-flatlist'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; -import InboxTodo from './inboxTodo/InboxTodo'; - -const InboxTodos = () => { - const { userId } = useContext(LoginContext); - const { selectedCategory } = useContext(CategoryContext); - const { - isLoading, - error, - data: inboxTodoData, - isSuccess: isInboxTodoQuerySuccess, - } = useInboxTodoQuery(userId); - const setInboxTodos = useTodoStore(state => state.setInboxTodos); - const inboxCurrentTodos = useTodoStore(state => state.inboxCurrentTodos); - const setInboxCurrentTodos = useTodoStore( - state => state.setInboxCurrentTodos, - ); - const { mutate: updateTodo } = useTodoAddMutation(); - - const renderTodo = ({ item, drag, isActive }) => { - return ( - - - - ); - }; - - const handleDragEnd = async ({ data }) => { - const updatedData = data.map(item => { - return { - todoId: item.id, - order: LexoRank.parse(item.order).toString(), - }; - }); - updateTodo(updatedData); - }; - //TODO: order 순서 생각해보니까 이제 서버에서 하잖아? 일단 전체 투두에서 계속 마지막으로 붙이는 식으로 구현 - // const handleSubmit = async () => { - // const newTodoData = { - // content: input, - // categoryId: selectedCategory, - // }; - - // addInboxTodo({ todoData: newTodoData }); - // setInput(''); - // }; - - useEffect(() => { - if (isInboxTodoQuerySuccess) { - setInboxTodos(inboxTodoData); - let filteredTodos = inboxTodoData.filter( - todo => todo.categoryId === selectedCategory, - ); - setInboxCurrentTodos(filteredTodos); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isInboxTodoQuerySuccess, inboxTodoData, selectedCategory]); - - if (isLoading) return Loading...; - if (error) return Error: {error.message}; - - return ( - - - - item.id.toString()} - onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)} - scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} - /> - - {/* - {isTextInputOpen && ( - - - - )} - */} - - - ); -}; - -export default InboxTodos; diff --git a/components/inboxView/inboxTodos/InboxTodos.tsx b/components/inboxView/inboxTodos/InboxTodos.tsx new file mode 100644 index 0000000..b5612e4 --- /dev/null +++ b/components/inboxView/inboxTodos/InboxTodos.tsx @@ -0,0 +1,169 @@ +import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider'; +import { CategoryContext } from '@/contexts/CategoryContext'; +import { LoginContext } from '@/contexts/LoginContext'; +import { TextInputContext } from '@/contexts/textInputContext'; +import useTodoStore from '@/contexts/TodoStore'; +import { + useTodoAddMutation, + useTodoUpdateMutation, +} from '@/hooks/api/useTodoMutations'; +import '@/locales/index'; +import colors from '@/theme/theme.json'; +import { + DEFAULT_SCROLL_EVENT_THROTTLE, + handleScroll, +} from '@/utils/handleScroll'; +import { TODAYVIEW_SCROLL_EVENT } from '@/utils/logEvent'; +import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; +import { Icon } from '@ui-kitten/components'; +import { LexoRank } from 'lexorank'; +import React, { Fragment, useContext, useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + KeyboardAvoidingView, + StyleSheet, + TextInput, + View, +} from 'react-native'; +import DraggableFlatList, { + ScaleDecorator, +} from 'react-native-draggable-flatlist'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'; +import InboxTodo from './inboxTodo/InboxTodo'; + +interface InboxTodosProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + todosData: any; + categoryId: number; + isSuccess: boolean; +} + +const InboxTodos: React.FC = ({ + todosData, + categoryId, + isSuccess, +}) => { + const { t } = useTranslation(); + const { userId } = useContext(LoginContext); + const { selectedCategory, setSelectedCategory } = useContext(CategoryContext); + setSelectedCategory(categoryId); + const setInboxTodos = useTodoStore(state => state.setInboxTodos); + const inboxCurrentTodos = useTodoStore(state => state.inboxCurrentTodos); + const setInboxCurrentTodos = useTodoStore( + state => state.setInboxCurrentTodos, + ); + const { mutate: addInboxTodo } = useTodoAddMutation(); + const { mutate: updateInboxTodo } = useTodoUpdateMutation(); + const { isTextInputOpen, activatedCategoryId } = useContext(TextInputContext); + const [input, setInput] = useState(''); + + const renderTodo = ({ item, drag, isActive }) => { + return ( + + + + ); + }; + + const handleDragEnd = async ({ data }) => { + const updatedData = data.map(item => { + return { + todoId: item.id, + order: LexoRank.parse(item.order).toString(), + }; + }); + updateInboxTodo(updatedData); + }; + //TODO: order 순서 생각해보니까 이제 서버에서 하잖아? 일단 전체 투두에서 계속 마지막으로 붙이는 식으로 구현 + const handleInputSubmit = async () => { + const newTodoData = { + content: input, + categoryId: selectedCategory, + }; + + addInboxTodo({ todoData: newTodoData }); + setInput(''); + }; + + useEffect(() => { + if (isSuccess) { + setInboxTodos(todosData); + const filteredTodos = todosData.filter( + todo => todo.categoryId === selectedCategory, + ); + setInboxCurrentTodos(filteredTodos); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isSuccess, todosData, selectedCategory]); + + return ( + + + + + item.id.toString()} + onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)} + scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} + /> + + {isTextInputOpen && categoryId === activatedCategoryId ? ( + + + + + + + ) : null} + + + + ); +}; + +const styles = StyleSheet.create({ + touchableCheck: { + paddingTop: 0, + justifyContent: 'center', + }, + checkIcon: { + width: widthPercentage(20), + height: heightPercentage(20), + }, + inputContainer: { + flexDirection: 'row', + }, + textInput: { + backgroundColor: colors.Gray02, + flex: 1, + borderRadius: widthPercentage(4), + marginLeft: widthPercentage(2), + paddingHorizontal: widthPercentage(4), + }, + keyboardInputContainer: { + backgroundColor: 'white', + }, +}); + +export default InboxTodos; diff --git a/components/todayView/dailyTodos/DailyTodos.tsx b/components/todayView/dailyTodos/DailyTodos.tsx index aab8e0c..7cd996b 100644 --- a/components/todayView/dailyTodos/DailyTodos.tsx +++ b/components/todayView/dailyTodos/DailyTodos.tsx @@ -41,7 +41,6 @@ const DailyTodos: React.FC = ({ todosData, categoryId }) => { const { userId } = useContext(LoginContext); const { setSelectedCategory } = useContext(CategoryContext); setSelectedCategory(categoryId); - setSelectedCategory(categoryId); const { selectedDate } = useContext(DateContext); // const { data: todosData } = useTodosQuery(userId); const { t } = useTranslation(); From 314384ad01aa967717e00e8706e57fca1b7e9b24 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Tue, 19 Nov 2024 11:37:02 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20Inbox=20Category=EB=B3=84=EB=A1=9C?= =?UTF-8?q?=20=ED=88=AC=EB=91=90=20=EC=95=88=20=EB=82=98=EC=98=A4=EB=8A=94?= =?UTF-8?q?=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(tabs)/inboxView.jsx | 9 ++---- .../inboxView/inboxTodos/InboxTodos.tsx | 32 ++++--------------- .../todayView/dailyTodos/DailyTodos.tsx | 3 +- hooks/todo/useFilteredInboxTodo.js | 18 +++++++++++ 4 files changed, 28 insertions(+), 34 deletions(-) create mode 100644 hooks/todo/useFilteredInboxTodo.js diff --git a/app/(tabs)/inboxView.jsx b/app/(tabs)/inboxView.jsx index 2920b52..1877007 100644 --- a/app/(tabs)/inboxView.jsx +++ b/app/(tabs)/inboxView.jsx @@ -36,18 +36,13 @@ const InboxView = () => { return ( - + ); }; const { data: categoriesData } = useCategoriesQuery(userId); - const { data: todosData, isSuccess: isTodosDataSuccess } = - useInboxTodoQuery(userId); + const { data: todosData } = useInboxTodoQuery(userId); const { selectedTodo } = useTodoStore(); return ( diff --git a/components/inboxView/inboxTodos/InboxTodos.tsx b/components/inboxView/inboxTodos/InboxTodos.tsx index b5612e4..3217bab 100644 --- a/components/inboxView/inboxTodos/InboxTodos.tsx +++ b/components/inboxView/inboxTodos/InboxTodos.tsx @@ -2,22 +2,22 @@ import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider' import { CategoryContext } from '@/contexts/CategoryContext'; import { LoginContext } from '@/contexts/LoginContext'; import { TextInputContext } from '@/contexts/textInputContext'; -import useTodoStore from '@/contexts/TodoStore'; import { useTodoAddMutation, useTodoUpdateMutation, } from '@/hooks/api/useTodoMutations'; +import useFilteredInboxTodos from '@/hooks/todo/useFilteredInboxTodo'; import '@/locales/index'; import colors from '@/theme/theme.json'; import { DEFAULT_SCROLL_EVENT_THROTTLE, handleScroll, } from '@/utils/handleScroll'; -import { TODAYVIEW_SCROLL_EVENT } from '@/utils/logEvent'; +import { INBOXVIEW_SCROLL_EVENT } from '@/utils/logEvent'; import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon } from '@ui-kitten/components'; import { LexoRank } from 'lexorank'; -import React, { Fragment, useContext, useEffect, useState } from 'react'; +import React, { Fragment, useContext, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { KeyboardAvoidingView, @@ -36,23 +36,14 @@ interface InboxTodosProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any todosData: any; categoryId: number; - isSuccess: boolean; } -const InboxTodos: React.FC = ({ - todosData, - categoryId, - isSuccess, -}) => { +const InboxTodos: React.FC = ({ todosData, categoryId }) => { const { t } = useTranslation(); const { userId } = useContext(LoginContext); const { selectedCategory, setSelectedCategory } = useContext(CategoryContext); setSelectedCategory(categoryId); - const setInboxTodos = useTodoStore(state => state.setInboxTodos); - const inboxCurrentTodos = useTodoStore(state => state.inboxCurrentTodos); - const setInboxCurrentTodos = useTodoStore( - state => state.setInboxCurrentTodos, - ); + const inboxCurrentTodos = useFilteredInboxTodos(todosData, categoryId); const { mutate: addInboxTodo } = useTodoAddMutation(); const { mutate: updateInboxTodo } = useTodoUpdateMutation(); const { isTextInputOpen, activatedCategoryId } = useContext(TextInputContext); @@ -86,17 +77,6 @@ const InboxTodos: React.FC = ({ setInput(''); }; - useEffect(() => { - if (isSuccess) { - setInboxTodos(todosData); - const filteredTodos = todosData.filter( - todo => todo.categoryId === selectedCategory, - ); - setInboxCurrentTodos(filteredTodos); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isSuccess, todosData, selectedCategory]); - return ( @@ -110,7 +90,7 @@ const InboxTodos: React.FC = ({ renderItem={renderTodo} onDragEnd={handleDragEnd} keyExtractor={item => item.id.toString()} - onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)} + onScroll={() => handleScroll(INBOXVIEW_SCROLL_EVENT, userId)} scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} /> diff --git a/components/todayView/dailyTodos/DailyTodos.tsx b/components/todayView/dailyTodos/DailyTodos.tsx index 7cd996b..bf10571 100644 --- a/components/todayView/dailyTodos/DailyTodos.tsx +++ b/components/todayView/dailyTodos/DailyTodos.tsx @@ -33,7 +33,8 @@ import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'; import DailyTodo from './dailyTodo/DailyTodo'; interface DailyTodosProps { - todosData: number; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + todosData: any; categoryId: number; } diff --git a/hooks/todo/useFilteredInboxTodo.js b/hooks/todo/useFilteredInboxTodo.js new file mode 100644 index 0000000..d09ac78 --- /dev/null +++ b/hooks/todo/useFilteredInboxTodo.js @@ -0,0 +1,18 @@ +import { useEffect, useState } from 'react'; + +const useFilteredInboxTodos = (todos, selectedCategory) => { + const [filteredTodos, setFilteredTodos] = useState([]); + + useEffect(() => { + if (todos) { + const filtered = todos.filter( + todo => todo.categoryId === selectedCategory, + ); + setFilteredTodos(filtered); + } + }, [todos, selectedCategory]); + + return filteredTodos; +}; + +export default useFilteredInboxTodos; From 3a72bf2db573581028bc8306af020043a660ac39 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Tue, 19 Nov 2024 11:41:26 +0900 Subject: [PATCH 3/6] =?UTF-8?q?style:=20=EC=9D=B8=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=9D=B8=ED=92=8B=20=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/inboxView/inboxTodos/InboxTodos.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/inboxView/inboxTodos/InboxTodos.tsx b/components/inboxView/inboxTodos/InboxTodos.tsx index 3217bab..0d53c50 100644 --- a/components/inboxView/inboxTodos/InboxTodos.tsx +++ b/components/inboxView/inboxTodos/InboxTodos.tsx @@ -143,6 +143,7 @@ const styles = StyleSheet.create({ }, keyboardInputContainer: { backgroundColor: 'white', + borderTopWidth: 0, }, }); From 14094d6eb0593060409623926e6605b4cdd60de2 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Tue, 19 Nov 2024 12:34:00 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20inboxtodo=20modal=20todomoremenu?= =?UTF-8?q?=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../inboxTodos/inboxTodo/InboxTodo.jsx | 47 +++++----- .../inboxTodo/subTodoList/InboxSubTodo.jsx | 23 +++-- .../inboxTodo/todoListItem/TodoListItem.tsx | 88 ++++++++++--------- .../inboxTodo/todoListItem/useTodoListItem.ts | 3 - .../inboxTodos/inboxTodo/useInboxTodo.ts | 3 + .../dailyTodo/subTodoList/DailySubTodo.jsx | 41 --------- .../dailyTodo/todoListItem/TodoListItem.tsx | 49 ----------- 7 files changed, 83 insertions(+), 171 deletions(-) diff --git a/components/inboxView/inboxTodos/inboxTodo/InboxTodo.jsx b/components/inboxView/inboxTodos/inboxTodo/InboxTodo.jsx index 26c1035..07bce6f 100644 --- a/components/inboxView/inboxTodos/inboxTodo/InboxTodo.jsx +++ b/components/inboxView/inboxTodos/inboxTodo/InboxTodo.jsx @@ -1,10 +1,10 @@ +import SubTodoGenerateModal from '@/components/SubTodoGenerateModal'; +import GeneratedSubTodoList from '@/components/todayView/dailyTodos/dailyTodo/generatedSubTodoList/GeneratedSubTodoList'; import { TextInputContext } from '@/contexts/textInputContext'; import '@/locales/index'; -import { widthPercentage } from '@/utils/responsiveSize'; import React, { useContext } from 'react'; -import { StyleSheet, View } from 'react-native'; +import { View } from 'react-native'; import useModal from '../../../../hooks/common/useModal'; -import TodoModal from '../../../TodoModal'; import SubTodoInfo from './subTodoInfo/SubTodoInfo'; import SubTodoList from './subTodoList/SubTodoList'; import TodoListItem from './todoListItem/TodoListItem'; @@ -18,17 +18,19 @@ const InboxTodo = ({ item, drag, isActive }) => { setIsSubTodoToggleActivated, subTodoInputActivated, setSubTodoInputActivated, + generatedSubTodos, + setGeneratedSubTodos, } = useInboxTodo(); const { setTextInputOpen } = useContext(TextInputContext); - const { isVisible: isTodoModalVisible, setIsVisible: setIsTodoModalVisible } = - useModal(); + const { + isVisible: isSubTodoGenerateModalVisible, + setIsVisible: setIsSubTodoGenerateModalVisible, + } = useModal(); + + const { setIsVisible: setIsTodoModalVisible } = useModal(); - const handleSubTodoCreate = () => { - setIsTodoModalVisible(false); - setSubTodoInputActivated(true); - }; const handleEdit = () => { setIsEditing(true); setTextInputOpen(false); @@ -36,15 +38,18 @@ const InboxTodo = ({ item, drag, isActive }) => { }; return ( - + 0} + onEdit={handleEdit} + setSubTodoInputActivated={setSubTodoInputActivated} /> { setSubTodoInputActivated={setSubTodoInputActivated} /> ) : null} - + ); }; -const styles = StyleSheet.create({ - container: { - paddingHorizontal: widthPercentage(20), - }, -}); - export default InboxTodo; diff --git a/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx b/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx index 4af50b0..29302f1 100644 --- a/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx +++ b/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx @@ -2,7 +2,6 @@ import TodoModal from '@/components/TodoModal'; import { LoginContext } from '@/contexts/LoginContext'; import { TextInputContext } from '@/contexts/textInputContext'; import { useSubTodoUpdateMutation } from '@/hooks/api/useSubTodoMutations'; -import getIconFillColor from '@/utils/getIconFillColor'; import { handleLogEvent, INBOXTODO_SUBTODO_COMPLETECLICK_EVENT, @@ -19,7 +18,6 @@ import { } from 'react-native'; const InboxSubTodo = ({ item }) => { - const [completed, setCompleted] = useState(item.isCompleted); const [isEditing, setIsEditing] = useState(false); const [content, setContent] = useState(item.content); const theme = useTheme(); @@ -28,14 +26,14 @@ const InboxSubTodo = ({ item }) => { const { userId } = useContext(LoginContext); const { setTextInputOpen } = useContext(TextInputContext); - const handleCheck = () => { - setCompleted(!completed); - const updatedData = { - subtodoId: item.id, - isCompleted: !item.isCompleted, - }; - updateSubTodo(updatedData); - }; + // const handleCheck = () => { + // setCompleted(!completed); + // const updatedData = { + // subtodoId: item.id, + // isCompleted: !item.isCompleted, + // }; + // updateSubTodo(updatedData); + // }; const handleEdit = () => { setIsEditing(true); @@ -60,13 +58,12 @@ const InboxSubTodo = ({ item }) => { userId: userId, subtodoId: item.id, }); - handleCheck(); }} > diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx b/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx index e763662..f277171 100644 --- a/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx @@ -1,10 +1,11 @@ +import EditableTextField from '@/components/common/molecules/EditableTextField'; +import TodoMoreMenu from '@/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu'; import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; -import { Icon } from '@ui-kitten/components'; +import { Icon, ListItem } from '@ui-kitten/components'; import React from 'react'; -import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native'; +import { Pressable, StyleSheet, Text } from 'react-native'; import { RenderItemParams } from 'react-native-draggable-flatlist'; import { Todo } from '../../../../../types/todo'; -import EditableTextField from '../../../../common/molecules/EditableTextField'; import useTodoListItem from './useTodoListItem'; interface TodoListItemProps extends RenderItemParams { @@ -14,38 +15,40 @@ interface TodoListItemProps extends RenderItemParams { React.SetStateAction >; setIsTodoModalVisible: React.Dispatch>; + onEdit: () => void; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + bottomSheetRef: React.MutableRefObject; + subTodoInputActivated: boolean; + setSubTodoInputActivated: React.SetStateAction; } const TodoListItem: React.FC = ({ item, drag, - // eslint-disable-next-line @typescript-eslint/no-unused-vars + isActive, isEditing, setIsEditing, setIsSubTodoGenerateModalVisible, - setIsTodoModalVisible, + onEdit, + setSubTodoInputActivated, }) => { const { theme, + // eslint-disable-next-line @typescript-eslint/no-unused-vars handleCheckIconPress, handleTodoListItemPress, handleTodoListItemSubmitEditing, - handleSettingIconPress, } = useTodoListItem({ item, isEditing, setIsEditing, setIsSubTodoGenerateModalVisible, - setIsTodoModalVisible, }); const accessoryLeft = (props?) => { return ( - handleCheckIconPress()} - style={styles.touchableCheck} - > + = ({ ); }; - const accessoryRight = (props?) => { + const accessoryRight = () => { return ( - - - - - + ); }; const title = () => ( - + <> + + {item.dueTime && ( + + {item.dueTime.split(':').slice(0, 2).join(':')} + + )} + ); return ( - - - {accessoryLeft()} - - {title} - - - {accessoryRight()} - + <> + + ); }; diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts b/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts index ee0d26c..90c835e 100644 --- a/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts @@ -15,7 +15,6 @@ const useTodoListItem = ({ isEditing, setIsEditing, setIsSubTodoGenerateModalVisible, - setIsTodoModalVisible, }) => { const { mutate: updateTodo } = useTodoUpdateMutation(); const { userId } = useContext(LoginContext); @@ -47,7 +46,6 @@ const useTodoListItem = ({ userId: userId, todoId: item.id, }); - setIsTodoModalVisible(true); }; const handleTodoContentUpdate = content => { @@ -74,7 +72,6 @@ const useTodoListItem = ({ userId: userId, todoId: item.id, }); - setIsTodoModalVisible(true); }; return { diff --git a/components/inboxView/inboxTodos/inboxTodo/useInboxTodo.ts b/components/inboxView/inboxTodos/inboxTodo/useInboxTodo.ts index 3335a29..2c8f7c6 100644 --- a/components/inboxView/inboxTodos/inboxTodo/useInboxTodo.ts +++ b/components/inboxView/inboxTodos/inboxTodo/useInboxTodo.ts @@ -5,6 +5,7 @@ const useInboxTodo = () => { const [isSubtodoToggleActivated, setIsSubTodoToggleActivated] = useState(true); const [subTodoInputActivated, setSubTodoInputActivated] = useState(false); + const [generatedSubTodos, setGeneratedSubTodos] = useState([]); return { isEditing, @@ -13,6 +14,8 @@ const useInboxTodo = () => { setIsSubTodoToggleActivated, subTodoInputActivated, setSubTodoInputActivated, + generatedSubTodos, + setGeneratedSubTodos, }; }; diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx index 10bbab8..5f1426d 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx @@ -59,29 +59,6 @@ const DailySubTodo = ({ item }) => { ); }; - // const settingIcon = () => { - // return ( - // // <<<<<<< HEAD - // // setModalVisible(true)}> - // // - // // - // // ======= - // { - // setIsEditing(true); - // }} - // /> - // // >>>>>>> 70a1703a79f232558c00f81dad0f789f863ae1c5 - // ); - // }; - return ( <> @@ -99,24 +76,6 @@ const DailySubTodo = ({ item }) => { autoFocus={true} /> ) : ( - // <<<<<<< HEAD - // setModalVisible(true)} - // > - // {item.content} - // - // )} - // - // {settingIcon()} - // - // {item.content} {item.dueTime && ( diff --git a/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx b/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx index be3c597..ed138ec 100644 --- a/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx +++ b/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx @@ -64,29 +64,6 @@ const TodoListItem: React.FC = ({ const accessoryRight = () => { return ( - // <<<<<<< HEAD - // - // {item.children.length === 0 && !item.isCompleted && ( - // - // - // - // )} - // - // - // - // - // ======= = ({ }; const title = () => ( - // <<<<<<< HEAD - // - // ); - - // return ( - // - // - // {accessoryLeft()} - // - // {title} - // - // - // {accessoryRight()} - // - // ======= <> = ({ title={title} /> - // >>>>>>> 70a1703a79f232558c00f81dad0f789f863ae1c5 ); }; From caee34dd03e86c4d04eea42106702a49cb5dff40 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Tue, 19 Nov 2024 12:57:27 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20daily,=20inbox=20subtodo=EC=97=90?= =?UTF-8?q?=EC=84=9C=EB=8F=84=20=EB=AA=A8=EB=8B=AC=20=EB=82=98=EC=98=A4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../inboxTodo/subTodoList/InboxSubTodo.jsx | 55 +----- .../subTodoMoreMenu/SubTodoMoreMenu.tsx | 113 +++++++++++ .../subTodoMoreMenu/useSubTodoMoreMenu.tsx | 42 +++++ .../inboxTodo/todoListItem/TodoListItem.tsx | 2 +- .../todoMoreMenu/TodoMoreMenu.tsx | 178 ++++++++++++++++++ .../todoMoreMenu/useTodoMoreMenu.tsx | 105 +++++++++++ .../dailyTodo/subTodoList/DailySubTodo.jsx | 15 +- 7 files changed, 461 insertions(+), 49 deletions(-) create mode 100644 components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx create mode 100644 components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/useSubTodoMoreMenu.tsx create mode 100644 components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx create mode 100644 components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/useTodoMoreMenu.tsx diff --git a/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx b/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx index 29302f1..d0ee342 100644 --- a/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx +++ b/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx @@ -1,4 +1,3 @@ -import TodoModal from '@/components/TodoModal'; import { LoginContext } from '@/contexts/LoginContext'; import { TextInputContext } from '@/contexts/textInputContext'; import { useSubTodoUpdateMutation } from '@/hooks/api/useSubTodoMutations'; @@ -7,38 +6,22 @@ import { INBOXTODO_SUBTODO_COMPLETECLICK_EVENT, } from '@/utils/logEvent'; import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; -import { Icon, Text, useTheme } from '@ui-kitten/components'; +import { Icon, useTheme } from '@ui-kitten/components'; import { useContext, useState } from 'react'; -import { - Pressable, - StyleSheet, - TextInput, - TouchableOpacity, - View, -} from 'react-native'; +import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native'; +import SubTodoMoreMenu from './subTodoMoreMenu/SubTodoMoreMenu'; const InboxSubTodo = ({ item }) => { const [isEditing, setIsEditing] = useState(false); const [content, setContent] = useState(item.content); const theme = useTheme(); - const [modalVisible, setModalVisible] = useState(false); const { mutate: updateSubTodo } = useSubTodoUpdateMutation(); const { userId } = useContext(LoginContext); const { setTextInputOpen } = useContext(TextInputContext); - // const handleCheck = () => { - // setCompleted(!completed); - // const updatedData = { - // subtodoId: item.id, - // isCompleted: !item.isCompleted, - // }; - // updateSubTodo(updatedData); - // }; - const handleEdit = () => { setIsEditing(true); setTextInputOpen(false); - setModalVisible(false); }; const handleSubTodoUpdate = () => { @@ -49,7 +32,7 @@ const InboxSubTodo = ({ item }) => { updateSubTodo(updatedData); }; - const checkIcon = props => { + const accessoryLeft = props => { return ( { @@ -70,25 +53,15 @@ const InboxSubTodo = ({ item }) => { ); }; - const settingIcon = props => { - return ( - setModalVisible(true)}> - - - ); + const accessoryRight = () => { + return ; }; return ( <> - {checkIcon()} + {accessoryLeft()} {isEditing ? ( { autoFocus={true} /> ) : ( - setModalVisible(true)} - > + {item.content} )} - {settingIcon()} + {accessoryRight()} - ); }; diff --git a/components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx b/components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx new file mode 100644 index 0000000..ef4c228 --- /dev/null +++ b/components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/SubTodoMoreMenu.tsx @@ -0,0 +1,113 @@ +import '@/locales/index'; +import { + Icon, + Layout, + MenuItem, + OverflowMenu, + Text, +} from '@ui-kitten/components'; +import React, { useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { StyleSheet, TouchableOpacity } from 'react-native'; +import fontStyles from '../../../../../../theme/fontStyles'; +import { scale, moderateScale } from 'react-native-size-matters/extend'; +import EditIcon from '@/components/icons/EditIcon'; +import DeleteIcon from '@/components/icons/DeleteIcon'; +import theme from '@/theme/theme.json'; +import useSubTodoMoreMenu from './useSubTodoMoreMenu'; + +const TodoText = ({ titleText, disabled = false }) => { + return ( + + {titleText} + + ); +}; + +const MenuIconButton = onPress => ( + + + +); + +const SubTodoMoreMenu = ({ onEdit, item }) => { + const { handleEditPress, handleDeletePress } = useSubTodoMoreMenu({ + onEdit, + item, + }); + const [visible, setVisible] = useState(false); + const { t } = useTranslation(); + + const toggleMenu = useCallback(() => { + setVisible(true); + }, []); + + return ( + + MenuIconButton(toggleMenu)} + visible={visible} + onBackdropPress={() => setVisible(false)} + style={styles.container} + > + + onPress={() => { + handleEditPress(); + }} + style={styles.topMenuItem} + /> + + onPress={() => { + handleDeletePress(); + }} + style={styles.middleMenuItem} + /> + + + ); +}; + +const styles = StyleSheet.create({ + container: { + borderRadius: 8, + padding: 16, + width: scale(172), + }, + topMenuItem: { + paddingBottom: moderateScale(6), + paddingHorizontal: 0, + paddingTop: 0, + justifyContent: 'flex-start', + }, + middleMenuItem: { + paddingVertical: moderateScale(6), + paddingHorizontal: 0, + justifyContent: 'flex-start', + }, + bottomMenuItem: { + paddingTop: moderateScale(6), + paddingHorizontal: 0, + paddingBottom: 0, + justifyContent: 'flex-start', + }, +}); + +export default SubTodoMoreMenu; diff --git a/components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/useSubTodoMoreMenu.tsx b/components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/useSubTodoMoreMenu.tsx new file mode 100644 index 0000000..dc5ecb0 --- /dev/null +++ b/components/inboxView/inboxTodos/inboxTodo/subTodoList/subTodoMoreMenu/useSubTodoMoreMenu.tsx @@ -0,0 +1,42 @@ +import { LoginContext } from '@/contexts/LoginContext'; +import { useSubTodoDeleteMutation } from '@/hooks/api/useSubTodoMutations'; +import { + handleLogEvent, + TODOMODAL_DELETE_CLICK_EVENT, + TODOMODAL_EDIT_CLICK_EVENT, +} from '@/utils/logEvent'; +import { useContext } from 'react'; + +const useSubTodoMoreMenu = ({ item, onEdit = () => {} }) => { + const { userId } = useContext(LoginContext); + const { mutate: deleteSubTodo } = useSubTodoDeleteMutation(); + + const handleDelete = async itemId => { + deleteSubTodo({ subTodoId: itemId }); + }; + + const handleEditPress = () => { + handleLogEvent(TODOMODAL_EDIT_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + todoId: item.id, + }); + onEdit(); + }; + + const handleDeletePress = () => { + handleLogEvent(TODOMODAL_DELETE_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + todoId: item.id, + }); + handleDelete(item.id); + }; + + return { + handleEditPress, + handleDeletePress, + }; +}; + +export default useSubTodoMoreMenu; diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx b/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx index f277171..7099e44 100644 --- a/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/TodoListItem.tsx @@ -1,11 +1,11 @@ import EditableTextField from '@/components/common/molecules/EditableTextField'; -import TodoMoreMenu from '@/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu'; import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon, ListItem } from '@ui-kitten/components'; import React from 'react'; import { Pressable, StyleSheet, Text } from 'react-native'; import { RenderItemParams } from 'react-native-draggable-flatlist'; import { Todo } from '../../../../../types/todo'; +import TodoMoreMenu from './todoMoreMenu/TodoMoreMenu'; import useTodoListItem from './useTodoListItem'; interface TodoListItemProps extends RenderItemParams { diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx b/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx new file mode 100644 index 0000000..9251c78 --- /dev/null +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx @@ -0,0 +1,178 @@ +import '@/locales/index'; +import { + Icon, + Layout, + MenuItem, + OverflowMenu, + Text, +} from '@ui-kitten/components'; +import React, { useCallback, useContext, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { StyleSheet, TouchableOpacity } from 'react-native'; +import fontStyles from '../../../../../../theme/fontStyles'; +import { scale, moderateScale } from 'react-native-size-matters/extend'; +import EditIcon from '@/components/icons/EditIcon'; +import DeleteIcon from '@/components/icons/DeleteIcon'; +import ChangeDateIcon from '@/components/icons/ChangeDateIcon'; +import GenerateSubtodoIcon from '@/components/icons/GenerateSubtodoIcon'; +import AddIcon from '@/components/icons/AddIcon'; +import FolderIcon from '@/components/icons/FolderIcon'; +import theme from '@/theme/theme.json'; +import useTodoMoreMenu from './useTodoMoreMenu'; +import { CalendarBottomSheetContext } from '@/contexts/CalendarBottomSheetProvider'; +import useTodoStore from '@/contexts/TodoStore'; + +const TodoText = ({ titleText, disabled = false }) => { + return ( + + {titleText} + + ); +}; + +const MenuIconButton = onPress => ( + + + +); + +const TodoMoreMenu = ({ + setIsSubTodoGenerateModalVisible, + onEdit, + item, + setSubTodoInputActivated, +}) => { + const { + handleEditPress, + handleDeletePress, + handleGenerateSubTodoPress, + handleCreateSubTodoPress: handleAddSubTodoPress, + handlePutTodoToInboxPress, + } = useTodoMoreMenu({ + setIsSubTodoGenerateModalVisible, + onEdit, + item, + setSubTodoInputActivated, + }); + const [visible, setVisible] = useState(false); + const { t } = useTranslation(); + const { openBottomSheet } = useContext(CalendarBottomSheetContext); + const { setSelectedTodo } = useTodoStore(); + + const toggleMenu = useCallback(() => { + setVisible(true); + }, []); + + return ( + + MenuIconButton(toggleMenu)} + visible={visible} + onBackdropPress={() => setVisible(false)} + style={styles.container} + > + + onPress={() => { + handleEditPress(); + }} + style={styles.topMenuItem} + /> + + onPress={() => { + handleDeletePress(); + }} + style={styles.middleMenuItem} + /> + + onPress={() => { + setSelectedTodo(item); + openBottomSheet(); + setVisible(false); + }} + style={styles.middleMenuItem} + /> + 0} + accessoryLeft={GenerateSubtodoIcon} + title= 0} + titleText={t('components.todoMoreMenu.createSubTodoWithAi')} + /> + onPress={() => { + handleGenerateSubTodoPress(); + }} + style={styles.middleMenuItem} + /> + + onPress={() => { + handleAddSubTodoPress(); + }} + style={styles.middleMenuItem} + /> + + onPress={() => { + handlePutTodoToInboxPress(); + }} + style={styles.bottomMenuItem} + /> + + + ); +}; + +const styles = StyleSheet.create({ + container: { + borderRadius: 8, + padding: 16, + width: scale(172), + }, + topMenuItem: { + paddingBottom: moderateScale(6), + paddingHorizontal: 0, + paddingTop: 0, + justifyContent: 'flex-start', + }, + middleMenuItem: { + paddingVertical: moderateScale(6), + paddingHorizontal: 0, + justifyContent: 'flex-start', + }, + bottomMenuItem: { + paddingTop: moderateScale(6), + paddingHorizontal: 0, + paddingBottom: 0, + justifyContent: 'flex-start', + }, +}); + +export default TodoMoreMenu; diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/useTodoMoreMenu.tsx b/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/useTodoMoreMenu.tsx new file mode 100644 index 0000000..dea7a21 --- /dev/null +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/useTodoMoreMenu.tsx @@ -0,0 +1,105 @@ +import { CategoryContext } from '@/contexts/CategoryContext'; +import { LoginContext } from '@/contexts/LoginContext'; +import { + useTodoDeleteMutation, + useTodoUpdateMutation, +} from '@/hooks/api/useTodoMutations'; +import { convertGmtToKst } from '@/utils/convertTimezone'; +import { + handleLogEvent, + TODOMODAL_CHANGEDATE_CLICK_EVENT, + TODOMODAL_CREATESUBTODO_CLICK_EVENT, + TODOMODAL_DELETE_CLICK_EVENT, + TODOMODAL_EDIT_CLICK_EVENT, + TODOMODAL_MOVETOINBOX_CLICK_EVENT, +} from '@/utils/logEvent'; +import { useContext } from 'react'; + +const useTodoMoreMenu = ({ + item, + onEdit = () => {}, + setIsSubTodoGenerateModalVisible, + setSubTodoInputActivated, +}) => { + const { selectedCategory } = useContext(CategoryContext); + const { userId } = useContext(LoginContext); + + const { mutate: updateTodoDate } = useTodoUpdateMutation(); + const { mutate: deleteTodo } = useTodoDeleteMutation(); + + const handleDelete = async itemId => { + deleteTodo({ todoId: itemId }); + }; + + const handleDateUpdate = date => { + const kstDate = date + ? convertGmtToKst(date).toISOString().split('T')[0] + : null; + + const updatedTodo = { + date: kstDate, + todo_id: item.id, + category_id: selectedCategory, + }; + updateTodoDate(updatedTodo); + }; + + const handleEditPress = () => { + handleLogEvent(TODOMODAL_EDIT_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + todoId: item.id, + }); + onEdit(); + }; + + const handleDeletePress = () => { + handleLogEvent(TODOMODAL_DELETE_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + todoId: item.id, + }); + handleDelete(item.id); + }; + + const handleChaneDatePress = () => { + handleLogEvent(TODOMODAL_CHANGEDATE_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + todoId: item.id, + }); + }; + + const handleGenerateSubTodoPress = () => { + setIsSubTodoGenerateModalVisible(true); + }; + + const handleCreateSubTodoPress = () => { + handleLogEvent(TODOMODAL_CREATESUBTODO_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + todoId: item.id, + }); + setSubTodoInputActivated(true); + }; + + const handlePutTodoToInboxPress = () => { + handleLogEvent(TODOMODAL_MOVETOINBOX_CLICK_EVENT, { + time: new Date().toISOString(), + userId: userId, + todoId: item.id, + }); + handleDateUpdate(null); + }; + + return { + handleEditPress, + handleDeletePress, + handleChaneDatePress, + handleGenerateSubTodoPress, + handleCreateSubTodoPress, + handlePutTodoToInboxPress, + }; +}; + +export default useTodoMoreMenu; diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx index 5f1426d..5daf07c 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx @@ -10,6 +10,7 @@ import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; import { Icon, Text, useTheme } from '@ui-kitten/components'; import { useContext, useState } from 'react'; import { Pressable, StyleSheet, TextInput, View } from 'react-native'; +import SubTodoMoreMenu from './subTodoMoreMenu/SubTodoMoreMenu'; const DailySubTodo = ({ item }) => { const [completed, setCompleted] = useState(item.isCompleted); @@ -29,6 +30,11 @@ const DailySubTodo = ({ item }) => { updateSubTodo(updatedData); }; + const handleEdit = () => { + setIsEditing(true); + setTextInputOpen(false); + }; + const handleSubTodoUpdate = () => { const updatedData = { subtodoId: item.id, @@ -37,7 +43,7 @@ const DailySubTodo = ({ item }) => { updateSubTodo(updatedData); }; - const checkIcon = props => { + const accessoryLeft = props => { return ( { @@ -59,11 +65,15 @@ const DailySubTodo = ({ item }) => { ); }; + const accessoryRight = () => { + return ; + }; + return ( <> - {checkIcon()} + {accessoryLeft()} {isEditing ? ( { )} + {accessoryRight()} ); From 80b46b82cee23f53e24a179e3ca00383ded07021 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Tue, 19 Nov 2024 13:15:33 +0900 Subject: [PATCH 6/6] =?UTF-8?q?style:=20=EC=9D=B8=EB=B0=95=EC=8A=A4=20Text?= =?UTF-8?q?Input=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=8F=20=EC=9D=B8=EB=B0=95=EC=8A=A4=20=ED=88=AC=EB=91=90=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=A9=94=EB=89=B4=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../inboxView/inboxTodos/InboxTodos.tsx | 2 +- .../inboxTodo/subTodoList/SubTodoList.tsx | 60 ++++++++++++++----- .../todoMoreMenu/TodoMoreMenu.tsx | 29 ++++----- 3 files changed, 57 insertions(+), 34 deletions(-) diff --git a/components/inboxView/inboxTodos/InboxTodos.tsx b/components/inboxView/inboxTodos/InboxTodos.tsx index 0d53c50..86c543f 100644 --- a/components/inboxView/inboxTodos/InboxTodos.tsx +++ b/components/inboxView/inboxTodos/InboxTodos.tsx @@ -102,7 +102,7 @@ const InboxTodos: React.FC = ({ todosData, categoryId }) => { > diff --git a/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx b/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx index a7e13e6..fd4fcb2 100644 --- a/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx +++ b/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx @@ -1,7 +1,9 @@ -import { Input, List } from '@ui-kitten/components'; +import colors from '@/theme/theme.json'; +import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; +import { Icon, List } from '@ui-kitten/components'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { StyleSheet } from 'react-native'; +import { StyleSheet, TextInput, View } from 'react-native'; import { Todo } from '../../../../../types/todo'; import InboxSubTodo from './InboxSubTodo'; import useSubTodoList from './useSubTodoList'; @@ -34,16 +36,33 @@ const SubTodoList: React.FC = ({ contentContainerStyle={{ marginLeft: 40, paddingLeft: 40 }} ListFooterComponent={ subTodoInputActivated ? ( - { - setSubtodoInput(nextInput); - }} - autoFocus={true} - onSubmitEditing={handleSubtodoSubmit} - /> + // { + // setSubtodoInput(nextInput); + // }} + // autoFocus={true} + // onSubmitEditing={handleSubtodoSubmit} + // /> + + + { + setSubtodoInput(nextInput); + }} + autoFocus={true} + onSubmitEditing={handleSubtodoSubmit} + style={styles.textInput} + /> + ) : null } /> @@ -54,8 +73,21 @@ const styles = StyleSheet.create({ listContainer: { backgroundColor: 'white', }, - input: { - paddingLeft: 40, + inputContainer: { + marginLeft: widthPercentage(20), + flexDirection: 'row', + }, + icon: { + width: widthPercentage(20), + height: heightPercentage(20), + marginRight: widthPercentage(4), + }, + textInput: { + backgroundColor: colors.Gray02, + borderRadius: widthPercentage(4), + paddingLeft: widthPercentage(4), + textAlign: 'left', + flex: 1, }, }); diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx b/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx index 9251c78..da25e6c 100644 --- a/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx @@ -1,4 +1,12 @@ +import AddIcon from '@/components/icons/AddIcon'; +import ChangeDateIcon from '@/components/icons/ChangeDateIcon'; +import DeleteIcon from '@/components/icons/DeleteIcon'; +import EditIcon from '@/components/icons/EditIcon'; +import GenerateSubtodoIcon from '@/components/icons/GenerateSubtodoIcon'; +import { CalendarBottomSheetContext } from '@/contexts/CalendarBottomSheetProvider'; +import useTodoStore from '@/contexts/TodoStore'; import '@/locales/index'; +import theme from '@/theme/theme.json'; import { Icon, Layout, @@ -9,18 +17,9 @@ import { import React, { useCallback, useContext, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { StyleSheet, TouchableOpacity } from 'react-native'; +import { moderateScale, scale } from 'react-native-size-matters/extend'; import fontStyles from '../../../../../../theme/fontStyles'; -import { scale, moderateScale } from 'react-native-size-matters/extend'; -import EditIcon from '@/components/icons/EditIcon'; -import DeleteIcon from '@/components/icons/DeleteIcon'; -import ChangeDateIcon from '@/components/icons/ChangeDateIcon'; -import GenerateSubtodoIcon from '@/components/icons/GenerateSubtodoIcon'; -import AddIcon from '@/components/icons/AddIcon'; -import FolderIcon from '@/components/icons/FolderIcon'; -import theme from '@/theme/theme.json'; import useTodoMoreMenu from './useTodoMoreMenu'; -import { CalendarBottomSheetContext } from '@/contexts/CalendarBottomSheetProvider'; -import useTodoStore from '@/contexts/TodoStore'; const TodoText = ({ titleText, disabled = false }) => { return ( @@ -58,6 +57,7 @@ const TodoMoreMenu = ({ handleDeletePress, handleGenerateSubTodoPress, handleCreateSubTodoPress: handleAddSubTodoPress, + // eslint-disable-next-line @typescript-eslint/no-unused-vars handlePutTodoToInboxPress, } = useTodoMoreMenu({ setIsSubTodoGenerateModalVisible, @@ -136,15 +136,6 @@ const TodoMoreMenu = ({ }} style={styles.middleMenuItem} /> - - onPress={() => { - handlePutTodoToInboxPress(); - }} - style={styles.bottomMenuItem} - /> );