Badge banner shows with correct timing

components/Banner.js

@@ -14,7 +14,8 @@ import badgeImages from "../assets/badges";
 import realmConfig from "../models/index";
 
 type Props = {
-  bannerText: string, // add banner text 2
+  bannerText: string,
+  badgeEarned: boolean,
   taxaName: string,
   id: number,
   main: boolean
@@ -23,6 +24,7 @@ type Props = {
 class Banner extends Component {
   constructor( {
     bannerText,
+    badgeEarned,
     taxaName,
     id,
     main
@@ -31,7 +33,8 @@ class Banner extends Component {
 
     this.state = {
       bannerText,
-      secondBannerText: "banner earned",
+      badgeEarned,
+      secondBannerText: "badge earned!",
       taxaName,
       id,
       iconicTaxonId: 0,
@@ -44,12 +47,9 @@ class Banner extends Component {
   }
 
   componentDidMount() {
-    const { secondBannerText } = this.state;
+    console.log( this.state.badgeEarned, "does banner know badge earned" );
     this.showToast();
-
-    if ( secondBannerText ) {
-      this.showSecondToast();
-    }
+    this.showSecondToast();
   }
 
   fetchTaxonId() {
@@ -64,7 +64,6 @@ class Banner extends Component {
           const badges = realm.objects( "BadgeRealm" ).sorted( [["earnedDate", true], ["index", false]] );
           const lastEarnedBadge = badges.slice( 0, 1 );
           const lastEarnedBadgeIcon = lastEarnedBadge[0].earnedIconName;
-          console.log( lastEarnedBadgeIcon, "last earned badge in banner" );
           this.setState( {
             iconicTaxonId,
             lastEarnedBadgeIcon
@@ -125,6 +124,7 @@ class Banner extends Component {
   render() {
     const {
       bannerText,
+      badgeEarned,
       secondBannerText,
       iconicTaxonId,
       main,
@@ -168,7 +168,7 @@ class Banner extends Component {
     return (
       <View style={styles.container}>
         {banner}
-        { secondBannerText ? (
+        { badgeEarned ? (
           <Animated.View style={[
             styles.animatedStyle,
             styles.secondAnimatedStyle,
@@ -180,9 +180,9 @@ class Banner extends Component {
             <View style={[styles.row, styles.animatedRow]}>
               <Image
                 source={badgeImages[lastEarnedBadgeIcon]}
-                style={styles.mainBannerImage}
+                style={styles.badgeBannerImage}
               />
-              <Text style={[styles.text, styles.mainText]}>{bannerText}</Text>
+              <Text style={[styles.text, styles.mainText]}>{secondBannerText}</Text>
             </View>
           </Animated.View>
         ) : null}

components/Challenges/ChallengeScreen.js

@@ -27,11 +27,13 @@ type Props = {
   setTaxonId: Function,
   updateLocation: Function,
   reverseGeocodeLocation: Function,
-  error: string
+  error: string,
+  badgeEarned: boolean
 }
 
 const ChallengeScreen = ( {
   badgeCount,
+  badgeEarned,
   taxaName,
   id,
   speciesCount,
@@ -73,7 +75,13 @@ const ChallengeScreen = ( {
     >
       <View style={styles.container}>
         { taxaName ? (
-          <Banner bannerText={`${taxaName} collected!`} main taxaName={taxaName} id={id} />
+          <Banner
+            bannerText={`${taxaName} collected!`}
+            main
+            taxaName={taxaName}
+            id={id}
+            badgeEarned
+          />
         ) : null }
         <ChallengeHeader
           latitude={latitude}

components/MainScreen.js

@@ -56,7 +56,8 @@ class MainScreen extends Component<Props, State> {
       badgeCount: 0,
       speciesCount: 0,
       taxaName,
-      id
+      id,
+      badgeEarned: false
     };
 
     ( this: any ).updateLocation = this.updateLocation.bind( this );
@@ -69,7 +70,6 @@ class MainScreen extends Component<Props, State> {
     } else {
       this.getGeolocation();
     }
-    this.fetchSpeciesAndBadgeCount();
   }
 
   setTaxa( challenges: Array<Object> ) {
@@ -182,14 +182,33 @@ class MainScreen extends Component<Props, State> {
   }
 
   fetchSpeciesAndBadgeCount() {
+    let badgeCount;
+
+    Realm.open( realmConfig )
+      .then( ( realm ) => {
+        badgeCount = realm.objects( "BadgeRealm" ).filtered( "earned == true" ).length;
+
+        console.log( badgeCount, "old badge count" );
+      } ).catch( ( err ) => {
+        console.log( "[DEBUG] Failed to open realm, error: ", err );
+      } );
+
     recalculateBadges();
 
     Realm.open( realmConfig )
       .then( ( realm ) => {
+        const newBadgeCount = realm.objects( "BadgeRealm" ).filtered( "earned == true" ).length;
+        const speciesCount = realm.objects( "ObservationRealm" ).length;
+
+        console.log( badgeCount, "old badge count 2" );
+        console.log( newBadgeCount, "new badge count" );
+        console.log( speciesCount, "species count" );
+
         this.setState( {
-          speciesCount: realm.objects( "ObservationRealm" ).length,
-          badgeCount: realm.objects( "BadgeRealm" ).filtered( "earned == true" ).length
-        } );
+          speciesCount,
+          badgeEarned: newBadgeCount > badgeCount && speciesCount !== 0,
+          badgeCount: newBadgeCount
+        }, () => console.log( this.state.badgeEarned, "badge earned" ) );
       } ).catch( ( err ) => {
         console.log( "[DEBUG] Failed to open realm, error: ", err );
       } );
@@ -246,7 +265,8 @@ class MainScreen extends Component<Props, State> {
       speciesCount,
       taxaType,
       taxa,
-      id
+      id,
+      badgeEarned
     } = this.state;
 
     const {
@@ -275,6 +295,7 @@ class MainScreen extends Component<Props, State> {
             taxaName={taxaName}
             error={error}
             id={id}
+            badgeEarned={badgeEarned}
           />
         </View>
       </SafeAreaView>

utility/helpers.js

@@ -23,8 +23,8 @@ const flattenUploadParameters = ( uri, time, latitude, longitude ) => {
       type: "image/jpeg"
     } ),
     observed_on: new Date( time * 1000 ).toISOString(),
-    latitude, // need to account for null case
-    longitude // need to account for null case
+    latitude,
+    longitude
   };
   return params;
 };
@@ -40,6 +40,8 @@ const reverseGeocodeLocation = ( latitude, longitude ) => {
 };
 
 const recalculateBadges = () => {
+  let badgeEarned = false;
+
   Realm.open( realmConfig.default )
     .then( ( realm ) => {
       const collectedTaxa = realm.objects( "TaxonRealm" );
@@ -55,19 +57,22 @@ const recalculateBadges = () => {
               badge.earned = true;
               badge.earnedDate = new Date();
             } );
+            badgeEarned = true;
           }
         } else if ( badge.count !== 0 ) {
           if ( collectedTaxa.length >= badge.count ) {
             realm.write( () => {
               badge.earned = true;
               badge.earnedDate = new Date();
             } );
+            badgeEarned = true;
           }
         }
       } );
     } ).catch( ( err ) => {
       console.log( "[DEBUG] Failed to open realm in recalculate badges, error: ", err );
     } );
+  return badgeEarned;
 };
 
 const addToCollection = ( observation, latitude, longitude, image ) => {