Functional home and order screens

packages/app/package.json

@@ -10,15 +10,22 @@
     "apollo-client": "^2.3.5",
     "apollo-link-http": "^1.5.4",
     "expo": "^27.0.1",
+    "expo-cli": "^2.4.0",
     "formik": "^0.11.11",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
+    "native-base": "^2.8.1",
     "react": "16.3.1",
     "react-apollo": "^2.1.8",
     "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
     "react-native-animatable": "^1.3.0",
     "react-native-elements": "1.0.0-beta5",
-    "react-navigation": "^2.5.5"
+    "react-native-search-bar": "^3.4.2",
+    "react-native-vector-icons": "^6.1.0",
+    "react-navigation": "^2.5.5",
+    "react-redux": "^5.1.1",
+    "redux": "^4.0.1",
+    "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
     "metro-bundler-config-yarn-workspaces": "^1.0.3"

packages/app/src/modules/Cart/FoodList.js

@@ -0,0 +1,59 @@
+import React, { Component } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  Platform,
+  StatusBar,
+  ScrollView,
+  Image,
+  Dimensions,
+  Animated
+} from "react-native";
+const { height, width } = Dimensions.get("window");
+
+const imageName = {
+  carne: require("../../../assets/presa.jpg"),
+  pescado: require("../../../assets/pescado.jpg"),
+  coctel: require("../../../assets/copa.jpg")
+};
+
+class FoodList extends Component {
+  render() {
+    return (
+      <View style={{ marginTop: 30, paddingHorizontal: 20 }}>
+        <Text style={{ fontSize: 24, fontWeight: "700" }}>
+          {this.props.name}
+        </Text>
+        <Text style={{ fontWeight: "100", marginTop: 10 }}>
+          {this.props.description}
+        </Text>
+        <View style={{ width: width - 40, height: 200, marginTop: 20 }}>
+          <Image
+            style={{
+              flex: 1,
+              height: null,
+              width: null,
+              resizeMode: "cover",
+              borderRadius: 5,
+              borderWidth: 1,
+              borderColor: "#dddddd"
+            }}
+            source={imageName[this.props.imageName]}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+export default FoodList;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

packages/app/src/modules/Explore/Category.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import { View, Text, StyleSheet, Image } from "react-native";
+
+class Category extends Component {
+  render() {
+    return (
+      <View
+        style={{
+          height: 130,
+          width: 130,
+          marginLeft: 20,
+          borderWidth: 0.5,
+          borderColor: "#dddddd"
+        }}
+      >
+        <View style={{ flex: 2 }}>
+          <Image
+            source={this.props.imageUri}
+            style={{ flex: 1, width: null, height: null, resizeMode: "cover" }}
+          />
+        </View>
+        <View style={{ flex: 1, paddingLeft: 10, paddingTop: 10 }}>
+          <Text>{this.props.name}</Text>
+        </View>
+      </View>
+    );
+  }
+}
+export default Category;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

packages/app/src/modules/Explore/CollagePub.js

@@ -0,0 +1,44 @@
+{
+  /* <View style={{ marginTop: 40 }}>
+              <Text
+                style={{
+                  fontSize: 24,
+                  fontWeight: "700",
+                  paddingHorizontal: 20
+                }}
+              >
+                Locales a tu alrededor
+              </Text>
+              <View
+                style={{
+                  paddingHorizontal: 20,
+                  marginTop: 20,
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  justifyContent: "space-between"
+                }}
+              >
+                <Home
+                  width={width}
+                  name="Resturant"
+                  type="Coctelería"
+                  price={10}
+                  rating={5}
+                />
+                <Home
+                  width={width}
+                  name="Quai Coruña"
+                  type="Bar"
+                  price={82}
+                  rating={3}
+                />
+                <Home
+                  width={width}
+                  name="Brit Coruña"
+                  type="Pub"
+                  price={82}
+                  rating={4}
+                />
+              </View>
+            </View> */
+}

packages/app/src/modules/Explore/Home.js

@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+import { View, Text, StyleSheet, Image } from "react-native";
+import StarRating from "react-native-star-rating";
+class Home extends Component {
+  render() {
+    return (
+      <View
+        style={{
+          width: this.props.width / 2 - 30,
+          height: this.props.width / 2 - 30,
+          borderWidth: 0.5,
+          borderColor: "#dddddd"
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Image
+            style={{ flex: 1, width: null, height: null, resizeMode: "cover" }}
+            source={require("../../../assets/home.jpg")}
+          />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            alignItems: "flex-start",
+            justifyContent: "space-evenly",
+            paddingLeft: 10
+          }}
+        >
+          <Text style={{ fontSize: 10, color: "#b63838" }}>
+            {this.props.type}
+          </Text>
+          <Text style={{ fontSize: 12, fontWeight: "bold" }}>
+            {this.props.name}
+          </Text>
+          <Text style={{ fontSize: 10 }}>{this.props.price}$</Text>
+          <StarRating
+            disable={true}
+            maxStars={5}
+            rating={this.props.rating}
+            starSize={10}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+export default Home;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

packages/app/src/modules/Explore/Pub.js

@@ -0,0 +1,51 @@
+import React, { Component } from "react";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  Button,
+  ListItem
+} from "react-native";
+const { height, width } = Dimensions.get("window");
+
+export default class Pub extends Component {
+  render() {
+    return (
+      <TouchableOpacity onPress={() => navigation.navigate("Order")}>
+        <View style={{ marginTop: 40, paddingHorizontal: 20 }}>
+          <Text style={{ fontSize: 24, fontWeight: "700" }}>
+            {this.props.name}
+          </Text>
+          <View style={{ width: width - 40, height: 200, marginTop: 20 }}>
+            <Image
+              style={{
+                flex: 1,
+                height: null,
+                width: null,
+                resizeMode: "cover",
+                borderRadius: 5,
+                borderWidth: 1,
+                borderColor: "#dddddd"
+              }}
+              source={require("../../../assets/tavernier.jpg")}
+            />
+            <Text style={{ fontWeight: "100", marginTop: 10 }}>
+              {this.props.description}
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

packages/app/src/modules/Explore/PubExperimental.js

@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity
+} from "react-native";
+const { height, width } = Dimensions.get("window");
+
+const selectImage = {
+  brit: require("../../../assets/brit.png"),
+  tavernier: require("../../../assets/tavernier.jpg"),
+  quai: require("../../../assets/home.jpg"),
+  monty: require("../../../assets/monty.jpg")
+};
+
+const PubExperimental = ({ name, description, navigation, imageName }) => (
+  <TouchableOpacity
+    activeOpacity={0.6}
+    onPress={() => navigation.navigate("Order")}
+  >
+    <View style={{ marginTop: 40, paddingHorizontal: 10 }}>
+      <Text style={{ fontSize: 24, fontWeight: "700" }}>{name}</Text>
+      <View style={{ width: width - 20, height: 250, marginTop: 20 }}>
+        <Image
+          style={{
+            flex: 1,
+            height: null,
+            width: null,
+            resizeMode: "cover",
+            borderRadius: 2,
+            borderWidth: 1,
+            borderColor: "#dddddd"
+          }}
+          source={selectImage[imageName]}
+        />
+        <Text
+          style={{ fontWeight: "100", marginTop: 10, paddingHorizontal: 5 }}
+        >
+          {description}
+        </Text>
+      </View>
+    </View>
+  </TouchableOpacity>
+);
+
+export default PubExperimental;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

packages/app/src/modules/Explore/SayHi.js

@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  ScrollView,
+  Dimensions
+} from "react-native";
+const { height, width } = Dimensions.get("window");
+import Category from "./Category";
+export default class SayHi extends Component {
+  render() {
+    return (
+      <View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
+        <Text
+          style={{
+            fontSize: 24,
+            fontWeight: "700",
+            paddingHorizontal: 20
+          }}
+        >
+          ¡Bienvenido, Aitor!
+        </Text>
+
+        <View style={{ height: 130, marginTop: 20 }}>
+          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+            <Category
+              imageUri={require("../../../assets/home.jpg")}
+              name="Home"
+            />
+            <Category
+              imageUri={require("../../../assets/experiences.jpg")}
+              name="Mapa"
+            />
+            <Category
+              imageUri={require("../../../assets/restaurant.jpg")}
+              name="Restaurantes"
+            />
+          </ScrollView>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

packages/app/src/modules/Explore/SearchBar.js

@@ -0,0 +1,12 @@
+/* import SearchBar from 'react-native-search-bar'
+
+const SearchBar = (
+
+<SearchBar
+  ref='searchBar'
+  placeholder='Search'
+  onChangeText={...}
+  onSearchButtonPress={...}
+  onCancelButtonPress={...}
+/>
+) */