From 7ee891b90d8335464f18a8a5b56643bce86942c8 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Mon, 17 Aug 2020 10:17:18 +0200
Subject: [PATCH 01/10] add expo's BarCodeScanner to new BarcodeScanner screen,
 navigate to it from homescreen onPress 'Scan Barcode'

---
 App.js                              |  2 ++
 package-lock.json                   |  9 ++++++
 package.json                        |  3 +-
 src/screens/BarcodeScanner/index.js | 46 +++++++++++++++++++++++++++++
 src/screens/HomeScreen/index.js     |  2 +-
 5 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/screens/BarcodeScanner/index.js

diff --git a/App.js b/App.js
index d174bdc..c0236ed 100644
--- a/App.js
+++ b/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} />
diff --git a/package-lock.json b/package-lock.json
index 0cadd27..1a9f37f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3495,6 +3495,15 @@
         "url-parse": "^1.4.4"
       }
     },
+    "expo-barcode-scanner": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/expo-barcode-scanner/-/expo-barcode-scanner-8.2.1.tgz",
+      "integrity": "sha512-cmsXLoWThqYtfWpsFOg7KCLgJsYOHbj9LG1wpFG86xSdJlQrfZRQ1GzrA4eT06rp8FdGs9nLJPh8/10AH9EZoA==",
+      "requires": {
+        "lodash": "^4.6.0",
+        "prop-types": "^15.6.0"
+      }
+    },
     "expo-camera": {
       "version": "8.3.1",
       "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-8.3.1.tgz",
diff --git a/package.json b/package.json
index c4849c4..f767d88 100644
--- a/package.json
+++ b/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",
diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
new file mode 100644
index 0000000..a7153a2
--- /dev/null
+++ b/src/screens/BarcodeScanner/index.js
@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import { Text, View, StyleSheet, Button } from "react-native";
+import { BarCodeScanner } from "expo-barcode-scanner";
+
+export default function BarcodeScanner() {
+  const [hasPermission, setHasPermission] = useState(null);
+  const [scanned, setScanned] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      const { status } = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(status === "granted");
+    })();
+  }, []);
+
+  const handleBarCodeScanned = ({ type, data }) => {
+    setScanned(true);
+    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
+  };
+
+  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",
+        justifyContent: "flex-end",
+      }}
+    >
+      <BarCodeScanner
+        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
+        style={StyleSheet.absoluteFillObject}
+      />
+
+      {scanned && (
+        <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />
+      )}
+    </View>
+  );
+}
diff --git a/src/screens/HomeScreen/index.js b/src/screens/HomeScreen/index.js
index ce0f29b..cd74463 100644
--- a/src/screens/HomeScreen/index.js
+++ b/src/screens/HomeScreen/index.js
@@ -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"

From a4a622de1b9052dfba572f0b5bd2b686b5b17c50 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Mon, 17 Aug 2020 12:23:22 +0200
Subject: [PATCH 02/10] add colours in separate folder to use globally, add
 colour and text to barcodeScanner screen

---
 src/colours/index.js                | 19 +++++++++++++++++++
 src/screens/BarcodeScanner/index.js | 11 ++++++++++-
 src/store/labels/actions.js         |  2 +-
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/colours/index.js

diff --git a/src/colours/index.js b/src/colours/index.js
new file mode 100644
index 0000000..56b0f78
--- /dev/null
+++ b/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";
diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index a7153a2..5330670 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Text, View, StyleSheet, Button } from "react-native";
 import { BarCodeScanner } from "expo-barcode-scanner";
+import { blue, lightBrown } from "../../colours";
 
 export default function BarcodeScanner() {
   const [hasPermission, setHasPermission] = useState(null);
@@ -30,9 +31,17 @@ export default function BarcodeScanner() {
       style={{
         flex: 1,
         flexDirection: "column",
-        justifyContent: "flex-end",
+        backgroundColor: blue,
       }}
     >
+      <Text
+        style={{
+          textAlign: "center",
+          color: lightBrown,
+        }}
+      >
+        Aim at the barcode!
+      </Text>
       <BarCodeScanner
         onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
         style={StyleSheet.absoluteFillObject}
diff --git a/src/store/labels/actions.js b/src/store/labels/actions.js
index 7dc958d..cadea92 100644
--- a/src/store/labels/actions.js
+++ b/src/store/labels/actions.js
@@ -11,7 +11,7 @@ export const setLabels = (labels) => ({
 
 export const fetchLabels = (imageUrl) => {
   return async (dispatch, getState) => {
-    const response = await axios.post(`${server}/analyse`, {
+    const response = await axios.post(`${server}/analyse/image`, {
       imageUrl,
     });
     dispatch(setLabels(response.data));

From 6b20faebbd0efce5bd619bc7a9271c5ee95796f0 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Mon, 17 Aug 2020 13:35:12 +0200
Subject: [PATCH 03/10] change button into touchableHighlight + text elements,
 setFontColor onPress to lightBlue

---
 src/screens/BarcodeScanner/index.js | 46 +++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index 5330670..f650405 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -1,11 +1,20 @@
 import React, { useState, useEffect } from "react";
-import { Text, View, StyleSheet, Button } from "react-native";
+import {
+  Text,
+  View,
+  StyleSheet,
+  Button,
+  TouchableHighlight,
+} from "react-native";
 import { BarCodeScanner } from "expo-barcode-scanner";
-import { blue, lightBrown } from "../../colours";
+import { blue, lightBrown, lightBlue } from "../../colours";
+import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
 
 export default function BarcodeScanner() {
+  useFonts({ Alata_400Regular });
   const [hasPermission, setHasPermission] = useState(null);
   const [scanned, setScanned] = useState(false);
+  const [fontColor, setFontColor] = useState(lightBrown);
 
   useEffect(() => {
     (async () => {
@@ -26,18 +35,24 @@ export default function BarcodeScanner() {
     return <Text>No access to camera</Text>;
   }
 
+  console.log("fontcolor", fontColor);
+
   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!
@@ -48,7 +63,32 @@ export default function BarcodeScanner() {
       />
 
       {scanned && (
-        <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />
+        <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>
+        // <Button
+        //   style={{ selfAlign: "center", width: "50%" }}
+        //   title={"Tap to Scan Again"}
+        //   onPress={() => setScanned(false)}
+        // />
       )}
     </View>
   );

From 97c2518b40b920cd39533c96921436d32397f54a Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Mon, 17 Aug 2020 14:18:08 +0200
Subject: [PATCH 04/10] use store/labels for fetchBarcodeLabels, send request
 to analyse/barcode/:barcode, dispatch to reducer

---
 src/screens/BarcodeScanner/index.js |  8 +++++---
 src/screens/Camera/index.js         |  4 ++--
 src/screens/preview/index.js        |  1 +
 src/store/labels/actions.js         | 12 +++++++++++-
 src/store/labels/selectors.js       |  2 +-
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index f650405..7ddf907 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchBarcodeLabels } from "../../store/labels/actions";
 import {
   Text,
   View,
@@ -11,6 +13,7 @@ import { blue, lightBrown, lightBlue } from "../../colours";
 import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
 
 export default function BarcodeScanner() {
+  const dispatch = useDispatch();
   useFonts({ Alata_400Regular });
   const [hasPermission, setHasPermission] = useState(null);
   const [scanned, setScanned] = useState(false);
@@ -24,8 +27,9 @@ export default function BarcodeScanner() {
   }, []);
 
   const handleBarCodeScanned = ({ type, data }) => {
+    console.log(`type: ${type} with barcode number: ${data}`);
     setScanned(true);
-    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
+    dispatch(fetchBarcodeLabels(data));
   };
 
   if (hasPermission === null) {
@@ -35,8 +39,6 @@ export default function BarcodeScanner() {
     return <Text>No access to camera</Text>;
   }
 
-  console.log("fontcolor", fontColor);
-
   return (
     <View
       style={{
diff --git a/src/screens/Camera/index.js b/src/screens/Camera/index.js
index a457a18..f5bd286 100644
--- a/src/screens/Camera/index.js
+++ b/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,7 +48,7 @@ export default function App({ navigation }) {
               imageRef
                 .getDownloadURL()
                 .then((url) => {
-                  dispatch(fetchLabels(url));
+                  dispatch(fetchImageLabels(url));
                 })
                 .then(() => setLoading(false))
                 .then(() => navigation.navigate("Preview", imageUri))
diff --git a/src/screens/preview/index.js b/src/screens/preview/index.js
index 058ccfc..308fe04 100644
--- a/src/screens/preview/index.js
+++ b/src/screens/preview/index.js
@@ -16,6 +16,7 @@ export default function index({ route, navigation }) {
   const labels = useSelector(selectLabels);
   const dispatch = useDispatch();
   const [foodLabel, setFoodLabel] = useState("");
+  console.log("are the labels in preview??", labels);
 
   function fetchRecipes(event, foodLabel) {
     event.persist();
diff --git a/src/store/labels/actions.js b/src/store/labels/actions.js
index cadea92..483d3ff 100644
--- a/src/store/labels/actions.js
+++ b/src/store/labels/actions.js
@@ -9,11 +9,21 @@ export const setLabels = (labels) => ({
   payload: labels,
 });
 
-export const fetchLabels = (imageUrl) => {
+export const fetchImageLabels = (imageUrl) => {
   return async (dispatch, getState) => {
     const response = await axios.post(`${server}/analyse/image`, {
       imageUrl,
     });
+    console.log("what is in the response?", response.data);
     dispatch(setLabels(response.data));
   };
 };
+
+export const fetchBarcodeLabels = (barcode) => {
+  console.log("what is barcode in action?", barcode);
+  return async (dispatch, getState) => {
+    const response = await axios.get(`${server}/analyse/barcode/${barcode}`);
+    dispatch(setLabels(response.data));
+    console.log("what is in the response?", response.data);
+  };
+};
diff --git a/src/store/labels/selectors.js b/src/store/labels/selectors.js
index c20d0be..d895354 100644
--- a/src/store/labels/selectors.js
+++ b/src/store/labels/selectors.js
@@ -1 +1 @@
-export const selectLabels = (state) => state.labels.imageLabel;
+export const selectLabels = (state) => state.labels.labels;

From 9c470da9e0c36ef833d2c425a287f7a0d6076b99 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Mon, 17 Aug 2020 15:55:38 +0200
Subject: [PATCH 05/10] select url from barcodeScanner item in store, go to
 preview, still setting up navigation functionality

---
 src/screens/BarcodeScanner/index.js | 25 +++++++++++++++++++--
 src/screens/preview/index.js        | 35 ++++++++++++++++++++++++-----
 src/store/labels/actions.js         |  8 ++++---
 src/store/labels/selectors.js       |  2 ++
 4 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index 7ddf907..c94c02d 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchBarcodeLabels } from "../../store/labels/actions";
+import { selectUrl } from "../../store/labels/selectors";
 import {
   Text,
   View,
@@ -12,13 +13,27 @@ 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() {
+export default function BarcodeScanner({ route, navigation }) {
+  const imageUri = useSelector(selectUrl);
+  console.log("is the url from barcode image here?", imageUri);
+  const checkUrl = imageUri && imageUri.split(":");
+  console.log("what is checkUrl", checkUrl);
+
+  const back = route.params;
+  console.log("what is route.parms", route.params);
+  console.log("what is back", back);
   const dispatch = useDispatch();
   useFonts({ Alata_400Regular });
   const [hasPermission, setHasPermission] = useState(null);
   const [scanned, setScanned] = useState(false);
   const [fontColor, setFontColor] = useState(lightBrown);
 
+  useEffect(() => {
+    setScanned(false);
+  }, [back]);
+
+  console.log("what is scanned?", scanned);
+
   useEffect(() => {
     (async () => {
       const { status } = await BarCodeScanner.requestPermissionsAsync();
@@ -26,12 +41,18 @@ export default function BarcodeScanner() {
     })();
   }, []);
 
-  const handleBarCodeScanned = ({ type, data }) => {
+  const handleBarCodeScanned = async ({ type, data }) => {
     console.log(`type: ${type} with barcode number: ${data}`);
     setScanned(true);
     dispatch(fetchBarcodeLabels(data));
   };
 
+  useEffect(() => {
+    if (checkUrl && checkUrl[0] === "https") {
+      navigation.navigate("Preview", imageUri);
+    }
+  }, [imageUri]);
+
   if (hasPermission === null) {
     return <Text>Requesting for camera permission</Text>;
   }
diff --git a/src/screens/preview/index.js b/src/screens/preview/index.js
index 308fe04..3f342d2 100644
--- a/src/screens/preview/index.js
+++ b/src/screens/preview/index.js
@@ -10,13 +10,14 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import { getRecipes } from "../../store/recipes/actions";
 import { selectLabels } from "../../store/labels/selectors";
+import { selectNameOfProduct } from "../../store/labels/selectors";
 
 export default function index({ route, navigation }) {
   const imageUri = route.params;
   const labels = useSelector(selectLabels);
+  const nameOfProduct = useSelector(selectNameOfProduct);
   const dispatch = useDispatch();
   const [foodLabel, setFoodLabel] = useState("");
-  console.log("are the labels in preview??", labels);
 
   function fetchRecipes(event, foodLabel) {
     event.persist();
@@ -24,16 +25,22 @@ export default function index({ route, navigation }) {
     navigation.navigate("Recipes");
   }
 
+  const back = "false";
+
   return (
     <View
       style={{
         flex: 1,
       }}
     >
-      <Image
-        style={{ width: "100%", height: "50%" }}
-        source={{ uri: imageUri }}
-      />
+      {!imageUri ? (
+        <Text>This is the name of the product: {nameOfProduct}</Text>
+      ) : (
+        <Image
+          style={{ width: "100%", height: "50%" }}
+          source={{ uri: imageUri }}
+        />
+      )}
       <View
         style={{
           width: "100%",
@@ -82,7 +89,23 @@ export default function index({ route, navigation }) {
         >
           <Button
             title="TRY AGAIN"
-            onPress={() => navigation.navigate("Camera")}
+            onPress={() => {
+              if (nameOfProduct) {
+                navigation.navigate("BarcodeScanner", back);
+              } else {
+                navigation.navigate("Camera");
+              }
+            }}
+          />
+          <Button
+            title={nameOfProduct ? "Try Camera" : "Try Barcode Scanner"}
+            onPress={() => {
+              if (nameOfProduct) {
+                navigation.navigate("Camera");
+              } else {
+                navigation.navigate("BarcodeScanner");
+              }
+            }}
           />
           <Button
             title="NILES FETCH RECIPES!"
diff --git a/src/store/labels/actions.js b/src/store/labels/actions.js
index 483d3ff..1694765 100644
--- a/src/store/labels/actions.js
+++ b/src/store/labels/actions.js
@@ -14,16 +14,18 @@ export const fetchImageLabels = (imageUrl) => {
     const response = await axios.post(`${server}/analyse/image`, {
       imageUrl,
     });
-    console.log("what is in the response?", response.data);
+    console.log("what is responds.data for imagelabels", response.data);
+
     dispatch(setLabels(response.data));
   };
 };
 
 export const fetchBarcodeLabels = (barcode) => {
-  console.log("what is barcode in action?", barcode);
+  console.log("what is the barcode in action", barcode);
   return async (dispatch, getState) => {
     const response = await axios.get(`${server}/analyse/barcode/${barcode}`);
+    console.log("what is response", response);
+
     dispatch(setLabels(response.data));
-    console.log("what is in the response?", response.data);
   };
 };
diff --git a/src/store/labels/selectors.js b/src/store/labels/selectors.js
index d895354..b4d2cfa 100644
--- a/src/store/labels/selectors.js
+++ b/src/store/labels/selectors.js
@@ -1 +1,3 @@
 export const selectLabels = (state) => state.labels.labels;
+export const selectNameOfProduct = (state) => state.labels.name;
+export const selectUrl = (state) => state.labels.url;

From 49b0493b1845440f178ad669f31cd52aed7b7852 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Mon, 17 Aug 2020 16:11:41 +0200
Subject: [PATCH 06/10] imageUri ? setScanned to false and navigate to preview,
 also cleaned up files

---
 src/screens/BarcodeScanner/index.js | 17 +++--------------
 src/screens/preview/index.js        |  4 +---
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index c94c02d..c8d6b30 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -13,27 +13,15 @@ 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({ route, navigation }) {
+export default function BarcodeScanner({ navigation }) {
   const imageUri = useSelector(selectUrl);
-  console.log("is the url from barcode image here?", imageUri);
   const checkUrl = imageUri && imageUri.split(":");
-  console.log("what is checkUrl", checkUrl);
-
-  const back = route.params;
-  console.log("what is route.parms", route.params);
-  console.log("what is back", back);
   const dispatch = useDispatch();
   useFonts({ Alata_400Regular });
   const [hasPermission, setHasPermission] = useState(null);
   const [scanned, setScanned] = useState(false);
   const [fontColor, setFontColor] = useState(lightBrown);
 
-  useEffect(() => {
-    setScanned(false);
-  }, [back]);
-
-  console.log("what is scanned?", scanned);
-
   useEffect(() => {
     (async () => {
       const { status } = await BarCodeScanner.requestPermissionsAsync();
@@ -48,7 +36,8 @@ export default function BarcodeScanner({ route, navigation }) {
   };
 
   useEffect(() => {
-    if (checkUrl && checkUrl[0] === "https") {
+    if (scanned && checkUrl && checkUrl[0] === "https") {
+      setScanned(false);
       navigation.navigate("Preview", imageUri);
     }
   }, [imageUri]);
diff --git a/src/screens/preview/index.js b/src/screens/preview/index.js
index 3f342d2..a810fef 100644
--- a/src/screens/preview/index.js
+++ b/src/screens/preview/index.js
@@ -25,8 +25,6 @@ export default function index({ route, navigation }) {
     navigation.navigate("Recipes");
   }
 
-  const back = "false";
-
   return (
     <View
       style={{
@@ -91,7 +89,7 @@ export default function index({ route, navigation }) {
             title="TRY AGAIN"
             onPress={() => {
               if (nameOfProduct) {
-                navigation.navigate("BarcodeScanner", back);
+                navigation.navigate("BarcodeScanner");
               } else {
                 navigation.navigate("Camera");
               }

From 40d2f9796afa79534ed3926db48d3c8d8fd3f780 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Mon, 17 Aug 2020 18:04:38 +0200
Subject: [PATCH 07/10] deconstruct route.params, delete content of store
 labels onPress

---
 src/screens/BarcodeScanner/index.js |  8 +++++++-
 src/screens/Camera/index.js         |  2 +-
 src/screens/preview/index.js        | 28 +++++++++++++++++++++++++---
 src/store/labels/actions.js         |  8 +++++---
 src/store/labels/reducer.js         |  3 +++
 5 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index c8d6b30..3a28fe1 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -15,6 +15,7 @@ import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
 
 export default function BarcodeScanner({ navigation }) {
   const imageUri = useSelector(selectUrl);
+  console.log("is the imageUri here in barcodescanner?", imageUri);
   const checkUrl = imageUri && imageUri.split(":");
   const dispatch = useDispatch();
   useFonts({ Alata_400Regular });
@@ -36,9 +37,14 @@ export default function BarcodeScanner({ navigation }) {
   };
 
   useEffect(() => {
+    console.log("what is checkURL??", checkUrl);
     if (scanned && checkUrl && checkUrl[0] === "https") {
       setScanned(false);
-      navigation.navigate("Preview", imageUri);
+      console.log(
+        "what do we have here before navigating to preview?",
+        imageUri
+      );
+      navigation.navigate("Preview", { imageUri });
     }
   }, [imageUri]);
 
diff --git a/src/screens/Camera/index.js b/src/screens/Camera/index.js
index f5bd286..86627a8 100644
--- a/src/screens/Camera/index.js
+++ b/src/screens/Camera/index.js
@@ -51,7 +51,7 @@ export default function App({ navigation }) {
                   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)
                 );
diff --git a/src/screens/preview/index.js b/src/screens/preview/index.js
index a810fef..900c0da 100644
--- a/src/screens/preview/index.js
+++ b/src/screens/preview/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Text,
   View,
@@ -9,13 +9,23 @@ import {
 } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 import { getRecipes } from "../../store/recipes/actions";
+import { removeLabels } from "../../store/labels/actions";
 import { selectLabels } from "../../store/labels/selectors";
 import { selectNameOfProduct } from "../../store/labels/selectors";
+import { selectUrl } from "../../store/labels/selectors";
 
 export default function index({ route, navigation }) {
-  const imageUri = route.params;
+  const { imageUri } = route.params || {};
+  console.log("what is route.params", route.params);
+  console.log("what is imageURI in preview???", imageUri);
   const labels = useSelector(selectLabels);
   const nameOfProduct = useSelector(selectNameOfProduct);
+  const urlll = useSelector(selectUrl);
+
+  console.log("labels", labels);
+  console.log("nameOfProduct", nameOfProduct);
+  console.log("urlll", urlll);
+
   const dispatch = useDispatch();
   const [foodLabel, setFoodLabel] = useState("");
 
@@ -36,7 +46,11 @@ export default function index({ route, navigation }) {
       ) : (
         <Image
           style={{ width: "100%", height: "50%" }}
-          source={{ uri: imageUri }}
+          source={
+            imageUri === {}
+              ? require("../../images/placeholder.png")
+              : { uri: imageUri }
+          }
         />
       )}
       <View
@@ -89,8 +103,12 @@ export default function index({ route, navigation }) {
             title="TRY AGAIN"
             onPress={() => {
               if (nameOfProduct) {
+                setFoodLabel("");
+                dispatch(removeLabels());
                 navigation.navigate("BarcodeScanner");
               } else {
+                setFoodLabel("");
+                dispatch(removeLabels());
                 navigation.navigate("Camera");
               }
             }}
@@ -99,8 +117,12 @@ export default function index({ route, navigation }) {
             title={nameOfProduct ? "Try Camera" : "Try Barcode Scanner"}
             onPress={() => {
               if (nameOfProduct) {
+                setFoodLabel("");
+                dispatch(removeLabels());
                 navigation.navigate("Camera");
               } else {
+                setFoodLabel("");
+                dispatch(removeLabels());
                 navigation.navigate("BarcodeScanner");
               }
             }}
diff --git a/src/store/labels/actions.js b/src/store/labels/actions.js
index 1694765..3570153 100644
--- a/src/store/labels/actions.js
+++ b/src/store/labels/actions.js
@@ -1,6 +1,7 @@
 import axios from "axios";
 
 export const FETCH_LABELS_SUCCESS = "FETCH_LABELS_SUCCESS";
+export const REMOVE_LABELS_SUCCESS = "REMOVE_LABELS_SUCCESS";
 
 const server = "http://192.168.178.87:4000";
 
@@ -9,22 +10,23 @@ export const setLabels = (labels) => ({
   payload: labels,
 });
 
+export const removeLabels = () => ({
+  type: REMOVE_LABELS_SUCCESS,
+});
+
 export const fetchImageLabels = (imageUrl) => {
   return async (dispatch, getState) => {
     const response = await axios.post(`${server}/analyse/image`, {
       imageUrl,
     });
-    console.log("what is responds.data for imagelabels", response.data);
 
     dispatch(setLabels(response.data));
   };
 };
 
 export const fetchBarcodeLabels = (barcode) => {
-  console.log("what is the barcode in action", barcode);
   return async (dispatch, getState) => {
     const response = await axios.get(`${server}/analyse/barcode/${barcode}`);
-    console.log("what is response", response);
 
     dispatch(setLabels(response.data));
   };
diff --git a/src/store/labels/reducer.js b/src/store/labels/reducer.js
index 2625ae9..d19a865 100644
--- a/src/store/labels/reducer.js
+++ b/src/store/labels/reducer.js
@@ -1,9 +1,12 @@
 import { FETCH_LABELS_SUCCESS } from "./actions";
+import { REMOVE_LABELS_SUCCESS } from "./actions";
 
 const initialState = {};
 
 export default (state = initialState, action) => {
   switch (action.type) {
+    case REMOVE_LABELS_SUCCESS:
+      return initialState;
     case FETCH_LABELS_SUCCESS:
       return { ...state, ...action.payload };
 

From ebf2608646319cdf76a637379b1c99d71aa198f2 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Tue, 18 Aug 2020 10:40:22 +0200
Subject: [PATCH 08/10] clean up logs and unnecessary code

---
 src/components/Recipe/index.js      | 18 +----------------
 src/screens/BarcodeScanner/index.js | 27 ++++----------------------
 src/screens/HomeScreen/index.js     |  2 +-
 src/screens/RecipeDetails/index.js  | 30 ++---------------------------
 src/screens/Recipes/index.js        |  2 +-
 src/screens/preview/index.js        | 10 +---------
 6 files changed, 10 insertions(+), 79 deletions(-)

diff --git a/src/components/Recipe/index.js b/src/components/Recipe/index.js
index 9a7be27..7036708 100644
--- a/src/components/Recipe/index.js
+++ b/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" />;
diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index 3a28fe1..f142b37 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -2,26 +2,18 @@ import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchBarcodeLabels } from "../../store/labels/actions";
 import { selectUrl } from "../../store/labels/selectors";
-import {
-  Text,
-  View,
-  StyleSheet,
-  Button,
-  TouchableHighlight,
-} from "react-native";
+import { Text, View, StyleSheet, TouchableHighlight } 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 imageUri = useSelector(selectUrl);
-  console.log("is the imageUri here in barcodescanner?", imageUri);
-  const checkUrl = imageUri && imageUri.split(":");
   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);
 
   useEffect(() => {
     (async () => {
@@ -30,20 +22,14 @@ export default function BarcodeScanner({ navigation }) {
     })();
   }, []);
 
-  const handleBarCodeScanned = async ({ type, data }) => {
-    console.log(`type: ${type} with barcode number: ${data}`);
+  const handleBarCodeScanned = async ({ data }) => {
     setScanned(true);
     dispatch(fetchBarcodeLabels(data));
   };
 
   useEffect(() => {
-    console.log("what is checkURL??", checkUrl);
-    if (scanned && checkUrl && checkUrl[0] === "https") {
+    if (scanned && imageUri) {
       setScanned(false);
-      console.log(
-        "what do we have here before navigating to preview?",
-        imageUri
-      );
       navigation.navigate("Preview", { imageUri });
     }
   }, [imageUri]);
@@ -102,11 +88,6 @@ export default function BarcodeScanner({ navigation }) {
             Tap to Scan Again
           </Text>
         </TouchableHighlight>
-        // <Button
-        //   style={{ selfAlign: "center", width: "50%" }}
-        //   title={"Tap to Scan Again"}
-        //   onPress={() => setScanned(false)}
-        // />
       )}
     </View>
   );
diff --git a/src/screens/HomeScreen/index.js b/src/screens/HomeScreen/index.js
index cd74463..a377fb3 100644
--- a/src/screens/HomeScreen/index.js
+++ b/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";
diff --git a/src/screens/RecipeDetails/index.js b/src/screens/RecipeDetails/index.js
index e97fddc..d5b20c3 100644
--- a/src/screens/RecipeDetails/index.js
+++ b/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({
diff --git a/src/screens/Recipes/index.js b/src/screens/Recipes/index.js
index 19b9dbe..4af95d2 100644
--- a/src/screens/Recipes/index.js
+++ b/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) {
diff --git a/src/screens/preview/index.js b/src/screens/preview/index.js
index 900c0da..41f1511 100644
--- a/src/screens/preview/index.js
+++ b/src/screens/preview/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import {
   Text,
   View,
@@ -12,19 +12,11 @@ import { getRecipes } from "../../store/recipes/actions";
 import { removeLabels } from "../../store/labels/actions";
 import { selectLabels } from "../../store/labels/selectors";
 import { selectNameOfProduct } from "../../store/labels/selectors";
-import { selectUrl } from "../../store/labels/selectors";
 
 export default function index({ route, navigation }) {
   const { imageUri } = route.params || {};
-  console.log("what is route.params", route.params);
-  console.log("what is imageURI in preview???", imageUri);
   const labels = useSelector(selectLabels);
   const nameOfProduct = useSelector(selectNameOfProduct);
-  const urlll = useSelector(selectUrl);
-
-  console.log("labels", labels);
-  console.log("nameOfProduct", nameOfProduct);
-  console.log("urlll", urlll);
 
   const dispatch = useDispatch();
   const [foodLabel, setFoodLabel] = useState("");

From 2fb046712ed89dc7dac395b8b6dec988be687c0f Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Tue, 18 Aug 2020 12:12:21 +0200
Subject: [PATCH 09/10] add removeRecipes in store/recipes actions/reducer, add
 selector selectMessage, add validations and loading screen in preview

---
 src/screens/BarcodeScanner/index.js | 19 +++++++++++++++++--
 src/screens/preview/index.js        | 26 ++++++++++++++++++++++++--
 src/store/labels/actions.js         |  1 -
 src/store/labels/selectors.js       |  1 +
 src/store/recipes/actions.js        |  5 +++++
 src/store/recipes/reducer.js        |  5 ++++-
 6 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
index f142b37..dce64c4 100644
--- a/src/screens/BarcodeScanner/index.js
+++ b/src/screens/BarcodeScanner/index.js
@@ -1,8 +1,16 @@
 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 { Text, View, StyleSheet, TouchableHighlight } from "react-native";
+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";
@@ -15,6 +23,13 @@ export default function BarcodeScanner({ navigation }) {
   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();
@@ -23,8 +38,8 @@ export default function BarcodeScanner({ navigation }) {
   }, []);
 
   const handleBarCodeScanned = async ({ data }) => {
-    setScanned(true);
     dispatch(fetchBarcodeLabels(data));
+    setScanned(true);
   };
 
   useEffect(() => {
diff --git a/src/screens/preview/index.js b/src/screens/preview/index.js
index 41f1511..412a3c9 100644
--- a/src/screens/preview/index.js
+++ b/src/screens/preview/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Text,
   View,
@@ -6,12 +6,16 @@ import {
   Image,
   ScrollView,
   ActivityIndicator,
+  Alert,
 } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 import { getRecipes } from "../../store/recipes/actions";
 import { removeLabels } from "../../store/labels/actions";
+import { removeRecipes } from "../../store/recipes/actions";
 import { selectLabels } from "../../store/labels/selectors";
 import { selectNameOfProduct } from "../../store/labels/selectors";
+import { selectRecipes } from "../../store/recipes/selectors";
+import Loading from "../../components/Loading";
 
 export default function index({ route, navigation }) {
   const { imageUri } = route.params || {};
@@ -20,11 +24,29 @@ export default function index({ route, navigation }) {
 
   const dispatch = useDispatch();
   const [foodLabel, setFoodLabel] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const recipes = useSelector(selectRecipes);
 
   function fetchRecipes(event, foodLabel) {
     event.persist();
+    setLoading(true);
     dispatch(getRecipes(foodLabel));
-    navigation.navigate("Recipes");
+  }
+
+  useEffect(() => {
+    if (recipes && recipes.message) {
+      setLoading(false);
+      Alert.alert(recipes.message);
+      dispatch(removeRecipes());
+    } else if (recipes) {
+      setLoading(false);
+      navigation.navigate("Recipes");
+    }
+  }, [recipes]);
+
+  if (loading) {
+    return <Loading />;
   }
 
   return (
diff --git a/src/store/labels/actions.js b/src/store/labels/actions.js
index 3570153..44f46a9 100644
--- a/src/store/labels/actions.js
+++ b/src/store/labels/actions.js
@@ -27,7 +27,6 @@ export const fetchImageLabels = (imageUrl) => {
 export const fetchBarcodeLabels = (barcode) => {
   return async (dispatch, getState) => {
     const response = await axios.get(`${server}/analyse/barcode/${barcode}`);
-
     dispatch(setLabels(response.data));
   };
 };
diff --git a/src/store/labels/selectors.js b/src/store/labels/selectors.js
index b4d2cfa..943c539 100644
--- a/src/store/labels/selectors.js
+++ b/src/store/labels/selectors.js
@@ -1,3 +1,4 @@
 export const selectLabels = (state) => state.labels.labels;
 export const selectNameOfProduct = (state) => state.labels.name;
 export const selectUrl = (state) => state.labels.url;
+export const selectMessage = (state) => state.labels.message;
diff --git a/src/store/recipes/actions.js b/src/store/recipes/actions.js
index 0d73935..d066b22 100644
--- a/src/store/recipes/actions.js
+++ b/src/store/recipes/actions.js
@@ -1,6 +1,7 @@
 import axios from "axios";
 
 export const FETCH_RECIPES_SUCCESS = "FETCH_RECIPES_SUCCESS";
+export const REMOVE_RECIPES_SUCCESS = "REMOVE_RECIPES_SUCCESS";
 
 const server = "http://192.168.178.87:4000";
 
@@ -9,6 +10,10 @@ export const fetchRecipes = (recipes) => ({
   payload: recipes,
 });
 
+export const removeRecipes = () => ({
+  type: REMOVE_RECIPES_SUCCESS,
+});
+
 export const getRecipes = (foodLabel) => {
   return async (dispatch, getState) => {
     const response = await axios.post(`${server}/recipes`, {
diff --git a/src/store/recipes/reducer.js b/src/store/recipes/reducer.js
index 25a08cc..7db1363 100644
--- a/src/store/recipes/reducer.js
+++ b/src/store/recipes/reducer.js
@@ -1,9 +1,12 @@
 import { FETCH_RECIPES_SUCCESS } from "./actions";
+import { REMOVE_RECIPES_SUCCESS } from "./actions";
 
-const initialState = { imageUrl: null, recipes: [] };
+const initialState = { imageUrl: null, recipes: null };
 
 export default (state = initialState, action) => {
   switch (action.type) {
+    case REMOVE_RECIPES_SUCCESS:
+      return initialState;
     case FETCH_RECIPES_SUCCESS:
       const { imageUrl, recipes } = action.payload;
       return { imageUrl: imageUrl, recipes: recipes };

From 8a3943c50c6509fbf685f6d07eed0ad17ed041e4 Mon Sep 17 00:00:00 2001
From: DiegoOTdC <studioartdiego@gmail.com>
Date: Tue, 18 Aug 2020 12:45:08 +0200
Subject: [PATCH 10/10] add alert message, when there are no labels in preview

---
 src/screens/preview/index.js | 9 +++++++--
 src/store/labels/actions.js  | 1 -
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/screens/preview/index.js b/src/screens/preview/index.js
index 412a3c9..242735a 100644
--- a/src/screens/preview/index.js
+++ b/src/screens/preview/index.js
@@ -13,6 +13,7 @@ import { getRecipes } from "../../store/recipes/actions";
 import { removeLabels } from "../../store/labels/actions";
 import { removeRecipes } from "../../store/recipes/actions";
 import { selectLabels } from "../../store/labels/selectors";
+import { selectMessage } from "../../store/labels/selectors";
 import { selectNameOfProduct } from "../../store/labels/selectors";
 import { selectRecipes } from "../../store/recipes/selectors";
 import Loading from "../../components/Loading";
@@ -20,8 +21,8 @@ import Loading from "../../components/Loading";
 export default function index({ route, navigation }) {
   const { imageUri } = route.params || {};
   const labels = useSelector(selectLabels);
+  const message = useSelector(selectMessage);
   const nameOfProduct = useSelector(selectNameOfProduct);
-
   const dispatch = useDispatch();
   const [foodLabel, setFoodLabel] = useState("");
   const [loading, setLoading] = useState(false);
@@ -39,7 +40,7 @@ export default function index({ route, navigation }) {
       setLoading(false);
       Alert.alert(recipes.message);
       dispatch(removeRecipes());
-    } else if (recipes) {
+    } else if (recipes && loading) {
       setLoading(false);
       navigation.navigate("Recipes");
     }
@@ -49,6 +50,10 @@ export default function index({ route, navigation }) {
     return <Loading />;
   }
 
+  if (message) {
+    Alert.alert(message);
+  }
+
   return (
     <View
       style={{
diff --git a/src/store/labels/actions.js b/src/store/labels/actions.js
index 44f46a9..fd06388 100644
--- a/src/store/labels/actions.js
+++ b/src/store/labels/actions.js
@@ -19,7 +19,6 @@ export const fetchImageLabels = (imageUrl) => {
     const response = await axios.post(`${server}/analyse/image`, {
       imageUrl,
     });
-
     dispatch(setLabels(response.data));
   };
 };