fix: improve ui

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

backend/foldbank/management/commands/populatedb.py

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

web/app/components/RecentTransactions.tsx

@@ -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 RecentTransactionsList from './RecentTransactionsList';
-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",
@@ -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>
+      <RecentTransactionsList />
-        {recent_transactions}
-      </div>
     </div>
   )
 }

web/app/components/RecentTransactionsList.tsx

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