FIX: end_stream route input data handling;

PATCH/UPDATE: Handle cases where content fetched is falsy/empty

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

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>

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,
@@ -77,7 +78,8 @@ export function useFetchContent<T>(
 				}
 
 				const rawData = await response.json();				
-				const processedData = processor(rawData);
+				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 };