Add event deletion

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -30,15 +30,11 @@ import MenuIcon from "@/assets/svgs/MenuIcon";
 import CameraIcon from "@/assets/svgs/CameraIcon";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
 import {useAtom} from "jotai";
-import {
+import {eventForEditAtom, selectedNewEventDateAtom,} from "@/components/pages/calendar/atoms";
-  eventForEditAtom,
-  selectedNewEventDateAtom,
-} from "@/components/pages/calendar/atoms";
 import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 import BinIcon from "@/assets/svgs/BinIcon";
-import CloseXIcon from "@/assets/svgs/CloseXIcon";
-import PenIcon from "@/assets/svgs/PenIcon";
 import DeleteEventDialog from "./DeleteEventDialog";
+import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent";
 
 const daysOfWeek = [
     {label: "Monday", value: "monday"},
@@ -58,20 +54,12 @@ export const ManuallyAddEventModal = () => {
     );
     const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
     const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
-
+    const {mutateAsync: deleteEvent, isLoading: isDeleting} = useDeleteEvent()
-  const showDeleteEventModal = () => {
-    setDeleteModalVisible(true);
-  };
-
-  const handleDeleteEvent = () => {};
-
-  const hideDeleteEventModal = () => {
-    setDeleteModalVisible(false);
-  };
 
     const {show, close, initialDate} = {
         show: !!selectedNewEventDate || !!editEvent,
         close: () => {
+            setDeleteModalVisible(false);
             setSelectedNewEndDate(undefined);
             setEditEvent(undefined);
         },
@@ -113,9 +101,11 @@ export const ManuallyAddEventModal = () => {
     );
     const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
 
-  const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
+    const {mutateAsync: createEvent, isLoading: isAdding, isError} = useCreateEvent();
     const {data: members} = useGetFamilyMembers(true);
 
+    const isLoading = isDeleting || isAdding
+
     useEffect(() => {
         setTitle(editEvent?.title || "");
         setDetails(editEvent?.notes || "");
@@ -156,6 +146,19 @@ export const ManuallyAddEventModal = () => {
         });
     };
 
+    const showDeleteEventModal = () => {
+        setDeleteModalVisible(true);
+    };
+
+    const handleDeleteEvent = async () => {
+        await deleteEvent({eventId: `${editEvent?.id}`})
+        close()
+    };
+
+    const hideDeleteEventModal = () => {
+        setDeleteModalVisible(false);
+    };
+
     const combineDateAndTime = (date: Date, time: Date): Date => {
         const combined = new Date(date);
         combined.setHours(time.getHours());
@@ -234,7 +237,7 @@ export const ManuallyAddEventModal = () => {
                 onRequestClose={close}
                 transparent={false}
             >
-        <LoaderScreen message={"Saving event..."} color={Colors.grey40} />
+                <LoaderScreen message={isDeleting ? "Deleting event..." : "Saving event..."} color={Colors.grey40}/>
             </Modal>
         );
     }
@@ -256,39 +259,39 @@ export const ManuallyAddEventModal = () => {
                     paddingRight: insets.right, // Safe area inset for right
                 }}
             >
-        {editEvent ? (
+                {/*{editEvent ? (*/}
-          <>
+                {/*  <>*/}
-            <View center paddingT-8>
+                {/*    <View center paddingT-8>*/}
-              <TouchableOpacity onPress={close}>
+                {/*      <TouchableOpacity onPress={close}>*/}
-                <DropModalIcon />
+                {/*        <DropModalIcon />*/}
-              </TouchableOpacity>
+                {/*      </TouchableOpacity>*/}
-            </View>
+                {/*    </View>*/}
-            <View row spread paddingH-10 paddingB-15>
+                {/*    <View row spread paddingH-10 paddingB-15>*/}
-              <Button
+                {/*      <Button*/}
-                color="#05a8b6"
+                {/*        color="#05a8b6"*/}
-                style={styles.topBtn}
+                {/*        style={styles.topBtn}*/}
-                iconSource={() => <CloseXIcon />}
+                {/*        iconSource={() => <CloseXIcon />}*/}
-                onPress={close}
+                {/*        onPress={close}*/}
-              />
+                {/*      />*/}
-              <View row>
+                {/*      <View row>*/}
-                <Button
+                {/*        <Button*/}
-                  style={styles.topBtn}
+                {/*          style={styles.topBtn}*/}
-                  marginR-10
+                {/*          marginR-10*/}
-                  iconSource={() => <PenIcon />}
+                {/*          iconSource={() => <PenIcon />}*/}
-                  onPress={handleSave}
+                {/*          onPress={handleSave}*/}
-                />
+                {/*        />*/}
-                <Button
+                {/*        <Button*/}
-                  style={styles.topBtn}
+                {/*          style={styles.topBtn}*/}
-                  marginL-5
+                {/*          marginL-5*/}
-                  iconSource={() => <BinIcon />}
+                {/*          iconSource={() => <BinIcon />}*/}
-                  onPress={() => {
+                {/*          onPress={() => {*/}
-                    showDeleteEventModal();
+                {/*            showDeleteEventModal();*/}
-                  }}
+                {/*          }}*/}
-                />
+                {/*        />*/}
-              </View>
+                {/*      </View>*/}
-            </View>
+                {/*    </View>*/}
-          </>
+                {/*  </>*/}
-        ) : (
+                {/*) : (*/}
                 <View
                     style={{
                         flexDirection: "row",
@@ -308,7 +311,10 @@ export const ManuallyAddEventModal = () => {
                             Cancel
                         </Text>
                     </TouchableOpacity>
+                    <View row center>
                         <DropModalIcon onPress={close}/>
+                    </View>
+                    <View flexS row gap-10>
                         <TouchableOpacity onPress={handleSave}>
                             <Text
                                 style={{
@@ -321,8 +327,18 @@ export const ManuallyAddEventModal = () => {
                                 Save
                             </Text>
                         </TouchableOpacity>
-          </View>
+                        {editEvent && (
+                            <Button
+                                style={styles.topBtn}
+                                marginL-5
+                                iconSource={() => <BinIcon/>}
+                                onPress={showDeleteEventModal}
+                            />
                         )}
+                    </View>
+
+                </View>
+                {/*)}*/}
                 <ScrollView style={{minHeight: "85%"}}>
                     <TextField
                         placeholder="Add event title"

hooks/firebase/useDeleteEvent.ts

@@ -0,0 +1,39 @@
+import {useMutation, useQueryClient} from "react-query";
+import firestore from "@react-native-firebase/firestore";
+
+export const useDeleteEvent = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationKey: ["deleteEvent"],
+        mutationFn: async ({eventId, docId}: { eventId?: string; docId?: string }) => {
+            try {
+                if (docId) {
+                    await firestore()
+                        .collection("Events")
+                        .doc(docId)
+                        .delete();
+                } else if (eventId) {
+                    const snapshot = await firestore()
+                        .collection("Events")
+                        .where("id", "==", eventId)
+                        .get();
+
+                    const doc = snapshot.docs[0];
+                    if (doc) {
+                        await doc.ref.delete();
+                    } else {
+                        console.warn("Event not found");
+                    }
+                } else {
+                    console.warn("No identifier provided");
+                }
+            } catch (e) {
+                console.error(e);
+            }
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries("events");
+        }
+    });
+};