Editing calendar events

- Added new hook for updating events
- Updated the selected event in db
- Added document id as id to the event object when fetching events
- Removed unused react-native-google sign-in library

components/pages/calendar/CalendarPage.tsx

@@ -47,7 +47,7 @@ export default function CalendarPage() {
         },
     });
 
-    const [isFamilyView, setIsFamilyView] = useState<boolean>(true);
+    const [isFamilyView, setIsFamilyView] = useState<boolean>(false);
     const [calendarHeight, setCalendarHeight] = useState(0);
     const [mode, setMode] = useState<"week" | "month" | "day">("week");
     const [selectedDate, setSelectedDate] = useState<Date>(new Date());

components/pages/calendar/EditEventDialog.tsx

@@ -1,7 +1,5 @@
 import { View, Text, Button, Switch } from "react-native-ui-lib";
 import React, { useEffect, useState } from "react";
-import PointsSlider from "@/components/shared/PointsSlider";
-import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
 import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
 import {
   Dialog,
@@ -13,11 +11,11 @@ import {
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
 import { StyleSheet } from "react-native";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
-import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext";
+import { CalendarEvent } from "@/contexts/CalendarContext";
 import ClockIcon from "@/assets/svgs/ClockIcon";
 import LockIcon from "@/assets/svgs/LockIcon";
 import MenuIcon from "@/assets/svgs/MenuIcon";
-import { eventCellCss } from "react-native-big-calendar";
+import { useUpdateEvent } from "@/hooks/firebase/useUpdateEvent";
 
 interface IEditEventDialog {
   event: CalendarEvent;
@@ -25,9 +23,10 @@ interface IEditEventDialog {
   setIsVisible: (value: boolean) => void;
 }
 const EditEventDialog = (editEventProps: IEditEventDialog) => {
-  const { updateEvent } = useCalendarContext();
   const [event, setEvent] = useState<CalendarEvent>(editEventProps.event);
 
+  const { mutateAsync: updateEvent } = useUpdateEvent();
+
   useEffect(() => {
     setEvent(editEventProps.event);
   }, [editEventProps.isVisible]);
@@ -72,8 +71,7 @@ const EditEventDialog = (editEventProps: IEditEventDialog) => {
           onPress={() => {
             try {
               if (event.id) {
-                updateEvent(event, event.id);
+                updateEvent(event).then(() => editEventProps.setIsVisible(false));
-                editEventProps.setIsVisible(false);
               }
             } catch (error) {
               console.error(error);

hooks/firebase/useGetEvents.ts

@@ -31,6 +31,7 @@ export const useGetEvents = (isFamilyView: boolean) => {
                 const eventColor: string = profileData?.eventColor || colorMap.pink // Default color if not found
 
                 return {
+                    id: doc.id,
                     title: data.title,
                     start: new Date(data.startDate.seconds * 1000),
                     end: new Date(data.endDate.seconds * 1000),

hooks/firebase/useUpdateEvent.ts

@@ -0,0 +1,29 @@
+import {useAuthContext} from "@/contexts/AuthContext";
+import {useMutation, useQueryClient} from "react-query";
+import firestore from "@react-native-firebase/firestore";
+import {EventData} from "@/hooks/firebase/types/eventData";
+
+export const useUpdateEvent = () => {
+    const {user: currentUser} = useAuthContext()
+    const queryClients = useQueryClient()
+
+    return useMutation({
+        mutationKey: ["updateEvent"],
+        mutationFn: async (eventData: Partial<EventData>) => {
+            try {
+                console.log("Update");
+                console.log(eventData.id);
+                console.log(eventData);
+                await firestore()
+                    .collection("Events")
+                    .doc(eventData.id)
+                    .update(eventData);
+            } catch (e) {
+                console.error(e)
+            }
+        },
+        onSuccess: () => {
+            queryClients.invalidateQueries("events")
+        }
+    })
+}

package.json

@@ -35,7 +35,6 @@
     "@react-native-firebase/crashlytics": "^20.3.0",
     "@react-native-firebase/firestore": "^20.4.0",
     "@react-native-firebase/functions": "^20.4.0",
-    "@react-native-google-signin/google-signin": "^13.1.0",
     "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/native": "^6.0.2",
     "date-fns": "^3.6.0",

yarn.lock

@@ -2276,11 +2276,6 @@
   resolved "https://registry.npmjs.org/@react-native-firebase/functions/-/functions-20.4.0.tgz"
   integrity sha512-g4kAWZboTE9cTdT7KT6k1haHDmEBA36bPCvrh2MJ2RACo2JxotB2MIOEPZ5U/cT94eIAlgI5YtxQQGQfC+VcBQ==
 
-"@react-native-google-signin/google-signin@^13.1.0":
-  version "13.1.0"
-  resolved "https://registry.npmjs.org/@react-native-google-signin/google-signin/-/google-signin-13.1.0.tgz"
-  integrity sha512-C2/sqb0/s0c+Dwc/mykASZsRuHxGqn7SFrCxCY9D8p8IOQO05haInhCc7lzraJshRixGva5c/4usQZ71HMYSEQ==
-
 "@react-native/assets-registry@0.74.85":
   version "0.74.85"
   resolved "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.85.tgz"
@@ -9487,16 +9482,7 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9556,7 +9542,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9570,13 +9556,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -10439,7 +10418,7 @@ wonka@^4.0.14:
   resolved "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz"
   integrity sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10457,15 +10436,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"