From bc8f93564822a2aeada293a1b0c6266c56687735 Mon Sep 17 00:00:00 2001
From: Chris-1010 <122332721@umail.ucc.ie>
Date: Mon, 3 Mar 2025 11:09:24 +0000
Subject: [PATCH] FIX: `end_stream` route input data handling; PATCH/UPDATE:
 Handle cases where content fetched is falsy/empty

---
 frontend/package.json                              |  2 +-
 frontend/src/components/Stream/StreamDashboard.tsx | 12 +++++++-----
 frontend/src/hooks/useContent.ts                   |  8 +++++---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2f9b28a..5952062 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.15.0",
   "type": "module",
   "scripts": {
     "dev": "vite --config vite.config.dev.ts",
diff --git a/frontend/src/components/Stream/StreamDashboard.tsx b/frontend/src/components/Stream/StreamDashboard.tsx
index 0c9aaa0..c33ebac 100644
--- a/frontend/src/components/Stream/StreamDashboard.tsx
+++ b/frontend/src/components/Stream/StreamDashboard.tsx
@@ -225,13 +225,13 @@ const StreamDashboard: React.FC<StreamDashboardProps> = ({ username, userId, isL
 	const handleEndStream = async () => {
 		console.log("Ending stream...");
 
-		const formData = new FormData();
-		formData.append("key", streamData.stream_key);
-
 		try {
 			const response = await fetch("/api/end_stream", {
 				method: "POST",
-				body: formData,
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ key: streamData.stream_key }),
 			});
 
 			if (response.ok) {
@@ -375,7 +375,9 @@ const StreamDashboard: React.FC<StreamDashboardProps> = ({ username, userId, isL
 								streamCategory={streamData.category_name || "Category"}
 								viewers={streamData.viewer_count}
 								thumbnail={thumbnailPreview.url || ""}
-								onItemClick={() => {}}
+								onItemClick={() => {
+									window.open(`/${username}`, "_blank");
+								}}
 								extraClasses="max-w-[20vw]"
 							/>
 						</div>
diff --git a/frontend/src/hooks/useContent.ts b/frontend/src/hooks/useContent.ts
index 64084d3..14c6357 100644
--- a/frontend/src/hooks/useContent.ts
+++ b/frontend/src/hooks/useContent.ts
@@ -23,6 +23,7 @@ const processVodData = (data: any[]): VodType[] => {
 
 // Helper function to process API data into our consistent types
 const processStreamData = (data: any[]): StreamType[] => {
+	if (!data || data.length === 0 || !data[0] || !data[0].user_id) return [];
 	return data.map((stream) => ({
 		type: "stream",
 		id: stream.user_id,
@@ -76,8 +77,9 @@ export function useFetchContent<T>(
 					throw new Error(`Error fetching data: ${response.status}`);
 				}
 
-				const rawData = await response.json();
-				const processedData = processor(rawData);
+				const rawData = await response.json();				
+				let processedData = processor(Array.isArray(rawData) ? rawData : (rawData ? [rawData] : []));
+				console.log("processedData", processedData);
 				setData(processedData);
 				setError(null);
 			} catch (err) {
@@ -126,7 +128,7 @@ export function useVods(customUrl?: string): {
 	isLoading: boolean;
 	error: string | null;
 } {
-	const url = customUrl || "api/vods/all"; //TODO: Change this to the correct URL or implement it
+	const url = customUrl || "api/vods/all";
 	const { data, isLoading, error } = useFetchContent<VodType>(url, processVodData, [customUrl]);
 
 	return { vods: data, isLoading, error };