[add] creatures page updated for mobx

src/components/portal/Category/Creatures.js

@@ -5,67 +5,76 @@ import PageNotFound from '../../PageNotFound';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import UnderConstruction from '../../UnderConstruction';
+import {observer, inject} from 'mobx-react';
 
+@inject((stores, props, context) => props) @observer
 export default class Creatures extends React.Component {
 
+  // ** Process the tribe ** //
+  // /portal/Creatures/
+  // /portal/{Tribe}/Creatures/
+  // The first / gets counted
   render() {
     if (this.props.children) {
       return (<div>{this.props.children}</div>);
     }
-    return (
-      <UnderConstruction location={this.props.location}/>
-    );
-  }
+    const store = API;
 
-  fakerender() {
-    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
+
+    let tribe = (() => {
+      if (path.length !== 4) return "None";
+      if (path[2] === "Creatures") return path[3];
+      if (path[3] === "Creatures") return path[2];
+    })();
+
+    if (store.urls === null ||
+      store.portal === null) {
+      return (<span>Loading...</span>);
     }
-    var self = this;
 
-    // If tribe
-    if (this.state.tribe !== "All") {
-      if (!(API.Creatures).hasOwnProperty(this.state.tribe)) {
-        return(
-          <PageNotFound location={this.props.location}/>
-        );
-      }
-      else return (
-        <div>{list_creatures(this.state.tribe)}</div>
+    // If there isn't a supported tribe,
+    // Displays list of tribes
+    if (!store.urls.Creatures.hasOwnProperty(tribe)) {
+      return(
+        <div>
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/Danian"
+          >Danian</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/Overworld"
+          >Overworld</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/Underworld"
+          >Underworld</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/Mipedian"
+          >Mipedian</Interactive>
+        </div>
       );
     }
-    // No tribe specified
-    // Display all creatures
-    else {
-      const creatures = Object.keys(this.state.creatures).map(function(tribe, i) {
-        return (
-          <div key={i}>
-            <Interactive as={Link} {...s.link}
-              to={"/portal/"+tribe}
-            ><span style={s.title}>{tribe}</span></Interactive>
-            {list_creatures(tribe, "Creatures/"+tribe+"/")}
-            <hr />
-          </div>
-        );
-      });
-      return (<div>{creatures}</div>);
+
+    if (!store.portal.built.includes("creatures_"+tribe)) {
+      store.portal.setupCreatures(tribe);
+      return (<span>Loading...</span>);
     }
 
-    // Map creatures of the tribe
-    function list_creatures(tribe, path="Creatures/") {
-      if (!self.state.creatures[tribe]) {
-        return (<span>Loading...</span>);
-      }
-      else return self.state.creatures[tribe].map((creature, i) => {
-        return (
-          <div key={i}>
-            <Interactive as={Link} {...s.link}
-              to={path+creature.gsx$name.$t}
-              onClick={self.hacks}
-            ><span>{creature.gsx$name.$t}</span></Interactive>
-          </div>
-        );
-      });
-    }
+    const creatures = store.portal.creatures.find({'gsx$tribe': tribe});
+    const output = creatures.map((creature, i) => {
+      return (
+        <div key={i}>
+          <Interactive as={Link} {...s.link}
+            to={'/portal/Creatures/'+tribe+'/'+creature.gsx$name}
+          ><span>{creature.gsx$name}</span></Interactive>
+        </div>
+      );
+    });
+
+    return (<div>{output}</div>);
   }
+
 }

src/components/portal/Home.js

@@ -10,21 +10,6 @@ export default function PortalHome() {
         to="/portal/Creatures"
       >Creatures</Interactive>
       <br />
-      <Interactive as={Link} {...s.link}
-        to="/portal/Danian/Creatures"
-      >Danian</Interactive>
-      <br />
-      <Interactive as={Link} {...s.link}
-        to="/portal/Overworld/Creatures"
-      >Overworld</Interactive>
-      <br />
-      <Interactive as={Link} {...s.link}
-        to="/portal/Underworld/Creatures"
-      >Underworld</Interactive>
-      <br />
-      <Interactive as={Link} {...s.link}
-        to="/portal/Mipedian/Creatures"
-      >Mipedian</Interactive>
     </div>
   );
 }

src/components/portal/Single/Creature.js

@@ -37,9 +37,9 @@ export default class SingleCreature extends React.Component {
     }
 
     // Todo this isn't needed for now (handled by routes)
-    // if (!store.urls.Creatures.hasOwnProperty(tribe)) {
-    //   return (<span>Invalid Tribe: {tribe}</span>);
-    // }
+    if (!store.urls.Creatures.hasOwnProperty(tribe)) {
+      return (<span>Invalid Tribe: {tribe}</span>);
+    }
 
     if (!store.cards.built.includes("creatures_Cards")) {
       store.cards.setupCreatures("Cards");

src/index.js

@@ -71,22 +71,16 @@ const routes = (
 
       {/* Creatures */}
       <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
-        <Route path="Overworld" component={Tribes} mapMenuTitle="Overworld">
+        <Route path="Overworld" component={Creatures} mapMenuTitle="Overworld">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Underworld" component={Tribes} mapMenuTitle="Underworld">
+        <Route path="Underworld" component={Creatures} mapMenuTitle="Underworld">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
+        <Route path="Mipedian" component={Creatures} 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="Danian" component={Creatures} mapMenuTitle="Danian">
           <Route path="*" component={SingleCreature} />
         </Route>
       </Route>
@@ -105,9 +99,6 @@ const routes = (
         <Route path="Danian" component={Tribes} mapMenuTitle="Danian">
           <Route path="*" component={UnderConstruction} />
         </Route>
-        <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>