From 968b8a2d7dcf66a1a3f6fb5b2501883874f4f0d5 Mon Sep 17 00:00:00 2001
From: Jack Laverty <jacktlaverty@gmail.com>
Date: Mon, 9 Sep 2024 23:10:45 +1000
Subject: [PATCH] caching headers for video API route

---
 app/api/videos/[videoId]/route.ts | 18 ++++++++++++------
 app/components/SessionsList.tsx   |  5 +++--
 lib/utils.ts                      |  6 ++++++
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/app/api/videos/[videoId]/route.ts b/app/api/videos/[videoId]/route.ts
index af280ad..8ada93f 100644
--- a/app/api/videos/[videoId]/route.ts
+++ b/app/api/videos/[videoId]/route.ts
@@ -7,16 +7,14 @@ export async function GET(
   request: NextRequest,
   { params }: { params: { videoId: string } }
 ) {
-  
   try {
-
     const { data, error } = await supabase.storage
       .from(process.env.SUPABASE_BUCKET!)
       .download("surfing/" + params.videoId);
 
     if (error) {
-        console.error('Catch all Error streaming video:', error);
-        return NextResponse.json({ error: 'Error streaming video' }, { status: 500 });
+      console.error('Error streaming video:', error);
+      return NextResponse.json({ error: 'Error streaming video' }, { status: 500 });
     }
     
     if (!data) {
@@ -26,13 +24,15 @@ export async function GET(
 
     const range = request.headers.get('range');
 
+    let response: NextResponse;
+
     if (range) {
       const parts = range.replace(/bytes=/, "").split("-");
       const start = parseInt(parts[0], 10);
       const end = parts[1] ? parseInt(parts[1], 10) : data.size - 1;
       const chunkSize = (end - start) + 1;
 
-      return new NextResponse(data.slice(start, end + 1), {
+      response = new NextResponse(data.slice(start, end + 1), {
         status: 206,
         headers: {
           'Content-Range': `bytes ${start}-${end}/${data.size}`,
@@ -42,7 +42,7 @@ export async function GET(
         },
       });
     } else {
-      return new NextResponse(data, {
+      response = new NextResponse(data, {
         status: 200,
         headers: {
           'Content-Length': data.size.toString(),
@@ -50,6 +50,12 @@ export async function GET(
         },
       });
     }
+
+    // Add caching headers
+    response.headers.set('Cache-Control', 'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400');
+    response.headers.set('ETag', `"${params.videoId}"`);
+
+    return response;
   } catch (error) {
     console.error('Catch all Error streaming video:', error);
     return NextResponse.json({ error: 'Error streaming video', details: error }, { status: 500 });
diff --git a/app/components/SessionsList.tsx b/app/components/SessionsList.tsx
index c74c8b2..c48090c 100644
--- a/app/components/SessionsList.tsx
+++ b/app/components/SessionsList.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { useRouter } from 'next/navigation';
 import { Session } from '@/lib/types'
+import { formatTime, formatDate } from '@/lib/utils'
 
 interface SessionsListProps {
   sessions: Session[];
@@ -40,8 +41,8 @@ const SessionsList: React.FC<SessionsListProps> = ({ sessions }) => {
                 className="border-t border-gray-300 hover:bg-gray-50 cursor-pointer"
                 onClick={() => handleRowClick(session.session_id)}
                 >
-                <td className="px-4 py-2">{session.date}</td>
-                <td className="px-4 py-2">{session.time}</td>
+                <td className="px-4 py-2">{formatDate(session.date)}</td>
+                <td className="px-4 py-2">{formatTime(session.time)}</td>
                 <td className="px-4 py-2">{session.location}</td>
                 <td className="px-4 py-2">{session.wave}</td>
                 <td className="px-4 py-2">{session.surfer}</td>
diff --git a/lib/utils.ts b/lib/utils.ts
index d7f1c02..7a3c3d8 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -20,3 +20,9 @@ export const formatTime = (time: string): string => {
   const formattedTime = dateTime.format('h:mma');
   return formattedTime
 }
+
+export const formatDate = (date: string): string => {
+  const dateTime = dayjs(`${date} 00:00:00`);
+  const formattedDate = dateTime.format('D MMM YYYY');
+  return formattedDate
+}