Merge pull request #5 from DiegoOTdC/changeRemoveCleanup

Change remove cleanup
DiegoOTdC · Aug 19, 2020 · dd57c07 · dd57c07
2 parents 12b3404 + ef6861b
commit dd57c07
Show file tree

Hide file tree

Showing 14 changed files with 166 additions and 179 deletions.
diff --git a/App.js b/App.js
@@ -1,6 +1,17 @@
 import * as React from "react";
 import { Provider } from "react-redux";
 import store from "./src/store";
+import { YellowBox } from "react-native";
+import * as firebase from "firebase";
+import {
+  apiKey,
+  authDomain,
+  databaseUrl,
+  projectId,
+  storageBucket,
+  messagingSenderId,
+} from "@env";
+
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import HomeScreen from "./src/screens/HomeScreen";
@@ -11,16 +22,6 @@ import Recipes from "./src/screens/Recipes";
 import RecipeDetails from "./src/screens/RecipeDetails";
 import Register from "./src/screens/Register";
 import Login from "./src/screens/Login";
-import * as firebase from "firebase";
-import { YellowBox } from "react-native";
-import {
-  apiKey,
-  authDomain,
-  databaseUrl,
-  projectId,
-  storageBucket,
-  messagingSenderId,
-} from "@env";
 
 const firebaseConfig = {
   apiKey: apiKey,
@@ -38,6 +39,7 @@ if (!firebase.apps.length) {
 const Stack = createStackNavigator();
 
 function App() {
+  //This warning is not causing any problems and as far as I know we can't do anything about it. Created by using firebase.
   YellowBox.ignoreWarnings(["Setting a timer"]);
   return (
     <Provider store={store}>

diff --git a/src/components/Loading/index.js b/src/components/Loading/index.js
@@ -1,19 +1,19 @@
 import React from "react";
 import { Text, View, ActivityIndicator } from "react-native";
+import { green, blue } from "../../colours";
 
 export default function Loading() {
-  const color = "#b3d89cff";
   return (
     <View
       style={{
         flex: 1,
         justifyContent: "center",
-        backgroundColor: "#5d3a00ff",
+        backgroundColor: green,
       }}
     >
-      <Text style={{ color: color }}>Niles: </Text>
-      <Text style={{ color: color }}>"Going as fast as I can.."</Text>
-      <ActivityIndicator size="large" color={color} />
+      <Text style={{ color: blue }}>Niles: </Text>
+      <Text style={{ color: blue }}>"Going as fast as I can.."</Text>
+      <ActivityIndicator size="large" color={blue} />
     </View>
   );
 }
diff --git a/src/components/Recipe/index.js b/src/components/Recipe/index.js
@@ -1,10 +1,13 @@
 import React from "react";
 import { Text, View, StyleSheet, Image, ActivityIndicator } from "react-native";
 import placeholder from "../../images/placeholder.png";
+
+import { green, red } from "../../colours";
 import {
   useFonts,
   AlfaSlabOne_400Regular,
 } from "@expo-google-fonts/alfa-slab-one";
+const alfa = "AlfaSlabOne_400Regular";
 
 export default function Recipe(props) {
   const [fontsLoaded] = useFonts({
@@ -31,14 +34,14 @@ export default function Recipe(props) {
 const styles = StyleSheet.create({
   recipeCard: {
     flex: 0.5,
-    backgroundColor: "#a53f2bff",
+    backgroundColor: red,
     margin: 10,
   },
   image: { width: "100%", height: 150 },
-  touch: { backgroundColor: "#b3d89cff", width: "50%" },
+  touch: { backgroundColor: green, width: "50%" },
   title: {
     alignSelf: "center",
-    fontFamily: "AlfaSlabOne_400Regular",
+    fontFamily: alfa,
     fontSize: 20,
     color: "white",
     padding: 10,

diff --git a/src/screens/BarcodeScanner/index.js b/src/screens/BarcodeScanner/index.js
@@ -1,33 +1,43 @@
 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 { BarCodeScanner } from "expo-barcode-scanner";
+import Loading from "../../components/Loading";
 import {
   Text,
   View,
   StyleSheet,
   TouchableHighlight,
   Alert,
 } from "react-native";
-import { BarCodeScanner } from "expo-barcode-scanner";
+
+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 { blue, lightBrown, lightBlue } from "../../colours";
 import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
+const alata = "Alata_400Regular";
 
 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 labels = useSelector(selectLabels);
   const message = useSelector(selectMessage);
+  const [fontsLoaded] = useFonts({ Alata_400Regular });
 
   if (message) {
     Alert.alert(message);
     dispatch(removeLabels());
+    dispatch(removeMessage());
+    dispatch(removeRecipes());
   }
 
   useEffect(() => {
@@ -43,11 +53,11 @@ export default function BarcodeScanner({ navigation }) {
   };
 
   useEffect(() => {
-    if (scanned && imageUri) {
+    if (scanned && imageUri && !message && labels) {
       setScanned(false);
       navigation.navigate("Preview", { imageUri });
     }
-  }, [imageUri]);
+  }, [scanned, handleBarCodeScanned]);
 
   if (hasPermission === null) {
     return <Text>Requesting for camera permission</Text>;
@@ -56,6 +66,10 @@ export default function BarcodeScanner({ navigation }) {
     return <Text>No access to camera</Text>;
   }
 
+  if (!fontsLoaded) {
+    return <Loading />;
+  }
+
   return (
     <View
       style={{
@@ -69,7 +83,7 @@ export default function BarcodeScanner({ navigation }) {
         style={{
           textAlign: "center",
           color: lightBrown,
-          fontFamily: "Alata_400Regular",
+          fontFamily: alata,
           fontSize: 35,
           marginTop: 25,
         }}
@@ -97,7 +111,7 @@ export default function BarcodeScanner({ navigation }) {
               textAlign: "center",
               color: fontColor,
               fontSize: 35,
-              fontFamily: "Alata_400Regular",
+              fontFamily: alata,
             }}
           >
             Tap to Scan Again

diff --git a/src/screens/Camera/index.js b/src/screens/Camera/index.js
@@ -1,20 +1,33 @@
 import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Text, View, TouchableOpacity } from "react-native";
-import { Camera } from "expo-camera";
-import { useDispatch } from "react-redux";
-import { fetchImageLabels } from "../../store/labels/actions";
 import * as firebase from "firebase";
+import { Camera } from "expo-camera";
 import Loading from "../../components/Loading";
 
+import { fetchImageLabels } from "../../store/labels/actions";
+import { removeUrl } from "../../store/labels/actions";
+import { selectUser } from "../../store/user/selectors";
+import { selectUrl } from "../../store/labels/selectors";
+
 export default function App({ navigation }) {
   const dispatch = useDispatch();
   const [hasPermission, setHasPermission] = useState(null);
-  const [type, setType] = useState(Camera.Constants.Type.back);
   const [loading, setLoading] = useState(false);
+  const user = useSelector(selectUser);
+  const url = useSelector(selectUrl);
+  const firebaseUrl = url && url.split(".");
 
-  useEffect(() => {
-    setLoading(false);
-  }, [navigation]);
+  //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()
+      .child("images/" + `image-user${user.id}`);
+
+    imageRef && imageRef.delete();
+  }
 
   useEffect(() => {
     (async () => {
@@ -36,15 +49,15 @@ export default function App({ navigation }) {
         const image = await this.camera.takePictureAsync();
         const imageUri = image.uri;
 
-        if (imageUri) {
+        if (imageUri && user) {
           setLoading(true);
-          this.uploadImage(imageUri, "test-image2")
+          this.uploadImage(imageUri, `image-user${user.id}`)
             .then(() => {
               console.log("Success!");
               const imageRef = firebase
                 .storage()
                 .ref()
-                .child("images/" + "test-image2");
+                .child("images/" + `image-user${user.id}`);
               imageRef
                 .getDownloadURL()
                 .then((url) => {
@@ -84,7 +97,7 @@ export default function App({ navigation }) {
       <View style={{ flex: 1 }}>
         <Camera
           style={{ flex: 1 }}
-          type={type}
+          type={Camera.Constants.Type.back}
           flashMode={Camera.Constants.FlashMode.auto}
           ref={(ref) => {
             this.camera = ref;
@@ -97,26 +110,6 @@ export default function App({ navigation }) {
               flexDirection: "row",
             }}
           >
-            <TouchableOpacity
-              style={{
-                flex: 0.1,
-                alignSelf: "flex-end",
-                alignItems: "center",
-              }}
-              onPress={() => {
-                setType(
-                  type === Camera.Constants.Type.back
-                    ? Camera.Constants.Type.front
-                    : Camera.Constants.Type.back
-                );
-              }}
-            >
-              <Text style={{ fontSize: 18, marginBottom: 10, color: "white" }}>
-                {" "}
-                Flip{" "}
-              </Text>
-            </TouchableOpacity>
-
             <TouchableOpacity
               style={{
                 flex: 0.1,

diff --git a/src/screens/HomeScreen/index.js b/src/screens/HomeScreen/index.js
@@ -1,16 +1,17 @@
 import React from "react";
 import { View } from "react-native";
 import HomeButton from "../../components/HomeButton";
-
 import { AppLoading } from "expo";
-import { useFonts, Inter_900Black } from "@expo-google-fonts/inter";
-import { Alata_400Regular } from "@expo-google-fonts/alata";
-import { AlfaSlabOne_400Regular } from "@expo-google-fonts/alfa-slab-one";
+
+import { green, blue } from "../../colours";
+import {
+  useFonts,
+  AlfaSlabOne_400Regular,
+} from "@expo-google-fonts/alfa-slab-one";
+const alfa = "AlfaSlabOne_400Regular";
 
 export default function HomeScreen({ navigation }) {
   const [fontsLoaded] = useFonts({
-    Inter_900Black,
-    Alata_400Regular,
     AlfaSlabOne_400Regular,
   });
 
@@ -28,17 +29,17 @@ export default function HomeScreen({ navigation }) {
           style={{ justifyContent: "top" }}
           title="Scan Image"
           onPress={() => navigation.navigate("Camera")}
-          backgroundColor="#b3d89cff"
-          color="#3b7080ff"
-          font="AlfaSlabOne_400Regular"
+          backgroundColor={green}
+          color={blue}
+          font={alfa}
         />
         <HomeButton
           style={{ justifyContent: "top" }}
           title="Scan Barcode"
           onPress={() => navigation.navigate("BarcodeScanner")}
-          backgroundColor="#3b7080ff"
-          color="#b3d89cff"
-          font="AlfaSlabOne_400Regular"
+          backgroundColor={blue}
+          color={green}
+          font={alfa}
         />
       </View>
     );

diff --git a/src/screens/Login/index.js b/src/screens/Login/index.js
@@ -9,34 +9,23 @@ import {
   TextInput,
   ActivityIndicator,
   TouchableWithoutFeedback,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
   Keyboard,
 } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { green, darkGreen, budGreen, brown, blue } from "../../colours";
-import { AlfaSlabOne_400Regular } from "@expo-google-fonts/alfa-slab-one";
+
+import { green, budGreen, brown, blue } from "../../colours";
 import { useFonts, Alata_400Regular } from "@expo-google-fonts/alata";
-import { Rochester_400Regular } from "@expo-google-fonts/rochester";
 import { GreatVibes_400Regular } from "@expo-google-fonts/great-vibes";
-
-const alfa = "AlfaSlabOne_400Regular";
 const alata = "Alata_400Regular";
-const rochester = "Rochester_400Regular";
 const greatVibes = "GreatVibes_400Regular";
 
 export default function Login({ navigation }) {
   const dispatch = useDispatch();
+  const token = useSelector(selectToken);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-
-  const token = useSelector(selectToken);
-
   const [fontsLoaded] = useFonts({
-    AlfaSlabOne_400Regular,
     Alata_400Regular,
-    Rochester_400Regular,
     GreatVibes_400Regular,
   });