made hook to streamline getting totals and expense by type of category
This commit is contained in:
Walcher
Jakob Stornig
parent
85e92c85b4
commit
7a5ace403e
6 changed files with 233 additions and 176 deletions
|
|
@ -1,63 +1,56 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
import { Text, StyleSheet } from 'react-native';
|
||||
import { useTheme } from '../../app/contexts/ThemeContext';
|
||||
import useFetch from '../../hooks/useFetch';
|
||||
import { CategoryType } from '../../services/database';
|
||||
import {useCategoryData} from '../../hooks/useCategoryData';
|
||||
|
||||
const BudgetOverview = () => {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 26,
|
||||
color: `black`
|
||||
},
|
||||
boldText: {
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
negativeText: {
|
||||
color: 'red',
|
||||
},
|
||||
positiveText: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
|
||||
interface BudgetTotalProps {
|
||||
goodColor?: string;
|
||||
badColor?: string;
|
||||
}
|
||||
|
||||
const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
|
||||
const { colors } = useTheme();
|
||||
const [spent, setSpent] = useState(0);
|
||||
const [budget, setBudget] = useState(0);
|
||||
const { data, isLoading } = useCategoryData(CategoryType.EXPENSE);
|
||||
|
||||
const spentQuery = {
|
||||
sql: `SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = '${CategoryType.EXPENSE.toString()}'`,
|
||||
args: []
|
||||
};
|
||||
const { total, expenseTotal } = data;
|
||||
|
||||
const budgetQuery = {
|
||||
sql: `SELECT SUM(allocated_amount) as total FROM category WHERE type = '${CategoryType.EXPENSE.toString()}'`,
|
||||
args: []
|
||||
};
|
||||
const remaining = total - expenseTotal;
|
||||
|
||||
const { data: spentData, isLoading: spentLoading } = useFetch(spentQuery);
|
||||
const { data: budgetData, isLoading: budgetLoading } = useFetch(budgetQuery);
|
||||
|
||||
useEffect(() => {
|
||||
if (spentData) {
|
||||
setSpent(spentData[0]?.total || 0);
|
||||
}
|
||||
if (budgetData) {
|
||||
setBudget(budgetData[0]?.total || 0);
|
||||
}
|
||||
}, [spentData, budgetData]);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 26,
|
||||
color: colors.primaryText
|
||||
},
|
||||
boldText: {
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
});
|
||||
|
||||
if (spentLoading || budgetLoading) {
|
||||
if (isLoading) {
|
||||
return <Text>Loading...</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.text}>
|
||||
You have spent <Text style={styles.boldText}>{spent.toFixed(2)}€</Text> out of your budget of <Text style={styles.boldText}>{budget.toFixed(2)}€</Text>.
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.text, { color: colors.primaryText }]}>
|
||||
<>
|
||||
You have spent <Text style={[styles.boldText, { color: goodColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Budget of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
|
||||
</>
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
export default BudgetOverview;
|
||||
export default BudgetTotal;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Text, StyleSheet } from 'react-native';
|
||||
import { useTheme } from '../../app/contexts/ThemeContext';
|
||||
import useFetch from '../../hooks/useFetch';
|
||||
import { CategoryType } from '../../services/database';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 26,
|
||||
},
|
||||
boldText: {
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
negativeText: {
|
||||
color: 'red',
|
||||
},
|
||||
positiveText: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
interface BudgetRemainingProps {
|
||||
goodColor?: string;
|
||||
badColor?: string;
|
||||
}
|
||||
|
||||
const BudgetRemaining: React.FC<BudgetRemainingProps> = ({ goodColor = 'green', badColor = 'red' }) => {
|
||||
const { colors } = useTheme();
|
||||
const [spent, setSpent] = useState(0);
|
||||
const [budget, setBudget] = useState(0);
|
||||
|
||||
const spentQuery = {
|
||||
sql: "SELECT SUM(amount) as total FROM expense",
|
||||
args: []
|
||||
};
|
||||
|
||||
const budgetQuery = {
|
||||
sql: `SELECT SUM(allocated_amount) as total FROM category WHERE type = '${CategoryType.EXPENSE.toString()}'`,
|
||||
args: []
|
||||
};
|
||||
|
||||
const { data: spentData, isLoading: spentLoading } = useFetch(spentQuery);
|
||||
const { data: budgetData, isLoading: budgetLoading } = useFetch(budgetQuery);
|
||||
|
||||
useEffect(() => {
|
||||
if (spentData) {
|
||||
setSpent(spentData[0]?.total || 0);
|
||||
}
|
||||
if (budgetData) {
|
||||
setBudget(budgetData[0]?.total || 0);
|
||||
}
|
||||
}, [spentData, budgetData]);
|
||||
|
||||
const remaining = budget - spent;
|
||||
|
||||
if (spentLoading || budgetLoading) {
|
||||
return <Text>Loading...</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Text style={[styles.text, { color: colors.primaryText }]}>
|
||||
{remaining >= 0 ? (
|
||||
<>
|
||||
Your remaining Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}</Text>€.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Your Budget is overspent by by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}</Text>€.
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
export default BudgetRemaining;
|
||||
62
components/stats/BudgetTotal.tsx
Normal file
62
components/stats/BudgetTotal.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Text, StyleSheet } from 'react-native';
|
||||
import { useTheme } from '../../app/contexts/ThemeContext';
|
||||
import useFetch from '../../hooks/useFetch';
|
||||
import { CategoryType } from '../../services/database';
|
||||
import {useCategoryData} from '../../hooks/useCategoryData';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 26,
|
||||
color: `black`
|
||||
},
|
||||
boldText: {
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
negativeText: {
|
||||
color: 'red',
|
||||
},
|
||||
positiveText: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
|
||||
interface BudgetTotalProps {
|
||||
goodColor?: string;
|
||||
badColor?: string;
|
||||
}
|
||||
|
||||
const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
|
||||
const { colors } = useTheme();
|
||||
const { data, isLoading } = useCategoryData(CategoryType.EXPENSE);
|
||||
|
||||
const { total, expenseTotal } = data;
|
||||
|
||||
const remaining = total - expenseTotal;
|
||||
|
||||
if (isLoading) {
|
||||
return <Text>Loading...</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Text style={[styles.text, { color: colors.primaryText }]}>
|
||||
{remaining >= 0 ? (
|
||||
<>
|
||||
Your remaining overall Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}€</Text>.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Your Budget is overspent by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}€</Text>.
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
export default BudgetTotal;
|
||||
|
|
@ -1,63 +1,62 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
import { Text, StyleSheet } from 'react-native';
|
||||
import { useTheme } from '../../app/contexts/ThemeContext';
|
||||
import useFetch from '../../hooks/useFetch';
|
||||
import { CategoryType } from '../../services/database';
|
||||
import {useCategoryData} from '../../hooks/useCategoryData';
|
||||
|
||||
const SavingsOverview = () => {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 26,
|
||||
color: `black`
|
||||
},
|
||||
boldText: {
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
negativeText: {
|
||||
color: 'red',
|
||||
},
|
||||
positiveText: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
|
||||
interface BudgetTotalProps {
|
||||
goodColor?: string;
|
||||
badColor?: string;
|
||||
}
|
||||
|
||||
const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
|
||||
const { colors } = useTheme();
|
||||
const [saved, setSaved] = useState(0);
|
||||
const [goal, setGoal] = useState(0);
|
||||
const { data, isLoading } = useCategoryData(CategoryType.SAVING);
|
||||
|
||||
const savedQuery = {
|
||||
sql: `SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = '${CategoryType.SAVING.toString()}'`,
|
||||
args: []
|
||||
};
|
||||
const { total, expenseTotal } = data;
|
||||
|
||||
const goalQuery = {
|
||||
sql: `SELECT SUM(allocated_amount) as total FROM category WHERE type = '${CategoryType.SAVING.toString()}'`,
|
||||
args: []
|
||||
};
|
||||
const remaining = total - expenseTotal;
|
||||
|
||||
const { data: savedData, isLoading: savedLoading } = useFetch(savedQuery);
|
||||
const { data: goalData, isLoading: goalLoading } = useFetch(goalQuery);
|
||||
|
||||
useEffect(() => {
|
||||
if (savedData) {
|
||||
setSaved(savedData[0]?.total || 0);
|
||||
}
|
||||
if (goalData) {
|
||||
setGoal(goalData[0]?.total || 0);
|
||||
}
|
||||
}, [savedData, goalData]);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 26,
|
||||
color: colors.primaryText
|
||||
},
|
||||
boldText: {
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
});
|
||||
|
||||
if (savedLoading || goalLoading) {
|
||||
if (isLoading) {
|
||||
return <Text>Loading...</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.text}>
|
||||
You have saved <Text style={styles.boldText}>{saved.toFixed(2)}€</Text> out of your goal of <Text style={styles.boldText}>{goal.toFixed(2)}€</Text>.
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.text, { color: colors.primaryText }]}>
|
||||
{remaining >= 0 ? (
|
||||
<>
|
||||
You have saved <Text style={[styles.boldText, { color: badColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
You have surpassed your Savings Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text> by <Text style={[styles.boldText, { color: goodColor }]}>{Math.abs(remaining).toFixed(2)}€</Text>.
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
export default SavingsOverview;
|
||||
export default BudgetTotal;
|
||||
Reference in a new issue