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 { SpeedDial } from 'react-native-elements';
import WeeklyCalendar from './components/WeeklyCalendar';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import DeptPage from './DeptPage';
import weekApi from './db/mainScreen.api';
import { getDateStr } from './utils/dateFunction';
const DetailItem = ({ item }) => {
return (
<>
{item.category}
{item.contents}
{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
>
);
};
const AssetItem = ({ item }) => {
return (
{item.name}
{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원
);
};
function MainScreen({ navigation }) {
const day = new Date(getDateStr())
const daysToSubtract = day.getDay()
const startingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract)
const endDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - daysToSubtract))
const [modalOpen, setModalOpen] = useState(false);
const [open, setOpen] = useState(false)
const [selectedDate, setSelectedDate] = useState(getDateStr())
const [weeklyData, setWeeklyData] = useState([])
const [weekMoney, setWeekMoney] = useState({ input: 0, output: 0 })
const [singleMoney, setSingleMoney] = useState([])
const [totalMoney, setTotalMoney] = useState(0)
const [totalAssetsMoney, setTotalAssetsMoney] = useState([])
useFocusEffect(
React.useCallback(() => {
getWeeklyData(startingDate, endDate)
getTotalMoney()
}, [])
);
const getTotalMoney = async () => {
const { total, assets_total } = await weekApi.getTotalData()
setTotalMoney(total)
setTotalAssetsMoney(assets_total)
}
const getWeeklyData = async (start, end) => {
const { data, input, output } = await weekApi.getWeeklyData(start, end)
setWeeklyData(data)
setWeekMoney({ input: input, output, output })
}
useEffect(() => {
getSingleData()
}, [selectedDate])
const getSingleData = async () => {
const tempData = await weekApi.getData(selectedDate)
setSingleMoney(tempData)
}
return (
<>
{
Keyboard.dismiss();
}}>
getWeeklyData(start, end)}
onDateSelected={(date) => setSelectedDate(getDateStr(date))}
weeklyData={weeklyData}
/>
수입 {weekMoney.input}
지출 {weekMoney.output}
<>
{
singleMoney.length !== 0 ?
{singleMoney.length !== 0 && singleMoney.map((item, index) => )}
:
내역이 없습니다.
}
총 자산
{(totalMoney).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
{totalAssetsMoney.length !== 0 && totalAssetsMoney.map((item, index) => )}
navigation.navigate('PostMoney')}
style={style.submitButton}
>
수입/지출 기록
>
setOpen(!open)}
onClose={() => setOpen(!open)}
>
}
title="부채"
onPress={() => navigation.navigate('DeptPage')}
/>
navigation.navigate('MemoPage')}
/>
setModalOpen(false)}
/>
>
)
}
const style = StyleSheet.create({
weekData: {
flexDirection: "row",
justifyContent: "space-around",
backgroundColor: "#6b768a",
paddingBottom: 10,
},
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
totalMoney: {
fontSize: 35,
},
Font: {
fontFamily: 'GowunDodum-Regular',
fontSize: 18
},
inputColor: {
color: '#1E90FF'
},
outputColor: {
color: '#dc143c'
},
itemTextNum: {
flex: 1,
textAlign: "center",
},
itemText: {
flex: 1,
},
submitButton: {
backgroundColor: "#6b768a",
margin: 10,
height: 50,
alignItems: 'center',
justifyContent: 'center',
},
modalToggle: {
padding: 10,
borderRadius: 10,
alignSelf: 'flex-start',
marginTop: -40, //위치를 center로
},
modalClose: {
alignSelf: 'center',
alignItems: 'flex-start',
marginTop: 150,
marginBottom: 50,
},
modalContent: {
flex: 1,
},
Contents: {
alignItems: "center",
margin: 20
}
});
export default MainScreen;