From 66344d552b47c35073c41deac56757a9c00be41b Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Wed, 20 Mar 2024 20:07:23 +0100
Subject: [PATCH] feat: remove download history items on long press

---
 apps/expo/src/app/(tabs)/downloads.tsx        |  4 +-
 apps/expo/src/components/DownloadItem.tsx     | 67 ++++++++++---------
 .../expo/src/hooks/DownloadManagerContext.tsx | 11 ++-
 3 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/apps/expo/src/app/(tabs)/downloads.tsx b/apps/expo/src/app/(tabs)/downloads.tsx
index 49f4e59..0cef369 100644
--- a/apps/expo/src/app/(tabs)/downloads.tsx
+++ b/apps/expo/src/app/(tabs)/downloads.tsx
@@ -6,13 +6,13 @@ import ScreenLayout from "~/components/layout/ScreenLayout";
 import { useDownloadManager } from "~/hooks/DownloadManagerContext";
 
 const DownloadsScreen: React.FC = () => {
-  const { downloads } = useDownloadManager();
+  const { downloads, removeDownload } = useDownloadManager();
 
   return (
     <ScreenLayout title="Downloads">
       <ScrollView>
         {downloads.map((item) => (
-          <DownloadItem key={item.id} {...item} />
+          <DownloadItem key={item.id} {...item} onLongPress={removeDownload} />
         ))}
       </ScrollView>
     </ScreenLayout>
diff --git a/apps/expo/src/components/DownloadItem.tsx b/apps/expo/src/components/DownloadItem.tsx
index 5b43faf..4b25e4c 100644
--- a/apps/expo/src/components/DownloadItem.tsx
+++ b/apps/expo/src/components/DownloadItem.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import { TouchableOpacity } from "react-native-gesture-handler";
 import { Progress, Text, View } from "tamagui";
 
 export interface DownloadItemProps {
+  id: string;
   filename: string;
   progress: number;
   speed: number;
   fileSize: number;
   downloaded: number;
   isFinished: boolean;
+  onLongPress: (id: string) => void;
 }
 
 const formatBytes = (bytes: number, decimals = 2) => {
@@ -20,51 +23,55 @@ const formatBytes = (bytes: number, decimals = 2) => {
 };
 
 export const DownloadItem: React.FC<DownloadItemProps> = ({
+  id,
   filename,
   progress,
   speed,
   fileSize,
   downloaded,
   isFinished,
+  onLongPress,
 }) => {
   const percentage = progress * 100;
   const formattedFileSize = formatBytes(fileSize);
   const formattedDownloaded = formatBytes(downloaded);
 
   return (
-    <View marginBottom={16} borderRadius={8} borderColor="white" padding={16}>
-      <Text marginBottom={4} fontSize={16}>
-        {filename}
-      </Text>
-      <Progress
-        value={percentage}
-        height={10}
-        backgroundColor="$progressBackground"
-      >
-        <Progress.Indicator
-          animation="bounce"
-          backgroundColor="$progressFilled"
-        />
-      </Progress>
-      <View
-        marginTop={8}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text fontSize={12} color="gray">
-          {percentage}% - {formattedDownloaded} of {formattedFileSize}
+    <TouchableOpacity onLongPress={() => onLongPress(id)} activeOpacity={0.7}>
+      <View marginBottom={16} borderRadius={8} borderColor="white" padding={16}>
+        <Text marginBottom={4} fontSize={16}>
+          {filename}
         </Text>
-        {isFinished ? (
+        <Progress
+          value={percentage}
+          height={10}
+          backgroundColor="$progressBackground"
+        >
+          <Progress.Indicator
+            animation="bounce"
+            backgroundColor="$progressFilled"
+          />
+        </Progress>
+        <View
+          marginTop={8}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
           <Text fontSize={12} color="gray">
-            Finished
+            {percentage}% - {formattedDownloaded} of {formattedFileSize}
           </Text>
-        ) : (
-          <Text fontSize={12} color="gray">
-            {speed.toFixed(2)} MB/s
-          </Text>
-        )}
+          {isFinished ? (
+            <Text fontSize={12} color="gray">
+              Finished
+            </Text>
+          ) : (
+            <Text fontSize={12} color="gray">
+              {speed.toFixed(2)} MB/s
+            </Text>
+          )}
+        </View>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 };
diff --git a/apps/expo/src/hooks/DownloadManagerContext.tsx b/apps/expo/src/hooks/DownloadManagerContext.tsx
index d15318d..23d8a77 100644
--- a/apps/expo/src/hooks/DownloadManagerContext.tsx
+++ b/apps/expo/src/hooks/DownloadManagerContext.tsx
@@ -20,6 +20,7 @@ export interface DownloadItem {
 interface DownloadManagerContextType {
   downloads: DownloadItem[];
   startDownload: (url: string, type: "mp4" | "hls") => Promise<void>;
+  removeDownload: (id: string) => void;
 }
 
 const DownloadManagerContext = createContext<
@@ -168,8 +169,16 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
     }
   };
 
+  const removeDownload = (id: string) => {
+    const updatedDownloads = downloads.filter((download) => download.id !== id);
+    setDownloads(updatedDownloads);
+    void saveDownloadHistory(updatedDownloads);
+  };
+
   return (
-    <DownloadManagerContext.Provider value={{ downloads, startDownload }}>
+    <DownloadManagerContext.Provider
+      value={{ downloads, startDownload, removeDownload }}
+    >
       {children}
     </DownloadManagerContext.Provider>
   );