[add] creature category (single tribe)

src/components/App.js

@@ -25,9 +25,9 @@ function App({ children, routes }) {
       .map((route, index, array) => (
         <span key={index}>
             <Interactive
-              as={Link}
+              as="a"
               {...s.link}
-              to={nextPath(route)}
+              href={nextPath(route)}
             >{route.mapMenuTitle}</Interactive>
             {(index + 1) < array.length && ' / '}
           </span>

src/components/Category/Creatures.js

@@ -1,29 +1,85 @@
 import React from 'react';
-import URLS from '../Spreadsheet';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
 import UnderConstruction from '../UnderConstruction';
+import PageNotFound from '../PageNotFound';
+import API from '../Spreadsheet';
+import s from '../../styles/app.style';
 
 export default class Creatures extends React.Component {
 
   constructor(props) {
     super (props);
     console.log(props);
+    this.url = '';
+    this.state = {creatures: []};
   }
 
   componentDidMount() {
+    if (this.props.children) return;
+
+    var self = this;
+    API.getSpreadsheet(this.url, function(data) {
+      // self.setState({creatures: this.state.creatures.concat([data])});
+      self.setState({creatures: data});
+    });
   }
 
   render() {
-    // const creature = this.state.creatures.map((item, i) => {
-    //   return (
-    //     <div>{item.title.$t}</div>
-    //   );
-    // });
+    if (this.props.children) {
+      return (<div>{this.props.children}</div>);
+    }
+    let path = this.props.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
+    // ** Process the tribe ** //
+    // /portal/Creatures/
+    // /portal/{Tribe}/Creatures/
+    // The first / gets counted
+    let tribe = "";
+    if ( path.length === 4)
+    {
+      tribe = path[2];
+    }
+    // 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}/>);
+    }
+
+    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>
-      {this.props.children||
-        <UnderConstruction location={this.props.location}/>
-      }
+        {creatures}
       </div>
     );
   }

src/components/Home.js

@@ -14,7 +14,12 @@ function Home() {
 
   return (
     <div>
-      <p style={s.p}>
+      <Interactive
+        as="a"
+        {...s.link}
+        href="/portal/Overworld/Creatures"
+      >Overworld Creatures</Interactive>
+      {/*<p style={s.p}>
         This is an example single page app built
         with React and React&nbsp;Router using {' '}
         {s.code('browserHistory')}. Navigate with the links below and
@@ -25,7 +30,9 @@ function Home() {
       <p style={s.p}>
         Please see the {repoReadmeLink('repo readme')} for instructions on how to
         use this boilerplate to deploy your own single page app using GitHub Pages.
-      </p>
+      </p>*/}
+      <br />
+      <br />
       <div style={s.pageLinkContainer}>
         <Interactive
           as={Link}

src/components/Single/Creature.js

@@ -3,7 +3,6 @@ import Interactive from 'react-interactive';
 import { Link } from 'react-router';
 // import {browserHistory} from 'react-router';
 import PageNotFound from '../PageNotFound';
-import Tribes from '../Category/Tribes';
 import UnderConstruction from '../UnderConstruction';
 import API from '../Spreadsheet';
 import s from '../../styles/app.style';
@@ -12,7 +11,6 @@ export default class SingleCreature extends React.Component {
 
   constructor(props) {
     super (props);
-    this.location = props.location;
     this.url = '';
     this.creature = '';
     this.state = {creature: null, card_data: null};
@@ -33,7 +31,7 @@ export default class SingleCreature extends React.Component {
   }
 
   render() {
-    let path = this.location.pathname.split("/");
+    let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
     // ** Process the tribe ** //
@@ -42,12 +40,11 @@ export default class SingleCreature extends React.Component {
     // The first / gets counted
     if ( path.length !== 5 )
     {
-      return(<PageNotFound location={this.location}/>);
+      return(<PageNotFound location={this.props.location}/>);
       //return(browserHistory.push('/PageNotFound'));
     }
 
     let tribe = "";
-    // return (<div className={Tribe}>test</div>);
 
     //Handle both url layouts
     if (path[2] === "Creatures") tribe = path[3];
@@ -59,13 +56,22 @@ export default class SingleCreature extends React.Component {
         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.location}/>);
+        return(<PageNotFound location={this.props.location}/>);
     }
 
     // confusing, this.creature is a string for the api call,
@@ -76,7 +82,7 @@ export default class SingleCreature extends React.Component {
 
     // console.log(this.state.creature);
     if (creature == null || card_data == null) {
-      return(<PageNotFound location={this.location}/>);
+      return(<PageNotFound location={this.props.location}/>);
     }
     // console.log(this.state.card_data);
 

src/index.js

@@ -30,94 +30,123 @@ const routes = (
         <Route path="two-deep" mapMenuTitle="Two Deep" component={ExampleTwoDeepComponent} />
       </Route>
 
-      <Route path="Attacks" component={UnderConstruction}>
+      {/* Attacks */}
+      <Route path="Attacks" component={UnderConstruction} mapMenuTitle="Attacks">
         <Route path="*" component={UnderConstruction} />
       </Route>
 
-      <Route path="Battlegear" component={UnderConstruction}>
+      {/* Battlegear */}
+      <Route path="Battlegear" component={UnderConstruction} mapMenuTitle="Battlegear">
         <Route path="*" component={UnderConstruction} />
       </Route>
 
-      <Route path="Creatures" component={Creatures}>
-        <Route path="Overworld" component={Tribes}>
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Underworld" component={Tribes}>
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mipedian" component={Tribes}>
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Danian" component={Tribes}>
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Marrillian" component={Tribes}>
-          <Route path="*" component={SingleCreature} />
-        </Route>
-      </Route>
-
-      <Route path="Locations" component={UnderConstruction}>
+      {/* Locations */}
+      <Route path="Locations" component={UnderConstruction} mapMenuTitle="Locations">
         <Route path="*" component={UnderConstruction} />
       </Route>
 
-      <Route path="Mugic" component={UnderConstruction}>
-        <Route path="Overworld" component={Tribes}>
+      {/* Creatures */}
+      <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
+        <Route path="Overworld" component={Tribes} mapMenuTitle="Overworld">
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Underworld" component={Tribes} mapMenuTitle="Underworld">
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Danian" component={Tribes} mapMenuTitle="Danian">
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Marrillian" component={Tribes} mapMenuTitle="M'arrillian">
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Generic" component={Tribes} mapMenuTitle="Generic">
+          <Route path="*" component={SingleCreature} />
+        </Route>
+      </Route>
+
+      {/* Mugic */}
+      <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+        <Route path="Overworld" component={Tribes} mapMenuTitle="Overworld">
           <Route path="*" component={UnderConstruction} />
         </Route>
-        <Route path="Underworld" component={Tribes}>
+        <Route path="Underworld" component={Tribes} mapMenuTitle="Underworld">
           <Route path="*" component={UnderConstruction} />
         </Route>
-        <Route path="Mipedian" component={Tribes}>
+        <Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
           <Route path="*" component={UnderConstruction} />
         </Route>
-        <Route path="Danian" component={Tribes}>
+        <Route path="Danian" component={Tribes} mapMenuTitle="Danian">
           <Route path="*" component={UnderConstruction} />
         </Route>
-        <Route path="Marrillian" component={Tribes}>
+        <Route path="Marrillian" component={Tribes} mapMenuTitle="M'arrillian">
+          <Route path="*" component={UnderConstruction} />
+        </Route>
+        <Route path="Generic" component={Tribes} mapMenuTitle="Generic">
           <Route path="*" component={UnderConstruction} />
         </Route>
       </Route>
 
-      <Route path="Overworld" component={Tribes}>
-        <Route path="Creatures" component={Creatures}>
+      {/* Overworld */}
+      <Route path="Overworld" component={Tribes} mapMenuTitle="Overworld">
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} />
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+          <Route path="*" component={UnderConstruction} />
+        </Route>
       </Route>
 
-      <Route path="Underworld" component={Tribes}>
-        <Route path="Creatures" component={Creatures}>
+      {/* Underworld */}
+      <Route path="Underworld" component={Tribes} mapMenuTitle="Underworld">
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} />
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+          <Route path="*" component={UnderConstruction} />
+        </Route>
       </Route>
 
-      <Route path="Mipedian" component={Tribes}>
-        <Route path="Creatures" component={Creatures}>
+      {/* Mipedian */}
+      <Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} />
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+          <Route path="*" component={UnderConstruction} />
+        </Route>
       </Route>
 
-      <Route path="Danian" component={Tribes}>
-        <Route path="Creatures" component={Creatures}>
+      {/* Danian */}
+      <Route path="Danian" component={Tribes} mapMenuTitle="Danian">
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} />
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+          <Route path="*" component={UnderConstruction} />
+        </Route>
       </Route>
 
-      <Route path="Marrillian" component={Tribes}>
-        <Route path="Creatures" component={Creatures}>
+      {/* M'arrillian */}
+      <Route path="Marrillian" component={Tribes} mapMenuTitle="Marrillian">
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} />
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+          <Route path="*" component={UnderConstruction} />
+        </Route>
       </Route>
 
-      <Route path="Generic" component={Tribes}>
-        <Route path="Creatures" component={Creatures}>
+      {/* Generic */}
+      <Route path="Generic" component={Tribes} mapMenuTitle="Generic">
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} />
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+          <Route path="*" component={UnderConstruction} />
+        </Route>
       </Route>
 
     </Route>