redesign portal pages for Creatures and Mugic

src/components/Snippets.js

@@ -14,8 +14,7 @@ export function UnderConstruction(props) {
 export function PageNotFound(props) {
   return (
     <p style={s.p}>
-      Page not found - the path, {s.code(props.location.pathname)},
-      did not match any React Router routes.
+      Page not found - the path, {s.code(props.location.pathname)}, did not match any routes.
     </p>
   );
 }

src/components/SpreadsheetData.js

@@ -207,7 +207,7 @@ class API {
   }
 
   get tribes() {
-    return ["Danian", "Generic", "Mipedian", encodeURIComponent("M'arrillian"), "OverWorld", "UnderWorld"];
+    return ["Danian", "Generic", "Mipedian", "M'arrillian", "OverWorld", "UnderWorld"];
   }
 
   // For the conversion of shorthand in database

src/components/portal/Category.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import Interactive from 'react-interactive';
+import { Link, Route } from 'react-router-dom';
+import {observable} from 'mobx';
+import {observer, inject} from 'mobx-react';
+import s from '../../styles/app.style';
+import API from '../SpreadsheetData';
+import {Loading} from '../Snippets';
+
+@inject((stores, props, context) => props) @observer
+export default class Category extends React.Component {
+  @observable loaded = false;
+
+  constructor(props) {
+    super(props);
+    this.type = props.type.toLowerCase();
+  }
+
+  render() {
+    if (this.loaded == false) {
+      API.LoadDB([{'cards': this.type}, {'portal': this.type}])
+      .then(() => {
+        this.loaded = true;
+      });
+      return (<Loading />);
+    }
+
+    const create_link = (card, data, i, url) => {
+      return (
+        <div key={i}>
+          <Interactive key={i} as={Link} {...s.link}
+            to={url || `/portal/${this.props.type}/${card.gsx$name}`}
+          >
+            <span>{card.gsx$name}</span><br />
+            <img className="thumb" src={API.base_image + data.gsx$thumb}></img>
+          </Interactive>
+        </div>
+      );
+    };
+
+    let bottom_nav = [];
+    let cat_title = "";
+    let top_content = (<div></div>);
+
+    // ** Process the tribe ** //
+    if (this.type == "creatures" || this.type == "mugic") {
+      // /portal/Creatures/
+      // /portal/Creatures/{Tribe}
+      // The first / gets counted
+      let path = this.props.location.pathname.split("/");
+      if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
+      const tribe = (() => {
+        if (path.length >= 4 && API.tribes.includes(path[3])) return path[3];
+        else return null;
+      })();
+
+      bottom_nav = ((tribe) ?
+        API.portal[this.type].find({'gsx$tribe': tribe})
+        :
+        API.portal[this.type].chain().simplesort('gsx$name').data()
+      ).map((card_portal, i) => {
+        let card_data = API.cards[this.type].findOne({'gsx$name': card_portal.gsx$name});
+        let url = ((tribe) ?
+          `/portal/${this.props.type}/${card_portal.gsx$tribe}/${encodeURIComponent(card_portal.gsx$name)}`
+          :
+          `/portal/${this.props.type}/${encodeURIComponent(card_portal.gsx$name)}`
+        );
+        return create_link(card_portal, card_data, i, url);
+      });
+      cat_title = ((tribe) ?
+        `${tribe} ${this.props.type}`
+        :
+        this.props.type
+      );
+      console.log(this.props.match);
+      top_content = ((tribe) ?
+        (<Route path={`${this.props.match.url}/${tribe}/:card`} component={this.props.component} />)
+        :
+        (<Route path={`${this.props.match.url}/:card`} component={this.props.component} />)
+      );
+    }
+    else {
+      bottom_nav = API.portal[this.type].data.map((card_portal, i) => {
+        let card_data = API.cards[this.type].findOne({'gsx$name': card_portal.gsx$name});
+        return create_link(card_portal, card_data, i);
+      });
+      cat_title = this.props.type;
+      top_content = (<Route path={`${this.props.match.url}/:card`} component={this.props.component} />);
+    }
+    console.log(top_content);
+
+    return (<div className={`entry ${this.type}`}>
+      <div className="top_content">{top_content}</div>
+      <div className="cat_title">{cat_title}</div>
+      <div className="bottom_nav">{bottom_nav}</div>
+    </div>);
+  }
+}

src/components/portal/Category/Category.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import Interactive from 'react-interactive';
-import { Link, Route } from 'react-router-dom';
-import {observable} from 'mobx';
-import {observer, inject} from 'mobx-react';
-import s from '../../../styles/app.style';
-import API from '../../SpreadsheetData';
-import {Loading} from '../../Snippets';
-
-@inject((stores, props, context) => props) @observer
-export default class Category extends React.Component {
-  @observable loaded = false;
-
-  constructor(props) {
-    super(props);
-
-    let path = props.location.pathname.split("/");
-    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
-    this.path = path;
-    this.type = props.type;
-  }
-
-  render() {
-    if (this.loaded == false) {
-      API.LoadDB([{'cards': this.type}, {'portal': this.type}])
-      .then(() => {
-        this.loaded = true;
-      });
-      return (<Loading />);
-    }
-
-    const bottom_nav = API.portal[this.type].data.map((card, i) => {
-      let card_data = API.cards[this.type].findOne({'gsx$name': card.gsx$name});
-      return (
-        <div key={i}>
-          <Interactive key={i} as={Link} {...s.link}
-            to={`/portal/${this.type.charAt(0).toUpperCase()+this.type.substr(1)}/${card.gsx$name}`}
-          >
-            <span>{card.gsx$name}</span><br />
-            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
-          </Interactive>
-        </div>
-      );
-    });
-
-    return (<div className={`entry ${this.type}`}>
-      <div className="top_content">
-        <Route path={`${this.props.match.url}/:card`} component={this.props.component} />
-      </div>
-      <div className="cat_title">{this.type.charAt(0).toUpperCase()+this.type.substr(1)}</div>
-      <div className="bottom_nav">{bottom_nav}</div>
-    </div>);
-  }
-}

src/components/portal/Category/Creatures.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import Interactive from 'react-interactive';
-import { Link, Route } from 'react-router-dom';
-import {observable} from 'mobx';
-import {observer, inject} from 'mobx-react';
-import s from '../../../styles/app.style';
-import API from '../../SpreadsheetData';
-import {Loading} from '../../Snippets';
-import Creature from '../Single/Creature';
-
-@inject((stores, props, context) => props) @observer
-export default class Creatures extends React.Component {
-  @observable loaded = false;
-
-  // ** Process the tribe ** //
-  // /portal/Creatures/
-  // /portal/Creatures/{Tribe}
-  // The first / gets counted
-  render() {
-    if (this.loaded == false) {
-      API.LoadDB([{'cards': 'creatures'}, {'portal': 'creatures'}])
-      .then(() => {
-        this.loaded = true;
-      });
-      return (<Loading />);
-    }
-
-    let path = this.props.location.pathname.split("/");
-    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
-
-    const tribe = (() => {
-      if (path.length >= 4 && API.tribes.includes(path[3])) return path[3];
-      else return null;
-    })();
-
-    const creatures = (() => {
-      if (tribe) {
-        return API.portal.creatures.find({'gsx$tribe': tribe});
-      }
-      else {
-        return API.portal.creatures.chain().simplesort('gsx$name').data();
-      }
-    })();
-
-    const output = creatures.map((creature, i) => {
-      const card_data = API.cards.creatures.findOne({'gsx$name': creature.gsx$name});
-
-      let url = (() => {
-        if (tribe)
-          return "/portal/Creatures/"+creature.gsx$tribe+"/"+creature.gsx$name;
-        else
-          return "/portal/Creatures/"+creature.gsx$name;
-      })();
-
-      return (
-        <div key={i}>
-          <Interactive as={Link} {...s.link}
-            to={url}
-          >
-            <span>{creature.gsx$name}</span><br />
-            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
-          </Interactive>
-        </div>
-      );
-    });
-
-    let tribes = API.tribes.map((tribe, i) => {
-      <Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={Creature} />
-    });
-
-    if (!tribe) {
-      tribes.push(<Route key={10} path={`${this.props.match.url}/:card`} component={Creature} />)
-    }
-
-    return (<div className="entry creatures">
-      <div className="left">
-        <div className="title">{path[2]}<hr /></div>
-        {output}
-      </div>
-      <div className="right">
-        {tribes}
-      </div>
-    </div>);
-  }
-}

src/components/portal/Category/Mugic.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import Interactive from 'react-interactive';
-import { Link, Route } from 'react-router-dom';
-import {observable} from 'mobx';
-import {observer, inject} from 'mobx-react';
-import s from '../../../styles/app.style';
-import API from '../../SpreadsheetData';
-import {Loading} from '../../Snippets';
-import SingleMugic from '../Single/Mugic';
-
-@inject((stores, props, context) => props) @observer
-export default class Mugic extends React.Component {
-  @observable loaded = false;
-
-  // ** Process the tribe ** //
-  // /portal/Mugic/
-  // /portal/{Tribe}/Mugic/
-  // The first / gets counted
-  render() {
-    if (this.loaded == false) {
-      API.LoadDB([{'cards': 'mugic'}, {'portal': 'mugic'}])
-      .then(() => {
-        this.loaded = true;
-      });
-      return (<Loading />);
-    }
-
-    let path = this.props.location.pathname.split("/");
-    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
-
-    const tribe = (() => {
-      if (path.length >= 4 && API.tribes.includes(path[3])) return path[3];
-      else return null;
-    })();
-
-    const mugic = (() => {
-      if (tribe) {
-        return API.portal.mugic.find({'gsx$tribe': tribe});
-      }
-      else {
-        return API.portal.mugic.chain().simplesort('gsx$name').data();
-      }
-    })();
-
-    const output = mugic.map((single_mugic, i) => {
-      const card_data = API.cards.mugic.findOne({'gsx$name': single_mugic.gsx$name});
-
-      let url = (() => {
-        if (tribe)
-          return "/portal/Mugic/"+single_mugic.gsx$tribe+"/"+encodeURIComponent(single_mugic.gsx$name);
-        else
-          return "/portal/Mugic/"+encodeURIComponent(single_mugic.gsx$name);
-      })();
-
-      return (
-        <div key={i}>
-          <Interactive as={Link} {...s.link}
-            to={url}
-          >
-            <span>{single_mugic.gsx$name}</span><br />
-            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
-          </Interactive>
-        </div>
-      );
-    });
-
-    const tribes = API.tribes.map((tribe, i) => (
-      <Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={SingleMugic} />
-    ));
-
-    if (!tribe) {
-      tribes.push(<Route key={10} path={`${this.props.match.url}/:card`} component={SingleMugic} />)
-    }
-
-    return (<div className="entry mugic">
-      <div className="left">
-        <div className="title">{path[2]}<hr /></div>
-        {output}
-      </div>
-      <div className="right">
-        {tribes}
-      </div>
-    </div>);
-  }
-}

src/components/portal/Tribes.js

@@ -4,11 +4,11 @@ import { Link, Route } from 'react-router-dom';
 import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import loki from 'lokijs';
-import s from '../../../styles/app.style';
-import API from '../../SpreadsheetData';
-import {Loading} from '../../Snippets';
-import Creature from '../Single/Creature';
-import Mugic from '../Single/Mugic';
+import s from '../../styles/app.style';
+import API from '../SpreadsheetData';
+import {Loading} from '../Snippets';
+import Creature from './Single/Creature';
+import Mugic from './Single/Mugic';
 
 @inject((stores, props, context) => props) @observer
 export default class Tribes extends React.Component {

src/components/portal/index.js

@@ -6,14 +6,16 @@ import {Link, Route} from 'react-router-dom';
 import API from '../SpreadsheetData';
 import Home from './Home';
 import Search from './Search';
-import Category from './Category/Category';
-import Creatures from './Category/Creatures';
-import Mugic from './Category/Mugic';
-import Tribes from './Category/Tribes';
+import {SearchButton} from '../Snippets';
+
+import Category from './Category';
+import Tribes from './Tribes';
+
 import Attack from './Single/Attack';
 import Battlegear from './Single/Battlegear';
+import Creature from './Single/Creature';
 import Location from './Single/Location';
-import {SearchButton} from '../Snippets';
+import Mugic from './Single/Mugic';
 
 import '../../scss/portal.scss';
 
@@ -37,11 +39,11 @@ function Routing(props) {
   return (
     <div>
       <Route exact path={url} component={Home} />
-      <Route path={`${url}/Attacks`} render={(props) => <Category {...props} type="attacks" component={Attack} />} />
-      <Route path={`${url}/Battlegear`} render={(props) => <Category {...props} type="battlegear" component={Battlegear} />} />
-      <Route path={`${url}/Creatures`} component={Creatures} />
-      <Route path={`${url}/Locations`} render={(props) => <Category {...props} type="locations" component={Location} />} />
-      <Route path={`${url}/Mugic`} component={Mugic} />
+      <Route path={`${url}/Attacks`} render={(props) => <Category {...props} type="Attacks" component={Attack} />} />
+      <Route path={`${url}/Battlegear`} render={(props) => <Category {...props} type="Battlegear" component={Battlegear} />} />
+      <Route path={`${url}/Creatures`} render={(props) => <Category {...props} type="Creatures" component={Creature} />} />
+      <Route path={`${url}/Locations`} render={(props) => <Category {...props} type="Locations" component={Location} />} />
+      <Route path={`${url}/Mugic`} render={(props) => <Category {...props} type="Mugic" component={Mugic} />} />
       {API.tribes.map((tribe, i) => (
       <Route key={i} path={`${url}/${tribe}`} component={Tribes} />
       ))}
@@ -72,7 +74,7 @@ function Header() {
     );
   })();
 
-  const tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => {
+  const tribes = API.tribes.map((tribe, i) => {
     return (
       <li key={i} className="dropdown">
         <Link to=" " className="dropbtn" onClick={voidClick}>{tribe}</Link>