UpdatePage.js

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Keyboard, TouchableWithoutFeedback } 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 [disabled, setDisabled] = useState(true)
  const [success, setSuccess] = useState(false)

  useEffect(() => {
    loadCat()
    loadSubCat()
    loadAssetType()
    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)
    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) {
    setTimeout(() => {
      navigation.goBack()
    }, 500)
  }
  
  return (
    <TouchableWithoutFeedback onPress={() => {
      Keyboard.dismiss();
    }} >
      <View style={{ flex: 1 }}>
        <View>
          {selectedIndex === 2 ? null : <ButtonsForm
            onPress={(index) => { setSelectedIndex(index); Keyboard.dismiss(); }}
            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}
            disabled={disabled}
          />
          <StyledButton
            name="삭제"
            onPress={deleteData}
            style={style.delButton}
          />
          <StyledButton
            name="취소"
            onPress={() => navigation.goBack()}
            style={style.cancelButton}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
  )

};

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;