feat: add some caching

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

backend/foldbank/api.py

@@ -4,6 +4,8 @@ from random import randrange
 
 from django.conf import settings
 from django.contrib.auth import get_user_model
+from django.utils.decorators import method_decorator
+from django.views.decorators.cache import cache_page
 from drf_yasg import openapi
 from drf_yasg.utils import swagger_auto_schema
 from foldbank.models import Account, RecurringPayment, Transaction, User
@@ -131,6 +133,7 @@ class TransactionsAPI(generics.ListAPIView):
         },
         tags=["Transactions"],
     )
+    @method_decorator(cache_page(60 * 60 * 2))
     def get(self, request):
         qs = []
 
@@ -190,6 +193,7 @@ class AccountsAPI(generics.ListAPIView):
         },
         tags=["Accounts"],
     )
+    @method_decorator(cache_page(60 * 60 * 2))
     def get(self, request):
         qs = []
 
@@ -240,8 +244,9 @@ class UpcomingRecurringPaymentAPI(generics.ListAPIView):
             },
         )
 
-
-    success_response = openapi.Response("Success Response", UpcomingRecurringPaymentOutputSerializer)
+    success_response = openapi.Response(
+        "Success Response", UpcomingRecurringPaymentOutputSerializer
+    )
 
     @swagger_auto_schema(
         operation_summary="Recurring Payments List",
@@ -250,6 +255,7 @@ class UpcomingRecurringPaymentAPI(generics.ListAPIView):
         },
         tags=["Recurring Payments"],
     )
+    @method_decorator(cache_page(60 * 60 * 2))
     def get(self, request):
         qs = []
 

web/app/components/CenterCol.tsx

@@ -91,11 +91,26 @@ export default function CenterCol() {
     greet += 'evening'
   }
 
+  const nth = function(d) {
+    if (d > 3 && d < 21) return 'th';
+    switch (d % 10) {
+      case 1:  return "st";
+      case 2:  return "nd";
+      case 3:  return "rd";
+      default: return "th";
+    }
+  }
+
+  const dayName = function(d) {
+    const days = ["Monday", "Tuesday", "Wednesday", "Thhursday", "Friday", "Saturday", "Sunday"]
+    return days[d-1]
+  }
+
   return (
     <div className={styles.main}>
       <div className={styles.title}>
         <div className={styles.greeting}>{greet}, Nishant</div>
-        <div className={styles.date}>{"It's 3rd of January, a Monday"}</div>
+        <div className={styles.date}>{`It's ${today.getDate()}${nth(today.getDate())} of ${today.toLocaleString('default', { month: 'long' })}, a ${dayName(today.getDay())}`}</div>
       </div>
       <CenterLoading />
     </div>

web/app/page.module.css

@@ -9,3 +9,22 @@
   gap: 30px;
 }
 
+.overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background: #F0F1F5;
+  padding: 20px;
+  color: #7F7C9A;
+  font: bold 1.2em Arial, Sans-serif;
+
+}
+
+@media screen and (min-width: 600px){
+  .overlay {
+    visibility: hidden;
+  }
+}

web/app/page.tsx

@@ -6,10 +6,13 @@ import RecentTransactions from './components/RecentTransactions'
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-      <RecurringCol />
-      <CenterCol />
-      <RecentTransactions />
-    </main>
+    <>
+      <main className={styles.main}>
+        <RecurringCol />
+        <CenterCol />
+        <RecentTransactions />
+      </main>
+      <div className={styles.overlay}>The demo is best viewed on the Desktop :)</div>
+    </>
   )
 }