Fix/local notification undefined 74

client/components/AlarmClock.tsx

@@ -13,7 +13,7 @@ import TimePickerAndroid from './TimePickerAndroid';
 import * as Notifications from 'expo-notifications';
 
 interface AlarmData {
-  id: number;
+  id: string;
   alarmTime: Date;
   alarmName: string;
   days: AlarmDays;
@@ -51,7 +51,7 @@ function AlarmClock({ onAlarmSave, editingAlarm }: AlarmClockProps) {
 
   const saveAlarm = () => {
     const alarmData = {
-      id: isEditing ? editingAlarm.id : Date.now(), // Use the existing ID or generate a new one
+      id: isEditing ? editingAlarm.id : '', // Use empty string to indicate that this is a new alarm that needs an ID
       alarmTime,
       alarmName,
       days,
@@ -75,65 +75,75 @@ function AlarmClock({ onAlarmSave, editingAlarm }: AlarmClockProps) {
     setAlarmSettingVisible(false);
   };
 
-  const scheduleAlarmNotification = (alarmData) => {
-    const { id, alarmTime, alarmName, days, isSnoozeEnabled } = alarmData;
+  const scheduleAlarmNotification = async (alarmData: AlarmData) => {
+    try {
+      const { id, alarmTime, alarmName, days, isSnoozeEnabled } = alarmData;
 
-    // Format the alarmTime as a string in 'HH:mm' format
-    const formattedAlarmTime = alarmTime.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-    });
+      // Format the alarmTime as a string in 'HH:mm' format
+      const formattedAlarmTime = alarmTime.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+      });
 
-    // Extract hour and minute from the formatted alarm time
-    // const [hour, minute] = formattedAlarmTime.split(':').map(Number);
+      // Extract hour and minute from the formatted alarm time
+      // const [hour, minute] = formattedAlarmTime.split(':').map(Number);
+
+      const hour = alarmTime.getHours();
+      const minute = alarmTime.getMinutes();
+
+      // Set the trigger for the notification
+      const trigger = {
+        hour,
+        minute,
+        repeats: true, // Repeat the notification daily if needed
+      };
+      console.log('trigger: ', trigger);
+
+      // Prepare notification content
+      const notificationContent = {
+        title: 'Alarm',
+        body: `Time to wake up! ${alarmName}`,
+      };
+
+      // Schedule the notification
+      const notificationID = await Notifications.scheduleNotificationAsync({
+        content: notificationContent,
+        trigger: trigger,
+      });
 
-    const hour = alarmTime.getHours();
-    const minute = alarmTime.getMinutes();
+      // Update the alarm ID if it is not defined already
+      if (!id)
+        alarmData.id = notificationID;
 
-    // Set the trigger for the notification
-    const trigger = {
-      hour,
-      minute,
-      repeats: true, // Repeat the notification daily if needed
-    };
-    console.log('trigger: ', trigger);
-
-    // Prepare notification content
-    const notificationContent = {
-      title: 'Alarm',
-      body: `Time to wake up! ${alarmName}`,
-    };
+      console.log(`Notification scheduled for alarm ${notificationID}`);
 
-    // Schedule the notification
-    Notifications.scheduleNotificationAsync({
-      content: notificationContent,
-      trigger,
-    })
-      .then((result) => {
-        console.log(`Notification scheduled for alarm ${id}:`, result);
-      })
-      .catch((error) => {
-        console.error('Error scheduling notification:', error);
-      });
+    } catch (error) {
+      console.error('Error scheduling notification:', error);
+    }
   };
 
-  const scheduleNotification = () => {
-    // Set the content and trigger for the notification
-    console.log('here');
-    const notificationContent = {
-      title: 'Hello!',
-      body: 'This is a basic Expo notification.',
-    };
-
-    const trigger = {
-      seconds: 5, // Notify after 5 seconds
-    };
+  const scheduleNotification = async () => {
+    try {
+      // Set the content and trigger for the notification
+      console.log('here');
+      const notificationContent = {
+        title: 'Hello!',
+        body: 'This is a basic Expo notification.',
+      };
+
+      const trigger = {
+        seconds: 5, // Notify after 5 seconds
+      };
+
+      // Schedule the notification
+      const result = await Notifications.scheduleNotificationAsync({
+        content: notificationContent,
+        trigger: trigger,
+      });
 
-    // Schedule the notification
-    Notifications.scheduleNotificationAsync({
-      content: notificationContent,
-      trigger,
-    });
+    } catch (error) {
+      console.error('Error scheduling notification:', error);
+    }
   };
 
   return (

client/screens/Alarms.tsx

@@ -6,6 +6,7 @@ import { StatusBar } from 'expo-status-bar';
 import AlarmClock from '../components/AlarmClock';
 import AlarmCard from '../components/AlarmCard';
 import { Alarm } from '../types/AlarmTypes';
+import * as Notifications from 'expo-notifications'; // For Notifications.cancelScheduledNotificationAsync
 
 import { useDarkMode } from '../contexts/DarkModeContext'; // Import the hook
 
@@ -33,11 +34,27 @@ export default function Alarms() {
     // Close modal or navigate back
   };
 
-  const handleDeleteAlarm = (alarmId: number) => {
-    setAlarms(alarms.filter((alarm: Alarm) => alarm.id !== alarmId));
+  const handleDeleteAlarm = async (alarmId: string) => {
+    try {
+      // Assuming 'alarms' is your current alarm state
+      const alarmToDelete = alarms.find((alarm: Alarm) => alarm.id === alarmId);
+
+      // Cancel the scheduled notification for the alarm being deleted
+      if (alarmToDelete && alarmToDelete.id) {
+        await Notifications.cancelScheduledNotificationAsync(alarmToDelete.id);
+        console.log(`Notification for alarm ${alarmId} has been canceled.`);
+      }
+
+      // Filter out the alarm with the matching ID
+      setAlarms(alarms.filter((alarm: Alarm) => alarm.id !== alarmId));
+
+      console.log(`Alarm with ID ${alarmId} has been deleted.`);
+    } catch (error) {
+      console.error('Error deleting alarm:', error);
+    }
   };
 
-  const handleToggleAlarm = (alarmId: number): void => {
+  const handleToggleAlarm = (alarmId: string): void => {
     setAlarms(
       alarms.map((alarm) => {
         if (alarm.id === alarmId) {

client/types/AlarmTypes.ts

@@ -1,5 +1,5 @@
 export interface Alarm {
-  id: number;
+  id: string; // ID returned by Notifications.scheduleNotifcationAsync is a string
   isActive?: boolean;
 }
 
@@ -11,4 +11,4 @@ export interface AlarmDays {
   Thu: boolean;
   Fri: boolean;
   Sat: boolean;
-}
+}