0726 데이터베이스 수정 및 타입 별 카테고리 분리

App.js

@@ -13,6 +13,7 @@ import DeptPage from './DeptPage';
 import InfoDetails from './screens/InfoDetails';
 import MemoPage from './MemoPage';
 import MemoDetails from './screens/MemoDetails';
+import CatEdit from './CatEdit';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -80,6 +81,7 @@ function App() {
           component={MemoDetails}
           options={{ title: "상세내용" }} />
         <Stack.Screen name="DetailInfo" component={DetailInfo} />
+        <Stack.Screen name="CatEdit" component={CatEdit} />
       </Stack.Navigator>
     </NavigationContainer>
   );

CatEdit.js

+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const CatEdit = ({ route }) => {
+  console.log('route', route.params)
+  console.log('---------------------------')
+  return (
+    <>
+      <View style={{ padding: '10%' }}>
+        <Text style={style.Font}>수입</Text>
+        <Text style={{ color: '#1E90FF' }}>{route.params?.input}</Text>
+        <Text>수입 내역들을 보여줄 예정입니다.</Text>
+      </View>
+      <View style={{ padding: '10%' }}>
+        <Text style={style.Font}>지출</Text>
+        <Text style={{ color: '#DC143C' }}>{route.params?.output}</Text>
+        <Text>지출 내역들을 보여줄 예정입니다.</Text>
+      </View>
+    </>
+
+  )
+}
+const style = StyleSheet.create({
+  Font: {
+    fontSize: 24
+  }
+});
+
+export default CatEdit;
\ No newline at end of file

PostMoney.js

@@ -12,38 +12,21 @@ const getDate = () => {
     return (String(date.toJSON()).split(/T/)[0])
 }
 
-const INIT_SUBCATEGORIES = [
-    {
-        id: 1,
-        value: '간식',
-        foreign_id: 1
-    },
-    {
-        id: 2,
-        value: '외식',
-        foreign_id: 1
-    },
-    {
-        id: 3,
-        value: '배달',
-        foreign_id: 1
-    },
-    {
-        id: 4,
-        value: '택시',
-        foreign_id: 2
-    },
-    {
-        id: 5,
-        value: '영화',
-        foreign_id: 3
-    },
-    {
-        id: 6,
-        value: '뮤지컬',
-        foreign_id: 3
-    },
-]
+const INIT_ASSETSTYPE = {
+    id: 0,
+    value: '',
+}
+
+const INIT_CATEGORY = {
+    id: 0,
+    value: '',
+}
+
+const INIT_SUBCATEGORY = {
+    id: 0,
+    value: '',
+    foreign_id: 0,
+}
 
 const PostMoney = () => {
     const [selectedIndex, setSelectedIndex] = useState(0)
@@ -51,23 +34,34 @@ const PostMoney = () => {
     const [contents, setContents] = useState('')
     const [price, setPrice] = useState(0)
     const [asset_type, setAsset_type] = useState([])
-    const [selected_asset_type, setSelected_asset_type] = useState(0)
+    const [selected_asset_type, setSelected_asset_type] = useState(INIT_ASSETSTYPE)
     const [categories, setCategories] = useState([])
-    const [selected_cat, setSelected_cat] = useState(0)
-    const [subcategories, setSubcategories] = useState(INIT_SUBCATEGORIES)
-    const [selected_subcat, setSelected_subcat] = useState(0)
+    const [selected_cat, setSelected_cat] = useState(INIT_CATEGORY)
+    const [subcategories, setSubcategories] = useState([])
+    const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
 
-    console.log('type: ', selectedIndex, '| date: ', date, '| contents: ', contents, '| price: ', price, '| selected_asset_type: ', selected_asset_type, '| selected_cat: ', selected_cat, '| selected_subcat: ', selected_subcat)
+    useEffect(() => {
+        loadCat()
+        loadSubCat()
+        loadAssetType()
+        initData()
+    }, [selectedIndex])
 
-    const insertData = async () => {
-        try {
-            let type = ''
+    const initData = () => {
+        setDate(getDate())
+        setContents('')
+        setPrice(0)
+        setSelected_asset_type(INIT_ASSETSTYPE)
+        setSelected_cat(INIT_CATEGORY)
+        setSelected_subcat(INIT_SUBCATEGORY)
+    }
 
-            if (selectedIndex === 0) { type = '수입' }
-            else if (selectedIndex === 1) { type = '지출' }
-            else { type = '이동' }
+    console.log('type: ', selectedIndex, '| date: ', date, '| contents: ', contents, '| price: ', price, '| selected_asset_type: ', selected_asset_type.id, '| selected_cat: ', selected_cat.id, '| selected_subcat: ', selected_subcat.id)
 
-            const result = await moneyApi.insertMoney([type, date, contents, price, selected_asset_type, selected_cat, selected_subcat])
+    const insertData = async () => {
+        try {
+            let type = selectedIndex+1;
+            const result = await moneyApi.insertMoney([type, date, contents, price, selected_asset_type.id, selected_cat.id, selected_subcat.id])
             console.log(result)
         } catch (error) {
             console.log('error in insert data', error)
@@ -76,14 +70,24 @@ const PostMoney = () => {
 
     const loadCat = async () => {
         try {
-            const catArray = await moneyApi.selectCategories()
+            const catArray = await moneyApi.selectCategories(selectedIndex+1)
             console.log('catload', catArray)
             setCategories(catArray);
         } catch (error) {
             console.log('error in load categories ( postMoney.js )', error)
         }
     }
-    
+
+    const loadSubCat = async () => {
+        try {
+            const subCatArray = await moneyApi.selectSubCategories()
+            console.log('catload', subCatArray)
+            setSubcategories(subCatArray);
+        } catch (error) {
+            console.log('error in load categories ( postMoney.js )', error)
+        }
+    }
+
     const loadAssetType = async () => {
         try {
             const assetsTypeArray = await moneyApi.selectAssetsType()
@@ -93,12 +97,6 @@ const PostMoney = () => {
         }
     }
 
-
-    useEffect(() => {
-        loadCat()
-        loadAssetType()
-    }, [])
-
     return (
         <View>
             <View>
@@ -133,17 +131,17 @@ const PostMoney = () => {
                     placeholder="자산 선택"
                     data={asset_type}
                     selectedData={selected_asset_type}
-                    onValueChange={(assetId) => setSelected_asset_type(assetId)}
+                    onValueChange={(asset) => setSelected_asset_type(asset)}
                 />
                 <SelectForm
                     inputTitle="구분"
                     placeholder="카테고리 선택"
                     data={categories}
                     selectedData={selected_cat}
-                    onValueChange={(catId) => setSelected_cat(catId)}
+                    onValueChange={(cat) => setSelected_cat(cat)}
                     subData={subcategories}
                     selectedSubData={selected_subcat}
-                    onSubValueChange={(subcatId) => setSelected_subcat(subcatId)}
+                    onSubValueChange={(subcat) => setSelected_subcat(subcat)}
                 />
             </View>
             <View style={style.buttonRow}>

components/ButtonsForm.js

@@ -3,16 +3,17 @@ import { ButtonGroup } from 'react-native-elements';
 import { StyleSheet, Text } from 'react-native';
 
 const ButtonsForm = (props) => {
+    const components = [];
 
-    const component1 = () => <Text>{props.group[0]}</Text>
-    const component2 = () => <Text>{props.group[1]}</Text>
-    const component3 = () => <Text>{props.group[2]}</Text>
+    for (let i = 0; i < props.group.length ; i++) {
+        components[i] = { element: () => <Text>{props.group[i]}</Text> }
+    }
 
     return (
         <ButtonGroup
             onPress={props.onPress}
             selectedIndex={props.selectedIndex}
-            buttons={[{ element: component1 }, { element: component2 }, { element: component3 }]}
+            buttons={components}
             containerStyle={style.container}
             selectedButtonStyle={style.selectedButton}
             selectedTextStyle={style.selectedText}

components/SelectForm.js

 import React, { useState, useEffect } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { StyleSheet, TouchableWithoutFeedback, View, Text, Modal, FlatList, Animated } from 'react-native';
-import Notification from './Notification';
+import { StyleSheet, TouchableWithoutFeedback, View, Text, Modal, FlatList } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-const SelectForm = (props) => {
-    const [option, setOption] = useState([])
-    const [optionId, setOptionId] = useState(0)
-    const [optionValue, setOptionValue] = useState('')
+const INIT_SUBCATEGORY = {
+    id: 0,
+    value: '',
+    foreign_id: 0,
+}
 
+const SelectForm = ({
+    inputTitle,
+    placeholder,
+    data,
+    selectedData,
+    onValueChange,
+    subData,
+    selectedSubData,
+    onSubValueChange,
+}) => {
+    const [option, setOption] = useState([])
     const [subOption, setSubOption] = useState([])
-    const [subOptionId, setSubOptionId] = useState(0)
 
-    const [text, setText] = useState('')
+    const [selectedOption, setSelectedOption] = useState({})
 
     const [subOptionShow, setSubOptionShow] = useState(false)
     const [modalOpen, setModalOpen] = useState(false)
 
-    const [notification, setNotification] = useState([])
-
     const onPressSelectBox = () => { setModalOpen(true) }
 
-    const modalClose = () => { setModalOpen(false); setNotification([]) }
+    const modalClose = () => { setModalOpen(false); }
 
     const onPressOption = (item) => {
         if (subOption !== undefined) {
             if (subOptionShow) {
-                setSubOptionId(item.id)
-                props.onValueChange(optionId)
-                props.onSubValueChange(subOptionId)
-                setText(optionValue + ` > ${item.value}`)
+                onValueChange(selectedOption)
+                onSubValueChange(item)
                 modalClose()
             } else {
-                setOptionId(item.id)
-                setOptionValue(item.value)
+                setSelectedOption(item)
                 setSubOptionByOptionId(item)
             }
         } else {
-            props.onValueChange(item.id)
-            setOptionId(item.id)
-            setOptionValue(item.value)
-            setText(item.value)
+            onValueChange(item)
             modalClose()
         }
     }
 
     const setSubOptionByOptionId = (item) => {
-        const newOption = props.subData.filter((subItem) => {
+        const newOption = subData.filter((subItem) => {
             if (subItem.foreign_id === item.id)
                 return true;
         })
         if (newOption.length === 0) {
-            setNotification((prev) => [...prev, `${item.value}의 세부 카테고리가 존재하지 않습니다.`])
+            onValueChange(item)
+            onSubValueChange(INIT_SUBCATEGORY)
+            modalClose()
         } else {
             setSubOption(newOption)
             setSubOptionShow(true)
@@ -66,8 +70,8 @@ const SelectForm = (props) => {
     );
 
     useEffect(() => {
-        setOption(props.data)
-        setSubOption(props.subData)
+        setOption(data)
+        setSubOption(subData)
         setSubOptionShow(false)
     }, [modalOpen])
 
@@ -75,12 +79,16 @@ const SelectForm = (props) => {
         <View>
             <View style={style.container}>
                 <View style={style.inputTitleArea}>
-                    <Text style={style.inputTitle}>{props.inputTitle}</Text>
+                    <Text style={style.inputTitle}>{inputTitle}</Text>
                 </View>
                 <View style={style.selectBox}>
                     <TouchableWithoutFeedback onPress={onPressSelectBox}>
                         <Text style={style.textStyle}>
-                            {text ? text : props.placeholder}
+                            {selectedData.value ?
+                                selectedSubData?.value ?
+                                    selectedData.value + ' < ' + selectedSubData.value
+                                    : selectedData.value
+                                : placeholder}
                         </Text>
                     </TouchableWithoutFeedback>
                 </View>
@@ -95,25 +103,23 @@ const SelectForm = (props) => {
             >
                 <View style={style.selectModalContainer}>
                     <TouchableWithoutFeedback onPress={modalClose}>
-                        <View style={{ flex: 1 }}>
-                            <Notification notification={notification} setNotification={setNotification} />
-                        </View>
+                        <View style={{ flex: 1 }} />
                     </TouchableWithoutFeedback>
                     <View style={style.selectModal}>
                         <View style={style.modalHeader}>
                             {subOptionShow ?
                                 <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} >
                                     <MaterialCommunityIcons name='arrow-left' size={35} color='white' onPress={() => { setSubOptionShow(false); }} />
-                                    <Text style={style.modalHeaderText}>{optionValue}</Text>
+                                    <Text style={style.modalHeaderText}>{selectedOption.value}</Text>
                                 </View>
                                 :
-                                <Text style={style.modalHeaderText}>{props.inputTitle}</Text>}
+                                <Text style={style.modalHeaderText}>{inputTitle}</Text>}
                             <View style={{ flexDirection: "row" }}>
                                 <MaterialCommunityIcons name='playlist-edit' size={35} color='white' onPress={() => console.log('카테고리 편집')} />
                                 <MaterialCommunityIcons name='close' size={35} color='white' onPress={modalClose} />
                             </View>
                         </View>
-                        <View style={[style.modalBody, props.backdropStyle]}>
+                        <View style={[style.modalBody]}>
                             <FlatList
                                 data={subOptionShow ? subOption : option}
                                 renderItem={renderOptionItem}

db/postMoney.api.js

@@ -17,12 +17,12 @@ const insertMoney = async (moneyData) => {
     })
 };
 
-const selectCategories = async () => {
+const selectCategories = async (type_id) => {
     const db = await getDb();
     return new Promise((resolve, reject) => {
         db.transaction(async (tx) => {
             console.log("카테고리 부르기");
-            const [txn, results] = await tx.executeSql('SELECT * FROM categories');
+            const [txn, results] = await tx.executeSql(`SELECT * FROM categories WHERE type_id=${type_id}`);
             console.log('item length', results.rows.length);
             const temp = [];
             for (let i = 0; i < results.rows.length; i++) {
@@ -36,6 +36,26 @@ const selectCategories = async () => {
     })
 }
 
+const selectSubCategories = async () => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction(async (tx) => {
+            console.log("서브 카테고리 부르기");
+            const [txn, results] = await tx.executeSql('SELECT * FROM subcategories');
+            console.log('item length', results.rows.length);
+            const temp = [];
+            for (let i = 0; i < results.rows.length; i++) {
+                const tempId = results.rows.item(i).subcategory_id;
+                const tempName = results.rows.item(i).subcategory_name;
+                const tempCatId = results.rows.item(i).category_id;
+                temp.push({ id: tempId, value: tempName, foreign_id: tempCatId });
+            }
+            console.log(temp)
+            resolve(temp);
+        })
+    })
+}
+
 const selectAssetsType = async () => {
     const db = await getDb();
     return new Promise((resolve, reject) => {
@@ -59,6 +79,7 @@ const selectAssetsType = async () => {
 const moneyApi = {
     insertMoney,
     selectCategories,
+    selectSubCategories,
     selectAssetsType,
 }