I have been attempting to create a small app that differentiates between Zelle transactions and the precise steadiness. After all in an effort to do this I want financial institution data. Thus, I’m attempting to combine the plaid sdk into my react native ios app.
I’m attempting to observe this repo’s implementation however I’m combating one factor.
When my hyperlink token is created, I’m struggling to get the onSuccess to run so I can have the change hyperlink token api get referred to as. Does anybody know the way I can do that in IOS?
import React, { useState, useEffect, useCallback } from 'react';
import {
View,
Textual content,
StyleSheet,
Button,
TouchableOpacity,
} from 'react-native';
import { create, open, dismissLink, LinkSuccess, LinkExit, LinkIOSPresentationStyle, LinkLogLevel } from 'react-native-plaid-link-sdk';
// Outline the categories for transactions
sort Transaction = 'debit';
;
// Mock information for demonstration functions
const mockTransactions: Transaction[] = [
// Add your transaction data here
];
const BalancePage: React.FC = () => {
console.log('Rendering BalancePage');
const [filter, setFilter] = useState('month');
const [filterFromPayout, setFilterFromPayout] = useState(false);
const [lastPayoutDate, setLastPayoutDate] = useState(null);
const [totalBalance, setTotalBalance] = useState(0);
const [zelleBalance, setZelleBalance] = useState(0);
const [linkToken, setLinkToken] = useState(null);
const handlePayout = () => {
const payoutDate = new Date().toISOString();
console.log(`Setting final payout date to: ${payoutDate}`);
setLastPayoutDate(payoutDate);
setFilterFromPayout(true);
};
const createLinkToken = useCallback(async () => {
await fetch(`http://localhost:8000/api/create_link_token/`, {
methodology: "POST",
headers: {
"Content material-Kind": "software/json"
},
physique: JSON.stringify({ handle: 'localhost:8000' })
})
.then((response) => response.json())
.then((information) => {
setLinkToken(information.link_token);
})
.catch((err) => {
console.log(err);
});
}, [setLinkToken]);
const createLinkTokenConfiguration = (token: string, noLoadingState: boolean = false) => {
return {
token: token,
noLoadingState: noLoadingState,
};
};
useEffect(() => {
console.log('useEffect triggered. linkToken:', linkToken);
if (linkToken === null) {
console.log('Getting hyperlink token');
createLinkToken();
}
if (linkToken) {
const tokenConfig = createLinkTokenConfiguration(linkToken);
create(tokenConfig)
}
}, [filterFromPayout, linkToken]);
const createLinkOpenProps = () => {
return {
onSuccess: async (success: LinkSuccess) => {
await fetch(`http://localhost:8000/api/exchange_link_token/`, {
methodology: "POST",
headers: {
"Content material-Kind": "software/json",
},
physique: JSON.stringify({ public_token: success.publicToken }),
})
.catch((err) => {
console.log(err);
});
},
onExit: (linkExit: LinkExit) => {
console.log('Exit: ', linkExit);
dismissLink();
},
iOSPresentationStyle: LinkIOSPresentationStyle.MODAL,
logLevel: LinkLogLevel.ERROR,
};
};
const handleOpenLink = () => {
const openProps = createLinkOpenProps();
open(openProps);
};
const filters = ['day', 'week', 'month', 'monthToDate'];
const calculateBalances = () => {
console.log('Calculating balances...');
let filteredTransactions = filterTransactions(mockTransactions, filter);
if (filterFromPayout && lastPayoutDate) {
console.log(`Filtering transactions from final payout date: ${lastPayoutDate}`);
filteredTransactions = filteredTransactions.filter(
txn => new Date(txn.date) > new Date(lastPayoutDate)
);
}
const steadiness = filteredTransactions.scale back((acc, txn) => {
return txn.sort === 'credit score' ? acc + txn.quantity : acc - txn.quantity;
}, 0);
const zelleTxns = filteredTransactions.filter(txn => txn.sort === 'debit'); // Assuming 'debit' as Zelle transactions
const zelleTotal = zelleTxns.scale back((acc, txn) => acc + txn.quantity, 0);
console.log(`New complete steadiness: ${steadiness}, New Zelle steadiness: ${zelleTotal}`);
setTotalBalance(steadiness);
setZelleBalance(zelleTotal);
};
const filterTransactions = (transactions: Transaction[], filter: string) => {
console.log(`Filtering transactions with filter: ${filter}`);
const now = new Date();
return transactions.filter(txn => {
const txnDate = new Date(txn.date);
swap (filter) {
case 'day':
return isSameDay(now, txnDate);
case 'week':
return isSameWeek(now, txnDate);
case 'month':
return isSameMonth(now, txnDate);
case 'monthToDate':
return txnDate >= new Date(now.getFullYear(), now.getMonth(), 1);
default:
return true;
}
});
};
const isSameDay = (d1: Date, d2: Date) => {
const outcome = d1.getDate() === d2.getDate() &&
d1.getMonth() === d2.getMonth() &&
d1.getFullYear() === d2.getFullYear();
console.log(`Evaluating dates: ${d1.toISOString()} and ${d2.toISOString()}. Identical day: ${outcome}`);
return outcome;
}
const isSameWeek = (d1: Date, d2: Date) => {
const onejan = new Date(d1.getFullYear(), 0, 1);
const week1 = Math.ceil((((d1.getTime() - onejan.getTime()) / 86400000) + onejan.getDay() + 1) / 7);
const week2 = Math.ceil((((d2.getTime() - onejan.getTime()) / 86400000) + onejan.getDay() + 1) / 7);
const outcome = week1 === week2 && d1.getFullYear() === d2.getFullYear();
console.log(`Evaluating dates: ${d1.toISOString()} and ${d2.toISOString()}. Identical week: ${outcome}`);
return outcome;
};
const isSameMonth = (d1: Date, d2: Date) => {
const outcome = d1.getMonth() === d2.getMonth() && d1.getFullYear() === d2.getFullYear();
console.log(`Evaluating dates: ${d1.toISOString()} and ${d2.toISOString()}. Identical month: ${outcome}`);
return outcome;
}
return (
Whole Steadiness
${totalBalance.toFixed(2)}
Filters
{filters.map(f => (
{
console.log(`Filter selected: ${f}`);
setFilter(f);
}}
>
{f.charAt(0).toUpperCase() + f.slice(1)}
))}
Zelle Transactions
${zelleBalance.toFixed(2)}
I’ve tried removing the onSuccess, but that doesnt work. I’ve tried using PlaidLink library, but that is deprecated. I’ve tried ChatGPT (lol) but that also just told me to add better logging to debug.