#4 collection

src/components/SpreadsheetData.js

@@ -179,8 +179,6 @@ class CollectionDB {
   // example format
   // this.setup(this.api.urls.Attacks["portal"], "Attack", (data) => {});
   async setupType(type, resolve) {
-    console.log(type, this.format, this.building[type]);
-
     if (this.building[type]) {
       if (this.building[type] == "built") {
         return resolve();
@@ -196,9 +194,11 @@ class CollectionDB {
     else {
       this.building[type] = "building";
       let uc_type = type.charAt(0).toUpperCase() + type.slice(1);
+      console.log(type, this.format, this.building[type]);
       return this.setup(this.api.urls[uc_type][this.format], uc_type, (data) => {
         this[type].insert(data);
         this.building[type] = "built";
+        console.log(type, this.format, this.building[type]);
         resolve();
       });
     }

src/components/collection/List.js

@@ -20,13 +20,13 @@ export default class CardList extends React.Component {
     }
     return cards.map((card, i) => {
       switch (card.gsx$type) {
-      case "Attack":
+      case "Attacks":
         return (<Attack attack={card} key={i} setImage={this.props.setImage.bind(this)}/>);
       case "Battlegear":
         return (<Battlegear battlegear={card} key={i} setImage={this.props.setImage.bind(this)}/>);
-      case "Creature":
+      case "Creatures":
         return (<Creature creature={card} key={i} setImage={this.props.setImage.bind(this)}/>);
-      case "Location":
+      case "Locations":
         return (<Location location={card} key={i} setImage={this.props.setImage.bind(this)}/>);
       case "Mugic":
         return (<Mugic mugic={card} key={i} setImage={this.props.setImage.bind(this)}/>);

src/components/collection/index.js

@@ -8,6 +8,7 @@ import SearchForm from './Search';
 
 @inject((stores, props, context) => props) @observer
 export default class Home extends React.Component {
+  @observable loaded = false;
   @observable n = 10;
   @observable p = 1;
   @observable content = [];
@@ -23,42 +24,18 @@ export default class Home extends React.Component {
   }
 
   render() {
-    if (this.props.children) {
-      return (<div>{this.props.children}</div>);
-    }
 
-    let loading = false;
-
-    const store = API;
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    // Load all the data
-    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");
-      return (<span>Loading...</span>);
-    }
-
-    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");
-      return (<span>Loading...</span>);
-    }
-
-    if (!store.cards.built.includes("mugic_cards")) {
-      store.cards.setupMugic("cards");
+    if (this.loaded == false) {
+      API.buildCollection([{'cards': 'attacks'}, , {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
+      .then(() => {
+        this.loaded = true;
+      });
       return (<span>Loading...</span>);
     }