refactoring and style updates

Pumping-Code · Nov 29, 2017 · b64b692 · b64b692
1 parent c225f3a
commit b64b692
Show file tree

Hide file tree

Showing 22 changed files with 182 additions and 198 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,12 +1,13 @@
 module.exports = {
   "extends": "airbnb",
   "rules": {
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "react/no-unescaped-entities": [0]
+    "react/jsx-filename-extension": [0, { "extensions": [".js", ".jsx"] }],
+    "react/no-unescaped-entities": [0],
+    "react/prop-types": [1]
   },
   "settings": {
     "import/resolver": {
       "babel-module": {}
     }
   }
-}
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 .expo/
 npm-debug.*
+.DS_Store
diff --git a/src/actions/locationActions.js b/src/actions/locationActions.js
@@ -32,14 +32,14 @@ export function locationSend() {
       route,
       data,
     })
-    .then((response) => {
+      .then((response) => {
       // route user to Bro Map
-      dispatch(NavigationActions.navigate({ routeName: 'BroMap' }));
-      // set locations to redux and set loading false
-      dispatch({
-        type: GET_LOCATIONS_COMPLETE,
-        userLocations: response.data,
+        dispatch(NavigationActions.navigate({ routeName: 'BroMap' }));
+        // set locations to redux and set loading false
+        dispatch({
+          type: GET_LOCATIONS_COMPLETE,
+          userLocations: response.data,
+        });
       });
-    });
   };
 }
diff --git a/src/components/auth/Auth.js b/src/components/auth/Auth.js
@@ -1,25 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text } from 'react-native';
-import { Container, Button, Content } from 'native-base';
-import LoadingModal from 'components/modules/LoadingModal';
+import { Text, Container, Button, Content } from 'native-base';
+import { LoadingModal } from 'components/modules';
 
-const Auth = props => (
-  <Container>
-    <Content style={{ marginTop: 100, backgroundColor: 'white' }}>
-      <LoadingModal fetching={false} />
-      <Button
-        full
-        onPress={props.facebookLogin}
-      >
-        <Text>Login</Text>
-      </Button>
-    </Content>
-  </Container>
-);
+function Auth(props) {
+  return (
+    <Container>
+      <Content style={{ marginTop: 100, backgroundColor: 'white' }}>
+        <LoadingModal fetching={false} />
+        <Button
+          full
+          onPress={props.facebookLogin}
+        >
+          <Text>Login</Text>
+        </Button>
+      </Content>
+    </Container>
+  );
+}
 
 Auth.propTypes = {
-  loading: PropTypes.bool.isRequired,
+  // loading: PropTypes.bool.isRequired,
   facebookLogin: PropTypes.func.isRequired,
 };
 

diff --git a/src/components/bro-map/BroMap.js b/src/components/bro-map/BroMap.js
@@ -1,30 +1,22 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import { MapView } from 'expo';
-import styles from 'styles/styles';
+import styles from 'styles';
 
-class BroMap extends Component {
-  componentDidMount() {
-    console.log('mapview props: ', this.props);
-    // this.props.getUsers();
-  }
-
-  render() {
-    const props = this.props;
-
-    return (
+function BroMap(props) {
+  return (
+    <View>
       <View>
-        <View>
-          <MapView
-            style={styles.map}
-            initialRegion={{
+        <MapView
+          style={styles.map}
+          initialRegion={{
               latitude: props.locationState.coords.latitude,
               longitude: props.locationState.coords.longitude,
               latitudeDelta: 0.00922,
               longitudeDelta: 0.00421,
             }}
-          >
-            {
+        >
+          {
               props.locationState.userLocations.map(user => (
                 <MapView.Marker
                   key={user._id}
@@ -35,11 +27,10 @@ class BroMap extends Component {
                 />
               ))
             }
-          </MapView>
-        </View>
+        </MapView>
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 export default BroMap;
diff --git a/src/components/home/Home.js b/src/components/home/Home.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Platform, Text } from 'react-native';
+import { Platform, View } from 'react-native';
 import { Constants, Location, Permissions } from 'expo';
-import { Container, Content, Footer, FooterTab, Button } from 'native-base';
-import LoadingModal from 'components/modules/LoadingModal';
+import { Container, Content, Footer, FooterTab, Button, Text } from 'native-base';
+import { LoadingModal } from 'components/modules';
+import styles from 'styles';
 import SpotMe from 'components/home/SpotMe';
 
 class Home extends Component {
@@ -42,27 +43,40 @@ class Home extends Component {
   }
 
   render() {
-    const props = this.props;
-    const { navigate } = props.navigation;
+    const { props } = this;
+    const { navigate } = this.props.navigation;
 
-    let text = 'Waiting..';
+    let location = <Text>'Waiting...'</Text>;
     if (this.state.errorMessage) {
-      text = this.state.errorMessage;
+      location = (
+        <View style={{ paddingTop: 10 }}>
+          <Text>{this.state.errorMessage}</Text>
+        </View>
+      );
     } else if (this.state.location) {
-      text = JSON.stringify(this.state.location);
+      location = (
+        <View style={{ paddingTop: 10 }}>
+          <Text>Time: {this.state.location.timestamp}</Text>
+          <Text>Speed: {this.state.location.coords.speed}</Text>
+          <Text>Latitude: {this.state.location.coords.latitude}</Text>
+          <Text>Longitude: {this.state.location.coords.longitude}</Text>
+        </View>
+      );
     }
 
     return (
       <Container>
         <Content>
-          <LoadingModal
-            fetching={props.locationState.loading}
-            animationType={'slide'}
-            opacity={1}
-            flavorText={'Search for Bros near you...'}
-          />
-          <Text>{text}</Text>
-          <SpotMe />
+          <View style={styles.container}>
+            <LoadingModal
+              fetching={props.locationState.loading}
+              animationType="slide"
+              opacity={1}
+              flavorText="Searching for Bros near you..."
+            />
+            <SpotMe />
+            {location}
+          </View>
         </Content>
         <Footer>
           <FooterTab>

diff --git a/src/components/home/SpotMe.js b/src/components/home/SpotMe.js
@@ -1,31 +1,16 @@
-import React, { Component } from 'react';
-import { Text } from 'react-native';
+import React from 'react';
+import { Button, Text } from 'native-base';
 import { connect } from 'react-redux';
-import { Button } from 'native-base';
 import { bindActionCreators } from 'redux';
 
 import * as actions from 'actions/locationActions';
 
-class SpotMe extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-    };
-
-    this.onButtonPress = this.onButtonPress.bind(this);
-  }
-
-  onButtonPress() {
-    this.props.locationSend();
-  }
-
-  render() {
-    return (
-      <Button onPress={this.onButtonPress}>
-        <Text>I Need A Spot</Text>
-      </Button>
-    );
-  }
+function SpotMe(props) {
+  return (
+    <Button full onPress={props.locationSend}>
+      <Text>I Need A Spot</Text>
+    </Button>
+  );
 }
 
 function mapDispatchToProps(dispatch) {

diff --git a/src/components/modules/BackButton.js b/src/components/modules/BackButton.js
@@ -2,18 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Icon } from 'native-base';
 
-const BackButton = props => (
-  <Button
-    iconLeft
-    transparent
-    onPress={props.onPress}
-  >
-    <Icon name="arrow-back" />
-  </Button>
-);
+function BackButton({ onPress }) {
+  return (
+    <Button
+      iconLeft
+      transparent
+      onPress={onPress}
+    >
+      <Icon name="arrow-back" />
+    </Button>
+  );
+}
 
 BackButton.propTypes = {
   onPress: PropTypes.func.isRequired,
 };
 
-export default BackButton;
+export { BackButton };
diff --git a/src/components/modules/LoadingModal.js b/src/components/modules/LoadingModal.js
@@ -1,39 +1,41 @@
 import React from 'react';
-import { Modal, View, Text, ActivityIndicator, StyleSheet } from 'react-native';
+import { Modal, View, StyleSheet } from 'react-native';
+import { Text, Spinner } from 'native-base';
 
-const styles = StyleSheet.create({
-  loadingModal: {
-    backgroundColor: '#000',
-    flex: 1,
-    alignItems: 'center',
-    marginTop: 22,
-  },
-});
-
-const LoadingModal = ({ fetching, opacity, flavorText, animationType }) => (
-  <Modal
-    animationType={animationType}
-    transparent
-    visible={fetching}
-  >
-    <View style={[styles.loadingModal, { opacity }]}>
-      <View style={{ flex: 1, justifyContent: 'flex-end' }}>
-        <Text style={{ color: '#FFF' }}>{flavorText}</Text>
+function LoadingModal({
+  fetching, opacity, flavorText, animationType,
+}) {
+  return (
+    <Modal
+      animationType={animationType}
+      transparent
+      visible={fetching}
+    >
+      <View style={[styles.loadingModal, { opacity }]}>
+        <View style={{ flex: 1, justifyContent: 'center' }}>
+          <Text style={{ color: '#FFF' }}>{flavorText}</Text>
+          <Spinner
+            color="#FFF"
+          />
+        </View>
       </View>
-      <ActivityIndicator
-        animating
-        color={'#FFF'}
-        size={'large'}
-        style={{ flex: 1, justifyContent: 'flex-start' }}
-      />
-    </View>
-  </Modal>
+    </Modal>
   );
+}
 
 LoadingModal.defaultProps = {
   opacity: 0.5,
   flavorText: 'Loading...',
   animationType: 'none',
 };
 
-export default LoadingModal;
+const styles = StyleSheet.create({
+  loadingModal: {
+    backgroundColor: '#000',
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 22,
+  },
+});
+
+export { LoadingModal };
diff --git a/src/components/modules/TextPrimary.js b/src/components/modules/TextPrimary.js
diff --git a/src/components/modules/index.js b/src/components/modules/index.js
@@ -0,0 +1,2 @@
+export * from './BackButton';
+export * from './LoadingModal';