fix: improve ui

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
Ameya Shenoy 2023-03-22 17:03:41 +05:30
parent 1ae3e0ce2b
commit 327e49ce08
Signed by: codingcoffee
GPG key ID: EEC8EA855D61CEEC
3 changed files with 75 additions and 64 deletions

View file

@ -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),
}
},
{

View file

@ -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>
)
}

View 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>
)
}