[fix] enter the code, collection

src/components/SpreadsheetData.js

@@ -26,6 +26,11 @@ class API {
     return API.base_url + spreadsheetID + API.data_format;
   }
 
+  // Wrapper
+  path(spreadsheetID) {
+    return API.path(spreadsheetID);
+  }
+
   constructor() {
     // This sets up urls and kicks off db
     let urls = {};
@@ -42,12 +47,12 @@ class API {
 
   getSpreadsheet(spreadsheet, callback) {
     fetch(spreadsheet)
-      .then(function(response) {
+      .then((response) => {
         // console.log(response);
         return response.json();
-      }).then(function(json) {
+      }).then((json) => {
         return callback(json.feed.entry);
-      }).catch(function(err) {
+      }).catch((err) => {
         console.log('parsing failed', err);
         return callback(null);
       });
@@ -187,4 +192,5 @@ class CollectionDB {
       this.built.push("mugic_"+type);
     });
   }
+
 }

src/components/account/EnterTheCode.js

@@ -29,9 +29,24 @@ s.hyphen = {
 @inject((stores, props, context) => props) @observer
 export default class EnterTheCode extends React.Component {
   @observable code = "";
-  @observable message = "";
+  @observable message = null;
+  @observable fan = null;
 
   render() {
+    if (!this.fan) {
+      API.getSpreadsheet(API.path("1hzSojB76Me-P1qppxYR0oiHSU56jyK59x3DKm660ntc"), (data) => {
+        this.fan = data;
+      });
+      return (<span>Loading...</span>);
+    }
+
+    let getRandomInt = (min, max) => {
+      min = Math.ceil(min);
+      max = Math.floor(max);
+      //The maximum is exclusive and the minimum is inclusive
+      return Math.floor(Math.random() * (max - min)) + min;
+    }
+
     let validate = (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -41,10 +56,12 @@ export default class EnterTheCode extends React.Component {
         );
       }
       else {
+        let card = this.fan[getRandomInt(0, this.fan.length)];
         this.message = (
-          <div>
+          <div key="1">
             <p> Congrats on your scan! </p><br />
-            <img className="card" src={API.base_image + "1mlqp46AcMVmrP_rspK7vlr7K0_-1k4QI"} />
+            <p> {card.gsx$name.$t} </p><br />
+            <img className="card" src={API.base_image + card.gsx$image.$t} />
           </div>
         );
       }

src/components/collection/Home.js

@@ -37,32 +37,28 @@ export default class CollectionHome extends React.Component {
     }
 
     // Load all the data
-    if (!store.cards.built.includes("attacks_Cards")) {
-      store.cards.setupAttacks("Cards");
+    if (!store.cards.built.includes("attacks_cards")) {
+      store.cards.setupAttacks("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("battlegear_Cards")) {
-      store.cards.setupBattlegear("Cards");
+    if (!store.cards.built.includes("battlegear_cards")) {
+      store.cards.setupBattlegear("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("creatures_Cards")) {
-      store.cards.setupCreatures("Cards");
+    if (!store.cards.built.includes("creatures_cards")) {
+      store.cards.setupCreatures("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("locations_Cards")) {
-      store.cards.setupLocations("Cards");
+    if (!store.cards.built.includes("locations_cards")) {
+      store.cards.setupLocations("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("mugic_Cards")) {
-      store.cards.setupMugic("Cards");
-      return (<span>Loading...</span>);
-    }
-
-    if (loading === true) {
+    if (!store.cards.built.includes("mugic_cards")) {
+      store.cards.setupMugic("cards");
       return (<span>Loading...</span>);
     }