0809 가영 수현 머지

MainScreen.js

 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, Keyboard, TouchableWithoutFeedback, Modal, Pressable, ScrollView } from 'react-native';
-import { useFocusEffect } from '@react-navigation/native';
+import { View, Text, StyleSheet, Keyboard, TouchableWithoutFeedback, TouchableOpacity, Modal, Pressable, ScrollView } from 'react-native';
 import { SpeedDial } from 'react-native-elements';
 import WeeklyCalendar from './components/WeeklyCalendar';
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -8,8 +7,9 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import DeptPage from './DeptPage';
 import weekApi from './db/mainScreen.api';
 import { getDateStr } from './utils/dateFunction';
+import { useIsFocused } from '@react-navigation/native';
 
-const DetailItem = ({ item }) => {
+const DetailItem = ({ item, onPress }) => {
     let item_color
     switch (item.type) {
         case 1:
@@ -23,21 +23,23 @@ const DetailItem = ({ item }) => {
             break;
     }
     return (
-        <View style={{
-            padding: "5%", borderColor: '#d3d3d3', //light grey
-            borderWidth: 1, borderTopWidth: 0,
-        }}>
-            <View style={{ flexDirection: "row" }}>
-                <Text style={[style.itemText, item_color]}>{item.category}</Text>
-                <Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
-                <Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
+        <TouchableOpacity onPress={onPress}>
+            <View style={{
+                padding: "5%", borderColor: '#d3d3d3', //light grey
+                borderWidth: 1, borderTopWidth: 0,
+            }}>
+                <View style={{ flexDirection: "row" }}>
+                    <Text style={[style.itemText, item_color]}>{item.category}</Text>
+                    <Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
+                    <Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
+                </View>
+                {item.asset ?
+                    <Text style={[style.itemTextNum, style.Font]}>
+                        {'(' + item.asset + '>' + item.deposit_asset + ')'}
+                    </Text>
+                    : null}
             </View>
-            {item.asset ?
-                <Text style={[style.itemTextNum, style.Font]}>
-                    {'(' + item.asset + '>' + item.deposit_asset + ')'}
-                </Text>
-                : null}
-        </View>
+        </TouchableOpacity>
     );
 };
 
@@ -82,6 +84,8 @@ const getDots = (typeArray) => {
 }
 
 function MainScreen({ navigation }) {
+    const isFocused = useIsFocused();
+
     const day = new Date(getDateStr())
     const daysToSubtract = day.getDay()
     const initialStartingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract)
@@ -101,12 +105,18 @@ function MainScreen({ navigation }) {
     const [totalMoney, setTotalMoney] = useState(0)
     const [totalAssetsMoney, setTotalAssetsMoney] = useState([])
 
-    useFocusEffect(
-        React.useCallback(() => {
-            getWeeklyData(initialStartingDate, initialEndDate)
-            getTotalMoney()
-        }, [])
-    );
+    useEffect(() => {
+        getthisWeekData(initialStartingDate, initialEndDate)
+        getTotalMoney()
+        getSingleData()
+    }, [isFocused])
+
+    const getthisWeekData = async (start, end) => {
+        const { data, input, output } = await weekApi.getWeeklyData(start, end)
+        setStartingDate(start)
+        setWeekMoney({ input: input, output, output })
+        setMarkedDates(getMarkedDates(data))
+    }
 
     const getWeeklyData = async (start, end) => {
         if (getDateStr(start) !== getDateStr(startingDate)) {
@@ -138,15 +148,6 @@ function MainScreen({ navigation }) {
                 Keyboard.dismiss();
             }}>
                 <View style={{ flex: 1 }}>
-                    {/* <Pressable onPress={() => {
-                        let startD = new Date(startingDate.getFullYear(), startingDate.getMonth(), startingDate.getDate() - 7)
-                        let endD = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() - 7)
-                        getWeeklyData(startD, endD);
-                        setStartingDate(startD)
-                        setEndDate(endD)
-                    }}>
-                        <Text>테스트</Text>
-                    </Pressable> */}
                     <WeeklyCalendar
                         selectedDate={selectedDate}
                         startingDate={startingDate}
@@ -164,7 +165,7 @@ function MainScreen({ navigation }) {
                                 {
                                     singleMoney.length !== 0 ?
                                         <View>
-                                            {singleMoney.length !== 0 && singleMoney.map((item, index) => <DetailItem item={item} key={index} />)}
+                                            {singleMoney.length !== 0 && singleMoney.map((item, index) => <DetailItem item={item} key={index} onPress={() => navigation.navigate('UpdatePage', [selectedDate, item])}/>)}
                                         </View>
                                         : <View style={{ marginTop: 10, marginBottom: 50 }}>
                                             <Text style={{ textAlign: "center", fontSize: 20, fontFamily: 'GowunDodum-Regular' }}>내역이 없습니다.</Text>

PostMoney.js

@@ -62,7 +62,7 @@ const PostMoney = ({ navigation }) => {
             setDisabled(true)
         }
 
-    }, [contents, price, selected_asset_type, selected_deposit_asset_type, selected_cat, selected_subcat])
+    }, [contents, price, selected_asset_type, selected_deposit_asset_type, selected_cat])
 
     const initData = () => {
         setSelected_asset_type(INIT_ASSETSTYPE)

UpdatePage.js

@@ -38,6 +38,7 @@ function updatePage({ navigation, route }) {
   const [subcategories, setSubcategories] = useState([])
   const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
 
+  const [disabled, setDisabled] = useState(true)
   const [success, setSuccess] = useState(false)
 
   useEffect(() => {
@@ -47,6 +48,21 @@ function updatePage({ navigation, route }) {
     initData()
   }, [selectedIndex])
 
+  useEffect(() => {
+    let isProper = false
+    if (selectedIndex === 2) {
+      isProper = [contents, price, selected_asset_type.value, selected_deposit_asset_type.value, selected_cat.value].every(elem => elem !== '')
+    } else {
+      isProper = [contents, price, selected_asset_type.value, selected_cat.value].every(elem => elem !== '')
+    }
+
+    if (isProper) {
+      setDisabled(false)
+    } else {
+      setDisabled(true)
+    }
+
+  }, [contents, price, selected_asset_type, selected_deposit_asset_type, selected_cat])
 
   const initData = () => {
     setSelected_asset_type(INIT_ASSETSTYPE)
@@ -187,6 +203,7 @@ function updatePage({ navigation, route }) {
             name="저장"
             onPress={changeData}
             style={style.submitButton}
+            disabled={disabled}
           />
           <StyledButton
             name="삭제"

db/mainScreen.api.js

@@ -53,7 +53,7 @@ const getData = async (findDate) => {
     return new Promise((resolve, reject) => {
         db.transaction(async (tx) => {
             const [txn, results] = await tx.executeSql(`
-            SELECT money.type_id, category_name, assets_name, contents, price 
+            SELECT money.money_id as id, money.type_id, category_name, assets_name, contents, price 
             FROM money 
             inner JOIN categories on money.category_id = categories.category_id 
             inner JOIN assets_type on money.assets_id = assets_type.assets_id