147 lines
3.7 KiB
TypeScript
147 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import React from 'react'
|
|
import styles from './recentTnx.module.css'
|
|
import { BsTriangleFill } from 'react-icons/bs';
|
|
import SingleTransaction from './SingleTransaction'
|
|
import useSWR from 'swr'
|
|
|
|
|
|
export default function RecentTransactions() {
|
|
const fetcher = (...args) => fetch(...args).then((res) => res.json())
|
|
const { data, error } = useSWR(`http://localhost:8000/api/v1/transactions/`, fetcher)
|
|
|
|
if (error) return <div>Error: Failed to load</div>
|
|
if (!data) return <div>Loading...</div>
|
|
|
|
const transactions = data.results
|
|
|
|
// const transactions = [
|
|
// {
|
|
// title: "Fenny's Banglore",
|
|
// datetime: "Today, 11:17 am",
|
|
// amount: "3,940",
|
|
// tag: "Tag",
|
|
// }, {
|
|
// title: "Sendoor",
|
|
// datetime: "Today, 11:45 pm",
|
|
// amount: "35",
|
|
// tag: "Food & Drinks",
|
|
// icon_type: "drink",
|
|
// }, {
|
|
// title: "Reliance Fresh",
|
|
// datetime: "Yesterday, 5:37 pm",
|
|
// amount: "2,399",
|
|
// tag: "Groceries",
|
|
// icon_type: "groceries",
|
|
// }, {
|
|
// title: "Chai Point",
|
|
// datetime: "Yesterday, 12:17 pm",
|
|
// amount: "312",
|
|
// tag: "Food & Drinks",
|
|
// icon_type: "food",
|
|
// }, {
|
|
// title: "Uber",
|
|
// datetime: "Jan 2, 10:32 am",
|
|
// amount: "75",
|
|
// tag: "Transport",
|
|
// icon_type: "transport",
|
|
// }, {
|
|
// title: "Swiggy",
|
|
// datetime: "Jan 1, 11:17 pm",
|
|
// amount: "249",
|
|
// tag: "Food & Drinks",
|
|
// icon_type: "swiggy",
|
|
// }, {
|
|
// title: "Netflix",
|
|
// datetime: "Dec 31, 11:59 pm",
|
|
// amount: "199",
|
|
// tag: "Subsciption",
|
|
// icon_type: "netflix",
|
|
// }
|
|
// ]
|
|
|
|
const relateive_date = (date) => {
|
|
const today = new Date();
|
|
let fuzzy;
|
|
|
|
if (today.getYear() == date.getYear()) {
|
|
if (today.getMonth() == date.getMonth()) {
|
|
if (today.getDate() == date.getDate()) {
|
|
fuzzy = 'Today';
|
|
} else if (today.getDate() == date.getDate() + 1) {
|
|
fuzzy = 'Yesterday';
|
|
}
|
|
}
|
|
}
|
|
|
|
if (fuzzy == undefined){
|
|
const monthNames = [
|
|
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
|
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
|
|
];
|
|
fuzzy = `${monthNames[date.getMonth()]} ${date.getDate()}`
|
|
}
|
|
|
|
let hours = date.getHours()
|
|
let ampm = 'AM';
|
|
if (hours >= 12) {
|
|
ampm = 'PM';
|
|
hours -= 12;
|
|
}
|
|
|
|
fuzzy = fuzzy + `, ${hours}:${date.getMinutes()} ${ampm}`
|
|
return fuzzy
|
|
}
|
|
|
|
|
|
const recent_transactions = [];
|
|
transactions.forEach((transaction) => {
|
|
recent_transactions.push(
|
|
<SingleTransaction
|
|
title={transaction.to_account.holders_name}
|
|
tag={transaction.tag.title}
|
|
datetime={relateive_date(new Date(transaction.created_at))}
|
|
amount={transaction.amount}
|
|
icon_type={transaction.tag.icon_type}
|
|
/>
|
|
)
|
|
})
|
|
|
|
|
|
return (
|
|
<div className={styles.main}>
|
|
<div className={styles.heading}>
|
|
<div className={styles.hRecTnx}>Recent Transactions</div>
|
|
<div className={styles.hSeeAll}>See All</div>
|
|
</div>
|
|
|
|
<div className={styles.options}>
|
|
<div className={styles.optionButton}>
|
|
<div>All transactions</div>
|
|
<div>
|
|
<BsTriangleFill
|
|
size={10}
|
|
className={styles.arrow}
|
|
color="#676483"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={styles.optionButton}>
|
|
<div>All banks</div>
|
|
<div>
|
|
<BsTriangleFill
|
|
size={10}
|
|
className={styles.arrow}
|
|
color="#676483"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{recent_transactions}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|