update

App.js

@@ -59,6 +59,9 @@ export default function App() {
           vibrate: [250],
           sound: true,
         });
+        await Notifications.createChannelAndroidAsync('activated', {
+          name: 'Activated',
+        });
       }
     })();
   }, []);

app.json

@@ -9,9 +9,6 @@
       "android",
       "web"
     ],
-    "notification": {
-      "iosDisplayInForeground": true
-    },
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",

screens/GroceryListChecklistScreen.js

@@ -0,0 +1,80 @@
+import React, {useState, useEffect} from 'react';
+import {View, Text, FlatList, Image, StyleSheet} from 'react-native';
+import SvgQRCode from 'react-native-qrcode-svg';
+import {Button, CheckBox, ListItem} from "react-native-elements";
+import StackWrapperScreenOptions from "../constants/StackWrapperScreenOptions";
+
+export default function GroceryListChecklistScreen({navigation, route}) {
+  const groceryList = route.params;
+  const [groceryListItems, setGroceryListItems] = useState([]);
+  const [checkedItems, setCheckedItems] = useState({});
+
+  useEffect(() => {
+    let orderedItems = [];
+    for (let [key, value] of Object.entries(groceryList.items)) {
+      let obj = value;
+      obj._id = key;
+      orderedItems.push(obj);
+    }
+    setGroceryListItems(orderedItems);
+  }, []);
+
+  return (
+    <View style={{flex: 1}}>
+      <FlatList
+        data={groceryListItems}
+        renderItem={({item}) => (
+          <View>
+            <ListItem
+              leftAvatar={{source: {uri: item.imageUrl}}}
+              rightElement={<CheckBox
+                checked={checkedItems[item._id]}
+                onPress={() => {
+                  setCheckedItems({
+                    ...checkedItems,
+                    [item._id]: !checkedItems[item._id]
+                  });
+                }}
+              />}
+              title={`${item.name} (${item.count?.toString()})`}
+              bottomDivider={true}
+            />
+          </View>
+        )}
+        keyExtractor={item => item._id}
+      />
+      <View
+        style={styles.qrStyle}
+      >
+        <SvgQRCode
+          value={route.params.qrCode}
+        />
+      </View>
+      <Button
+        onPress={() => {
+          navigation.popToTop();
+        }}
+      >
+        Cancel
+      </Button>
+      <Button
+        disabled={Object.keys(checkedItems).length !== groceryListItems.length}
+        onPress={() => {
+
+        }}
+      >
+        Complete
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  imageStyle: {
+    height: 50,
+    width: 50,
+  },
+  qrStyle: {
+    alignItems: 'center'
+  }
+});

screens/GroceryListSearchScreen.js

@@ -3,6 +3,7 @@ import {FlatList, SafeAreaView, StyleSheet, View} from 'react-native';
 import StackWrapper from '../navigation/StackWrapper';
 import {ListItem, SearchBar} from "react-native-elements";
 import GroceryListSummaryScreen from "./GroceryListSummaryScreen";
+import GroceryListChecklistScreen from "./GroceryListChecklistScreen";
 import {createStackNavigator} from "@react-navigation/stack";
 import dateFormat from 'dateformat';
 
@@ -27,18 +28,18 @@ function GroceryListSearch({navigation}) {
       <FlatList
         data={groceryLists}
         horizontal={false}
-        renderItem={({item}) => <ListItem
+        renderItem={({item: groceryList}) => <ListItem
           chevron={true}
-          title={item.author}
+          title={groceryList.author}
           titleStyle={{fontWeight: 'bold'}}
           subtitle={
-            dateFormat(item.createdAt, "dddd, mmmm dS, yyyy, h:MM:ss TT")
+            dateFormat(groceryList.createdAt, "dddd, mmmm dS, yyyy, h:MM:ss TT")
           }
           onPress={() => {
-            navigation.navigate("GroceryList", item);
+            navigation.navigate("GroceryList", groceryList);
           }}
         />}
-        keyExtractor={(item) => item._id.toString()}
+        keyExtractor={(groceryList) => groceryList._id.toString()}
         contentContainerStyle={styles.listContainer}
       />
     </SafeAreaView>
@@ -68,6 +69,10 @@ function GroceryListSearchScreen({navigation, route}) {
         name="GroceryList"
         component={GroceryListSummaryScreen}
       />
+      <Stack.Screen
+        name="GroceryListChecklist"
+        component={GroceryListChecklistScreen}
+      />
     </Stack.Navigator>
   )
 }

screens/GroceryListSummaryScreen.js

@@ -1,27 +1,40 @@
 import React, {useContext, useEffect} from 'react';
-import {View, Text, FlatList, Image, StyleSheet} from 'react-native';
+import {View, Text, FlatList, Image, StyleSheet, Platform} from 'react-native';
 import SvgQRCode from 'react-native-qrcode-svg';
 import {Icon, ListItem, Rating} from "react-native-elements";
-import StackWrapperScreenOptions from "../constants/StackWrapperScreenOptions";
 import UserContext from "../contexts/User";
 import GoBackIcon from "../components/GoBackIcon";
+import {Notifications} from 'expo';
 
 export default function GroceryListSummaryScreen({navigation, route}) {
+  const groceryList = route.params;
   const {user} = useContext(UserContext);
 
+  function handleNotification(notification) {
+    console.log(notification);
+    if (notification.data.isActivation && notification.data.userId === user._id)
+      navigation.navigate('GroceryListChecklist', groceryList);
+  }
+
+  useEffect(() => {
+    const listener = Notifications.addListener(handleNotification);
+    return () => listener.remove();
+  }, []);
+
   useEffect(() => {
     navigation.dangerouslyGetParent()?.setOptions({
       headerLeft: () => <GoBackIcon navigation={navigation}/>,
-      title: route.params.author
+      title: groceryList.author
     });
   }, []);
 
   let orderedItems = [];
-  for (let [key, value] of Object.entries(route.params.items)) {
+  for (let [key, value] of Object.entries(groceryList.items)) {
     let obj = value;
     obj._id = key;
     orderedItems.push(obj);
   }
+
   return (
     <View style={{flex: 1}}>
       <FlatList

screens/ScannerScreen.js

@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import {BarCodeScanner} from 'expo-barcode-scanner';
 import StackWrapper from "../navigation/StackWrapper";
-import {Notifications} from 'expo';
+import {Button} from 'react-native-elements';
 
 function QRCodeScanner() {
   const [hasCameraPermission, setHasCameraPermission] = useState(null);
@@ -34,7 +34,7 @@ function QRCodeScanner() {
         body: JSON.stringify({userId, qrCode})
       });
       const result = await response.json();
-
+      console.log(result);
     } else {
       // Without the = sign it's just the QR Code
       const completeUrl = 'https://grocerserver.herokuapp.com/lists/complete';
@@ -43,6 +43,7 @@ function QRCodeScanner() {
         body: JSON.stringify({qrCode: data}),
       });
       const result = await response.json();
+      console.log(result);
     }
     setScanned(false);
   }
@@ -79,6 +80,10 @@ function QRCodeScanner() {
         Scan a shopper's QR Code to allow them toprepare groceries for somebody
         else!
       </Text>
+      <Button
+        onPress={() => setScannedCode('')}
+        title="Rescan"
+      />
     </View>
   );
 }