- Implemented saving of location to the event

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -21,7 +21,6 @@ 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 ClockIcon from "@/assets/svgs/ClockIcon";
@@ -29,7 +28,7 @@ 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, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import {
   eventForEditAtom,
   selectedNewEventDateAtom,
@@ -72,6 +71,7 @@ export const ManuallyAddEventModal = () => {
   };
 
   const detailsRef = useRef<TextFieldRef>(null);
+  const locationRef = useRef<TextFieldRef>(null);
   
   const [title, setTitle] = useState<string>(editEvent?.title || "");
   const [details, setDetails] = useState<string>(editEvent?.notes || "");
@@ -79,6 +79,7 @@ export const ManuallyAddEventModal = () => {
   const [isPrivate, setIsPrivate] = useState<boolean>(
     editEvent?.private || false
   );
+  const [location, setLocation] = useState(editEvent?.location ?? "");
 
   useEffect(() => {
     if(allDayAtom === true) setIsAllDay(true);
@@ -250,6 +251,7 @@ export const ManuallyAddEventModal = () => {
       allDay: isAllDay,
       attendees: selectedAttendees,
       notes: details,
+      location: location
     };
 
     if (editEvent?.id) eventData.id = editEvent?.id;
@@ -531,7 +533,7 @@ export const ManuallyAddEventModal = () => {
           <View marginH-30 marginB-10 row centerV>
             <Ionicons name="person-circle-outline" size={28} color="#919191" />
             <Text
-              style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
+              style={{ fontFamily: "Manrope_600SemiBold", fontSize: 16 }}
               marginL-10
             >
               Attendees
@@ -591,7 +593,7 @@ export const ManuallyAddEventModal = () => {
               <Text
                 style={{
                   fontFamily: "Manrope_600SemiBold",
-                  fontSize: 18,
+                  fontSize: 16,
                 }}
                 marginL-10
               >
@@ -644,6 +646,35 @@ export const ManuallyAddEventModal = () => {
             </View>
           </View>
           <View style={styles.divider} />
+          <View marginH-25 marginB-0 spread centerV flex-1>
+            <TouchableOpacity onPress={() => locationRef?.current?.focus()}>
+              <View row centerV>
+                <Ionicons name="location-outline" size={28} color="#919191" />
+                <Text
+                    style={{
+                      fontFamily: "PlusJakartaSans_500Medium",
+                      fontSize: 16,
+                    }}
+                    marginL-10
+                >
+                  Location
+                </Text>
+              </View>
+            </TouchableOpacity>
+
+            <TextField
+                value={location}
+                onChangeText={setLocation}
+                ref={locationRef}
+                maxLength={2000}
+                multiline
+                numberOfLines={2}
+                marginT-5
+                marginL-10
+                style={{ flex: 1 }}
+            />
+          </View>
+          <View style={styles.divider} />
           <View marginH-30 marginB-0 spread centerV flex-1>
             <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>
               <View row centerV>

components/shared/AssigneesDisplay.tsx

@@ -42,7 +42,7 @@ const AssigneesDisplay = ({selectedAttendees, setSelectedAttendees}: {
                 </TouchableOpacity>
             ))}
 
-            {selectedAttendees?.length === 0 && <Text>No attendees added</Text>}
+            {selectedAttendees?.length === 0 && <Text style={{ fontSize: 14 }}>No attendees added</Text>}
         </View>
     );
 };

hooks/firebase/types/eventData.ts

@@ -11,5 +11,6 @@ export interface EventData {
     notes?: string,
     reminders?: string[]
     id?: string | number,
-    attendees?: string[]
+    attendees?: string[],
+    location?: string
 }