fix: improve ui
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
parent
1ae3e0ce2b
commit
327e49ce08
3 changed files with 75 additions and 64 deletions
|
|
@ -265,7 +265,7 @@ class Command(BaseCommand):
|
|||
"amount": "3940",
|
||||
"tag": Tag.objects.get(title="Tag"),
|
||||
"defaults": {
|
||||
"created_at": datetime.datetime(year=today.year, month=today.month, day=today.day, hour=11, minute=17, tzinfo=ist),
|
||||
"created_at": datetime.datetime(year=today.year, month=today.month, day=today.day, hour=23, minute=17, tzinfo=ist),
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -274,7 +274,7 @@ class Command(BaseCommand):
|
|||
"amount": "35",
|
||||
"tag": Tag.objects.get(title="Food & Drinks", sub_category="Drink"),
|
||||
"defaults": {
|
||||
"created_at": datetime.datetime(year=today.year, month=today.month, day=today.day, hour=23, minute=45, tzinfo=ist),
|
||||
"created_at": datetime.datetime(year=today.year, month=today.month, day=today.day, hour=11, minute=45, tzinfo=ist),
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
"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'
|
||||
import RecentTransactionsList from './RecentTransactionsList';
|
||||
|
||||
|
||||
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",
|
||||
|
|
@ -61,54 +51,6 @@ export default function RecentTransactions() {
|
|||
// }
|
||||
// ]
|
||||
|
||||
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}>
|
||||
|
|
@ -139,9 +81,7 @@ export default function RecentTransactions() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{recent_transactions}
|
||||
</div>
|
||||
<RecentTransactionsList />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
71
web/app/components/RecentTransactionsList.tsx
Normal file
71
web/app/components/RecentTransactionsList.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
"use client"
|
||||
|
||||
import React from 'react'
|
||||
import useSWR from 'swr'
|
||||
import SingleTransaction from './SingleTransaction'
|
||||
|
||||
export default function RecentTransactionsList() {
|
||||
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 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>
|
||||
{recent_transactions}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue