hi

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

.gitignore

@@ -0,0 +1,18 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store
+
+.vs/ProjectSettings.json
+
+.vs/slnx.sqlite

App.js

@@ -0,0 +1,113 @@
+import React, {useState, useEffect} from 'react';
+import {Text, View} from 'react-native';
+import GroceryItemSearchScreen from './screens/GroceryItemSearchScreen';
+import GroceryListSearchScreen from './screens/GroceryListSearchScreen';
+import YourGroceryListScreen from './screens/YourGroceryListScreen';
+import {NavigationContainer, DrawerActions} from "@react-navigation/native";
+import {navigationRef, isMountedRef} from "./navigation/RootNavigation";
+import CurrentStoreContext from "./contexts/CurrentStore";
+import GroceryListContext from "./contexts/GroceryList";
+import UserContext from "./contexts/User";
+import ScannerScreen from "./screens/ScannerScreen";
+import {
+  createDrawerNavigator,
+  DrawerContentScrollView,
+  DrawerItemList,
+} from "@react-navigation/drawer";
+import {Notifications} from 'expo';
+import * as Permissions from 'expo-permissions';
+import * as SecureStore from 'expo-secure-store';
+
+const Drawer = createDrawerNavigator();
+
+const userInfo = {
+  name: "John Doe",
+  email: "[email protected]",
+  phone: "(416) 132-4634",
+  timeout: "00:34",
+  role: "Worker",
+  description: "Worker for Walmart"
+};
+
+function DrawerContent(props) {
+  return(
+    <DrawerContentScrollView {...props}>
+      <View style={{flex: 1, padding: 15}}>
+        <Text style={{fontWeight: "bold", fontSize: 25}}>{userInfo.name}</Text>
+        <Text>{userInfo.email}</Text>
+        <Text>{userInfo.phone}</Text>
+        <Text>Timeout: {userInfo.timeout}</Text>
+        <Text>Role: {userInfo.role}</Text>
+        <Text>Description: {userInfo.description}</Text>
+      </View>
+      <DrawerItemList {...props} />
+    </DrawerContentScrollView>
+  );
+}
+
+export default function App() {
+  const [currentStore, setCurrentStore] = useState({name: "Walmart", id: 0});
+  const [groceryList, setGroceryList] = useState({});
+  const [user, setUser] = useState({});
+
+  useEffect(() => {
+    (async() => {
+      const pushToken = await SecureStore.getItemAsync('pushToken');
+      if (pushToken) return;
+
+      const {status} = await Permissions.askAsync(Permissions.NOTIFICATIONS);
+      if (status !== 'granted') {
+        alert('No notification permissions!');
+        return;
+      }
+      let token = await Notifications.getExpoPushTokenAsync();
+      await SecureStore.setItemAsync('pushToken', token);
+    })();
+  }, []);
+
+  React.useEffect(() => {
+    isMountedRef.current = true;
+    return () => (isMountedRef.current = false);
+  }, []);
+
+  return (
+    <CurrentStoreContext.Provider value={{currentStore, setCurrentStore}}>
+      <GroceryListContext.Provider value={{groceryList, setGroceryList}}>
+        <UserContext.Provider value={{user, setUser}}>
+          <NavigationContainer ref={navigationRef}>
+            <Drawer.Navigator drawerContent={props => <DrawerContent {...props}/>}>
+              <Drawer.Screen
+                name="GrocerySearch"
+                options={{
+                  title: "Groceries"
+                }}
+                component={GroceryItemSearchScreen}
+              />
+              <Drawer.Screen
+                name="GroceryListSearch"
+                options={{
+                  title: "Grocery Lists"
+                }}
+                component={GroceryListSearchScreen}
+              />
+              <Drawer.Screen
+                name="YourGroceryList"
+                options={{
+                  title: "Your Grocery List"
+                }}
+                component={YourGroceryListScreen}
+              />
+              <Drawer.Screen
+                name="Scanner"
+                options={{
+                  title: "Scan QR Code"
+                }}
+                component={ScannerScreen}
+              />
+            </Drawer.Navigator>
+          </NavigationContainer>
+        </UserContext.Provider>
+      </GroceryListContext.Provider>
+    </CurrentStoreContext.Provider>
+  );
+}

app.json

@@ -0,0 +1,35 @@
+{
+  "expo": {
+    "name": "Grocer",
+    "slug": "Grocer",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "androidStatusBar": {
+      "backgroundColor": "#FFFFFF",
+      "barStyle": "dark-content"
+    },
+    "description": ""
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/GroceryItemListing.js

@@ -0,0 +1,69 @@
+import React, {useContext} from 'react';
+import {Text, Dimensions, StyleSheet, TouchableOpacity} from 'react-native';
+import {Button, Card, Rating} from 'react-native-elements';
+import GroceryListContext from "../contexts/GroceryList";
+import {useNavigation} from '@react-navigation/native';
+
+export default React.memo(function GroceryItemListing({
+	_id, name, imageUrl, rating, price
+}) {
+  const {groceryList, setGroceryList} = useContext(GroceryListContext);
+  const navigation = useNavigation();
+	return (
+		<Card
+			title={name}
+			titleStyle={{flexWrap: 'wrap'}}
+			containerStyle={styles.cardContainer}
+			wrapperStyle={styles.cardWrapper}
+			imageProps={{resizeMode: 'contain'}}
+			image={{uri: imageUrl}}
+		>
+			<Rating
+				imageSize={20}
+				readonly
+				startingValue={rating}
+				style={{margin: 10}}
+			/>
+			<Button
+				title={`\$${price.toFixed(2)}`}
+				titleStyle={styles.price}
+				onPress={() => {
+					navigation.navigate("GroceryItemScreen", {_id, rating, name, imageUrl, price});
+					/*
+					groceryList[_id] = groceryList[_id] || {
+						name,
+						imageUrl,
+						price,
+						count: 0,
+					};
+					const count = groceryList[_id].count;
+					if (count < 9) {
+						const newItem = {
+							...groceryList[_id],
+							count: count + 1
+						};
+						setGroceryList({...groceryList, [_id]: newItem});
+					}
+					*/
+				}}
+			/>
+		</Card>
+	)
+});
+
+const styles = StyleSheet.create({
+  cardContainer: {
+  	width: Dimensions.get('window').width / 2 - 30,
+		flex: -1,
+		flexDirection: 'column'
+	},
+	cardWrapper: {
+		flex: -1,
+		flexDirection: 'column',
+		justifyContent: 'flex-end',
+		flexGrow: 1
+	},
+	price: {
+		fontWeight: "bold"
+	},
+});

components/GroceryList.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import {ListItem} from "react-native-elements";
+
+function GroceryList() {
+  return <ListItem
+
+  />
+}

components/ItemCounter.js

@@ -0,0 +1,60 @@
+import React, {useContext} from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import {Button, Input} from 'react-native-elements';
+import GroceryListContext from "../contexts/GroceryList";
+
+export default function ItemCounter({_id}) {
+  const {groceryList, setGroceryList} = useContext(GroceryListContext);
+
+  return (
+    <View style={styles.container}>
+      <Button
+        icon={{name: 'minus', type: 'entypo'}}
+        type='clear'
+        onPress={() => {
+          const count = groceryList[_id].count;
+          if (count > 1) {
+            const newItem = {
+              ...groceryList[_id],
+              count: count - 1
+            };
+            setGroceryList({...groceryList, [_id]: newItem})
+          }
+        }}
+      />
+      <Text style={styles.count}>{groceryList[_id].count ?? 0}</Text>
+      <Button
+        type="clear"
+        icon={{name: 'plus', type: 'entypo'}}
+        onPress={() => {
+          const count = groceryList[_id].count;
+          if (count < 9) {
+            const newItem = {
+              ...groceryList[_id],
+              count: count + 1
+            };
+            setGroceryList({...groceryList, [_id]: newItem});
+          }
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: -1,
+    flexDirection: 'row'
+  },
+  count: {
+    alignSelf: 'center',
+    padding: 10,
+    fontSize: 20,
+    fontWeight: 'bold',
+    width: 40,
+    textAlign: 'center'
+  },
+  surface: {
+    elevation: 4
+  }
+});