Feat barcode scanner

App.js

@@ -4,6 +4,7 @@ import store from "./src/store";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import HomeScreen from "./src/screens/HomeScreen";
+import BarcodeScanner from "./src/screens/BarcodeScanner";
 import Camera from "./src/screens/Camera";
 import Preview from "./src/screens/Preview";
 import Recipes from "./src/screens/Recipes";
@@ -33,6 +34,7 @@ function App() {
       <NavigationContainer>
         <Stack.Navigator screenOptions={{ headerShown: false }}>
           <Stack.Screen name="HomeScreen" component={HomeScreen} />
+          <Stack.Screen name="BarcodeScanner" component={BarcodeScanner} />
           <Stack.Screen name="Camera" component={Camera} />
           <Stack.Screen name="Preview" component={Preview} />
           <Stack.Screen name="Recipes" component={Recipes} />

package.json

@@ -39,7 +39,8 @@
     "react-native-web": "~0.11.7",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "expo-barcode-scanner": "~8.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

src/colours/index.js

@@ -0,0 +1,19 @@
+export const lightGreen = "#C9EBB4";
+export const green = "#b3d89c";
+export const darkGreen = "#70B247";
+
+export const lightBlue = "#57AFCA";
+export const blue = "#3b7080";
+export const darkBlue = "#284C57";
+
+export const lightSalmon = "#FBBCA0";
+export const salmon = "#f79f79";
+export const darkSalmon = "#E84F0E";
+
+export const lightBrown = "#DD8900";
+export const brown = "#5d3a00";
+export const darkBrown = "#3E2600";
+
+export const lightRed = "#DF6750";
+export const red = "#a53f2b";
+export const darkRed = "#6F2A1D";

src/components/Recipe/index.js

@@ -11,23 +11,7 @@ export default function Recipe(props) {
     AlfaSlabOne_400Regular,
   });
 
-  const {
-    title,
-    image,
-    source,
-    sourceUrl,
-    portion,
-    dietLabels,
-    healthLabels,
-    cautions,
-    text,
-    ingredients,
-    calories,
-    totalTime,
-    totalNutrients,
-    totalDaily,
-    totalWeight,
-  } = props;
+  const { title, image } = props;
 
   if (!fontsLoaded) {
     return <ActivityIndicator color="#a53f2bff" />;

src/screens/BarcodeScanner/index.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchBarcodeLabels } from "../../store/labels/actions";
+import { removeLabels } from "../../store/labels/actions";
+import { selectUrl } from "../../store/labels/selectors";
+import { selectMessage } from "../../store/labels/selectors";
+import {
+  Text,
+  View,
+  StyleSheet,
+  TouchableHighlight,
+  Alert,
+} from "react-native";
+import { BarCodeScanner } from "expo-barcode-scanner";
+import { blue, lightBrown, lightBlue } from "../../colours";
+import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
+
+export default function BarcodeScanner({ navigation }) {
+  const dispatch = useDispatch();
+  useFonts({ Alata_400Regular });
+  const [hasPermission, setHasPermission] = useState(null);
+  const [scanned, setScanned] = useState(false);
+  const [fontColor, setFontColor] = useState(lightBrown);
+  const imageUri = useSelector(selectUrl);
+
+  const message = useSelector(selectMessage);
+
+  if (message) {
+    Alert.alert(message);
+    dispatch(removeLabels());
+  }
+
+  useEffect(() => {
+    (async () => {
+      const { status } = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(status === "granted");
+    })();
+  }, []);
+
+  const handleBarCodeScanned = async ({ data }) => {
+    dispatch(fetchBarcodeLabels(data));
+    setScanned(true);
+  };
+
+  useEffect(() => {
+    if (scanned && imageUri) {
+      setScanned(false);
+      navigation.navigate("Preview", { imageUri });
+    }
+  }, [imageUri]);
+
+  if (hasPermission === null) {
+    return <Text>Requesting for camera permission</Text>;
+  }
+  if (hasPermission === false) {
+    return <Text>No access to camera</Text>;
+  }
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: "column",
+        backgroundColor: blue,
+        justifyContent: "space-between",
+      }}
+    >
+      <Text
+        style={{
+          textAlign: "center",
+          color: lightBrown,
+          fontFamily: "Alata_400Regular",
+          fontSize: 35,
+          marginTop: 25,
+        }}
+      >
+        Aim at the barcode!
+      </Text>
+      <BarCodeScanner
+        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
+        style={StyleSheet.absoluteFillObject}
+      />
+
+      {scanned && (
+        <TouchableHighlight
+          style={{ alignSelf: "center", marginBottom: 25 }}
+          activeOpacity={1}
+          underlayColor={blue}
+          onShowUnderlay={() => setFontColor(lightBlue)}
+          onPress={() => {
+            setFontColor(lightBrown);
+            setScanned(false);
+          }}
+        >
+          <Text
+            style={{
+              textAlign: "center",
+              color: fontColor,
+              fontSize: 35,
+              fontFamily: "Alata_400Regular",
+            }}
+          >
+            Tap to Scan Again
+          </Text>
+        </TouchableHighlight>
+      )}
+    </View>
+  );
+}

src/screens/Camera/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Text, View, TouchableOpacity } from "react-native";
 import { Camera } from "expo-camera";
 import { useDispatch } from "react-redux";
-import { fetchLabels } from "../../store/labels/actions";
+import { fetchImageLabels } from "../../store/labels/actions";
 import * as firebase from "firebase";
 import Loading from "../../components/Loading";
 
@@ -48,10 +48,10 @@ export default function App({ navigation }) {
               imageRef
                 .getDownloadURL()
                 .then((url) => {
-                  dispatch(fetchLabels(url));
+                  dispatch(fetchImageLabels(url));
                 })
                 .then(() => setLoading(false))
-                .then(() => navigation.navigate("Preview", imageUri))
+                .then(() => navigation.navigate("Preview", { imageUri }))
                 .catch((e) =>
                   console.log("getting downloadURL of image error", e.message)
                 );

src/screens/HomeScreen/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, View, Button } from "react-native";
+import { View } from "react-native";
 import HomeButton from "../../components/HomeButton";
 
 import { AppLoading } from "expo";
@@ -35,7 +35,7 @@ export default function HomeScreen({ navigation }) {
         <HomeButton
           style={{ justifyContent: "top" }}
           title="Scan Barcode"
-          onPress={() => navigation.navigate("HomeScreen")}
+          onPress={() => navigation.navigate("BarcodeScanner")}
           backgroundColor="#3b7080ff"
           color="#b3d89cff"
           font="AlfaSlabOne_400Regular"

src/screens/RecipeDetails/index.js

@@ -5,7 +5,6 @@ import {
   Image,
   ScrollView,
   StyleSheet,
-  ActivityIndicator,
   TouchableWithoutFeedback,
   ImageBackground,
 } from "react-native";
@@ -26,14 +25,14 @@ const blue = "#3b7080ff";
 const lightBlue = "#57AFCA";
 const salmon = "#f79f79ff";
 
-export default function RecipeDetails({ route, navigation }) {
+export default function RecipeDetails({ route }) {
   const item = route.params;
   const [details, setDetails] = useState([item]);
   const [check, setCheck] = useState(false);
   const [ingredientLines, setIngredientLines] = useState({});
   const [moreInfo, setMoreInfo] = useState(false);
 
-  const [fontsLoaded] = useFonts({
+  useFonts({
     AlfaSlabOne_400Regular,
     Alata_400Regular,
   });
@@ -42,34 +41,13 @@ export default function RecipeDetails({ route, navigation }) {
     const items = item.ingredients.map((ingredient) => {
       return ingredient.text;
     });
-
-    console.log("what is items here?", items);
-
     const object = items.reduce(
       (a, key) => Object.assign(a, { [key]: false }),
       {}
     );
-
-    console.log("what is obejct", object);
-
     setIngredientLines(object);
-
-    // const what = items.map((i) => {
-    //   if(Object.prototype.hasOwnProperty.call(object, i)){
-
-    //   }
-    // });
-
-    // console.log("what is whatttttttt", what);
-
-    // for (const [key, value] of Object.entries(object)) {
-    //   setIngredientLines([...ingredientLines, { [key]: value }]);
-    //   console.log(`what is going on here! ${key}: ${value}`);
-    // }
   }, [item]);
 
-  console.log("what is ingredientlines", ingredientLines);
-
   return (
     <View style={{ flex: 1, backgroundColor: "#b3d89cff" }}>
       {details.map((item) => {
@@ -254,16 +232,12 @@ export default function RecipeDetails({ route, navigation }) {
                       : require("../../images/placeholder.png");
                     const thisIngredientLine = ingredient.text;
 
-                    const thisthing = ingredientLines[thisIngredientLine];
-                    console.log("what is thisthing", thisthing);
-
                     return (
                       <TouchableWithoutFeedback
                         key={
                           ingredient.text + ingredient.weight + ingredient.image
                         }
                         onPress={() => {
-                          console.log("pressed");
                           setCheck(!check);
                           ingredientLines[thisIngredientLine] === false
                             ? setIngredientLines({

src/screens/Recipes/index.js

@@ -5,7 +5,7 @@ import { selectRecipes } from "../../store/recipes/selectors";
 import Recipe from "../../components/Recipe";
 import Loading from "../../components/Loading";
 
-export default function Recipes({ route, navigation }) {
+export default function Recipes({ navigation }) {
   const recipes = useSelector(selectRecipes);
 
   if (!recipes) {