From 3862dba2d492264752b28fa999980331fe4e20c3 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Thu, 21 Nov 2024 22:37:09 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EC=9D=B8=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=B6=94=EA=B0=80=20=EB=B0=98=EC=98=81=20?= =?UTF-8?q?=EC=95=88=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(tabs)/inboxView.jsx | 1 + components/InboxTodo.jsx | 173 ------------------ components/InboxTodos.jsx | 115 ------------ .../categoryView/CategoryBottomSheet.tsx | 2 +- .../inboxView/inboxTodos/InboxTodos.tsx | 100 ++++++---- hooks/api/useCategoryMutation.js | 2 +- hooks/api/useInboxTodoQuery.js | 3 +- hooks/api/useTodoMutations.js | 13 +- hooks/todo/useCreateInboxTodo.js | 22 +++ hooks/todo/useCreateTodo.js | 2 +- 10 files changed, 99 insertions(+), 334 deletions(-) delete mode 100644 components/InboxTodo.jsx delete mode 100644 components/InboxTodos.jsx create mode 100644 hooks/todo/useCreateInboxTodo.js diff --git a/app/(tabs)/inboxView.jsx b/app/(tabs)/inboxView.jsx index 1877007..aa56ddd 100644 --- a/app/(tabs)/inboxView.jsx +++ b/app/(tabs)/inboxView.jsx @@ -61,6 +61,7 @@ const InboxView = () => { item.id} /> diff --git a/components/InboxTodo.jsx b/components/InboxTodo.jsx deleted file mode 100644 index 69ef327..0000000 --- a/components/InboxTodo.jsx +++ /dev/null @@ -1,173 +0,0 @@ -import { LoginContext } from '@/contexts/LoginContext'; -import { TextInputContext } from '@/contexts/textInputContext'; -import { useSubTodoAddMutation } from '@/hooks/api/useSubTodoMutations'; -import { useTodoUpdateMutation } from '@/hooks/api/useTodoMutations'; -import '@/locales/index'; -import { - handleLogEvent, - INBOXTODO_LIST_CLICK_EVENT, - INBOXTODO_MEATBALLMENU_CLICK_EVENT, -} from '@/utils/logEvent'; -import { Icon, Input, List, ListItem, useTheme } from '@ui-kitten/components'; -import React, { useContext, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Pressable, StyleSheet, Text, TouchableOpacity } from 'react-native'; -import InboxSubTodo from './InboxSubTodo'; -import TodoModal from './TodoModal'; - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const InboxTodo = ({ item, drag, isActive }) => { - const theme = useTheme(); - const [content, setContent] = useState(item.content); - const [isEditing, setIsEditing] = useState(false); - const [subTodoInput, setSubTodoInput] = useState(''); - const [modalVisible, setModalVisible] = useState(false); - const [subTodoInputActivated, setSubTodoInputActivated] = useState(false); - const { mutate: updateInboxTodo } = useTodoUpdateMutation(); - const { mutate: addInboxSubTodo } = useSubTodoAddMutation(); - const { userId } = useContext(LoginContext); - const { t } = useTranslation(); - const { setTextInputOpen } = useContext(TextInputContext); - - const handleEdit = () => { - setIsEditing(true); - setTextInputOpen(false); - setModalVisible(false); - }; - - const handleTodoUpdate = () => { - const updatedData = { - todoId: item.id, - content: content, - }; - updateInboxTodo(updatedData); - }; - - const handleSubtodoSubmit = () => { - if (subTodoInput !== '') { - const subTodoData = [ - { - todoId: item.id, - content: subTodoInput, - }, - ]; - addInboxSubTodo({ todoData: subTodoData }); - setSubTodoInput(''); - setSubTodoInputActivated(false); - } - }; - - const handleSubTodoCreate = () => { - setModalVisible(false); - setSubTodoInputActivated(true); - }; - - const renderSubTodo = ({ item: subTodoItem, index }) => { - return ; - }; - - const outlineIcon = props => { - return ( - setModalVisible(true)}> - - - ); - }; - - const settingIcon = props => { - return ( - { - handleLogEvent(INBOXTODO_MEATBALLMENU_CLICK_EVENT, { - time: new Date().toISOString(), - userId: userId, - todoId: item.id, - }); - setModalVisible(true); - }} - > - - - ); - }; - - return ( - <> - setContent(value)} - onSubmitEditing={() => { - handleTodoUpdate(); - setIsEditing(false); - setTextInputOpen(true); - }} - autoFocus={true} - /> - ) : ( - {item.content} - ) - } - key={item.id} - accessoryLeft={props => outlineIcon(props)} - accessoryRight={props => settingIcon(props)} - onPress={() => { - handleLogEvent(INBOXTODO_LIST_CLICK_EVENT, { - time: new Date().toISOString(), - userId: userId, - todoId: item.id, - }); - setModalVisible(true); - }} - onLongPress={drag} - /> - { - setSubTodoInput(nextInput); - }} - autoFocus={true} - onSubmitEditing={handleSubtodoSubmit} - /> - ) : null - } - /> - - - ); -}; - -const styles = StyleSheet.create({ - input: { - paddingLeft: 40, - }, -}); - -export default InboxTodo; diff --git a/components/InboxTodos.jsx b/components/InboxTodos.jsx deleted file mode 100644 index 8be87cf..0000000 --- a/components/InboxTodos.jsx +++ /dev/null @@ -1,115 +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 { INBOXVIEW_SCROLL_EVENT } from '@/utils/logEvent'; -import { Input } from '@ui-kitten/components'; -import { LexoRank } from 'lexorank'; -import { useContext, useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { StyleSheet, Text } from 'react-native'; -import DraggableFlatList, { - ScaleDecorator, -} from 'react-native-draggable-flatlist'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; -import InboxTodo from './InboxTodo'; - -const InboxTodos = () => { - const [input, setInput] = useState(''); - 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: addInboxTodo } = useTodoAddMutation(); - const { mutate: updateTodo } = useTodoAddMutation(); - const { t } = useTranslation(); - 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(INBOXVIEW_SCROLL_EVENT, userId)} - scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} - /> - { - setInput(nextInput); - }} - autoFocus={false} - onSubmitEditing={handleSubmit} - /> - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'space-between', - backgroundColor: 'white', - }, -}); - -export default InboxTodos; diff --git a/components/categoryView/CategoryBottomSheet.tsx b/components/categoryView/CategoryBottomSheet.tsx index f46512b..d51a00d 100644 --- a/components/categoryView/CategoryBottomSheet.tsx +++ b/components/categoryView/CategoryBottomSheet.tsx @@ -49,7 +49,7 @@ const CategoryBottomSheet = () => { title: categoryName, color: 1, }; - addCategory({ addCategoryData }); + addCategory(addCategoryData); }; const handleEditCategory = () => { diff --git a/components/inboxView/inboxTodos/InboxTodos.tsx b/components/inboxView/inboxTodos/InboxTodos.tsx index 86c543f..c26ab38 100644 --- a/components/inboxView/inboxTodos/InboxTodos.tsx +++ b/components/inboxView/inboxTodos/InboxTodos.tsx @@ -1,11 +1,8 @@ import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider'; -import { CategoryContext } from '@/contexts/CategoryContext'; import { LoginContext } from '@/contexts/LoginContext'; import { TextInputContext } from '@/contexts/textInputContext'; -import { - useTodoAddMutation, - useTodoUpdateMutation, -} from '@/hooks/api/useTodoMutations'; +import { useTodoUpdateMutation } from '@/hooks/api/useTodoMutations'; +import useCreateInboxTodo from '@/hooks/todo/useCreateInboxTodo'; import useFilteredInboxTodos from '@/hooks/todo/useFilteredInboxTodo'; import '@/locales/index'; import colors from '@/theme/theme.json'; @@ -13,11 +10,14 @@ import { DEFAULT_SCROLL_EVENT_THROTTLE, handleScroll, } from '@/utils/handleScroll'; -import { INBOXVIEW_SCROLL_EVENT } from '@/utils/logEvent'; -import { heightPercentage, widthPercentage } from '@/utils/responsiveSize'; +import { + handleLogEvent, + INBOXVIEW_SCROLL_EVENT, + TODAYVIEW_TEXTINPUT_SUBMIT_EVENT, +} from '@/utils/logEvent'; import { Icon } from '@ui-kitten/components'; import { LexoRank } from 'lexorank'; -import React, { Fragment, useContext, useState } from 'react'; +import React, { Fragment, useContext } from 'react'; import { useTranslation } from 'react-i18next'; import { KeyboardAvoidingView, @@ -30,24 +30,21 @@ import DraggableFlatList, { } from 'react-native-draggable-flatlist'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'; +import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; import InboxTodo from './inboxTodo/InboxTodo'; -interface InboxTodosProps { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - todosData: any; - categoryId: number; -} - -const InboxTodos: React.FC = ({ todosData, categoryId }) => { +const InboxTodos = ({ todosData, categoryId }) => { const { t } = useTranslation(); const { userId } = useContext(LoginContext); - const { selectedCategory, setSelectedCategory } = useContext(CategoryContext); - setSelectedCategory(categoryId); + const inboxCurrentTodos = useFilteredInboxTodos(todosData, categoryId); - const { mutate: addInboxTodo } = useTodoAddMutation(); const { mutate: updateInboxTodo } = useTodoUpdateMutation(); - const { isTextInputOpen, activatedCategoryId } = useContext(TextInputContext); - const [input, setInput] = useState(''); + const { isTextInputOpen, activatedCategoryId, setTextInputOpen } = + useContext(TextInputContext); + const { input, setInput, handleSubmit } = useCreateInboxTodo( + userId, + categoryId, + ); const renderTodo = ({ item, drag, isActive }) => { return ( @@ -68,13 +65,13 @@ const InboxTodos: React.FC = ({ todosData, categoryId }) => { }; //TODO: order 순서 생각해보니까 이제 서버에서 하잖아? 일단 전체 투두에서 계속 마지막으로 붙이는 식으로 구현 const handleInputSubmit = async () => { - const newTodoData = { - content: input, - categoryId: selectedCategory, - }; + handleLogEvent(TODAYVIEW_TEXTINPUT_SUBMIT_EVENT, { + time: new Date().toISOString(), + userId: userId, + }); - addInboxTodo({ todoData: newTodoData }); - setInput(''); + handleSubmit(); + setTextInputOpen(false); }; return ( @@ -123,27 +120,50 @@ const InboxTodos: React.FC = ({ todosData, categoryId }) => { }; const styles = StyleSheet.create({ - touchableCheck: { - paddingTop: 0, - justifyContent: 'center', + container: { + flex: 1, }, - checkIcon: { - width: widthPercentage(20), - height: heightPercentage(20), + keyboardInputContainer: { + backgroundColor: 'white', + borderTopWidth: 0, + }, + mainContainer: { + flex: 1, + backgroundColor: 'white', + }, + flatListContainer: { + flex: 1, + }, + keyboardAvoidingView: { + width: '100%', + position: 'absolute', + bottom: 0, + backgroundColor: 'white', + }, + inputWrapper: { + width: '100%', + borderTopWidth: StyleSheet.hairlineWidth, + borderTopColor: colors.Gray02, + backgroundColor: 'white', }, inputContainer: { flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: scale(7), + paddingVertical: verticalScale(8), + }, + checkIcon: { + width: scale(24), + height: verticalScale(24), }, textInput: { - backgroundColor: colors.Gray02, flex: 1, - borderRadius: widthPercentage(4), - marginLeft: widthPercentage(2), - paddingHorizontal: widthPercentage(4), - }, - keyboardInputContainer: { - backgroundColor: 'white', - borderTopWidth: 0, + backgroundColor: colors.Gray02, + borderRadius: moderateScale(4), + marginLeft: scale(4), + paddingHorizontal: scale(8), + height: scale(24), + fontSize: moderateScale(14), }, }); diff --git a/hooks/api/useCategoryMutation.js b/hooks/api/useCategoryMutation.js index 3e350e6..f237142 100644 --- a/hooks/api/useCategoryMutation.js +++ b/hooks/api/useCategoryMutation.js @@ -2,7 +2,7 @@ import { api as Api } from '@/utils/api'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { QUERY_KEY } from './useCategoriesQuery'; -const addCategoryFetcher = async ({ addCategoryData }) => { +const addCategoryFetcher = async addCategoryData => { const data = await Api.addCategory(addCategoryData); return data; }; diff --git a/hooks/api/useInboxTodoQuery.js b/hooks/api/useInboxTodoQuery.js index 1930e72..faa94a6 100644 --- a/hooks/api/useInboxTodoQuery.js +++ b/hooks/api/useInboxTodoQuery.js @@ -13,8 +13,7 @@ const useInboxTodoQuery = userId => { return useQuery({ queryKey: [INBOX_QUERY_KEY], queryFn: () => fetcher(userId), - // refetchInterval: 30000, - // refetchIntervalInBackground: true, + suspense: true, }); }; diff --git a/hooks/api/useTodoMutations.js b/hooks/api/useTodoMutations.js index 642cc7c..4c1d41a 100644 --- a/hooks/api/useTodoMutations.js +++ b/hooks/api/useTodoMutations.js @@ -1,9 +1,10 @@ import { api as Api } from '@/utils/api'; import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { INBOX_QUERY_KEY } from './useInboxTodoQuery'; import { TODO_QUERY_KEY } from './useTodoQuery'; // 생성 (Add Todo) -const addTodoFetcher = async ({ todoData }) => { +const addTodoFetcher = async todoData => { const data = await Api.addTodo(todoData); return data; }; @@ -18,6 +19,16 @@ export const useTodoAddMutation = () => { }); }; +export const useInboxTodoAddMutation = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: addTodoFetcher, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [INBOX_QUERY_KEY] }); + }, + }); +}; + // 수정 (Update Todo) const updateTodoFetcher = async updatedData => { const data = await Api.updateTodo(updatedData); diff --git a/hooks/todo/useCreateInboxTodo.js b/hooks/todo/useCreateInboxTodo.js new file mode 100644 index 0000000..208457f --- /dev/null +++ b/hooks/todo/useCreateInboxTodo.js @@ -0,0 +1,22 @@ +import { useInboxTodoAddMutation } from '@/hooks/api/useTodoMutations'; +import { useState } from 'react'; + +const useCreateInboxTodo = (userId, selectedCategory) => { + const [input, setInput] = useState(''); + const { mutate: addTodo } = useInboxTodoAddMutation(); + + //TODO: react query와 zustand를 합쳐서 todo 상태관리를 하도록 수정해야 함 + const handleSubmit = () => { + const newTodoData = { + content: input, + categoryId: selectedCategory, + }; + + addTodo(newTodoData); + setInput(''); + }; + + return { input, setInput, handleSubmit }; +}; + +export default useCreateInboxTodo; diff --git a/hooks/todo/useCreateTodo.js b/hooks/todo/useCreateTodo.js index b4ba2d3..3a2ea3b 100644 --- a/hooks/todo/useCreateTodo.js +++ b/hooks/todo/useCreateTodo.js @@ -12,7 +12,7 @@ const useCreateTodo = (userId, selectedCategory, selectedDate) => { categoryId: selectedCategory, }; - addTodo({ todoData: newTodoData }); + addTodo(newTodoData); setInput(''); }; From 71881bd52cd111164e510043d5e4c0ab26e21ff5 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Thu, 21 Nov 2024 22:54:21 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=9D=B8=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=ED=88=AC=EB=91=90=20CRUD=20=EC=97=B0=EB=8F=99=20=EB=AC=B8?= =?UTF-8?q?=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 --- components/InboxSubTodo.jsx | 5 ++--- hooks/api/useSubTodoMutations.js | 25 +++++++++++++++++++------ hooks/api/useTodoMutations.js | 16 +++++----------- hooks/todo/useCreateInboxTodo.js | 4 ++-- 4 files changed, 28 insertions(+), 22 deletions(-) diff --git a/components/InboxSubTodo.jsx b/components/InboxSubTodo.jsx index a693fab..5dabcef 100644 --- a/components/InboxSubTodo.jsx +++ b/components/InboxSubTodo.jsx @@ -1,11 +1,10 @@ +import { TextInputContext } from '@/contexts/textInputContext'; import { useSubTodoUpdateMutation } from '@/hooks/api/useSubTodoMutations'; import { Icon, Input, ListItem } from '@ui-kitten/components'; -import { useContext, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { Text, TouchableOpacity } from 'react-native'; import { useTheme } from 'react-native-elements'; import TodoModal from './TodoModal'; -import React from 'react'; -import { TextInputContext } from '@/contexts/textInputContext'; const InboxSubTodo = ({ item }) => { const [isEditing, setIsEditing] = useState(false); diff --git a/hooks/api/useSubTodoMutations.js b/hooks/api/useSubTodoMutations.js index 4068057..041bf7a 100644 --- a/hooks/api/useSubTodoMutations.js +++ b/hooks/api/useSubTodoMutations.js @@ -1,5 +1,6 @@ import { api as Api } from '@/utils/api'; import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { INBOX_QUERY_KEY } from './useInboxTodoQuery'; import { TODO_QUERY_KEY } from './useTodoQuery'; const addSubTodoFetcher = async ({ todoData }) => { @@ -11,10 +12,14 @@ export const useSubTodoAddMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: addSubTodoFetcher, - onSuccess: () => + onSuccess: () => { queryClient.invalidateQueries({ queryKey: [TODO_QUERY_KEY], - }), + }); + queryClient.invalidateQueries({ + queryKey: [INBOX_QUERY_KEY], + }); + }, }); }; @@ -27,10 +32,14 @@ export const useSubTodoUpdateMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: updateSubTodoFetcher, - onSuccess: () => + onSuccess: () => { queryClient.invalidateQueries({ queryKey: [TODO_QUERY_KEY], - }), + }); + queryClient.invalidateQueries({ + queryKey: [INBOX_QUERY_KEY], + }); + }, }); }; @@ -43,9 +52,13 @@ export const useSubTodoDeleteMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteSubTodoFetcher, - onSuccess: () => + onSuccess: () => { queryClient.invalidateQueries({ queryKey: [TODO_QUERY_KEY], - }), + }); + queryClient.invalidateQueries({ + queryKey: [INBOX_QUERY_KEY], + }); + }, }); }; diff --git a/hooks/api/useTodoMutations.js b/hooks/api/useTodoMutations.js index 4c1d41a..3ef1b5a 100644 --- a/hooks/api/useTodoMutations.js +++ b/hooks/api/useTodoMutations.js @@ -15,15 +15,6 @@ export const useTodoAddMutation = () => { mutationFn: addTodoFetcher, onSuccess: () => { queryClient.invalidateQueries({ queryKey: [TODO_QUERY_KEY] }); - }, - }); -}; - -export const useInboxTodoAddMutation = () => { - const queryClient = useQueryClient(); - return useMutation({ - mutationFn: addTodoFetcher, - onSuccess: () => { queryClient.invalidateQueries({ queryKey: [INBOX_QUERY_KEY] }); }, }); @@ -41,6 +32,7 @@ export const useTodoUpdateMutation = () => { mutationFn: updateTodoFetcher, onSuccess: () => { queryClient.invalidateQueries({ queryKey: [TODO_QUERY_KEY] }); + queryClient.invalidateQueries({ queryKey: [INBOX_QUERY_KEY] }); }, }); }; @@ -55,7 +47,9 @@ export const useTodoDeleteMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteTodoFetcher, - onSuccess: () => - queryClient.invalidateQueries({ queryKey: [TODO_QUERY_KEY] }), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [TODO_QUERY_KEY] }); + queryClient.invalidateQueries({ queryKey: [INBOX_QUERY_KEY] }); + }, }); }; diff --git a/hooks/todo/useCreateInboxTodo.js b/hooks/todo/useCreateInboxTodo.js index 208457f..5dcfa2a 100644 --- a/hooks/todo/useCreateInboxTodo.js +++ b/hooks/todo/useCreateInboxTodo.js @@ -1,9 +1,9 @@ -import { useInboxTodoAddMutation } from '@/hooks/api/useTodoMutations'; +import { useTodoAddMutation } from '@/hooks/api/useTodoMutations'; import { useState } from 'react'; const useCreateInboxTodo = (userId, selectedCategory) => { const [input, setInput] = useState(''); - const { mutate: addTodo } = useInboxTodoAddMutation(); + const { mutate: addTodo } = useTodoAddMutation(); //TODO: react query와 zustand를 합쳐서 todo 상태관리를 하도록 수정해야 함 const handleSubmit = () => { From dc15084ceda807b9147c3532645d0a25ac3e2e92 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Fri, 22 Nov 2024 15:06:29 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EC=9D=B8=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=ED=88=AC=EB=91=90=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=20=EC=98=A4=EB=A5=98=20&=20=EC=9D=B8=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20=EC=BA=98=EB=A6=B0=EB=8D=94=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=95=88=20=EC=97=B4=EB=A6=AC=EB=8A=94=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../inboxView/inboxTodos/InboxTodos.tsx | 71 +++++++++---------- .../todoMoreMenu/TodoMoreMenu.tsx | 20 +++--- 2 files changed, 44 insertions(+), 47 deletions(-) diff --git a/components/inboxView/inboxTodos/InboxTodos.tsx b/components/inboxView/inboxTodos/InboxTodos.tsx index c26ab38..f86e970 100644 --- a/components/inboxView/inboxTodos/InboxTodos.tsx +++ b/components/inboxView/inboxTodos/InboxTodos.tsx @@ -1,4 +1,3 @@ -import CalendarBottomSheetProvider from '@/contexts/CalendarBottomSheetProvider'; import { LoginContext } from '@/contexts/LoginContext'; import { TextInputContext } from '@/contexts/textInputContext'; import { useTodoUpdateMutation } from '@/hooks/api/useTodoMutations'; @@ -77,43 +76,41 @@ const InboxTodos = ({ todosData, categoryId }) => { return ( - - + item.id.toString()} + onScroll={() => handleScroll(INBOXVIEW_SCROLL_EVENT, userId)} + scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} + /> + + {isTextInputOpen && categoryId === activatedCategoryId ? ( + - item.id.toString()} - onScroll={() => handleScroll(INBOXVIEW_SCROLL_EVENT, userId)} - scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} - /> - - {isTextInputOpen && categoryId === activatedCategoryId ? ( - - - - - - - ) : null} - + + + + + + ) : null} ); diff --git a/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx b/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx index 0b4b19b..483d330 100644 --- a/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx +++ b/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx @@ -1,4 +1,13 @@ +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 FolderIcon from '@/components/icons/FolderIcon'; +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 +18,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 ( From a14ae680823a7775cf8ba529cde81e08831063e6 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Fri, 22 Nov 2024 17:35:35 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20textinput=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EB=B3=80=EC=88=98=20today=EC=99=80=20inbox=EC=9A=A9=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(tabs)/inboxView.jsx | 2 +- app/(tabs)/index.jsx | 2 +- components/InboxSubTodo.jsx | 6 +++--- components/categoryView/CategoryMainItem.jsx | 21 +++++++++++++------ .../inboxView/inboxTodos/InboxTodos.tsx | 11 ++++++---- .../inboxTodos/inboxTodo/InboxTodo.jsx | 4 ++-- .../inboxTodo/subTodoList/InboxSubTodo.jsx | 6 +++--- .../inboxTodo/subTodoList/SubTodoList.tsx | 10 --------- .../todoMoreMenu/TodoMoreMenu.tsx | 2 ++ .../inboxTodo/todoListItem/useTodoListItem.ts | 4 ++-- .../todayView/dailyTodos/DailyTodos.tsx | 13 +++++++----- .../dailyTodos/dailyTodo/DailyTodo.jsx | 4 ++-- .../dailyTodo/subTodoList/DailySubTodo.jsx | 11 +++++----- .../dailyTodo/todoListItem/useTodoListItem.ts | 6 +++--- contexts/textInputContext.js | 20 ++++++++++++------ 15 files changed, 68 insertions(+), 54 deletions(-) diff --git a/app/(tabs)/inboxView.jsx b/app/(tabs)/inboxView.jsx index aa56ddd..41dcadf 100644 --- a/app/(tabs)/inboxView.jsx +++ b/app/(tabs)/inboxView.jsx @@ -35,7 +35,7 @@ const InboxView = () => { const renderCategoriesTodo = ({ item }) => { return ( - + ); diff --git a/app/(tabs)/index.jsx b/app/(tabs)/index.jsx index 5784ead..5fd1f90 100644 --- a/app/(tabs)/index.jsx +++ b/app/(tabs)/index.jsx @@ -43,7 +43,7 @@ const TodayView = () => { const renderCategoriesTodo = ({ item }) => { return ( - + ); diff --git a/components/InboxSubTodo.jsx b/components/InboxSubTodo.jsx index 5dabcef..2a1033d 100644 --- a/components/InboxSubTodo.jsx +++ b/components/InboxSubTodo.jsx @@ -12,11 +12,11 @@ const InboxSubTodo = ({ item }) => { const theme = useTheme(); const [modalVisible, setModalVisible] = useState(false); const { mutate: updateInboxSubTodo } = useSubTodoUpdateMutation(); - const { setTextInputOpen } = useContext(TextInputContext); + const { setInboxTextInputOpen } = useContext(TextInputContext); const handleEdit = () => { setIsEditing(true); - setTextInputOpen(false); + setInboxTextInputOpen(false); setModalVisible(false); }; @@ -65,7 +65,7 @@ const InboxSubTodo = ({ item }) => { onSubmitEditing={() => { handleInboxSubTodoUpdate(); setIsEditing(false); - setTextInputOpen(true); + setInboxTextInputOpen(true); }} autoFocus={true} /> diff --git a/components/categoryView/CategoryMainItem.jsx b/components/categoryView/CategoryMainItem.jsx index ecdd8c4..e26fbba 100644 --- a/components/categoryView/CategoryMainItem.jsx +++ b/components/categoryView/CategoryMainItem.jsx @@ -3,15 +3,24 @@ import colors from '@/theme/theme.json'; import { Icon } from '@ui-kitten/components'; import { useContext } from 'react'; import { Pressable, StyleSheet, View } from 'react-native'; -import CategoryButton from './CategoryButton'; import { scale, verticalScale } from 'react-native-size-matters'; +import CategoryButton from './CategoryButton'; -const CategoryMainItem = ({ item }) => { - const { setTextInputOpen, setActivatedCategoryId } = - useContext(TextInputContext); +const CategoryMainItem = ({ item, isToday = true }) => { + const { + setTodayTextInputOpen, + setTodayActivatedCategoryId, + setInboxTextInputOpen, + setInboxActivatedCategoryId, + } = useContext(TextInputContext); const handlePress = () => { - setTextInputOpen(true); - setActivatedCategoryId(item.id); + if (isToday) { + setTodayTextInputOpen(true); + setTodayActivatedCategoryId(item.id); + } else { + setInboxTextInputOpen(true); + setInboxActivatedCategoryId(item.id); + } }; return ( diff --git a/components/inboxView/inboxTodos/InboxTodos.tsx b/components/inboxView/inboxTodos/InboxTodos.tsx index f86e970..088076e 100644 --- a/components/inboxView/inboxTodos/InboxTodos.tsx +++ b/components/inboxView/inboxTodos/InboxTodos.tsx @@ -38,8 +38,11 @@ const InboxTodos = ({ todosData, categoryId }) => { const inboxCurrentTodos = useFilteredInboxTodos(todosData, categoryId); const { mutate: updateInboxTodo } = useTodoUpdateMutation(); - const { isTextInputOpen, activatedCategoryId, setTextInputOpen } = - useContext(TextInputContext); + const { + isInboxTextInputOpen, + inboxActivatedCategoryId, + setInboxTextInputOpen, + } = useContext(TextInputContext); const { input, setInput, handleSubmit } = useCreateInboxTodo( userId, categoryId, @@ -70,7 +73,7 @@ const InboxTodos = ({ todosData, categoryId }) => { }); handleSubmit(); - setTextInputOpen(false); + setInboxTextInputOpen(false); }; return ( @@ -89,7 +92,7 @@ const InboxTodos = ({ todosData, categoryId }) => { scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} /> - {isTextInputOpen && categoryId === activatedCategoryId ? ( + {isInboxTextInputOpen && categoryId === inboxActivatedCategoryId ? ( { setGeneratedSubTodos, } = useInboxTodo(); - const { setTextInputOpen } = useContext(TextInputContext); + const { setInboxTextInputOpen } = useContext(TextInputContext); const { isVisible: isSubTodoGenerateModalVisible, @@ -33,7 +33,7 @@ const InboxTodo = ({ item, drag, isActive }) => { const handleEdit = () => { setIsEditing(true); - setTextInputOpen(false); + setInboxTextInputOpen(false); setIsTodoModalVisible(false); }; diff --git a/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx b/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx index d0ee342..226b07c 100644 --- a/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx +++ b/components/inboxView/inboxTodos/inboxTodo/subTodoList/InboxSubTodo.jsx @@ -17,11 +17,11 @@ const InboxSubTodo = ({ item }) => { const theme = useTheme(); const { mutate: updateSubTodo } = useSubTodoUpdateMutation(); const { userId } = useContext(LoginContext); - const { setTextInputOpen } = useContext(TextInputContext); + const { setInboxTextInputOpen } = useContext(TextInputContext); const handleEdit = () => { setIsEditing(true); - setTextInputOpen(false); + setInboxTextInputOpen(false); }; const handleSubTodoUpdate = () => { @@ -69,7 +69,7 @@ const InboxSubTodo = ({ item }) => { onSubmitEditing={() => { handleSubTodoUpdate(); setIsEditing(false); - setTextInputOpen(true); + setInboxTextInputOpen(true); }} autoFocus={true} /> diff --git a/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx b/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx index fd4fcb2..2232de2 100644 --- a/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx +++ b/components/inboxView/inboxTodos/inboxTodo/subTodoList/SubTodoList.tsx @@ -36,16 +36,6 @@ const SubTodoList: React.FC = ({ contentContainerStyle={{ marginLeft: 40, paddingLeft: 40 }} ListFooterComponent={ subTodoInputActivated ? ( - // { - // setSubtodoInput(nextInput); - // }} - // autoFocus={true} - // onSubmitEditing={handleSubtodoSubmit} - // /> onPress={() => { handleEditPress(); + setVisible(false); }} style={styles.topMenuItem} /> @@ -98,6 +99,7 @@ const TodoMoreMenu = ({ title= onPress={() => { handleDeletePress(); + setVisible(false); }} style={styles.middleMenuItem} /> diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts b/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts index 90c835e..cda93fd 100644 --- a/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts @@ -19,7 +19,7 @@ const useTodoListItem = ({ const { mutate: updateTodo } = useTodoUpdateMutation(); const { userId } = useContext(LoginContext); const theme = useTheme(); - const { setTextInputOpen } = useContext(TextInputContext); + const { setInboxTextInputOpen } = useContext(TextInputContext); const checkIconlogPressEvent = () => { handleLogEvent(DAILYTODO_TODOCOMPLETE_CLICK_EVENT, { @@ -59,7 +59,7 @@ const useTodoListItem = ({ const handleTodoListItemSubmitEditing = content => { handleTodoContentUpdate(content); setIsEditing(false); - setTextInputOpen(true); + setInboxTextInputOpen(true); }; const handleGenerateIconPress = () => { diff --git a/components/todayView/dailyTodos/DailyTodos.tsx b/components/todayView/dailyTodos/DailyTodos.tsx index d33cf12..c5162dd 100644 --- a/components/todayView/dailyTodos/DailyTodos.tsx +++ b/components/todayView/dailyTodos/DailyTodos.tsx @@ -21,8 +21,8 @@ import { useTranslation } from 'react-i18next'; import { StyleSheet, TextInput, View } from 'react-native'; import DraggableFlatList from 'react-native-draggable-flatlist'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; -import DailyTodo from './dailyTodo/DailyTodo'; import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; +import DailyTodo from './dailyTodo/DailyTodo'; const DailyTodos = ({ todosData, categoryId }) => { const { userId } = useContext(LoginContext); @@ -36,8 +36,11 @@ const DailyTodos = ({ todosData, categoryId }) => { selectedDate, ); - const { isTextInputOpen, activatedCategoryId, setTextInputOpen } = - useContext(TextInputContext); + const { + isTodayTextInputOpen, + todayActivatedCategoryId, + setTodayTextInputOpen, + } = useContext(TextInputContext); const handleDragEnd = useHandleDrag(); @@ -47,7 +50,7 @@ const DailyTodos = ({ todosData, categoryId }) => { userId: userId, }); handleSubmit(); - setTextInputOpen(false); + setTodayTextInputOpen(false); }; const renderTodo = ({ item, drag, isActive }) => { @@ -69,7 +72,7 @@ const DailyTodos = ({ todosData, categoryId }) => { containerStyle={styles.flatListContainer} /> - {isTextInputOpen && categoryId === activatedCategoryId && ( + {isTodayTextInputOpen && categoryId === todayActivatedCategoryId && ( { setGeneratedSubTodos, } = useDailyTodo(); - const { setTextInputOpen } = useContext(TextInputContext); + const { setTodayTextInputOpen } = useContext(TextInputContext); const { isVisible: isSubTodoGenerateModalVisible, setIsVisible: setIsSubTodoGenerateModalVisible, @@ -32,7 +32,7 @@ const DailyTodo = ({ item, drag, isActive }) => { const handleEdit = () => { setIsEditing(true); - setTextInputOpen(false); + setTodayTextInputOpen(false); setIsTodoModalVisible(false); }; diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx index 4d0349a..ddb437e 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx @@ -1,3 +1,4 @@ +import EditableTextField from '@/components/common/molecules/EditableTextField'; import { LoginContext } from '@/contexts/LoginContext'; import { TextInputContext } from '@/contexts/textInputContext'; import { useSubTodoUpdateMutation } from '@/hooks/api/useSubTodoMutations'; @@ -6,24 +7,22 @@ import { DAILYTODO_SUBTODOCOMPLETE_CLICK_EVENT, handleLogEvent, } from '@/utils/logEvent'; -import { Icon } from '@ui-kitten/components'; +import { Icon, ListItem } from '@ui-kitten/components'; import { useContext, useState } from 'react'; +import { Pressable, StyleSheet } from 'react-native'; import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; import SubTodoMoreMenu from './subTodoMoreMenu/SubTodoMoreMenu'; -import EditableTextField from '@/components/common/molecules/EditableTextField'; -import { ListItem } from '@ui-kitten/components'; -import { Pressable, StyleSheet } from 'react-native'; const DailySubTodo = ({ item }) => { const [completed, setCompleted] = useState(item.isCompleted); const [isEditing, setIsEditing] = useState(false); const { mutate: updateSubTodo } = useSubTodoUpdateMutation(); const { userId } = useContext(LoginContext); - const { setTextInputOpen } = useContext(TextInputContext); + const { setTodayTextInputOpen } = useContext(TextInputContext); const handleEdit = () => { setIsEditing(true); - setTextInputOpen(false); + setTodayTextInputOpen(false); }; const handleCheck = () => { diff --git a/components/todayView/dailyTodos/dailyTodo/todoListItem/useTodoListItem.ts b/components/todayView/dailyTodos/dailyTodo/todoListItem/useTodoListItem.ts index 1827bcb..cb309ca 100644 --- a/components/todayView/dailyTodos/dailyTodo/todoListItem/useTodoListItem.ts +++ b/components/todayView/dailyTodos/dailyTodo/todoListItem/useTodoListItem.ts @@ -1,3 +1,4 @@ +import { TextInputContext } from '@/contexts/textInputContext'; import { useTheme } from '@ui-kitten/components'; import { useContext } from 'react'; import { LoginContext } from '../../../../../contexts/LoginContext'; @@ -8,7 +9,6 @@ import { DAILYTODO_TODOCOMPLETE_CLICK_EVENT, handleLogEvent, } from '../../../../../utils/logEvent'; -import { TextInputContext } from '@/contexts/textInputContext'; const useTodoListItem = ({ item, @@ -19,7 +19,7 @@ const useTodoListItem = ({ const { mutate: updateTodo } = useTodoUpdateMutation(); const { userId } = useContext(LoginContext); const theme = useTheme(); - const { setTextInputOpen } = useContext(TextInputContext); + const { setTodayTextInputOpen } = useContext(TextInputContext); const checkIconlogPressEvent = () => { handleLogEvent(DAILYTODO_TODOCOMPLETE_CLICK_EVENT, { @@ -59,7 +59,7 @@ const useTodoListItem = ({ const handleTodoListItemSubmitEditing = content => { handleTodoContentUpdate(content); setIsEditing(false); - setTextInputOpen(false); + setTodayTextInputOpen(false); }; const handleGenerateIconPress = () => { diff --git a/contexts/textInputContext.js b/contexts/textInputContext.js index 50eab23..bfc925c 100644 --- a/contexts/textInputContext.js +++ b/contexts/textInputContext.js @@ -3,16 +3,24 @@ import { createContext, useState } from 'react'; export const TextInputContext = createContext(); const TextInputProvider = ({ children }) => { - const [isTextInputOpen, setTextInputOpen] = useState(false); - const [activatedCategoryId, setActivatedCategoryId] = useState(null); + const [isTodayTextInputOpen, setTodayTextInputOpen] = useState(false); + const [todayActivatedCategoryId, setTodayActivatedCategoryId] = + useState(null); + const [isInboxTextInputOpen, setInboxTextInputOpen] = useState(false); + const [inboxActivatedCategoryId, setInboxActivatedCategoryId] = + useState(null); return ( {children} From 2f5df4159b9c6288270976e1463dcecfa42d5436 Mon Sep 17 00:00:00 2001 From: earthyoung Date: Fri, 22 Nov 2024 17:47:01 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20inbox=EC=97=90=EC=84=9C=20=ED=88=AC?= =?UTF-8?q?=EB=91=90=20edit=20=ED=9B=84=20=EC=97=94=ED=84=B0=20=EB=88=84?= =?UTF-8?q?=EB=A5=B4=EB=A9=B4=20textinput=20=EB=82=98=EC=98=A4=EB=8A=94=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts b/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts index cda93fd..b454cc4 100644 --- a/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts +++ b/components/inboxView/inboxTodos/inboxTodo/todoListItem/useTodoListItem.ts @@ -59,7 +59,7 @@ const useTodoListItem = ({ const handleTodoListItemSubmitEditing = content => { handleTodoContentUpdate(content); setIsEditing(false); - setInboxTextInputOpen(true); + setInboxTextInputOpen(false); }; const handleGenerateIconPress = () => {