🐛 hotfix: broken clip page and generate thumbnails repeated requests (#…

…847)

# 😵 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

@@ -176,10 +176,6 @@ const EventClips = async ({ params, searchParams }: ClipsPageParams) => {
     return undefined;
   })();
 
-  if (!previewAsset) {
-    return notFound();
-  }
-
   return (
     <ClipContainer>
       {previewAsset && (

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">

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,