fixes #311

mobile-app/src/screens/Teams/Teams.js

@@ -14,6 +14,7 @@ import { ButtonDelete } from '../../assets/images';
 import { COUNTRIES_HASH } from '../../shared/countries';
 import { Backgrounds } from '../../assets/images';
 import { TEAM_SCREEN } from '../index';
+import { Button } from '../../components/Button';
 
 export default class Teams extends Component {
 
@@ -98,6 +99,18 @@ export default class Teams extends Component {
     </View>
   );
 
+  renderGuestTeams = () => {
+    return (
+      <View style={styles.guestContainer}>
+        <View style={styles.imgPlaceholder} />
+        <Button
+          onPress={this.props.onGuestLogIn}
+          text="Log In"
+        />
+      </View>
+    )
+  }
+
   spinner = () => {
     return (
       <ActivityIndicator
@@ -109,12 +122,15 @@ export default class Teams extends Component {
   };
 
   componentDidMount() {
-    const { onFetchTeams } = this.props;
-    onFetchTeams();
+    const { onFetchTeams, isAuthenticated, isGuestSession } = this.props;
+    if (isAuthenticated && !isGuestSession) {
+      onFetchTeams();
+    }
   }
 
   render() {
-    const { teams, loading } = this.props;
+    const { teams, loading, isAuthenticated, isGuestSession } = this.props;
+    if (!isAuthenticated && isGuestSession) return this.renderGuestTeams();
     return (
       <View style={styles.container}>
         {this.renderSearchField()}

mobile-app/src/screens/Teams/index.js

@@ -5,13 +5,17 @@ import {
   fetchTeams,
 } from '../../store/actions/teams';
 
+import { guestLogIn } from '../../store/actions/auth';
+
 import {
   getTeams,
   getLoader,
 } from '../../store/selectors/teams';
 
 import {
-  getUserCountry
+  getUserCountry,
+  isAuthenticated,
+  isGuestSession,
 } from '../../store/selectors';
 
 import Component from './Teams';
@@ -20,10 +24,13 @@ const selector = createStructuredSelector({
   teams: getTeams,
   loading: getLoader,
   country: getUserCountry,
+  isAuthenticated,
+  isGuestSession,
 });
 
 const actions = {
   onFetchTeams: fetchTeams,
+  onGuestLogIn: guestLogIn,
 };
 
 export default connect(selector, actions)(Component);

mobile-app/src/screens/Teams/styles.js

@@ -1,5 +1,6 @@
 import { Dimensions } from 'react-native';
-import { dm } from '../../themes';
+import { colors, dm } from '../../themes';
+import { getHeightPercentage } from '../../shared/helpers';
 
 const { width } = Dimensions.get('window');
 
@@ -71,5 +72,17 @@ export default {
     flex: 0.7,
     justifyContent: 'center',
     alignItems: 'center'
-  }
+  },
+  guestContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: colors.yellow,
+  },
+  imgPlaceholder: {
+    width: Dimensions.get('window').width * 0.9,
+    height: 300,
+    backgroundColor: colors.gray200,
+    marginHorizontal: getHeightPercentage(20),
+  },
 };