Improvement

Author: mreorhan

routes.js

@@ -10,10 +10,7 @@ const AppNavigator = createStackNavigator({
         }
     },
     Review: {
-        screen: Review,
-        navigationOptions: {
-            title: "Reviews",
-        }
+        screen: Review
     },
 }, {
         initialRouteName: 'Home',

src/components/error.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+export const Error = (props) => {
+    return <View>
+        <Text>Error: {props.errorCode}</Text>
+    </View>
+}

src/components/loader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View, ActivityIndicator, StyleSheet } from 'react-native';
+import { Color } from '../styles/theme';
+
+export const Loader = () => {
+    return <View style={style.container}>
+        <ActivityIndicator size={"large"} color={Color.blue} />
+    </View>
+}
+
+const style = StyleSheet.create({
+    container: {
+        alignItems: 'center'
+    }
+})

src/screens/home.js

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
-import { ScrollView, Text, View, TextInput, Button } from 'react-native'
+import { ScrollView, Text, View, TextInput, Button } from 'react-native';
 import { EXAMPLE } from '../graphql/queries';
 import { Query } from "react-apollo";
-import { margin } from '../styles/theme';
+import { Margin } from '../styles/theme';
+import { Loader } from '../components/loader';
+import { Error } from '../components/error';
 
 
 export default class Home extends Component {
@@ -21,9 +23,9 @@ export default class Home extends Component {
             <Query query={EXAMPLE} variables={{ term, location }}>
                 {({ loading, data: { search }, error }) => {
 
-                    if (loading) {
-                        return <Text>Loading...</Text>
-                    }
+                    if (loading)
+                        return <Loader />
+
                     if (search) {
                         const result = search.business.map((i, index) => {
                             return (
@@ -37,7 +39,7 @@ export default class Home extends Component {
                         return result;
                     }
                     if (error)
-                        return <Text>{error.message}</Text>
+                        return <Error errorCode={error.message} />
 
                     return (
                         <Text>No result</Text>
@@ -51,7 +53,7 @@ export default class Home extends Component {
         const { term } = this.state;
         return (
             <ScrollView>
-                <View style={margin.marginM}>
+                <View style={Margin.marginM}>
                     <TextInput onChangeText={(term) => this.setState({ term })} value={term}></TextInput>
                     <Text>Result for: {this.state.term}</Text>
                     {this.getYelp("pizza", "new york")}

src/screens/review.js

@@ -1,31 +1,37 @@
 import React, { Component } from 'react';
-import { ScrollView, Text, View, StyleSheet } from 'react-native'
+import { ScrollView, Text, View } from 'react-native';
 import { GET_REVIEWS } from '../graphql/queries';
 import { Query } from "react-apollo";
-import { fontSize, margin } from '../styles/theme';
+import { FontSize, Margin } from '../styles/theme';
+import { Loader } from '../components/loader';
+import { Error } from '../components/error';
 
 
 export default class Review extends Component {
+    static navigationOptions = ({ navigation }) => ({
+        title: `${navigation.state.params.name}`
+    });
 
     getReviews = (business) => {
         return (
             <Query query={GET_REVIEWS} variables={{ business }}>
                 {({ loading, data: { reviews }, error }) => {
 
                     if (loading) {
-                        return <Text>Loading...</Text>
+                        return <Loader />
                     }
                     if (reviews) {
                         const result = reviews.review.map((i, index) => {
                             return (
-                                <View key={index} style={margin.marginBottomS}>
+                                <View key={index} style={Margin.marginBottomS}>
                                     <Text>{index + 1 + ". " + i.text}</Text>
-                                </View>)
+                                </View>
+                            )
                         })
                         return result;
                     }
                     if (error)
-                        return <Text>{error.message}</Text>
+                        return <Error errorCode={error.message} />
 
                     return (
                         <Text>No result</Text>
@@ -38,13 +44,13 @@ export default class Review extends Component {
     render() {
         const { navigation } = this.props;
         const business = navigation.getParam('business', 'no-business');
-        const name = navigation.getParam('name', 'no-business');
-        console.log(business)
+        const name = navigation.getParam('name', 'no-name');
+
         return (
             <ScrollView>
-                <View style={margin.marginM}>
-                <Text style={fontSize.fontL}>{name}</Text>
-                {this.getReviews(business)}
+                <View style={Margin.marginM}>
+                    <Text style={FontSize.fontL}>Reviews</Text>
+                    {this.getReviews(business)}
                 </View>
             </ScrollView>
         )

src/styles/theme.js

@@ -1,9 +1,13 @@
-export const fontSize = {
+export const FontSize = {
     fontM: { fontSize: 13 },
     fontL: { fontSize: 18 }
 }
-export const margin={
-    marginM:{margin:10},
-    marginL:{margin:20},
-    marginBottomS:{marginBottom:10}
+export const Margin = {
+    marginM: { margin: 10 },
+    marginL: { margin: 20 },
+    marginBottomS: { marginBottom: 10 }
+}
+
+export const Color = {
+    blue: "#0073cf"
 }