From 27f77982bd5b4e0af5b01b800f934b685c74ce37 Mon Sep 17 00:00:00 2001
From: NicoleMagallanes <nicolemagallanes026@gmail.com>
Date: Sat, 25 Nov 2023 00:38:28 +0800
Subject: [PATCH] feat: Add Swipe Delete in Contacts

---
 src/app/(app)/(tabs)/contacts.tsx | 44 +++++++++++++++++++++++++++++-
 src/app/(app)/(tabs)/index.tsx    | 45 +++++++++++++++++++++++++++++--
 2 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/src/app/(app)/(tabs)/contacts.tsx b/src/app/(app)/(tabs)/contacts.tsx
index 8fa77e0..40ddc66 100644
--- a/src/app/(app)/(tabs)/contacts.tsx
+++ b/src/app/(app)/(tabs)/contacts.tsx
@@ -38,6 +38,7 @@ import {
 } from "reactfire";
 import ConfettiCannon from "react-native-confetti-cannon";
 import { z } from "zod";
+import { RectButton, Swipeable } from "react-native-gesture-handler";
 
 export default function ContactScreen() {
   const { currentUser } = useAuth();
@@ -46,6 +47,11 @@ export default function ContactScreen() {
   }
 
   const firestore = useFirestore();
+  const deleteContact = async (contactId: string) => {
+    const updatedContacts = userData.contacts.filter((id) => id !== contactId);
+    await updateDoc(userDoc, { contacts: updatedContacts });
+  };
+
   const userDoc = doc(
     firestore,
     "users",
@@ -237,9 +243,15 @@ export default function ContactScreen() {
       <FlatList
         style={styles.container}
         data={userData.contacts}
-        renderItem={({ item }) => <ContactItem userId={item} />}
+        renderItem={({ item }) => (
+          <SwipeableContactItem
+            userId={item}
+            onDelete={() => deleteContact(item)}
+          />
+        )}
         keyExtractor={(item) => item}
       />
+
       <FAB.Group
         open={open}
         visible
@@ -262,6 +274,31 @@ export default function ContactScreen() {
   );
 }
 
+const SwipeableContactItem = ({
+  userId,
+  onDelete,
+}: {
+  userId: string;
+  onDelete: () => void;
+}) => {
+  const renderRightActions = () => (
+    <RectButton
+      style={styles.deleteButton}
+      onPress={() => {
+        onDelete();
+      }}
+    >
+      <FAB icon="delete" style={{ backgroundColor: "#6e0000" }} />
+    </RectButton>
+  );
+
+  return (
+    <Swipeable renderRightActions={renderRightActions}>
+      <ContactItem userId={userId} />
+    </Swipeable>
+  );
+};
+
 function ContactItem({ userId }: { userId: string }) {
   const firestore = useFirestore();
   const { currentUser } = useAuth();
@@ -348,4 +385,9 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: "2%",
   },
+  deleteButton: {
+    width: 80,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });
diff --git a/src/app/(app)/(tabs)/index.tsx b/src/app/(app)/(tabs)/index.tsx
index 75e714b..aa00b79 100644
--- a/src/app/(app)/(tabs)/index.tsx
+++ b/src/app/(app)/(tabs)/index.tsx
@@ -3,6 +3,7 @@ import { Message, Room } from "@/types";
 import { Link } from "expo-router";
 import {
   CollectionReference,
+  Timestamp,
   collection,
   doc,
   limit,
@@ -15,6 +16,7 @@ import { View, StyleSheet, FlatList } from "react-native";
 import {
   ActivityIndicator,
   Avatar,
+  FAB,
   Text,
   TouchableRipple,
 } from "react-native-paper";
@@ -24,12 +26,14 @@ import {
   useFirestoreCollectionData,
   useFirestoreDocData,
 } from "reactfire";
+import { RectButton, Swipeable } from "react-native-gesture-handler";
 
 export default function IndexScreen() {
   const { currentUser } = useAuth();
   if (!currentUser) return null;
 
   const firestore = useFirestore();
+  const deleteChat = async (contactId: string) => {};
   const roomsCol = collection(firestore, "rooms") as CollectionReference<Room>;
   const myRoomsQuery = query(
     roomsCol,
@@ -49,13 +53,42 @@ export default function IndexScreen() {
   return (
     <FlatList
       data={myRooms}
-      renderItem={({ item }) => <ChatItem room={item} />}
-      keyExtractor={(item) => item.id!}
+      renderItem={({ item }) => (
+        <>
+          <SwipeableChatItem
+            onDelete={() => deleteChat(item.id || "")}
+            userId={""}
+          />
+          <ChatItem room={item} />
+        </>
+      )}
+      keyExtractor={(item) => item.id || "defaultKey"}
       style={styles.container}
     />
   );
 }
 
+const SwipeableChatItem = ({
+  userId,
+  onDelete,
+}: {
+  userId: string;
+  onDelete: () => void;
+}) => {
+  const renderRightActions = () => (
+    <RectButton
+      style={styles.deleteButton}
+      onPress={() => {
+        onDelete();
+      }}
+    >
+      <FAB icon="delete" style={{ backgroundColor: "#6e0000" }} />
+    </RectButton>
+  );
+
+  return <Swipeable renderRightActions={renderRightActions}></Swipeable>;
+};
+
 function ChatItem({ room }: { room: Room }) {
   if (!room) return null;
   const firestore = useFirestore();
@@ -187,4 +220,12 @@ const styles = StyleSheet.create({
   messageContainer: {
     flexDirection: "row",
   },
+  deleteButton: {
+    width: 80,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  swipeableChatItem: {
+    backgroundColor: "white",
+  },
 });