Merge pull request #7 from DiegoOTdC/appState

App state

package.json

@@ -12,6 +12,7 @@
     "@expo-google-fonts/alfa-slab-one": "^0.1.0",
     "@expo-google-fonts/great-vibes": "^0.1.0",
     "@expo-google-fonts/inter": "^0.1.0",
+    "@expo-google-fonts/poppins": "^0.1.0",
     "@expo-google-fonts/rochester": "^0.1.0",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/native": "^5.7.3",

src/colours/index.js

@@ -18,3 +18,5 @@ export const darkBrown = "#3E2600";
 export const lightRed = "#DF6750";
 export const red = "#a53f2b";
 export const darkRed = "#6F2A1D";
+
+export const yellow = "#ffd569";

src/components/Loading/index.js

@@ -2,14 +2,18 @@ import React from "react";
 import { View, Image } from "react-native";
 import { green } from "../../colours";
 
-export default function Loading() {
+export default function Loading(prop) {
+  const { color } = prop;
+
+  const backgroundColor = color || green;
+
   return (
     <View
       style={{
         flex: 1,
         justifyContent: "center",
         alignItems: "center",
-        backgroundColor: green,
+        backgroundColor: backgroundColor,
       }}
     >
       <Image

src/components/messageBox/index.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { selectMessage } from "../../store/appState/selectors";
+import { View, Text, ActivityIndicator } from "react-native";
+import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
+import { red, green, blue, yellow, darkGreen } from "../../colours";
+
+export default function MessageBox() {
+  const message = useSelector(selectMessage);
+  const text = message && message.text;
+  const variant = message && message.variant;
+
+  const setColor = (variant) => {
+    if (variant === "warning") return blue;
+    if (variant === "success") return darkGreen;
+    if (variant === "danger") return green;
+  };
+  const setBackgroundColor = (variant) => {
+    if (variant === "warning") return yellow;
+    if (variant === "success") return green;
+    if (variant === "danger") return red;
+  };
+
+  const setFlex = (text) => {
+    if (text) return 0.1;
+    if (!text) return 0;
+  };
+  const setHeight = (text) => {
+    if (text) return 10;
+    if (!text) return 0;
+  };
+
+  const [fontsLoaded] = useFonts({
+    Alata_400Regular,
+  });
+
+  if (!fontsLoaded) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <View
+      style={{
+        flex: setFlex(text),
+        height: setHeight(text),
+        justifyContent: "center",
+        backgroundColor: setBackgroundColor(variant),
+      }}
+    >
+      <Text
+        numberOfLines={2}
+        style={{
+          textAlign: "center",
+          fontFamily: "Alata_400Regular",
+          color: setColor(variant),
+          fontSize: 20,
+          paddingHorizontal: 15,
+        }}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+}

src/navigation/StackNavigator.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
@@ -10,20 +10,18 @@ import Recipes from "../screens/Recipes";
 import RecipeDetails from "../screens/RecipeDetails";
 import Register from "../screens/Register";
 import Login from "../screens/Login";
-
-import { useSelector } from "react-redux";
-import { selectToken } from "../store/user/selectors";
+import MessageBox from "../components/MessageBox";
 
 export default function StackNavigator() {
   const Stack = createStackNavigator();
-  const token = useSelector(selectToken);
 
   return (
     <NavigationContainer>
+      <MessageBox />
       <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Login" component={Login} />
+        <Stack.Screen name="Register" component={Register} />
         <Stack.Screen name="HomeScreen" component={HomeScreen} />
-        {!token ? <Stack.Screen name="Login" component={Login} /> : null}
-        {!token ? <Stack.Screen name="Register" component={Register} /> : null}
         <Stack.Screen name="BarcodeScanner" component={BarcodeScanner} />
         <Stack.Screen name="Camera" component={CameraScreen} />
         <Stack.Screen name="Preview" component={Preview} />

src/screens/BarcodeScanner/index.js

@@ -2,24 +2,16 @@ import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { BarCodeScanner } from "expo-barcode-scanner";
 import Loading from "../../components/Loading";
-import {
-  Text,
-  View,
-  StyleSheet,
-  TouchableHighlight,
-  Alert,
-} from "react-native";
+import { Text, View, StyleSheet, TouchableHighlight } from "react-native";
 
 import { fetchBarcodeLabels } from "../../store/labels/actions";
-import { removeLabels } from "../../store/labels/actions";
-import { removeMessage } from "../../store/labels/actions";
-import { removeRecipes } from "../../store/recipes/actions";
 
 import { selectUrl } from "../../store/labels/selectors";
 import { selectLabels } from "../../store/labels/selectors";
-import { selectMessage } from "../../store/labels/selectors";
+import { selectAppLoading } from "../../store/appState/selectors";
+import { selectMessage } from "../../store/appState/selectors";
 
-import { blue, lightBrown, lightBlue, green, darkBlue } from "../../colours";
+import { blue, green } from "../../colours";
 import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
 const alata = "Alata_400Regular";
 
@@ -30,17 +22,11 @@ export default function BarcodeScanner({ navigation }) {
   const [fontColor, setFontColor] = useState(blue);
   const imageUri = useSelector(selectUrl);
   const labels = useSelector(selectLabels);
+  const isLoading = useSelector(selectAppLoading);
   const message = useSelector(selectMessage);
   const [fontsLoaded] = useFonts({ Alata_400Regular });
   const [scanner, setScanner] = useState(true);
 
-  if (message) {
-    Alert.alert(message);
-    dispatch(removeLabels());
-    dispatch(removeMessage());
-    dispatch(removeRecipes());
-  }
-
   useEffect(() => {
     setScanner(true);
   }, [scanned]);
@@ -56,9 +42,10 @@ export default function BarcodeScanner({ navigation }) {
     dispatch(fetchBarcodeLabels(data));
     setScanned(true);
   };
-
+  console.log("what is scanned?", scanned);
+  console.log("what is scanner", scanner);
   useEffect(() => {
-    if (scanned && imageUri && !message && labels) {
+    if (scanned && imageUri && labels) {
       setScanned(false);
       setScanner(false);
       navigation.navigate("Preview", { imageUri });
@@ -76,6 +63,10 @@ export default function BarcodeScanner({ navigation }) {
     return <Loading />;
   }
 
+  if (isLoading) {
+    return <Loading color={blue} />;
+  }
+
   return (
     <View
       style={{
@@ -99,7 +90,10 @@ export default function BarcodeScanner({ navigation }) {
       {scanner ? (
         <BarCodeScanner
           onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
-          style={StyleSheet.absoluteFillObject}
+          style={[
+            StyleSheet.absoluteFillObject,
+            { marginTop: message ? 70 : 0 },
+          ]}
         />
       ) : null}
 

src/screens/Camera/index.js

@@ -6,22 +6,23 @@ import { Camera } from "expo-camera";
 import Loading from "../../components/Loading";
 
 import { fetchImageLabels } from "../../store/labels/actions";
-import { removeUrl } from "../../store/labels/actions";
+import { appLoading, appDoneLoading } from "../../store/appState/actions";
 import { selectUser } from "../../store/user/selectors";
 import { selectUrl } from "../../store/labels/selectors";
+import { selectAppLoading } from "../../store/appState/selectors";
 
 export default function CameraScreen({ navigation }) {
   const dispatch = useDispatch();
   const [hasPermission, setHasPermission] = useState(null);
   const [opacity, setOpacity] = useState(1);
-  const [loading, setLoading] = useState(false);
   const user = useSelector(selectUser);
   const url = useSelector(selectUrl);
   const firebaseUrl = url && url.split(".");
 
+  const isLoading = useSelector(selectAppLoading);
+
   //Only remove the image and url from firebase (and store), not our barcode image url.
   if (url && firebaseUrl[0] === "https://firebasestorage") {
-    dispatch(removeUrl());
     const imageRef = firebase
       .storage()
       .ref()
@@ -51,7 +52,7 @@ export default function CameraScreen({ navigation }) {
         const imageUri = image.uri;
 
         if (imageUri && user) {
-          setLoading(true);
+          dispatch(appLoading());
           this.uploadImage(imageUri, `image-user${user.id}`)
             .then(() => {
               console.log("Success!");
@@ -65,7 +66,7 @@ export default function CameraScreen({ navigation }) {
                   dispatch(fetchImageLabels(url));
                 })
                 .then(() => {
-                  setLoading(false);
+                  dispatch(appDoneLoading());
                   navigation.navigate("Preview", { imageUri });
                 })
                 .catch((e) =>
@@ -93,7 +94,7 @@ export default function CameraScreen({ navigation }) {
     return ref.put(blob);
   };
 
-  if (loading) {
+  if (isLoading) {
     return <Loading />;
   } else {
     return (