mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 16:34:54 +00:00
Add event deletion
This commit is contained in:
Milan Paunovic
@ -14,40 +14,36 @@ import {
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
|
||||
import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types";
|
||||
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
|
||||
import { EventData } from "@/hooks/firebase/types/eventData";
|
||||
import { addHours } from "date-fns";
|
||||
import {ScrollView} from "react-native-gesture-handler";
|
||||
import {useSafeAreaInsets} from "react-native-safe-area-context";
|
||||
import {useEffect, useRef, useState} from "react";
|
||||
import {AntDesign, Feather, Ionicons} from "@expo/vector-icons";
|
||||
import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types";
|
||||
import {useCreateEvent} from "@/hooks/firebase/useCreateEvent";
|
||||
import {EventData} from "@/hooks/firebase/types/eventData";
|
||||
import {addHours} from "date-fns";
|
||||
import DropModalIcon from "@/assets/svgs/DropModalIcon";
|
||||
import { StyleSheet } from "react-native";
|
||||
import {StyleSheet} from "react-native";
|
||||
import ClockIcon from "@/assets/svgs/ClockIcon";
|
||||
import LockIcon from "@/assets/svgs/LockIcon";
|
||||
import MenuIcon from "@/assets/svgs/MenuIcon";
|
||||
import CameraIcon from "@/assets/svgs/CameraIcon";
|
||||
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
|
||||
import { useAtom } from "jotai";
|
||||
import {
|
||||
eventForEditAtom,
|
||||
selectedNewEventDateAtom,
|
||||
} from "@/components/pages/calendar/atoms";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import {useAtom} from "jotai";
|
||||
import {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" },
|
||||
{ label: "Tuesday", value: "tuesday" },
|
||||
{ label: "Wednesday", value: "wednesday" },
|
||||
{ label: "Thursday", value: "thursday" },
|
||||
{ label: "Friday", value: "friday" },
|
||||
{ label: "Saturday", value: "saturday" },
|
||||
{ label: "Sunday", value: "sunday" },
|
||||
{label: "Monday", value: "monday"},
|
||||
{label: "Tuesday", value: "tuesday"},
|
||||
{label: "Wednesday", value: "wednesday"},
|
||||
{label: "Thursday", value: "thursday"},
|
||||
{label: "Friday", value: "friday"},
|
||||
{label: "Saturday", value: "saturday"},
|
||||
{label: "Sunday", value: "sunday"},
|
||||
];
|
||||
|
||||
export const ManuallyAddEventModal = () => {
|
||||
@ -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 } = {
|
||||
const {show, close, initialDate} = {
|
||||
show: !!selectedNewEventDate || !!editEvent,
|
||||
close: () => {
|
||||
setDeleteModalVisible(false);
|
||||
setSelectedNewEndDate(undefined);
|
||||
setEditEvent(undefined);
|
||||
},
|
||||
@ -113,8 +101,10 @@ export const ManuallyAddEventModal = () => {
|
||||
);
|
||||
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
|
||||
|
||||
const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
|
||||
const { data: members } = useGetFamilyMembers(true);
|
||||
const {mutateAsync: createEvent, isLoading: isAdding, isError} = useCreateEvent();
|
||||
const {data: members} = useGetFamilyMembers(true);
|
||||
|
||||
const isLoading = isDeleting || isAdding
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(editEvent?.title || "");
|
||||
@ -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 ? (
|
||||
<>
|
||||
<View center paddingT-8>
|
||||
<TouchableOpacity onPress={close}>
|
||||
<DropModalIcon />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View row spread paddingH-10 paddingB-15>
|
||||
<Button
|
||||
color="#05a8b6"
|
||||
style={styles.topBtn}
|
||||
iconSource={() => <CloseXIcon />}
|
||||
onPress={close}
|
||||
/>
|
||||
<View row>
|
||||
<Button
|
||||
style={styles.topBtn}
|
||||
marginR-10
|
||||
iconSource={() => <PenIcon />}
|
||||
onPress={handleSave}
|
||||
/>
|
||||
<Button
|
||||
style={styles.topBtn}
|
||||
marginL-5
|
||||
iconSource={() => <BinIcon />}
|
||||
onPress={() => {
|
||||
showDeleteEventModal();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
{/*{editEvent ? (*/}
|
||||
{/* <>*/}
|
||||
{/* <View center paddingT-8>*/}
|
||||
{/* <TouchableOpacity onPress={close}>*/}
|
||||
{/* <DropModalIcon />*/}
|
||||
{/* </TouchableOpacity>*/}
|
||||
{/* </View>*/}
|
||||
{/* <View row spread paddingH-10 paddingB-15>*/}
|
||||
{/* <Button*/}
|
||||
{/* color="#05a8b6"*/}
|
||||
{/* style={styles.topBtn}*/}
|
||||
{/* iconSource={() => <CloseXIcon />}*/}
|
||||
{/* onPress={close}*/}
|
||||
{/* />*/}
|
||||
{/* <View row>*/}
|
||||
{/* <Button*/}
|
||||
{/* style={styles.topBtn}*/}
|
||||
{/* marginR-10*/}
|
||||
{/* iconSource={() => <PenIcon />}*/}
|
||||
{/* onPress={handleSave}*/}
|
||||
{/* />*/}
|
||||
{/* <Button*/}
|
||||
{/* style={styles.topBtn}*/}
|
||||
{/* marginL-5*/}
|
||||
{/* iconSource={() => <BinIcon />}*/}
|
||||
{/* onPress={() => {*/}
|
||||
{/* showDeleteEventModal();*/}
|
||||
{/* }}*/}
|
||||
{/* />*/}
|
||||
{/* </View>*/}
|
||||
{/* </View>*/}
|
||||
{/* </>*/}
|
||||
{/*) : (*/}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
@ -308,7 +311,10 @@ export const ManuallyAddEventModal = () => {
|
||||
Cancel
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<DropModalIcon onPress={close} />
|
||||
<View row center>
|
||||
<DropModalIcon onPress={close}/>
|
||||
</View>
|
||||
<View flexS row gap-10>
|
||||
<TouchableOpacity onPress={handleSave}>
|
||||
<Text
|
||||
style={{
|
||||
@ -321,9 +327,19 @@ export const ManuallyAddEventModal = () => {
|
||||
Save
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{editEvent && (
|
||||
<Button
|
||||
style={styles.topBtn}
|
||||
marginL-5
|
||||
iconSource={() => <BinIcon/>}
|
||||
onPress={showDeleteEventModal}
|
||||
/>
|
||||
)}
|
||||
<ScrollView style={{ minHeight: "85%" }}>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
{/*)}*/}
|
||||
<ScrollView style={{minHeight: "85%"}}>
|
||||
<TextField
|
||||
placeholder="Add event title"
|
||||
value={title}
|
||||
@ -332,16 +348,16 @@ export const ManuallyAddEventModal = () => {
|
||||
setTitle(text);
|
||||
}}
|
||||
placeholderTextColor="#2d2d30"
|
||||
style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
|
||||
style={{fontFamily: "Manrope_500Medium", fontSize: 22}}
|
||||
paddingT-15
|
||||
paddingL-30
|
||||
returnKeyType="next"
|
||||
/>
|
||||
<View style={styles.divider} marginT-8 />
|
||||
<View style={styles.divider} marginT-8/>
|
||||
<View marginL-30 centerV>
|
||||
<View row spread marginB-10 centerV>
|
||||
<View row>
|
||||
<AntDesign name="clockcircleo" size={24} color="#919191" />
|
||||
<AntDesign name="clockcircleo" size={24} color="#919191"/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
@ -364,7 +380,7 @@ export const ManuallyAddEventModal = () => {
|
||||
</View>
|
||||
<View row marginB-10 spread>
|
||||
<View row centerV>
|
||||
<Feather name="calendar" size={25} color="#919191" />
|
||||
<Feather name="calendar" size={25} color="#919191"/>
|
||||
<DateTimePicker
|
||||
value={startDate}
|
||||
onChange={(date) => {
|
||||
@ -404,7 +420,7 @@ export const ManuallyAddEventModal = () => {
|
||||
{!isAllDay && (
|
||||
<View row marginB-10 spread>
|
||||
<View row centerV>
|
||||
<Feather name="calendar" size={25} color="#919191" />
|
||||
<Feather name="calendar" size={25} color="#919191"/>
|
||||
<DateTimePicker
|
||||
value={endDate}
|
||||
minimumDate={startDate}
|
||||
@ -445,30 +461,30 @@ export const ManuallyAddEventModal = () => {
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
<View style={styles.divider}/>
|
||||
|
||||
<View marginH-30 marginB-10 row centerV>
|
||||
<Ionicons name="person-circle-outline" size={28} color="#919191" />
|
||||
<Ionicons name="person-circle-outline" size={28} color="#919191"/>
|
||||
<Text
|
||||
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
|
||||
style={{fontFamily: "Manrope_600SemiBold", fontSize: 18}}
|
||||
marginL-10
|
||||
>
|
||||
Attendees
|
||||
</Text>
|
||||
<View flex-1 />
|
||||
<View flex-1/>
|
||||
<Picker
|
||||
value={selectedAttendees}
|
||||
onChange={(value) =>
|
||||
setSelectedAttendees((value as string[]) ?? [])
|
||||
}
|
||||
style={{ marginLeft: "auto" }}
|
||||
style={{marginLeft: "auto"}}
|
||||
mode={PickerModes.MULTI}
|
||||
renderInput={() => (
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
paddingH-8
|
||||
iconSource={() => (
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c" />
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c"/>
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
@ -503,10 +519,10 @@ export const ManuallyAddEventModal = () => {
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
<View style={styles.divider}/>
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row centerV>
|
||||
<ClockIcon />
|
||||
<ClockIcon/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
@ -522,7 +538,7 @@ export const ManuallyAddEventModal = () => {
|
||||
size={ButtonSize.small}
|
||||
paddingH-8
|
||||
iconSource={() => (
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c" />
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c"/>
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
@ -531,16 +547,16 @@ export const ManuallyAddEventModal = () => {
|
||||
borderColor: "#ea156c",
|
||||
borderWidth: 1,
|
||||
}}
|
||||
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
|
||||
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
||||
color="#ea156c"
|
||||
label="Set Reminder"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
<View style={styles.divider}/>
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row centerH>
|
||||
<LockIcon />
|
||||
<LockIcon/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
@ -561,11 +577,11 @@ export const ManuallyAddEventModal = () => {
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
<View style={styles.divider}/>
|
||||
<View marginH-30 marginB-0 spread centerV flex-1>
|
||||
<TouchableOpacity onPress={() => detailsRef?.current?.focus()}>
|
||||
<View row centerV>
|
||||
<MenuIcon />
|
||||
<MenuIcon/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
@ -586,7 +602,7 @@ export const ManuallyAddEventModal = () => {
|
||||
multiline
|
||||
numberOfLines={10}
|
||||
marginT-10
|
||||
style={{ flex: 1, minHeight: 180 }}
|
||||
style={{flex: 1, minHeight: 180}}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
@ -596,12 +612,12 @@ export const ManuallyAddEventModal = () => {
|
||||
marginB-15
|
||||
label="Create event from image"
|
||||
text70
|
||||
style={{ height: 47 }}
|
||||
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
|
||||
style={{height: 47}}
|
||||
labelStyle={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 15}}
|
||||
backgroundColor="#05a8b6"
|
||||
iconSource={() => (
|
||||
<View marginR-5>
|
||||
<CameraIcon color="white" />
|
||||
<CameraIcon color="white"/>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
@ -619,7 +635,7 @@ export const ManuallyAddEventModal = () => {
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
|
||||
divider: {height: 1, backgroundColor: "#e4e4e4", marginVertical: 15},
|
||||
gradient: {
|
||||
height: "25%",
|
||||
position: "absolute",
|
||||
|
||||
39
hooks/firebase/useDeleteEvent.ts
Normal file
39
hooks/firebase/useDeleteEvent.ts
Normal file
@ -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");
|
||||
}
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user