Merge pull request #2 from DiegoOTdC/feat-renderRecipes

Feat render recipes

App.js

@@ -5,8 +5,9 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import HomeScreen from "./src/screens/HomeScreen";
 import Camera from "./src/screens/Camera";
-import Preview from "./src/screens/preview";
+import Preview from "./src/screens/Preview";
 import Recipes from "./src/screens/Recipes";
+import RecipeDetails from "./src/screens/RecipeDetails";
 import * as firebase from "firebase";
 import { YellowBox } from "react-native";
 
@@ -35,6 +36,7 @@ function App() {
           <Stack.Screen name="Camera" component={Camera} />
           <Stack.Screen name="Preview" component={Preview} />
           <Stack.Screen name="Recipes" component={Recipes} />
+          <Stack.Screen name="RecipeDetails" component={RecipeDetails} />
         </Stack.Navigator>
       </NavigationContainer>
     </Provider>

package.json

@@ -21,6 +21,7 @@
     "dotenv": "^8.2.0",
     "expo": "~38.0.8",
     "expo-camera": "~8.3.1",
+    "expo-constants": "~9.1.1",
     "expo-font": "~8.2.1",
     "expo-image-picker": "~8.3.0",
     "expo-status-bar": "^1.0.2",
@@ -29,14 +30,16 @@
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
+    "react-native-hyperlink": "0.0.19",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
+    "react-native-table-component": "^1.2.1",
+    "react-native-unordered-list": "^1.0.4",
     "react-native-web": "~0.11.7",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
-    "expo-constants": "~9.1.1"
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

src/components/Loading/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Text, View, ActivityIndicator } from "react-native";
+
+export default function Loading() {
+  const color = "#b3d89cff";
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        backgroundColor: "#5d3a00ff",
+      }}
+    >
+      <Text style={{ color: color }}>Niles: </Text>
+      <Text style={{ color: color }}>"Going as fast as I can.."</Text>
+      <ActivityIndicator size="large" color={color} />
+    </View>
+  );
+}

src/components/Recipe/index.js

@@ -1,20 +1,12 @@
 import React from "react";
-import {
-  Text,
-  View,
-  Button,
-  StyleSheet,
-  Image,
-  TouchableOpacity,
-} from "react-native";
+import { Text, View, StyleSheet, Image, ActivityIndicator } from "react-native";
 import placeholder from "../../images/placeholder.png";
-import { AppLoading } from "expo";
 import {
   useFonts,
   AlfaSlabOne_400Regular,
 } from "@expo-google-fonts/alfa-slab-one";
 
-export default function Recipe(prop) {
+export default function Recipe(props) {
   const [fontsLoaded] = useFonts({
     AlfaSlabOne_400Regular,
   });
@@ -35,21 +27,19 @@ export default function Recipe(prop) {
     totalNutrients,
     totalDaily,
     totalWeight,
-  } = prop;
+  } = props;
 
   if (!fontsLoaded) {
-    return <AppLoading />;
+    return <ActivityIndicator color="#a53f2bff" />;
   } else {
     return (
-      <TouchableOpacity style={styles.touch}>
-        <View style={styles.recipeCard}>
-          <Image
-            style={styles.image}
-            source={{ uri: image ? image : placeholder }}
-          />
-          <Text style={styles.title}>{title}</Text>
-        </View>
-      </TouchableOpacity>
+      <View style={styles.recipeCard}>
+        <Image
+          style={styles.image}
+          source={{ uri: image ? image : placeholder }}
+        />
+        <Text style={styles.title}>{title}</Text>
+      </View>
     );
   }
 }

src/screens/Camera/index.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { Text, View, TouchableOpacity, ActivityIndicator } from "react-native";
+import { Text, View, TouchableOpacity } from "react-native";
 import { Camera } from "expo-camera";
 import { useDispatch } from "react-redux";
 import { fetchLabels } from "../../store/labels/actions";
 import * as firebase from "firebase";
+import Loading from "../../components/Loading";
 
 export default function App({ navigation }) {
   const dispatch = useDispatch();
@@ -36,6 +37,7 @@ export default function App({ navigation }) {
         const imageUri = image.uri;
 
         if (imageUri) {
+          setLoading(true);
           this.uploadImage(imageUri, "test-image2")
             .then(() => {
               console.log("Success!");
@@ -66,7 +68,6 @@ export default function App({ navigation }) {
 
   //upload image to firebase
   uploadImage = async (uri, imageName) => {
-    setLoading(true);
     const response = await fetch(uri);
     const blob = await response.blob();
     const ref = firebase
@@ -77,19 +78,7 @@ export default function App({ navigation }) {
   };
 
   if (loading) {
-    return (
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          backgroundColor: "#5d3a00ff",
-        }}
-      >
-        <Text style={{ color: "#b3d89cff" }}>Niles: </Text>
-        <Text style={{ color: "#b3d89cff" }}>"Going as fast as I can.."</Text>
-        <ActivityIndicator size="large" color="#b3d89cff" />
-      </View>
-    );
+    return <Loading />;
   } else {
     return (
       <View style={{ flex: 1 }}>