fix: myItem logic

Amattang · Apr 5, 2022 · d414e95 · d414e95
1 parent 58b06ea
commit d414e95
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 45 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -149,7 +149,7 @@ android {
         applicationId "com.amattang"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 4
+        versionCode 6
         versionName "1.0"
         manifestPlaceholders = [GOOGLE_MAP_API_KEY:googleMapApiKey, KAKAO_NATIVE_APP_KEY:kakaoLoginApiKey]
         // manifestPlaceholders = [KAKAO_NATIVE_APP_KEY:kakaoLoginApiKey]

diff --git a/components/CheckListComponent/CheckListComponent.tsx b/components/CheckListComponent/CheckListComponent.tsx
@@ -94,8 +94,8 @@ function CheckListComponent({
         <Animated.View style={[rStyle]}>
           <Pressable style={styles.whiteCard} key={checkList.questionId}>
             <View style={styles.textWrapWrapper}>
-              {checkList.question.split(' ').map((word) => (
-                <DefaultText style={[styles.checkListMainTitle, styles.textWrap]}>
+              {checkList.question.split(' ').map((word, index) => (
+                <DefaultText key={index} style={[styles.checkListMainTitle, styles.textWrap]}>
                   {word}{' '}
                 </DefaultText>
               ))}
@@ -106,8 +106,8 @@ function CheckListComponent({
                 <View style={styles.checkListSubTitle}>
                   <DefaultText style={styles.emoji}>📘 </DefaultText>
                   <View style={styles.textWrapWrapper}>
-                    {checkList.rule.split(' ').map((word) => (
-                      <DefaultText style={[styles.checkListGrayText, styles.textWrap]}>
+                    {checkList.rule.split(' ').map((word, index) => (
+                      <DefaultText key={index} style={[styles.checkListGrayText, styles.textWrap]}>
                         {word}&nbsp;
                       </DefaultText>
                     ))}
@@ -119,8 +119,8 @@ function CheckListComponent({
                   <DefaultText style={styles.emoji}>👀 </DefaultText>
 
                   <View style={styles.textWrapWrapper}>
-                    {checkList.description.split(' ').map((word) => (
-                      <DefaultText style={[styles.checkListGrayText, styles.textWrap]}>
+                    {checkList.description.split(' ').map((word, index) => (
+                      <DefaultText key={index} style={[styles.checkListGrayText, styles.textWrap]}>
                         {word}&nbsp;
                       </DefaultText>
                     ))}

diff --git a/components/CheckListComponent/myItem/MyItemElementOfBottomSheets.tsx b/components/CheckListComponent/myItem/MyItemElementOfBottomSheets.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction, useState } from 'react';
 import { myItemElementType, myItemType } from '../../../types/checkListTypes';
 import { Image, View } from 'react-native';
 import styles from '../styles';
@@ -18,7 +18,8 @@ function MyItemElementOfBottomSheets({
   isEdit,
   clickedMyItemElements,
 }: IProps) {
-  const onChangeQuestionElementHandler = (onChangedQuestionElement: string) => {
+  const [onChangedQuestionElement, setOnChangedQuestionElement] = useState('');
+  const onChangeQuestionElementHandler = () => {
     onChangedQuestionElement === ''
       ? setClickedMyItem({
           ...clickedMyItem,
@@ -37,7 +38,7 @@ function MyItemElementOfBottomSheets({
         } as myItemType);
   };
   return (
-    <View style={styles.myItemElementsOfBottomSheets}>
+    <View key={clickedMyItem.categoryId} style={styles.myItemElementsOfBottomSheets}>
       {clickedMyItemElements.checked ? (
         <Image source={require('../../../assets/images/checkList/checkedCheckBox.png')} />
       ) : (
@@ -46,11 +47,11 @@ function MyItemElementOfBottomSheets({
       {clickedMyItemElements && (
         <BottomSheetTextInput
           editable={isEdit}
+          placeholder={clickedMyItemElements.content || '+ 항목 추가'}
+          placeholderTextColor={'#999999'}
           style={styles.myItemEachElementOfBottomSheets}
-          value={clickedMyItemElements.content}
-          onChangeText={(onChangedQuestionElement) =>
-            onChangeQuestionElementHandler(onChangedQuestionElement)
-          }
+          onChangeText={(onChangText: string) => setOnChangedQuestionElement(onChangText)}
+          onEndEditing={onChangeQuestionElementHandler}
         />
       )}
     </View>

diff --git a/components/CheckListComponent/myItem/MyItemOfBottomSheets.tsx b/components/CheckListComponent/myItem/MyItemOfBottomSheets.tsx
@@ -1,17 +1,18 @@
-import React, { Dispatch, RefObject, SetStateAction, useState } from 'react';
+import React, { createRef, Dispatch, RefObject, SetStateAction, useState } from 'react';
 import {
   BottomSheetBackgroundProps,
   BottomSheetModal,
   BottomSheetTextInput,
 } from '@gorhom/bottom-sheet';
-import { ScrollView, TextInput, View } from 'react-native';
+import { KeyboardAvoidingViewComponent, ScrollView, Text, TextInput, View } from 'react-native';
 
 import { myItemType } from '../../../types/checkListTypes';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import styles from '../styles';
 import CreateMyItemButtonOfBottomSheets from './CreateMyItemButtonOfBottomSheets';
 import DeleteMyItemButtonOfBottomSheets from './DeleteMyItemButtonOfBottomSheets';
 import MyItemElementOfBottomSheets from './MyItemElementOfBottomSheets';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 interface IProps {
   onDismissHandler: () => void;
@@ -40,30 +41,27 @@ function MyItemOfBottomSheets({
   handleSheetChanges,
   clickedMyItem,
 }: IProps) {
-  const [newElement, setNewElement] = useState('');
-
-  const onCategoryNameHandler = (newCategoryName: string) => {
-    setClickedMyItem({
+  const [newCategory, setNewCategory] = useState('');
+  const onCategoryNameHandler = async () => {
+    await setClickedMyItem({
       ...clickedMyItem,
-      categoryName: newCategoryName,
+      categoryName: newCategory,
     } as myItemType);
+    setNewCategory('');
   };
 
+  const [newElement, setNewElement] = useState('');
   const onCreateQuestionElementHandler = async () => {
-    newElement && clickedMyItem?.questions
-      ? setClickedMyItem({
+    clickedMyItem?.questions
+      ? await setClickedMyItem({
           ...clickedMyItem,
           questions: [...clickedMyItem?.questions, { content: newElement, checked: false }],
         } as myItemType)
-      : setClickedMyItem({
+      : await setClickedMyItem({
           ...clickedMyItem,
           questions: [{ content: newElement, checked: false }],
         } as myItemType);
-    setNewElement('');
-  };
-
-  const onCreateQuestionElementTextHandler = (elementText: string) => {
-    setNewElement(elementText);
+    return null;
   };
 
   return (
@@ -78,13 +76,13 @@ function MyItemOfBottomSheets({
       onChange={handleSheetChanges}
     >
       <View style={[styles.myItemBottomSheetWrapper]}>
-        <TextInput
+        <BottomSheetTextInput
           style={styles.myItemCategoryName}
-          value={clickedMyItem?.categoryName}
+          placeholder={clickedMyItem?.categoryName || '새 그룹'}
           placeholderTextColor={'#D6D4D4'}
-          placeholder={'새 그룹'}
           editable={isEdit}
-          onChangeText={(newCategoryName) => onCategoryNameHandler(newCategoryName)}
+          onChangeText={(newCategoryName) => setNewCategory(newCategoryName)}
+          onEndEditing={onCategoryNameHandler}
         />
         <ScrollView>
           {clickedMyItem?.questions?.map((clickedMyItemElements) => (
@@ -96,15 +94,26 @@ function MyItemOfBottomSheets({
               clickedMyItemElements={clickedMyItemElements}
             />
           ))}
-          <TextInput
-            style={styles.addMyItemEachElementOfBottomSheets}
-            placeholder={'+ 항목 추가'}
-            placeholderTextColor={'#999999'}
-            value={newElement}
-            editable={isEdit}
-            onChangeText={(elementText) => onCreateQuestionElementTextHandler(elementText)}
-            onEndEditing={onCreateQuestionElementHandler}
-          />
+          {newElement ? (
+            <BottomSheetTextInput
+              style={styles.addMyItemEachElementOfBottomSheets}
+              placeholder={'+ 항목 추가'}
+              placeholderTextColor={'#999999'}
+              editable={isEdit}
+              onChangeText={(elementText) => setNewElement(elementText)}
+              onEndEditing={onCreateQuestionElementHandler}
+            />
+          ) : (
+            <BottomSheetTextInput
+              style={styles.addMyItemEachElementOfBottomSheets}
+              placeholder={'+ 항목 추가'}
+              placeholderTextColor={'#999999'}
+              editable={isEdit}
+              value={''}
+              onChangeText={(elementText) => setNewElement(elementText)}
+              onEndEditing={onCreateQuestionElementHandler}
+            />
+          )}
         </ScrollView>
         <CreateMyItemButtonOfBottomSheets
           clickedMyItem={clickedMyItem}

diff --git a/navigation/Main/BottomNavigation/styles.tsx b/navigation/Main/BottomNavigation/styles.tsx
@@ -4,7 +4,7 @@ import { mainBlue, mainLightBlue } from '../../../color';
 const styles = StyleSheet.create({
   activeColor: { color: mainBlue },
   inactiveColor: { color: mainLightBlue },
-  title: { fontSize: 12, fontWeight: 'normal' },
+  title: { fontSize: 12, fontFamily: 'AppleSDGothicNeoB00' },
   btnWrapper: {
     position: 'absolute',
     width: 55,

diff --git a/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx b/navigation/Main/StackNavigation/StackNavigationOfCheckList.tsx
@@ -68,7 +68,7 @@ function CheckListStackNav({ setIsLogin }: IProps) {
 
   useEffect(() => {
     setInterval(() => {
-      onSubmitHandler();
+      checkListContext?.onChoseCheckListHandler();
     }, 100000);
   }, []);
 

diff --git a/screens/BasicCheckList/MyItemOfBasicCheckList.tsx b/screens/BasicCheckList/MyItemOfBasicCheckList.tsx
@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ActivityIndicator, ScrollView, View } from 'react-native';
+import { ActivityIndicator, ScrollView, TextInput, View } from 'react-native';
 
 import BlankedMyItem from '../../components/CheckListComponent/myItem/BlankedMyItem';
 import ButtonOfAddMyItem from '../../components/CheckListComponent/myItem/ButtonOfAddMyItem';
@@ -133,6 +133,7 @@ function MyItemOfBasicCheckList({ isEdit, setIsBottomSheet }: IProps) {
                   />
                 ))}
               </ScrollView>
+
               {myItems.length === 0 && <BlankedMyItem />}
             </KeyboardAwareScrollView>
             <MyItemOfBottomSheets