데이터 수정기능 추가

App.js

@@ -13,6 +13,7 @@ import DeptDetails from './screens/DeptDetails';
 import MemoPage from './MemoPage';
 import MemoDetails from './screens/MemoDetails';
 import EditOption from './EditOption';
+import UpdatePage from './UpdatePage';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -92,6 +93,11 @@ function App() {
           component={PostMoney}
           options={{ title: "추가" }}
         />
+        <Stack.Screen
+          name="UpdatePage"
+          component={UpdatePage}
+          options={{ title: "내역편집" }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

CalDetail.js

-import React, { useEffect, useState } from 'react';
-import { SafeAreaView, View, Text, StyleSheet, FlatList } from 'react-native';
+import React, { useState } from 'react';
+import { SafeAreaView, View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
 import calApi from './db/calendarInfo.api';
-const DetailItem = ({ item }) => {
+const DetailItem = ({ item, onPress }) => {
+  let item_color
+  switch (item.type) {
+    case 1:
+      item_color = style.inputColor;
+      break;
+    case 2:
+      item_color = style.outputColor;
+      break;
+    case 3:
+      item_color = style.moveColor;
+      break;
+  }
 
   return (
-    <>
+    <TouchableOpacity onPress={onPress}>
       <View style={{
-        flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
+        padding: "5%", borderColor: '#d3d3d3', //light grey
         borderWidth: 1, borderTopWidth: 0,
       }}>
-        <Text style={[style.itemText, item.type === 1 ? style.inputColor : style.outputColor]}>{item.category}</Text>
+        <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>
+    </TouchableOpacity>
   );
 };
 
-const DetailInfo = ({ route }) => {
+const DetailInfo = ({ route, navigation }) => {
   const [resData, setResData] = useState([])
   const getDetailData = async () => {
     try {
@@ -29,12 +50,16 @@ const DetailInfo = ({ route }) => {
   }
   const renderDetail = ({ item }) => {
     return (
-      <DetailItem item={item} />
+      <DetailItem item={item} onPress={() => navigation.navigate('UpdatePage', [route.params, item])} />
     )
   }
-  useEffect(() => {
+
+  useFocusEffect(
+    React.useCallback(() => {
       getDetailData()
     }, [])
+  );
+
   return (
     <>
       <SafeAreaView>
@@ -70,6 +95,9 @@ const style = StyleSheet.create({
   itemText: {
     flex: 1,
     fontFamily: 'GowunDodum-Regular'
+  },
+  moveColor: {
+    color: '#646d75'
   }
 });
 

ChartM.js

@@ -65,11 +65,11 @@ const ChartM = ({
   }
   return (
     <>
-      <View style={{ flexDirection: 'row', justifyContent: "center", alignItems: "center"}}>
+      <View style={{ flexDirection: 'row', justifyContent: "center", alignItems: "center" }}>
         <Button icon={
           <Ionicons name='chevron-back-sharp' onPress={prevBtn} size={20} color='black' />
         } type='clear' />
-        <Text style={{ fontFamily: 'GowunDodum-Regular', fontSize:20 }}>{year}.{month + 1}</Text>
+        <Text style={{ fontFamily: 'GowunDodum-Regular', fontSize: 20 }}>{year}.{month + 1}</Text>
         <Button icon={
           <Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={20} color='black' />
         } type='clear' />
@@ -88,7 +88,7 @@ const ChartM = ({
             /> : <Text style={style.infoText}> 지출 내역이 없습니다.</Text>
         }
         <FlatList
-          style={{ backgroundColor: "#FFFFFF" }}
+          style={{ backgroundColor: "#FFFFFF", height: screenHeight*0.42 }}
           data={resDataM}
           renderItem={renderChart}
           keyExtractor={item => item.color}

EditOption.js

@@ -44,7 +44,6 @@ const EditOption = ({ route }) => {
     try {
       if (type === 'asset') {
         const res = await editApi.updateOption('assets_type', { id: option.id, name: 'assets', value: option.value })
-        console.log(res)
       } else if (type === 'category') {
         if (option.foreign_id && option.foreign_id > 0) {
           const res = await editApi.updateOption('subcategories', { id: option.id, name: 'subcategory', value: option.value })

InsertCat.js

@@ -19,8 +19,6 @@ function InsertCat() {
   const [cat, setCat] = useState('')
   const [asset, setAsset] = useState('')
 
-  console.log('money db')
-
   const populateDatabase = async DB => {
     await DB.transaction(queryMoney); 
   };

MainScreen.js

@@ -166,7 +166,7 @@ const style = StyleSheet.create({
     weekData: {
         flexDirection: "row",
         justifyContent: "space-around",
-        backgroundColor: "#6b768a",
+        backgroundColor: "#adbfdb",
         paddingBottom: 10,
     },
     TextInput: {
@@ -196,7 +196,7 @@ const style = StyleSheet.create({
         flex: 1,
     },
     submitButton: {
-        backgroundColor: "#6b768a",
+        backgroundColor: '#bfd3f2',
         margin: 10,
         height: 50,
         alignItems: 'center',

Monthly.js

 import React, { useState, useEffect } from 'react';
 import Calendar from './components/Calendar';
 import calApi from './db/calendarInfo.api';
+import { useFocusEffect } from '@react-navigation/native';
 
 const Montly = ({ navigation }) => {
   const date = new Date();
@@ -21,6 +22,12 @@ const Montly = ({ navigation }) => {
   useEffect(() => {
     getData()
   }, [month])
+
+  useFocusEffect(
+    React.useCallback(() => {
+      getData()
+    }, [])
+  );
   return (
     <Calendar navigation={navigation} MData={totalM} year={year} setYear={setYear} month={month} setMonth={setMonth} todayM={todayM} todayY={todayY} />
   )

UpdatePage.js

+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+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 './db/postMoney.api';
+import updateApi from './db/updatePage.api';
+
+const INIT_ASSETSTYPE = {
+  id: 1,
+  value: '',
+}
+
+const INIT_CATEGORY = {
+  id: 1,
+  value: '',
+}
+
+const INIT_SUBCATEGORY = {
+  id: 1,
+  value: '',
+  foreign_id: 0,
+}
+
+
+function updatePage({ navigation, route }) {
+  const [selectedIndex, setSelectedIndex] = useState(route.params[1].type - 1)
+  const [date, setDate] = useState(route.params[0])
+  const [contents, setContents] = useState(route.params[1].contents)
+  const [price, setPrice] = useState(`${route.params[1].price}`)
+  const [asset_type, setAsset_type] = useState([])
+  const [selected_asset_type, setSelected_asset_type] = useState(INIT_ASSETSTYPE)
+  const [selected_deposit_asset_type, setSelected_deposit_asset_type] = useState(INIT_ASSETSTYPE)
+  const [categories, setCategories] = useState([])
+  const [selected_cat, setSelected_cat] = useState(INIT_CATEGORY)
+  const [subcategories, setSubcategories] = useState([])
+  const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
+
+  const [success, setSuccess] = useState(false)
+
+  useEffect(() => {
+    loadCat()
+    loadSubCat()
+    loadAssetType()
+    initData()
+  }, [selectedIndex])
+
+
+  const initData = () => {
+    setSelected_asset_type(INIT_ASSETSTYPE)
+    setSelected_cat(INIT_CATEGORY)
+    setSelected_subcat(INIT_SUBCATEGORY)
+  }
+
+  const loadCat = async () => {
+    try {
+      const catArray = await moneyApi.selectCategories(selectedIndex + 1)
+      setCategories(catArray);
+    } catch (error) {
+      console.log('error in load categories ( postMoney.js )', error)
+    }
+  }
+
+  const loadSubCat = async () => {
+    try {
+      const subCatArray = await moneyApi.selectSubCategories()
+      setSubcategories(subCatArray);
+    } catch (error) {
+      console.log('error in load categories ( postMoney.js )', error)
+    }
+  }
+
+  const loadAssetType = async () => {
+    try {
+      const assetsTypeArray = await moneyApi.selectAssetsType()
+      setAsset_type(assetsTypeArray);
+    } catch (error) {
+      console.log('error in load assets type ( postMoney.js )', error)
+    }
+  }
+
+  const deleteData = async () => {
+    try {
+      if (selectedIndex === 2){
+        await updateApi.delData({ findId: [route.params[1].id, route.params[1].id+1] })
+      } else {
+        await updateApi.delData({ findId: [route.params[1].id] })
+      }
+      initData()
+      setSuccess(true)
+    } catch (error) {
+      console.log('error in deleteData', error)
+    }
+  }
+
+  const changeData = async () => {
+    try {
+      if(selectedIndex===2){
+        await updateApi.updateData({ findId: route.params[1].id }, [date, contents, -price, selected_cat.id, selected_subcat.id, selected_asset_type.id, selectedIndex + 1])
+        await updateApi.updateData({ findId: route.params[1].id+1 }, [date, contents, price, selected_cat.id, selected_subcat.id,  selected_deposit_asset_type.id, selectedIndex + 1])
+      } else {
+        await updateApi.updateData({ findId: route.params[1].id }, [date, contents, price, selected_cat.id, selected_subcat.id, selected_asset_type.id, selectedIndex + 1])
+      }
+      setSuccess(true)
+    } catch (error) {
+      console.log('error in change Data', error)
+    }
+  }
+
+  const onUpdateCatPress = () => {
+    navigation.navigate('EditOption', selectedIndex + 1)
+  }
+
+  const onUpdateAssetPress = () => {
+    navigation.navigate('EditOption', 0)
+  }
+
+  if (success) {
+    navigation.goBack()
+  }
+  return (
+    <View>
+      <View>
+        {selectedIndex === 2 ? null : <ButtonsForm
+          onPress={(index) => setSelectedIndex(index)}
+          selectedIndex={selectedIndex}
+          group={["수입", "지출"]} />}
+
+        <DatePicker
+          inputTitle="날짜"
+          date={date}
+          setDate={setDate}
+        />
+        <InputBox
+          inputTitle="내용"
+          value={contents}
+          onChangeText={
+            (contents) => setContents(contents)
+          }
+          maxLength={30}
+        />
+        <InputBox
+          inputTitle="금액"
+          value={price}
+          onChangeText={
+            (price) => setPrice(price)
+          }
+          keyboardType="numeric"
+          maxLength={30}
+        />
+        <SelectForm
+          inputTitle={selectedIndex === 2 ? "출금" : "자산"}
+          placeholder="자산 선택"
+          data={asset_type}
+          selectedData={selected_asset_type}
+          onValueChange={(asset) => setSelected_asset_type(asset)}
+          onUpdateDataPress={onUpdateAssetPress}
+        />
+        {selectedIndex === 2 &&
+          <SelectForm
+            inputTitle="입금"
+            placeholder="자산 선택"
+            data={asset_type}
+            selectedData={selected_deposit_asset_type}
+            onValueChange={(deposit_asset) => setSelected_deposit_asset_type(deposit_asset)}
+            onUpdateDataPress={onUpdateAssetPress}
+          />}
+        <SelectForm
+          inputTitle="구분"
+          placeholder="카테고리 선택"
+          data={categories}
+          selectedData={selected_cat}
+          onValueChange={(cat) => setSelected_cat(cat)}
+          subData={subcategories}
+          selectedSubData={selected_subcat}
+          onSubValueChange={(subcat) => setSelected_subcat(subcat)}
+          onUpdateDataPress={onUpdateCatPress}
+        />
+      </View>
+      <View style={style.buttonRow}>
+        <StyledButton
+          name="저장"
+          onPress={changeData}
+          style={style.submitButton}
+        />
+        <StyledButton
+          name="삭제"
+          onPress={deleteData}
+          style={style.delButton}
+        />
+        <StyledButton
+          name="취소"
+          onPress={() => navigation.goBack()}
+          style={style.cancelButton}
+        />
+      </View>
+    </View>
+  )
+};
+
+const style = StyleSheet.create({
+  Font: {
+    fontSize: 24
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    alignItems: "center",
+    marginHorizontal: 10,
+    marginVertical: 3,
+  },
+  submitButton: {
+    flex: 2,
+    height: 50,
+  },
+  delButton: {
+    flex: 1,
+    height: 50,
+  },
+  cancelButton: {
+    flex: 1,
+    height: 50,
+  }
+});
+
+export default updatePage;
\ No newline at end of file

components/StyledButton.js

@@ -6,7 +6,7 @@ const StyledButton = (props) => {
         <Pressable
             style={({ pressed }) => [
                 {
-                    backgroundColor: pressed ? '#437dd9' : '#4e8ff5',
+                    backgroundColor: pressed ? '#adbfdb' : '#bfd3f2',
                 },
                 style.pressableStyle,
                 props.style

components/WeeklyCalendar.js

@@ -52,7 +52,7 @@ const WeeklyCalendar = ({
                 daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
                 style={{ height: 130, paddingTop: 20, paddingBottom: 10 }}
                 calendarHeaderStyle={{ color: 'white' }}
-                calendarColor={'#6b768a'}
+                calendarColor={'#adbfdb'}
                 dateNumberStyle={{ color: 'white' }}
                 dateNameStyle={{ color: 'white' }}
                 iconContainer={{ flex: 0.1 }}
@@ -60,7 +60,7 @@ const WeeklyCalendar = ({
                 updateWeek
                 highlightDateNameStyle={{ color: 'white' }}
                 highlightDateNumberStyle={{ color: 'white' }}
-                highlightDateContainerStyle={{ backgroundColor: 'black' }}
+                highlightDateContainerStyle={{ backgroundColor: '#6b768a' }}
                 // markedDates={markedDates}
                 // datesBlacklist={datesBlacklistFunc}
                 // startingDate={startingDate}

db/calendarInfo.api.js

@@ -24,6 +24,9 @@ const getFullData = async ({ year, month }) => {
       }
 
       for (let i = 1; i < results.rows.length; i++) {
+        if (results.rows.item(i).type_id===3){
+          continue
+        }
         if (results.rows.item(i).date === results.rows.item(i - 1).date) {
           temp.pop()
           let { 1: input, 2: output } = {
@@ -49,10 +52,39 @@ const detailData = async ({ findDate }) => {
   const db = await getDb();
   return new Promise((res, rej) => {
     db.transaction(async (tx) => {
-      const [txn, results] = await tx.executeSql(`SELECT money.type_id, category_name, contents, price FROM money inner JOIN categories on money.category_id = categories.category_id WHERE date="${findDate}"`);
+      const [txn, results] = await tx.executeSql(`SELECT money.money_id, assets_name, money.type_id, category_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 WHERE date="${findDate}"`);
       const temp = [];
       for (let i = 0; i < results.rows.length; i++) {
-        temp.push({ id: i, category: results.rows.item(i).category_name, contents: results.rows.item(i).contents, price: results.rows.item(i).price, type: results.rows.item(i).type_id })
+        if (results.rows.item(i).type_id === 3) {
+          let asset_type = results.rows.item(i).assets_name;
+          let deposit_asset = results.rows.item(i).assets_name;
+          let price = 0;
+          if (results.rows.item(i).price > 0) {
+            deposit_asset = results.rows.item(i).assets_name;
+            asset_type = results.rows.item(i + 1).assets_name;
+            price = results.rows.item(i).price;
+          } else {
+            asset_type = results.rows.item(i).assets_name;
+            deposit_asset = results.rows.item(i + 1).assets_name;
+            price = -results.rows.item(i).price;
+          }
+          temp.push({
+            id: results.rows.item(i).money_id,
+            category: results.rows.item(i).category_name,
+            asset: asset_type,
+            deposit_asset: deposit_asset,
+            contents: results.rows.item(i).contents,
+            price: price,
+            type: results.rows.item(i).type_id
+          })
+          i++;
+        } else {
+          temp.push({ id: results.rows.item(i).money_id, 
+            category: results.rows.item(i).category_name, 
+            contents: results.rows.item(i).contents, 
+            price: results.rows.item(i).price, 
+            type: results.rows.item(i).type_id })
+        }
       }
       res(temp);
     })

db/chartData.api.js

@@ -28,8 +28,8 @@ const outMoney = async ({ year, month }) => {
           color: colorArr[i], legendFontColor: "#7F7F7F",
           legendFontSize: 15
         })
-        res(temp)
       }
+      res(temp)
     })
   })
 }

db/updatePage.api.js

+import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
+import getDb from './moneyDB'
+
+DEBUG(true);
+enablePromise(true);
+
+const delData = async ({ findId }) => {
+  const db = await getDb();
+  let insertQeury = '';
+  let queryData = findId;
+  if (findId.length === 2) {
+    insertQeury = `DELETE FROM money WHERE money_id in (?,?)`
+  } else {
+    insertQeury = `DELETE FROM money WHERE money_id in (?)`
+  }
+  return new Promise((res, rej) => {
+    db.transaction((tx) => {
+      tx.executeSql(insertQeury, queryData)
+      res('삭제완료');
+    })
+  })
+}
+
+const updateData = async ({ findId }, changeData) => {
+  const db = await getDb();
+  let insertQeury = `UPDATE money SET date=?, contents=?, price=?, category_id=?, subcategory_id=?, assets_id=?, type_id=? WHERE money_id=${findId};`
+  return new Promise((res, rej) => {
+    db.transaction(async (tx) => {
+      await tx.executeSql(insertQeury, changeData)
+      res('수정완료');
+    })
+  })
+}
+
+const updateApi = {
+  delData,
+  updateData
+}
+
+export default updateApi;
\ No newline at end of file