Added Notifications with repeating Schedules Solves #55

.gitignore

@@ -16,4 +16,5 @@ web-build/
 .eslintcache
 
 # other files
-NOTES.md
+NOTES.md
+yarn-error.log

app.json

@@ -33,6 +33,7 @@
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
+      "useNextNotificationsApi": true,
       "package": "com.heylinda.meditation"
     },
     "web": {

components/ToastSnackBar.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Snackbar } from 'react-native-paper'
+import { Text, useThemeColor } from '../components/Themed'
+
+interface Props {
+  message: string
+  show: boolean
+  changeShow: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export default function ToastBar({ message, show, changeShow }: Props) {
+  const onDismissSnackBar = () => changeShow(false)
+  return (
+    <Snackbar
+      visible={show}
+      duration={2000}
+      onDismiss={onDismissSnackBar}
+      wrapperStyle={{ backgroundColor: useThemeColor({}, 'black') }}
+    >
+      <Text style={{ color: useThemeColor({}, 'white') }}>{message}</Text>
+    </Snackbar>
+  )
+}

components/WeekdayPicker.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
+import { useThemeColor } from '../components/Themed'
+
+interface Props {
+  weekdays: number[]
+  setWeekdays: React.Dispatch<React.SetStateAction<number[]>>
+}
+export default function DayPicker({ weekdays, setWeekdays }: Props) {
+  function daysIO(v: number) {
+    if (weekdays.includes(v)) {
+      const weekdayRemoved = weekdays.filter((element) => element !== v)
+      setWeekdays(weekdayRemoved)
+    } else {
+      setWeekdays([...weekdays, v])
+    }
+  }
+
+  const activeColor = useThemeColor({}, 'primary')
+  const inactiveColor = useThemeColor({}, 'gray800')
+  const whiteColor = useThemeColor({}, 'white')
+  const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
+  return (
+    <View style={[styles.boxContainer]}>
+      {days.map((value, index) => (
+        <TouchableOpacity key={value} onPress={() => daysIO(index + 1)}>
+          <View
+            style={[
+              styles.box,
+              { backgroundColor: weekdays.includes(index + 1) ? activeColor : inactiveColor },
+            ]}
+          >
+            <Text style={{ color: whiteColor }}>{value}</Text>
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  box: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 30,
+  },
+  boxContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    marginTop: 20,
+  },
+})

notifications/notificationHandler.ts

@@ -0,0 +1,70 @@
+import * as Notifications from 'expo-notifications'
+import { Platform } from 'react-native'
+
+const askPermissions = async () => {
+  Notifications.getPermissionsAsync().then((status) => {
+    if (!status.granted) {
+      Notifications.requestPermissionsAsync()
+    }
+  })
+}
+
+const deleteNotifications = async () => {
+  Notifications.cancelAllScheduledNotificationsAsync()
+}
+
+const iosScheduler = (weekday: number[], time: Date) => {
+  if (weekday !== [-1]) {
+    Notifications.cancelAllScheduledNotificationsAsync()
+    weekday.forEach((v) => {
+      if (v !== -1) {
+        Notifications.scheduleNotificationAsync({
+          content: {
+            title: 'Practice your meditation today  🙇‍♂️',
+          },
+          trigger: {
+            hour: time.getHours(),
+            minute: time.getMinutes(),
+            weekday: v,
+          },
+        })
+      }
+    })
+  }
+}
+
+const androidSchedular = (weekday: number[], time: Date) => {
+  Notifications.cancelAllScheduledNotificationsAsync()
+  if (weekday !== [-1]) {
+    weekday.forEach((v) => {
+      if (v !== -1) {
+        Notifications.scheduleNotificationAsync({
+          content: {
+            title: 'Practice your meditation today 🙇‍♂️',
+          },
+          trigger: {
+            hour: time.getHours(),
+            minute: time.getMinutes(),
+            weekday: v,
+            repeats: true,
+          },
+        })
+      }
+    })
+  }
+}
+
+const platformScheduler = (weekday: number[], time: Date) => {
+  if (Platform.OS === 'android') {
+    androidSchedular(weekday, time)
+  }
+  if (Platform.OS === 'ios') {
+    iosScheduler(weekday, time)
+  }
+}
+
+export default {
+  askPermission: askPermissions,
+  testSchedular: platformScheduler,
+  deleteNotification: deleteNotifications,
+}

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
     "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "5.11.2",
     "@react-navigation/native": "~5.8.10",
@@ -32,6 +33,7 @@
     "expo-file-system": "~11.1.3",
     "expo-font": "~9.2.1",
     "expo-linking": "~2.3.1",
+    "expo-notifications": "^0.12.3",
     "expo-splash-screen": "~0.11.2",
     "expo-status-bar": "~1.0.4",
     "expo-web-browser": "~9.2.0",

screens/Home/index.tsx

@@ -10,14 +10,15 @@ import { Text, useThemeColor } from '../../components/Themed'
 import Colors from '../../constants/Colors'
 import { meditations, MeditationItem } from '../../data/meditations'
 import { HomeParamList } from '../../types'
+import Notify from '../../notifications/notificationHandler'
 
 interface Props {
   navigation: StackNavigationProp<HomeParamList, 'HomeScreen'>
 }
 
 export default function Home({ navigation }: Props) {
+  Notify.askPermission()
   const textColor = useThemeColor({}, 'text')
-
   const renderPopularCard = ({ item }: MeditationItem) => {
     return (
       <Card

screens/Settings/index.tsx

@@ -1,11 +1,18 @@
 import * as React from 'react'
 import { Alert } from 'react-native'
-import { Divider, List } from 'react-native-paper'
+import { Divider, List, Dialog, Button } from 'react-native-paper'
 import { useAppDispatch } from '../../hooks'
 import { reset } from '../../redux/meditationSlice'
 
+import Toast from '../../components/ToastSnackBar'
+import NotificationSetter from './notificationSetter'
+import Notify from '../../notifications/notificationHandler'
+
 const Settings = () => {
   const dispatch = useAppDispatch()
+  const [showNotification, toggleShowNotification] = React.useState(false)
+  const [toastShow, setToastShow] = React.useState(false)
+  const [toastMessage, setToastMessage] = React.useState('')
   const clearData = () => {
     Alert.alert(
       'Clear Data',
@@ -22,10 +29,41 @@ const Settings = () => {
       ]
     )
   }
+
   return (
     <>
       <List.Item title="Clear Data" onPress={clearData} />
       <Divider />
+      <List.Item
+        title="Set Daily Reminder"
+        onPress={() => toggleShowNotification(!showNotification)}
+      />
+      <Dialog
+        visible={showNotification}
+        onDismiss={() => {
+          toggleShowNotification(!showNotification)
+        }}
+        dismissable={true}
+      >
+        <Dialog.Title>Set Reminders</Dialog.Title>
+        <Dialog.Content>
+          <NotificationSetter setToastMessage={setToastMessage} setToastShow={setToastShow} />
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={() => toggleShowNotification(!showNotification)}>CANCEL</Button>
+        </Dialog.Actions>
+      </Dialog>
+      <Divider />
+      <List.Item
+        title="Clear All Reminders"
+        onPress={() => {
+          Notify.deleteNotification()
+          setToastMessage('All Reminders Cleared')
+          setToastShow(true)
+        }}
+      />
+      <Divider />
+      <Toast message={toastMessage} show={toastShow} changeShow={setToastShow} />
     </>
   )
 }

screens/Settings/notificationSetter.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import { Platform, StyleSheet, View, TouchableOpacity, Text } from 'react-native'
+import { useThemeColor } from '../../components/Themed'
+
+import DateTimePicker from '@react-native-community/datetimepicker'
+import Notify from '../../notifications/notificationHandler'
+import WeekdayPicker from '../../components/WeekdayPicker'
+
+interface Props {
+  setToastMessage: React.Dispatch<React.SetStateAction<string>>
+  setToastShow: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const NotificationSetter = ({ setToastMessage, setToastShow }: Props) => {
+  const [time, setTime] = React.useState(new Date())
+  const [pickedTime, setPickedTime] = React.useState(false)
+  const [weekdays, setWeekdays] = React.useState([-1])
+  const [show, setShow] = React.useState(false)
+  const changeTimeHandler = (event: Event, value?: Date) => {
+    setShow(Platform.OS === 'ios')
+    if (value) {
+      setPickedTime(true)
+    } else {
+      setPickedTime(false)
+    }
+    setTime(value || new Date())
+  }
+
+  const timeString = (timeSet: Date) => {
+    const timeHours = timeSet.getHours()
+    const timeMinutes = timeSet.getMinutes()
+    const hours =
+      timeHours === 0 ? '00' : timeHours <= 9 ? '0' + timeHours.toString() : timeHours.toString()
+    const minutes =
+      timeMinutes === 0
+        ? '00'
+        : timeMinutes <= 9
+        ? '0' + timeMinutes.toString()
+        : timeMinutes.toString()
+    return hours + ' : ' + minutes
+  }
+
+  const textColor = useThemeColor({}, 'text')
+  const textWhite = useThemeColor({}, 'white')
+
+  return (
+    <>
+      <WeekdayPicker weekdays={weekdays} setWeekdays={setWeekdays} />
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity onPress={() => setShow(!show)}>
+          <View style={[styles.pickTime, { backgroundColor: useThemeColor({}, 'primary') }]}>
+            <Text style={{ color: textWhite }}>PICK TIME</Text>
+          </View>
+        </TouchableOpacity>
+        {pickedTime && (
+          <Text style={[styles.selectedTime, { color: textColor }]}>At {timeString(time)} </Text>
+        )}
+        <TouchableOpacity
+          onPress={() => {
+            if (weekdays.length !== 1 && pickedTime) {
+              Notify.testSchedular(weekdays, time)
+              setToastMessage('Reminders Set')
+              setToastShow(true)
+            } else {
+              setToastMessage('Please Pick Day and Time')
+              setToastShow(true)
+            }
+          }}
+        >
+          <View style={[styles.pickTime, { backgroundColor: useThemeColor({}, 'primary') }]}>
+            <Text style={{ color: textWhite }}>NOTIFY</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {show && (
+        <DateTimePicker
+          value={time}
+          mode="time"
+          is24Hour={true}
+          display="clock"
+          onChange={changeTimeHandler}
+        />
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  pickTime: {
+    width: 90,
+    height: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  selectedTime: {
+    fontSize: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginHorizontal: 1,
+  },
+})
+
+export default NotificationSetter