ADD functionality to fetch and display user clips in MyClips component

frontend/src/components/video/VideoCard.tsx

@@ -4,28 +4,28 @@ import {Link} from "react-router-dom";
 
 type VideoCardProps = {
     title: string,
-    length: number,
-    thumbnailUrl: string,
-    videoUrl: string,
+    duration: number,
+    thumbnailPath: string,
+    videoPath: string,
     className?: string
 }
 
 const VideoCard = ({
                        title,
-                       length,
-                       thumbnailUrl,
-                       videoUrl,
+                       duration,
+                       thumbnailPath,
+                       videoPath,
                        className}: VideoCardProps) => {
     return (
         <Link
-        to={videoUrl}
+        to={videoPath}
         >
             <div className={clsx("flex flex-col", className)}>
-                <img src={thumbnailUrl} alt="Video Thumbnail" />
+                <img src={thumbnailPath} alt="Video Thumbnail" />
 
                 <div className={"flex flex-row justify-between items-center p-2"}>
                     <p>{title}</p>
-                    <p>{formatTime(length)}</p>
+                    <p>{formatTime(duration)}</p>
                 </div>
 
             </div>

frontend/src/pages/MyClips.tsx

@@ -1,17 +1,30 @@
 import VideoCard from "../components/video/VideoCard";
+import {useEffect, useState} from "react";
+import { getClips } from "../utils/endpoints";
+import type { Clip } from "../utils/types";
 
 const MyClips = () => {
+    const [clips, setClips] = useState<Clip[]>([]);
+    const [error, setError] = useState<null | string>(null);
+
+    useEffect(() => {
+        getClips(setError).then((data) => setClips(data));
+    }, []);
+
     return (
-        <div>
-            <VideoCard
-                title={"My First Clip"}
-                length={120}
-                thumbnailUrl={"https://upload.wikimedia.org/wikipedia/commons/1/19/Billy_Joel_Shankbone_NYC_2009.jpg"}
-                videoUrl={"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}
-                className={"w-40"}
-            />
-
+        <div className={"flex flex-row"}>
+            {clips.map((clip) => (
+                <VideoCard
+                    key={clip.videoPath}
+                    title={clip.title}
+                    duration={clip.duration}
+                    thumbnailPath={clip.thumbnailPath}
+                    videoPath={clip.videoPath}
+                    className={"w-30 p-5"}
+                />
+            ))}
 
+            {error}
         </div>
     );
 }

frontend/src/utils/endpoints.ts

@@ -1,4 +1,4 @@
-import type {VideoMetadata, APIResponse, User} from "./types.ts";
+import type {VideoMetadata, APIResponse, User, Clip} from "./types.ts";
 
 /**
  * Uploads a file to the backend.
@@ -65,7 +65,9 @@ const editFile = async (
 /**
  * Triggers file processing.
  */
-const processFile = async (uuid: string, setError: Function): Promise<boolean> => {
+const processFile = async (
+    uuid: string,
+    setError: Function): Promise<boolean> => {
     try {
         const response = await fetch(`/api/v1/process/${uuid}`);
 
@@ -85,7 +87,8 @@ const processFile = async (uuid: string, setError: Function): Promise<boolean> =
 /**
  * Fetches the processing progress percentage.
  */
-const getProgress = async (uuid: string): Promise<number> => {
+const getProgress = async (
+    uuid: string): Promise<number> => {
     try {
         const response = await fetch(`/api/v1/progress/${uuid}`);
 
@@ -105,7 +108,8 @@ const getProgress = async (uuid: string): Promise<number> => {
 /**
  * Fetches original metadata from the backend.
  */
-const getMetadata = async (uuid: string): Promise<VideoMetadata> => {
+const getMetadata = async (
+    uuid: string): Promise<VideoMetadata> => {
     try {
         const response = await fetch(`/api/v1/metadata/original/${uuid}`);
 
@@ -143,11 +147,32 @@ const getUser = async (): Promise<null | User > => {
     }
 }
 
+const getClips = async (setError: Function): Promise< Clip[]> => {
+    try {
+        const response = await fetch('/api/v1/clips/', {credentials: "include",});
+
+        if (!response.ok) {
+            const errorResult: APIResponse = await response.json();
+            setError(errorResult.message);
+            return [];
+        }
+
+        const result: APIResponse = await response.json();
+        return result.data;
+
+    } catch (error: unknown) {
+        console.error('Error fetching clips:', error);
+        setError('Failed to fetch clips');
+        return [];
+    }
+}
+
 export {
     uploadFile,
     editFile,
     processFile,
     getProgress,
     getMetadata,
-    getUser
+    getUser,
+    getClips
 };

frontend/src/utils/types.ts

@@ -21,8 +21,21 @@ type User = {
     profilePicture: string
 }
 
+type Clip = {
+    title: string,
+    description: string,
+    duration: number,
+    thumbnailPath: string,
+    videoPath: string,
+    fps: number,
+    width: number,
+    height: number,
+    createdAt: string,
+}
+
 export type {
     APIResponse,
     VideoMetadata,
-    User
+    User,
+    Clip
 }