0723 db 변경사항

MoneyDB.js

-import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
-
-DEBUG(true);
-enablePromise(true);
-
-const db = openDatabase({
-  name: 'MyMoney',
-  location: 'default',
-  createFromLocation: '~MyMoney.db', // android/src/main/assets/TestDB.db 파일을 위치 시킴
-});
-
-const QueryFunc = async (Query) => {
-  (await db).transaction(Query)
-};
-
-const moneyApi = {
-  QueryFunc,
-}
-
-export default moneyApi
\ No newline at end of file

PostMoney.js

 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, Button } from 'react-native';
-import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
 import InputBox from './components/InputBox';
 import ButtonsForm from './components/ButtonsForm';
 import SelectForm from './components/SelectForm';
 import StyledButton from './components/StyledButton';
 import DatePicker from './components/DatePicker';
-import moneyApi from './MoneyDB';
-
-DEBUG(true);
-enablePromise(true);
-
-const db = openDatabase({
-    name: 'MyMoney',
-    location: 'default',
-    createFromLocation: '~MyMoney.db', // android/src/main/assets/TestDB.db 파일을 위치 시킴
-});
-
+import moneyApi from './db/postMoney.api';
 
 const getDate = () => {
     var date = new Date();
@@ -73,17 +62,13 @@ const PostMoney = () => {
     const insertData = async () => {
         try {
             let type = ''
+
             if (selectedIndex === 0) { type = '수입' }
             else if (selectedIndex === 1) { type = '지출' }
             else { type = '이동' }
 
-            (await db).transaction((tx) => {
-                console.log("데이터 삽입하기");
-                tx.executeSql('INSERT INTO Money (type, date, contents, price, asset_type, category, subcategory) VALUES (?,?,?,?,?,?,?);',
-                    [type, date, contents, price, selected_asset_type, selected_cat, selected_subcat],
-                    () => { console.log("삽입 성공"); },
-                    (error) => console.log(error))
-            })
+            const result = await moneyApi.insertMoney([type, date, contents, price, selected_asset_type, selected_cat, selected_subcat])
+            console.log(result)
         } catch (error) {
             console.log('error in insert data', error)
         }
@@ -91,42 +76,24 @@ const PostMoney = () => {
 
     const loadCat = async () => {
         try {
-            await moneyApi.QueryFunc(async (tx) => {
-                console.log("카테고리 부르기");
-                const [txn, results] = await tx.executeSql('SELECT * FROM categories');
-                console.log('item length', results.rows.length);
-                const temp = [];
-                for (let i = 0; i < results.rows.length; i++) {
-                    const tempId = results.rows.item(i).category_id;
-                    const tempName = results.rows.item(i).category_name;
-                    temp.push({ id: tempId, value: tempName });
-                }
-                setCategories(temp);
-            })
+            const catArray = await moneyApi.selectCategories()
+            console.log('catload', catArray)
+            setCategories(catArray);
         } catch (error) {
-            console.log('error in load data ( postMoney.js )', error)
+            console.log('error in load categories ( postMoney.js )', error)
         }
     }
     
     const loadAssetType = async () => {
         try {
-            (await db).transaction(async (tx) => {
-                console.log("자산 유형 부르기");
-                const [txn, results] = await tx.executeSql('SELECT * FROM assets_type');
-                console.log('item length', results.rows.length);
-                const temp = [];
-                for (let i = 0; i < results.rows.length; i++) {
-                    const tempId = results.rows.item(i).assets_id;
-                    const tempName = results.rows.item(i).assets_name;
-                    temp.push({ id: tempId, value: tempName });
-                }
-                setAsset_type(temp);
-            })
+            const assetsTypeArray = await moneyApi.selectAssetsType()
+            setAsset_type(assetsTypeArray);
         } catch (error) {
-            console.log('error in insert data', error)
+            console.log('error in load assets type ( postMoney.js )', error)
         }
     }
 
+
     useEffect(() => {
         loadCat()
         loadAssetType()

components/Notification.js

 import React, { useEffect, useRef } from 'react';
 import { Animated, Text, View, StyleSheet } from 'react-native';
 
-const Notification = (props) => {
+const NotificationBox = (props) => {
     const opacity = useRef(new Animated.Value(0)).current;
 
     useEffect(() => {
-        if (props.notification !== '') {
         Animated.sequence([
             Animated.timing(opacity, {
                 toValue: 1,
@@ -19,18 +18,11 @@ const Notification = (props) => {
                 useNativeDriver: true,
             }),
         ]).start(() => {
-                props.setNotification('');
+            props.onHide();
         })
-        }
-    }, [props.notification])
+    }, [])
 
     return (
-        <View style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-        }}>
         <Animated.View
             style={[
                 {
@@ -48,13 +40,36 @@ const Notification = (props) => {
             ]}
         >
             <Text style={style.textStyle}>
-                    {props.notification}
+                {props.message}
             </Text>
         </Animated.View>
-        </View >
     );
 };
 
+const Notification = (props) => {
+    return (
+        <View style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+        }}>
+            {console.log(props.notification)}
+            {props.notification.map((notificationMsg) => (
+                <NotificationBox
+                    key={notificationMsg}
+                    message={notificationMsg}
+                    onHide={() => {
+                        props.setNotification((prev) =>
+                        prev.filter((currentNotification) => currentNotification !== notificationMsg )
+                    )
+                    }}
+                />
+            ))}
+        </View>
+    )
+}
+
 const style = StyleSheet.create({
     msgBox: {
         margin: 10,

components/SelectForm.js

@@ -17,11 +17,11 @@ const SelectForm = (props) => {
     const [subOptionShow, setSubOptionShow] = useState(false)
     const [modalOpen, setModalOpen] = useState(false)
 
-    const [notification, setNotification] = useState('')
+    const [notification, setNotification] = useState([])
 
     const onPressSelectBox = () => { setModalOpen(true) }
 
-    const modalClose = () => { setModalOpen(false) }
+    const modalClose = () => { setModalOpen(false); setNotification([]) }
 
     const onPressOption = (item) => {
         if (subOption !== undefined) {
@@ -51,13 +51,12 @@ const SelectForm = (props) => {
                 return true;
         })
         if (newOption.length === 0) {
-            setNotification(`${item.value}의 세부 카테고리가 존재하지 않습니다.`)
+            setNotification((prev) => [...prev, `${item.value}의 세부 카테고리가 존재하지 않습니다.`])
         } else {
             setSubOption(newOption)
             setSubOptionShow(true)
         }
     }
-
     const renderOptionItem = ({ item }) => (
         <TouchableOpacity onPress={() => onPressOption(item)} style={style.option}>
             <Text style={style.optionText} >

db/MoneyDB.js

+import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
+
+DEBUG(true);
+enablePromise(true);
+
+const getDb = async () => {
+  return await openDatabase({
+      name: 'MyMoney',
+      location: 'default',
+      createFromLocation: '~MyMoney.db',
+  })
+}
+
+export default getDb
\ No newline at end of file

db/postMoney.api.js

+import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
+import getDb from './MoneyDB'
+
+DEBUG(true);
+enablePromise(true);
+
+const insertMoney = async (moneyData) => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction((tx) => {
+            console.log("데이터 삽입하기");
+            tx.executeSql('INSERT INTO Money (type, date, contents, price, asset_type, category, subcategory) VALUES (?,?,?,?,?,?,?);',
+                moneyData,
+                (error) => console.log(error))
+            resolve('데이터 삽입 완료');
+        })
+    })
+};
+
+const selectCategories = async () => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction(async (tx) => {
+            console.log("카테고리 부르기");
+            const [txn, results] = await tx.executeSql('SELECT * FROM categories');
+            console.log('item length', results.rows.length);
+            const temp = [];
+            for (let i = 0; i < results.rows.length; i++) {
+                const tempId = results.rows.item(i).category_id;
+                const tempName = results.rows.item(i).category_name;
+                temp.push({ id: tempId, value: tempName });
+            }
+            console.log(temp)
+            resolve(temp);
+        })
+    })
+}
+
+const selectAssetsType = async () => {
+    const db = await getDb();
+    return new Promise((resolve, reject) => {
+        db.transaction(async (tx) => {
+            console.log("자산 유형 부르기");
+            const [txn, results] = await tx.executeSql('SELECT * FROM assets_type');
+            console.log('item length', results.rows.length);
+            const temp = [];
+            for (let i = 0; i < results.rows.length; i++) {
+                const tempId = results.rows.item(i).assets_id;
+                const tempName = results.rows.item(i).assets_name;
+                temp.push({ id: tempId, value: tempName });
+            }
+            console.log(temp)
+            resolve(temp);
+        })
+    })
+}
+
+
+const moneyApi = {
+    insertMoney,
+    selectCategories,
+    selectAssetsType,
+}
+
+export default moneyApi;
\ No newline at end of file