Merge remote-tracking branch 'origin/shyunDBtest' into rkyoung

App.js

@@ -7,37 +7,9 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import Monthly from './Monthly';
 import Analy from './Analy';
 import PostMoney from './PostMoney';
-import InsertCat from './InsertCat';
+import MainScreen from './MainScreen';
 import DetailInfo from './DetailInfo';
 
-function MainScreen({ navigation }) {
-  const [number, onChangeNumber] = useState(null)
-  const [totalAssets, setTotalAssets] = useState(0) //총 자산
-
-  return (
-    <>
-      <View>
-        <Text style={style.Font}>주간 캘린더 들어올 자리</Text>
-        <View style={style.Contents}>
-          <Text style={style.Font}>총 자산</Text>
-          <Text style={style.Font}>{totalAssets}원</Text>
-        </View>
-        <TextInput
-          style={style.TextInput}
-          onChangeText={onChangeNumber}
-          keyboardType="numeric"
-        />
-        <Text>입력한 숫자 보기: {number} </Text>
-      </View>
-      <Button
-        title="월별 페이지로 이동"
-        onPress={() => navigation.navigate('Monthly')}
-      />
-      <InsertCat />
-    </>
-  )
-}
-
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
@@ -55,7 +27,7 @@ function Home() {
           iconName = focused ? 'calendar' : 'calendar-outline';
         } else if (route.name === 'Analy') {
           iconName = focused ? 'bar-chart' : 'bar-chart-outline';
-        } 
+        }
         // else if (route.name === 'Calendar') {
         //   iconName = focused ? 'calendar-sharp' : 'calendar-sharp';
         // }
@@ -81,7 +53,7 @@ function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen options={{headerShown: false}} name="Home" component={Home} />
+        <Stack.Screen options={{ headerShown: false }} name="Home" component={Home} />
         <Stack.Screen name="DetailInfo" component={DetailInfo} />
       </Stack.Navigator>
     </NavigationContainer>

MainScreen.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+import WeeklyCalendar from './components/WeeklyCalendar';
+import InsertCat from './InsertCat';
+
+function MainScreen({ navigation }) {
+    const [number, onChangeNumber] = React.useState(null);
+    return (
+        <>
+            <View>
+                <WeeklyCalendar />
+                <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
+                <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
+                <TextInput
+                    style={style.TextInput}
+                    onChangeText={onChangeNumber}
+                    keyboardType="numeric"
+                />
+                <Text>입력한 숫자 보기: {number} </Text>
+            </View>
+            <Button
+                title="월별 페이지로 이동"
+                onPress={() => navigation.navigate('Monthly')}
+            />
+            <InsertCat />
+        </>
+    )
+}
+
+const style = StyleSheet.create({
+    TextInput: {
+        borderColor: 'skyblue',
+        height: 40,
+        margin: 12,
+        borderWidth: 1
+    },
+    Font: {
+        fontSize: 24
+    }
+});
+
+export default MainScreen;
\ No newline at end of file

MoneyDB.js

-import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
-import { View, SafeAreaView, Text, StyleSheet, Button, TextInput } from 'react-native';
-import React, { useEffect, useState } from 'react';
-
-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

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,
-                    duration: 500,
-                    useNativeDriver: true,
-                }),
-                Animated.delay(2500),
-                Animated.timing(opacity, {
-                    toValue: 0,
-                    duration: 500,
-                    useNativeDriver: true,
-                }),
-            ]).start(() => {
-                props.setNotification('');
-            })
-        }
-    }, [props.notification])
+        Animated.sequence([
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: 500,
+                useNativeDriver: true,
+            }),
+            Animated.delay(2500),
+            Animated.timing(opacity, {
+                toValue: 0,
+                duration: 500,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            props.onHide();
+        })
+    }, [])
+
+    return (
+        <Animated.View
+            style={[
+                {
+                    opacity: opacity
+                },
+                {
+                    transform: [{
+                        translateY: opacity.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-20, 0],
+                        })
+                    }],
+                },
+                style.msgBox
+            ]}
+        >
+            <Text style={style.textStyle}>
+                {props.message}
+            </Text>
+        </Animated.View>
+    );
+};
 
+const Notification = (props) => {
     return (
         <View style={{
             position: 'absolute',
@@ -31,29 +54,21 @@ const Notification = (props) => {
             left: 0,
             right: 0,
         }}>
-            <Animated.View
-                style={[
-                    {
-                        opacity: opacity
-                    },
-                    {
-                        transform: [{
-                            translateY: opacity.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [-20, 0],
-                            })
-                        }],
-                    },
-                    style.msgBox
-                ]}
-            >
-                <Text style={style.textStyle}>
-                    {props.notification}
-                </Text>
-            </Animated.View>
-        </View >
-    );
-};
+            {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: {

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} >

components/WeeklyCalendar.js

+import React, { Component } from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import CalendarStrip from 'react-native-calendar-strip';
+// import moment from 'moment';
+
+const WeeklyCalendar = (props) => {
+
+
+    return (
+        <View>
+            <CalendarStrip
+                scrollable
+                calendarAnimation={{ type: 'sequence', duration: 30 }}
+                daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
+                style={{ height: 200, paddingTop: 20, paddingBottom: 10 }}
+                calendarHeaderStyle={{ color: 'white' }}
+                calendarColor={'#3343CE'}
+                dateNumberStyle={{ color: 'white' }}
+                dateNameStyle={{ color: 'white' }}
+                iconContainer={{ flex: 0.1 }}
+                // customDatesStyles={this.state.customDatesStyles}
+                highlightDateNameStyle={{ color: 'white' }}
+                highlightDateNumberStyle={{ color: 'yellow' }}
+                highlightDateContainerStyle={{ backgroundColor: 'black' }}
+                // markedDates={this.state.markedDates}
+                // datesBlacklist={this.datesBlacklistFunc}
+                // selectedDate={this.state.selectedDate}
+                // onDateSelected={this.onDateSelected}
+                useIsoWeekday={false}
+            />
+        </View>
+    );
+};
+
+const style = StyleSheet.create({
+    container: {
+        height: 54,
+        flexDirection: 'row',
+        alignItems: "center",
+        marginHorizontal: 10,
+        marginVertical: 3,
+        borderWidth: 1.5,
+        borderStyle: "solid",
+        borderColor: "#1467ff",
+        borderRadius: 5,
+        backgroundColor: "#f5f5f5",
+    },
+})
+
+export default WeeklyCalendar
\ No newline at end of file

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