diff --git a/App.js b/App.js index 76d3f27..4957395 100644 --- a/App.js +++ b/App.js @@ -59,6 +59,9 @@ export default function App() { vibrate: [250], sound: true, }); + await Notifications.createChannelAndroidAsync('activated', { + name: 'Activated', + }); } })(); }, []); diff --git a/app.json b/app.json index e50c6e7..3aa5b14 100644 --- a/app.json +++ b/app.json @@ -9,9 +9,6 @@ "android", "web" ], - "notification": { - "iosDisplayInForeground": true - }, "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", diff --git a/screens/GroceryListChecklistScreen.js b/screens/GroceryListChecklistScreen.js new file mode 100644 index 0000000..a73fcae --- /dev/null +++ b/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 ( + + ( + + { + setCheckedItems({ + ...checkedItems, + [item._id]: !checkedItems[item._id] + }); + }} + />} + title={`${item.name} (${item.count?.toString()})`} + bottomDivider={true} + /> + + )} + keyExtractor={item => item._id} + /> + + + + + + + ); +} + +const styles = StyleSheet.create({ + imageStyle: { + height: 50, + width: 50, + }, + qrStyle: { + alignItems: 'center' + } +}); diff --git a/screens/GroceryListSearchScreen.js b/screens/GroceryListSearchScreen.js index 9fe9335..e582811 100644 --- a/screens/GroceryListSearchScreen.js +++ b/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}) { { - navigation.navigate("GroceryList", item); + navigation.navigate("GroceryList", groceryList); }} />} - keyExtractor={(item) => item._id.toString()} + keyExtractor={(groceryList) => groceryList._id.toString()} contentContainerStyle={styles.listContainer} /> @@ -68,6 +69,10 @@ function GroceryListSearchScreen({navigation, route}) { name="GroceryList" component={GroceryListSummaryScreen} /> + ) } diff --git a/screens/GroceryListSummaryScreen.js b/screens/GroceryListSummaryScreen.js index 3d20f66..b2ec336 100644 --- a/screens/GroceryListSummaryScreen.js +++ b/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: () => , - 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 ( - ( - - - - - )} - keyExtractor={item => item._id} - /> - - - - - Show this to an employee in the current store to start helping - somebody vulnerable to their groceries! - - - ); -} - -const styles = StyleSheet.create({ - imageStyle: { - height: 50, - width: 50, - }, - qrStyle: { - alignItems: 'center' - } -}); diff --git a/screens/ScannerScreen.js b/screens/ScannerScreen.js index addc0ea..33532a3 100644 --- a/screens/ScannerScreen.js +++ b/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! +