[change] how urls are referenced

src/components/Category/Creatures.js

@@ -10,18 +10,16 @@ export default class Creatures extends React.Component {
 
   constructor(props) {
     super (props);
-    console.log(props);
-    this.url = '';
-    this.state = {creatures: []};
+    this.tribe = '';
+    this.state = {creatures: {}};
   }
 
   componentDidMount() {
     if (this.props.children) return;
-
     var self = this;
-    API.getSpreadsheet(this.url, function(data) {
+    API.getSpreadsheet(API.Creatures[this.tribe], function(data) {
       // self.setState({creatures: this.state.creatures.concat([data])});
-      self.setState({creatures: data});
+      self.setState({creatures: Object.assign(self.state.creatures, {[self.tribe]: data})});
     });
   }
 
@@ -36,51 +34,38 @@ export default class Creatures extends React.Component {
     // /portal/Creatures/
     // /portal/{Tribe}/Creatures/
     // The first / gets counted
-    let tribe = "";
-    if ( path.length === 4)
-    {
-      tribe = path[2];
+    var self = this;
+    if ( path.length === 4) {
+      this.tribe = path[2];
+
+      if (!(API.Creatures).hasOwnProperty(this.tribe)) {
+        return(
+          <PageNotFound location={this.props.location}/>
+        );
+      }
+      else return (
+        <div>{list_creatures(this.tribe)}</div>
+      );
     }
+    // No tribe specified
     // Display all creatures
     else {
       return (<div><UnderConstruction location={this.props.location}/></div>);
     }
 
-    switch (tribe) {
-      case 'Overworld':
-        this.url = API.Overworld_Creatures;
-        break;
-      case 'Underworld':
-        this.url = API.Underworld_Creatures;
-        break;
-      case 'Mipedian':
-        this.url = API.Mipedian_Creatures;
-        break;
-      case 'Danian':
-        this.url = API.Danian_Creatures;
-        break;
-      case 'Marrillian':
-        this.url = API.Marrillian_Creatures;
-        break;
-      case 'Generic':
-        this.url = API.Generic_Creatures;
-        break;
-      default:
-        return(<PageNotFound location={this.props.location}/>);
+    // Map creatures of the tribe
+    function list_creatures(tribe) {
+      if (!self.state.creatures[self.tribe]) {
+        return (<span>Loading...</span>);
+      }
+      else return self.state.creatures[self.tribe].map((creature, i) => {
+        return (
+          <div key={i}>
+            <Interactive as="a" {...s.link} href={"Creatures/"+creature.gsx$name.$t}><span>{creature.gsx$name.$t}</span></Interactive>
+          </div>
+        );
+      });
     }
 
-    const creatures = this.state.creatures.map((creature, i) => {
-      return (
-        <div key={i}>
-          <Interactive as="a" {...s.link} href={"Creatures/"+creature.gsx$name.$t}><span>{creature.gsx$name.$t}</span></Interactive>
-        </div>
-      );
-    });
-
-    return (
-      <div>
-        {creatures}
-      </div>
-    );
   }
 }

src/components/Home.js

@@ -14,11 +14,33 @@ function Home() {
 
   return (
     <div>
-      <Interactive
-        as="a"
-        {...s.link}
+      <Interactive as="a" {...s.link}
+        href="/portal/Creatures"
+      >Creatures</Interactive>
+      <br />
+      <Interactive as="a" {...s.link}
+        href="/portal/Danian/Creatures"
+      >Danian Creatures</Interactive>
+      <br />
+      <Interactive as="a" {...s.link}
         href="/portal/Overworld/Creatures"
       >Overworld Creatures</Interactive>
+      <br />
+      <Interactive as="a" {...s.link}
+        href="/portal/Underworld/Creatures"
+      >Underworld Creatures</Interactive>
+      <br />
+      <Interactive as="a" {...s.link}
+        href="/portal/Mipedian/Creatures"
+      >Mipedian Creatures</Interactive>
+      <br />
+      <Interactive as="a" {...s.link}
+        href="/portal/Marrillian/Creatures"
+      >M'arrillian Creatures</Interactive>
+      <br />
+      <Interactive as="a" {...s.link}
+        href="/portal/Generic/Creatures"
+      >Generic Creatures</Interactive>
       {/*<p style={s.p}>
         This is an example single page app built
         with React and React&nbsp;Router using {' '}

src/components/Single/Creature.js

@@ -11,22 +11,30 @@ export default class SingleCreature extends React.Component {
 
   constructor(props) {
     super (props);
-    this.url = '';
+    this.tribe = '';
     this.creature = '';
     this.state = {creature: null, card_data: null};
   }
 
   componentDidMount() {
     var self = this;
-    API.getSpreadsheet(this.url, function(data) {
+    API.getSpreadsheet(API.Creatures[this.tribe], function(data) {
       data.map((item, i) => {
         if (item.title.$t == self.creature) self.setState({creature: item });
       });
+      // If no creature set as false
+      if (!self.state.creature) {
+        self.setState({creature: "n/a"});
+      }
     });
     API.getSpreadsheet(API.Creatures_Card_Data, function(data) {
       data.map((item, i) => {
         if (item.title.$t == self.creature) self.setState({card_data: item });
       });
+      // If no card_data set as false
+      if (!self.state.card_data) {
+        self.setState({card_data: "n/a"});
+      }
     });
   }
 
@@ -40,51 +48,37 @@ export default class SingleCreature extends React.Component {
     // The first / gets counted
     if ( path.length !== 5 )
     {
-      return(<PageNotFound location={this.props.location}/>);
+      return(
+        <PageNotFound location={this.props.location}/>
+      );
       //return(browserHistory.push('/PageNotFound'));
     }
 
-    let tribe = "";
-
     //Handle both url layouts
-    if (path[2] === "Creatures") tribe = path[3];
-    if (path[3] === "Creatures") tribe = path[2];
+    if (path[2] === "Creatures") this.tribe = path[3];
+    if (path[3] === "Creatures") this.tribe = path[2];
 
     // Get spreadsheet data based on tribe/name
-    switch (tribe) {
-      case 'Overworld':
-        this.url = API.Overworld_Creatures;
-        break;
-      case 'Underworld':
-        this.url = API.Underworld_Creatures;
-        break;
-      case 'Mipedian':
-        this.url = API.Mipedian_Creatures;
-        break;
-      case 'Danian':
-        this.url = API.Danian_Creatures;
-        break;
-      case 'Marrillian':
-        this.url = API.Marrillian_Creatures;
-        break;
-      case 'Generic':
-        this.url = API.Generic_Creatures;
-        break;
-      default:
-        return(<PageNotFound location={this.props.location}/>);
+    if (!(API.Creatures).hasOwnProperty(this.tribe)) {
+      return(
+        <PageNotFound location={this.props.location}/>
+      );
     }
 
+    this.creature = path[4];
     // confusing, this.creature is a string for the api call,
     // creature is the object to be used in the jsx
-    this.creature = path[4];
     var creature = this.state.creature;
     var card_data = this.state.card_data;
 
-    // console.log(this.state.creature);
-    if (creature == null || card_data == null) {
-      return(<PageNotFound location={this.props.location}/>);
-    }
-    // console.log(this.state.card_data);
+    // TODO separate loading of card_data
+    if (creature == "n/a") return(
+      <PageNotFound location={this.props.location}/>
+    );
+
+    if (creature == null || card_data == null) return(
+      <span>Loading...</span>
+    );
 
     const elements = card_data.gsx$elements.$t.split(/[ ,]+/).map((item, i) => {
       return <img className="icon" src={"/portal/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
@@ -99,7 +93,7 @@ export default class SingleCreature extends React.Component {
     });
 
     return(
-      <div className={"creature " + tribe.toLowerCase()}>
+      <div className={"creature " + this.tribe.toLowerCase()}>
         <h1>{creature.gsx$name.$t}</h1>
         <img className="splash" src={API.base_image + creature.gsx$splash.$t}></img>
         <hr />
@@ -159,8 +153,8 @@ export default class SingleCreature extends React.Component {
         </div>
         <hr />
         <div>
-          <strong>Tribe: </strong>{tribe}
-          <img className="icon" src={"/portal/src/img/icons/tribes/"+tribe.toLowerCase()+".png"}></img>
+          <strong>Tribe: </strong>{this.tribe}
+          <img className="icon" src={"/portal/src/img/icons/tribes/"+this.tribe.toLowerCase()+".png"}></img>
         </div>
         <hr />
         <div>

src/components/Spreadsheet.js

@@ -68,8 +68,16 @@ class URLS {
     return URLS.path("1c_XAxQsDIWVdzUxWl5t-K_mQumNjX-yrg0X-0NsZVts");
   }
 
-
-
+  get Creatures() {
+    return {
+      'Overworld': URLS.path("1Z4_MmlV7uE34nLzrcxslqQKRwL4OBXNA15s7G8eteXU"),
+      'Underworld': URLS.path("1c_XAxQsDIWVdzUxWl5t-K_mQumNjX-yrg0X-0NsZVts"),
+      'Mipedian': URLS.path("1P4FKASfnhR46j2bqm89T9xhI1Yyyy-jiZ1CkRglSy2k"),
+      'Danian': URLS.path("1-Lz-itwOobEvqr8HSLFFwg3JFkT64NbwyGFEPfj9rxU"),
+      'Marrillian': URLS.path("1rLlzND9hHgxJuEtcTE4nbIVb16IjRme8V-I4vyryIEU"),
+      'Generic': URLS.path("1pnDahSxGDNKvDmwRfYF4Cd75q5plmtb9tvGvU7RM05g")
+    };
+  }
 
 }