From f38bbccca1c0763b7e7c417ad4ead3d6be004d93 Mon Sep 17 00:00:00 2001
From: Samuel Ojo <88172184+greatsamist@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:02:02 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20hotfix:=20broken=20clip=20page?=
 =?UTF-8?q?=20and=20=20generate=20thumbnails=20repeated=20requests=20(#847?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 😵 Post-Mortem 😵

## Summary

1. Broken Clip Page: An added if statement caused the page to return
"not found" when previewId was missing or undefined.
2. Multiple Thumbnail Requests: The page was making multiple requests to
generate thumbnails for sessions, resulting in unnecessary network calls
and potential performance issues.

## Impact
-    **Services Affected**: Broken Clip page
-    **User Impact**: Users no longer have access to the clip page

## Root Cause Analysis

#### Issue 1: Broken Clip Page
An if statement was added to the Clip page, causing it to return a "not
found" page when previewId was missing in the search params or when the
previewAsset function returned undefined.
#### Issue 2: Multiple Thumbnail Requests
The page kept making repeated requests to generate thumbnails for
sessions. This was due to the lack of memoization for the session
object, resulting in unnecessary network calls.

## Resolution and Recovery
Remove the if statement

## Lessons Learned

1. Carefully review the impact of new conditional logic on page
rendering.
2. Optimize API calls to avoid unnecessary network requests.
3. Use memoization techniques like useMemo to improve performance.
---
 packages/app/app/studio/[organization]/clips/page.tsx  |  4 ----
 .../components/misc/VideoCard/VideoCardWithMenu.tsx    | 10 +++++-----
 packages/app/lib/services/sessionService.ts            |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/app/app/studio/[organization]/clips/page.tsx b/packages/app/app/studio/[organization]/clips/page.tsx
index 218fdd993..a2c82b86d 100644
--- a/packages/app/app/studio/[organization]/clips/page.tsx
+++ b/packages/app/app/studio/[organization]/clips/page.tsx
@@ -176,10 +176,6 @@ const EventClips = async ({ params, searchParams }: ClipsPageParams) => {
     return undefined;
   })();
 
-  if (!previewAsset) {
-    return notFound();
-  }
-
   return (
     <ClipContainer>
       {previewAsset && (
diff --git a/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx b/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
index bde85f379..df7cc60c7 100644
--- a/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
+++ b/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
@@ -12,7 +12,7 @@ import { IExtendedSession } from '@/lib/types';
 import { formatDate } from '@/lib/utils/time';
 import { EllipsisVertical } from 'lucide-react';
 import Link from 'next/link';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { useEffect, useState } from 'react';
 
 const VideoCardWithMenu = ({
@@ -27,7 +27,7 @@ const VideoCardWithMenu = ({
   link: string;
 }) => {
   const [thumbnail, setThumbnail] = useState<string | undefined>(undefined);
-
+  const memoizedSession = useMemo(() => session, []);
   useEffect(() => {
     const getThumbnail = async (session: IExtendedSession) => {
       try {
@@ -38,10 +38,10 @@ const VideoCardWithMenu = ({
       }
     };
 
-    if (session) {
-      getThumbnail(session);
+    if (memoizedSession && !memoizedSession.coverImage) {
+      getThumbnail(memoizedSession);
     }
-  }, [session]);
+  }, [memoizedSession]);
 
   return (
     <div className="flex min-h-full w-full flex-col rounded-xl uppercase">
diff --git a/packages/app/lib/services/sessionService.ts b/packages/app/lib/services/sessionService.ts
index e7d0845da..ab8dfdbb2 100644
--- a/packages/app/lib/services/sessionService.ts
+++ b/packages/app/lib/services/sessionService.ts
@@ -186,7 +186,7 @@ export const fetchSessionMetrics = async ({
     const response = await fetch(`${apiUrl()}/streams/metric/${playbackId}`, {
       cache: 'no-store',
     });
-    console.log('response', response);
+
     if (!response.ok) {
       return {
         viewCount: 0,