fix: Final improvements to Push Notifications

App.js

@@ -1,6 +1,6 @@
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
-import React from "react";
+import React, { useEffect } from "react";
 import { StatusBar, View } from "react-native";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
@@ -12,6 +12,7 @@ import ViewDeck from "./components/pages/ViewDeck/ViewDeck";
 import reducer from "./reducers";
 import { UDACITY_BLUE, WHITE } from "./utils/colors";
 import { SCREEN } from "./utils/contants";
+import { scheduleNextDayNotification } from "./utils/API";
 
 const Stack = createStackNavigator();
 
@@ -26,6 +27,10 @@ function MyStatusBar({ backgroundColor, props }) {
 }
 
 export default function App() {
+  useEffect(() => {
+    scheduleNextDayNotification();
+  }, []);
+
   return (
     <Provider store={createStore(reducer)}>
       <NavigationContainer>

components/molecules/DeckList/DeckList.js

@@ -3,17 +3,12 @@ import { FlatList, SafeAreaView, StyleSheet, Text, View } from "react-native";
 import { connect } from "react-redux";
 
 import { receiveDeckEntries } from "../../../actions";
-import {
-  fetchDeckResults,
-  scheduleNextDayNotification
-} from "../../../utils/API";
+import { fetchDeckResults } from "../../../utils/API";
 import Deck from "../../atoms/Deck/Deck";
 import { WHITE } from "../../../utils/colors";
 
 class DeckList extends Component {
   componentDidMount() {
-    scheduleNextDayNotification();
-
     const { dispatch } = this.props;
 
     fetchDeckResults().then(data => {

components/pages/PlayQuiz/PlayQuiz.js

@@ -11,6 +11,10 @@ import {
 } from "../../../utils/colors";
 import Question from "../../atoms/Question/Question";
 import Button from "../../atoms/Button/Button";
+import {
+  clearLocalNotification,
+  scheduleNextDayNotification
+} from "../../../utils/API";
 
 class PlayQuiz extends Component {
   state = {
@@ -111,6 +115,9 @@ class PlayQuiz extends Component {
     }
 
     if (this.state.qIndex > questions.length - 1) {
+      // Cancel current notifications as user finished quiz and setup a new one for tomorrow
+      clearLocalNotification().then(scheduleNextDayNotification());
+
       return (
         <View style={[styles.container, { alignItems: "center" }]}>
           <Text style={styles.heading}>

components/pages/ViewDeck/ViewDeck.js

@@ -57,9 +57,6 @@ class ViewDeck extends Component {
           innerColor={UDACITY_BLUE}
           text="Play quiz"
           onPress={() => {
-            // cancel today's notification
-            clearLocalNotification().then(() => null);
-
             navigation.navigate("PlayQuiz", { deckId });
           }}
         />

utils/API.js

@@ -1,4 +1,5 @@
 import { Notifications } from "expo";
+import * as Permissions from "expo-permissions";
 import { AsyncStorage } from "react-native";
 
 import { fetchData, STORAGE_KEY } from "./_DATA";
@@ -41,43 +42,56 @@ export const deleteDeck = key =>
     AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data));
   });
 
-export const scheduleNextDayNotification = () =>
+export const createNotification = () => ({
+  title: "UdaciCards - Quiz Time!",
+  message: "You didn't quiz yourself today :(",
+  ios: {
+    sound: true
+  },
+  android: {
+    sound: true,
+    priority: "high",
+    sticky: false,
+    vibrate: true
+  }
+});
+
+export const clearLocalNotification = () => {
+  console.log("clearLocalNotification");
+
+  return AsyncStorage.removeItem(NOTIFICATION_KEY).then(
+    Notifications.cancelAllScheduledNotificationsAsync
+  );
+};
+
+export function scheduleNextDayNotification() {
+  console.log("scheduleNextDayNotification");
   AsyncStorage.getItem(NOTIFICATION_KEY)
     .then(JSON.parse)
     .then(data => {
-      Notifications.cancelAllScheduledNotificationsAsync().catch(err =>
-        console.log(err)
-      );
-
-      // Notification in one day time
-      const tomorrow = new Date();
-      tomorrow.setDate(tomorrow.getDate() + 1);
-      tomorrow.setHours(18);
-      tomorrow.setMinutes(0);
-
-      // const instant = new Date(); // TODO - UDACITY REVIEWER EASY CHECK ❤️
-
-      Notifications.scheduleLocalNotificationAsync({
-        title: "Udacity Flashcards",
-        message: "You didn't quiz yourself today :(",
-        date: tomorrow,
-        // date: instant, // TODO - UDACITY REVIEWER EASY CHECK ❤️
-        repeat: "day",
-        ios: {
-          sound: true
-        },
-        android: {
-          sound: true,
-          priority: "high",
-          sticky: false,
-          vibrate: true
-        }
-      }).catch(err => console.log(err));
-
-      AsyncStorage.setItem(NOTIFICATION_KEY, JSON.stringify(true));
+      // Notification not been set up
+      if (data === null) {
+        // Request permission from user to schedule notifications
+        Permissions.askAsync(Permissions.NOTIFICATIONS).then(({ status }) => {
+          if (status === "granted") {
+            // Cancel any previously scheduled notifications.
+            Notifications.cancelAllScheduledNotificationsAsync();
+
+            const tomorrow = new Date();
+            tomorrow.setDate(tomorrow.getDate() + 1);
+            tomorrow.setHours(8);
+            tomorrow.setMinutes(0);
+
+            console.log(`scheduleLocalNotification ${tomorrow}`);
+            Notifications.scheduleLocalNotificationAsync(createNotification(), {
+              time: tomorrow,
+              repeat: "day"
+            });
+
+            // Ensure local notification key is setup in storage.
+            AsyncStorage.setItem(NOTIFICATION_KEY, JSON.stringify(true));
+          }
+        });
+      }
     });
-
-export const clearLocalNotification = async () =>
-  AsyncStorage.removeItem(NOTIFICATION_KEY).then(
-    await scheduleNextDayNotification()
-  );
+}

utils/contants.js

@@ -1,4 +1,4 @@
-export const NOTIFICATION_KEY = "udacicard-notification";
+export const NOTIFICATION_KEY = "udacicard:notifications";
 
 export const SCREEN = {
   NAVIGATOR: {