From 0aca56317add39271ba6637d0d0931e45b16d3d3 Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Wed, 16 Apr 2025 16:42:07 +0000
Subject: [PATCH] Fix RPC usage page to handle missing peak date (#6748)

This PR adds a null check for the peak date in the RPC Usage page to handle cases where there are no requests in the last 24 hours. It displays "No Requests in last 24 hours" instead of attempting to format a non-existent date. Additionally, it destructures the `averageRate` directly from the API data to improve code readability when passing it to the RateGraph and CountGraph components.
---
 .../app/team/[team_slug]/(team)/~/usage/rpc/page.tsx   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx
index b23835db41e..df89272f162 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/rpc/page.tsx
@@ -45,7 +45,7 @@ export default async function RPCUsage(props: {
     return <div>Error fetching data, please try again later</div>;
   }
 
-  const { peakRate, totalCounts } = apiData.data;
+  const { peakRate, totalCounts, averageRate } = apiData.data;
 
   // Calculate percentage of limit for the peak
   const peakPercentage = (peakRate.peakRPS / currentRateLimit) * 100;
@@ -113,7 +113,9 @@ export default async function RPCUsage(props: {
             </div>
             <p className="mt-1 text-muted-foreground text-xs">
               <ClockIcon className="mr-1 inline h-3 w-3" />
-              {format(new Date(peakRate.date), "MMM d, HH:mm")}
+              {peakRate.date
+                ? format(new Date(peakRate.date), "MMM d, HH:mm")
+                : "No Requests in last 24 hours"}
             </p>
           </CardContent>
         </Card>
@@ -196,13 +198,13 @@ export default async function RPCUsage(props: {
       <RateGraph
         peakPercentage={peakPercentage}
         currentRateLimit={currentRateLimit}
-        data={apiData.data.averageRate}
+        data={averageRate}
       />
 
       <CountGraph
         peakPercentage={peakPercentage}
         currentRateLimit={currentRateLimit}
-        data={apiData.data.averageRate}
+        data={averageRate}
       />
     </div>
   );