fixes #311

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

@@ -47,13 +47,18 @@ export default class Team extends Component {
     id === myTeam ? onUpdateProfileTeam({ team: '' }) : onUpdateProfileTeam({ team: id })
   };
 
-  renderInfo = (icon, title, text, arrow, onPress) => (
+  renderInfo = (icon, title, text, arrow, onPress, counter) => (
     <View style={{ marginTop: 15 }}>
       <Text style={styles.infoTitle}>{title.toUpperCase()}</Text>
       <TouchableOpacity style={styles.infoTextWrapper} onPress={onPress}>
         {icon && <Image source={icon} style={styles.image} resizeMode="contain"/>}
         <Text style={styles.text}>{text}</Text>
         {arrow && <Image source={arrow} style={styles.arrow} resizeMode="contain"/>}
+        {!!(counter || counter === 0) &&
+          <View style={styles.circle}>
+            <Text style={styles.circleText}>{counter}</Text>
+          </View>
+        }
       </TouchableOpacity>
     </View>
   );
@@ -92,7 +97,14 @@ export default class Team extends Component {
         {myTeam && myTeam !== team.id ? null : this.renderButton(btnText)}
         {this.renderInfo(locationIcon, strings.label_team_location, location )}
         {this.renderInfo(listIcon, strings.label_team_members, team.members )}
-        {this.renderInfo(trashIcon, strings.label_team_trashpoints, strings.label_team_trashpoints_tap, arrow, this.handleTrashpointsPress )}
+        {this.renderInfo(
+          trashIcon,
+          strings.label_team_trashpoints,
+          strings.label_team_trashpoints_tap,
+          arrow,
+          this.handleTrashpointsPress,
+          team.trashpoints
+        )}
         {this.renderInfo(null, strings.label_team_description, team.teamDescription )}
       </ScrollView>
     );

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

@@ -60,6 +60,22 @@ export default {
     position: 'absolute',
     right: 15,
   },
+  circle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 25,
+    height: 25,
+    position: 'absolute',
+    right: 40,
+    borderRadius: 12.5,
+    backgroundColor: '#DF1E83'
+  },
+  circleText: {
+    fontFamily,
+    color: 'white',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    fontSize: 16,
+  },
   text: {
     fontFamily,
     fontSize,

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 {
 
@@ -97,7 +98,19 @@ export default class Teams extends Component {
       <Text style={styles.lowerText}>{strings.label_text_noteams_bottom}</Text>
     </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),
   }
 };