From 432d1c8426c27670ec307753d4ffbd3bbef8053f Mon Sep 17 00:00:00 2001 From: Mike Jensen Date: Fri, 17 Nov 2023 09:51:02 +0100 Subject: [PATCH 1/4] Balance screen done + new helper function --- app/(tabs)/expenses/balance.tsx | 72 +++++++++++++++++++++++++-------- helpers/calculateBalance.tsx | 29 +++++++++++++ 2 files changed, 84 insertions(+), 17 deletions(-) create mode 100644 helpers/calculateBalance.tsx diff --git a/app/(tabs)/expenses/balance.tsx b/app/(tabs)/expenses/balance.tsx index 96f3a02..a92913e 100644 --- a/app/(tabs)/expenses/balance.tsx +++ b/app/(tabs)/expenses/balance.tsx @@ -1,32 +1,70 @@ import { StyleSheet } from 'react-native'; +import { Text, View, } from '../../../components/Themed'; +import { FlatList } from 'react-native-gesture-handler'; +import { calculateBalance } from '../../../helpers/calculateBalance'; + + +type Expense = { + user: string; + amount: number; +}; + +const DATA: Expense[] = [ + { user: 'Martin', amount: 90 }, + { user: 'Andreas', amount: 30 }, + { user: 'Bisgaard', amount: 0 }, + { user: 'Mike', amount: 85 }, +]; + +const calculatedBalances = calculateBalance(DATA); -import EditScreenInfo from '../../../components/EditScreenInfo'; -import { Text, View } from '../../../components/Themed'; export default function BalanceScreen() { + + const renderItem = ({ item, index }: { item: Expense; index: number }) => { + return ( + + + {item.user} + {item.amount.toFixed(2)} kr. + + + ); + }; + return ( - - Balance - - + + ); } const styles = StyleSheet.create({ container: { - marginTop: 48, - flex: 1, - alignItems: 'center', - justifyContent: 'center', + borderBottomColor: '#000000', + padding: 2, + }, + item: { + backgroundColor: 'transparent', + borderBottomColor: '#000000', + borderBottomWidth: 0, + padding: 12, + flexDirection: 'row', + justifyContent: 'space-between' }, - title: { - fontSize: 20, - fontWeight: 'bold', + itemText: { + fontSize: 24, + color: 'black', + flexDirection: 'row', }, - separator: { - marginVertical: 30, - height: 1, - width: '80%', + itemAmount: { + fontSize: 24, + color: 'black', + flexDirection: 'row', + justifyContent: 'flex-end' }, }); diff --git a/helpers/calculateBalance.tsx b/helpers/calculateBalance.tsx new file mode 100644 index 0000000..69184b2 --- /dev/null +++ b/helpers/calculateBalance.tsx @@ -0,0 +1,29 @@ +type Expense = { + user: string; + amount: number; +}; + +export const calculateBalance = (expenses: Expense[]) => { + const totalSpent: { [name: string]: number } = {}; + const userCount: { [name: string]: number } = {}; + expenses.forEach((expense) => { + totalSpent[expense.user] = (totalSpent[expense.user] || 0) + expense.amount; + userCount[expense.user] = (userCount[expense.user] || 0) + 1; + }); + + const users = Object.keys(totalSpent); + const totalUsers = users.length; + const averageAmount = users.reduce((acc, user) => acc + (totalSpent[user] / userCount[user]), 0) / totalUsers; + + const calculatedBalances: { [name: string]: number } = {}; + users.forEach((user) => { + calculatedBalances[user] = parseFloat(((totalSpent[user] / userCount[user]) - averageAmount).toFixed(2)); + }); + + const calculatedBalancesArray: Expense[] = Object.entries(calculatedBalances).map(([user, amount]) => ({ + user, + amount, + })); + + return calculatedBalancesArray; +}; \ No newline at end of file From 753f4444d1b4343cc5696343ea34a94b275e876a Mon Sep 17 00:00:00 2001 From: Mike Jensen Date: Fri, 17 Nov 2023 10:37:48 +0100 Subject: [PATCH 2/4] Fixed display styling for the numbers green if positive, red if negative, black if zero. Also "+" is added for positive numbers. --- app/(tabs)/expenses/balance.tsx | 5 +++-- helpers/calculateBalance.tsx | 9 +++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/(tabs)/expenses/balance.tsx b/app/(tabs)/expenses/balance.tsx index a92913e..331eb75 100644 --- a/app/(tabs)/expenses/balance.tsx +++ b/app/(tabs)/expenses/balance.tsx @@ -26,7 +26,9 @@ export default function BalanceScreen() { {item.user} - {item.amount.toFixed(2)} kr. + = 0 ? (item.amount == 0 ? 'black' : '#5CBCA9') : '#E35F52' }]}> + {item.amount > 0 ? "+" + item.amount.toFixed(2) : item.amount.toFixed(2)} kr. + ); @@ -63,7 +65,6 @@ const styles = StyleSheet.create({ }, itemAmount: { fontSize: 24, - color: 'black', flexDirection: 'row', justifyContent: 'flex-end' }, diff --git a/helpers/calculateBalance.tsx b/helpers/calculateBalance.tsx index 69184b2..ea2b227 100644 --- a/helpers/calculateBalance.tsx +++ b/helpers/calculateBalance.tsx @@ -6,9 +6,10 @@ type Expense = { export const calculateBalance = (expenses: Expense[]) => { const totalSpent: { [name: string]: number } = {}; const userCount: { [name: string]: number } = {}; - expenses.forEach((expense) => { - totalSpent[expense.user] = (totalSpent[expense.user] || 0) + expense.amount; - userCount[expense.user] = (userCount[expense.user] || 0) + 1; + + expenses.forEach(({ user, amount }) => { + totalSpent[user] = (totalSpent[user] || 0) + amount; + userCount[user] = (userCount[user] || 0) + 1; }); const users = Object.keys(totalSpent); @@ -24,6 +25,6 @@ export const calculateBalance = (expenses: Expense[]) => { user, amount, })); - + return calculatedBalancesArray; }; \ No newline at end of file From d0ebcd587898201833fa7b80b7454ca7f9749dfc Mon Sep 17 00:00:00 2001 From: Mike Jensen Date: Wed, 22 Nov 2023 08:45:10 +0100 Subject: [PATCH 3/4] Update calculateExpenses.tsx --- helpers/calculateExpenses.tsx | 52 +++++++++++++++++------------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/helpers/calculateExpenses.tsx b/helpers/calculateExpenses.tsx index c84ce79..605889c 100644 --- a/helpers/calculateExpenses.tsx +++ b/helpers/calculateExpenses.tsx @@ -10,34 +10,34 @@ type Transaction = { }; export const calculateExpenses = (expenses: Expense[]): Transaction[] => { -// Calculate total spent by each user -const totalSpent: { [name: string]: number } = {}; -expenses.forEach((expense) => { - totalSpent[expense.user] = (totalSpent[expense.user] || 0) + expense.amount; -}); + // Calculate total spent by each user + const totalSpent: { [name: string]: number } = {}; + expenses.forEach((expense) => { + totalSpent[expense.user] = (totalSpent[expense.user] || 0) + expense.amount; + }); -// Calculate the average amount spent by all users -const numUsers = Object.keys(totalSpent).length; -const totalAmountSpent = Object.values(totalSpent).reduce((total, amount) => total + amount, 0); -const averageAmount = totalAmountSpent / numUsers; + // Calculate the average amount spent by all users + const numUsers = Object.keys(totalSpent).length; + const totalAmountSpent = Object.values(totalSpent).reduce((total, amount) => total + amount, 0); + const averageAmount = totalAmountSpent / numUsers; -// Calculate who owes or is owed how much -const transactions: Transaction[] = []; -Object.keys(totalSpent).forEach((creditor) => { - let amountOwed = totalSpent[creditor] - averageAmount; + // Calculate who owes or is owed how much + const transactions: Transaction[] = []; + Object.keys(totalSpent).forEach((creditor) => { + let amountOwed = totalSpent[creditor] - averageAmount; - if (amountOwed > 0) { - Object.keys(totalSpent).forEach((debitor) => { - if (creditor !== debitor && totalSpent[debitor] < averageAmount && averageAmount != totalSpent[creditor]) { - const settleAmount = Math.min(amountOwed, averageAmount - totalSpent[debitor]); - transactions.push({ to: creditor, from: debitor, amount: settleAmount }); - totalSpent[creditor] -= settleAmount; - totalSpent[debitor] += settleAmount; - amountOwed -= settleAmount; - } - }); - } -}); + if (amountOwed > 0) { + Object.keys(totalSpent).forEach((debitor) => { + if (creditor !== debitor && totalSpent[debitor] < averageAmount && averageAmount != totalSpent[creditor]) { + const settleAmount = Math.min(amountOwed, averageAmount - totalSpent[debitor]); + transactions.push({ to: creditor, from: debitor, amount: settleAmount }); + totalSpent[creditor] -= settleAmount; + totalSpent[debitor] += settleAmount; + amountOwed -= settleAmount; + } + }); + } + }); -return transactions; + return transactions; }; \ No newline at end of file From b6216afe60324c851b003305722a11f099c4fae4 Mon Sep 17 00:00:00 2001 From: Mike Jensen Date: Wed, 22 Nov 2023 08:45:55 +0100 Subject: [PATCH 4/4] Unused styling --- app/(tabs)/expenses/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/(tabs)/expenses/index.tsx b/app/(tabs)/expenses/index.tsx index b80bb18..a6a028c 100644 --- a/app/(tabs)/expenses/index.tsx +++ b/app/(tabs)/expenses/index.tsx @@ -147,10 +147,6 @@ const styles = StyleSheet.create({ }, swipeIcon: { padding: 10, - }, - longBoi: { - flexDirection: 'row', - justifyContent: 'flex-end' }, modalContainer: { flex: 1,