#5 more routing fixes/changes

src/components/Home.js

@@ -1,31 +1,7 @@
 import React from 'react';
 import { Route, Link } from 'react-router-dom';
 
-/* Components */
-import {PageNotFound, UnderConstruction} from './Snippets';
-import EnterTheCode from './account/EnterTheCode';
-import Collection from './collection/index';
-import Portal from './portal/index';
-
-import ExampleHome from './example/Home';
-import ExampleBase from './example/Base';
-import ExampleComponent from './example/ExampleComponent';
-import ExampleTwoDeepComponent from './example/ExampleTwoDeepComponent';
-
-export function Routing(props) {
-  return (
-    <div>
-      <Route exact path="/" component={Home} />
-      <Route path="/PageNotFound" component={PageNotFound} />
-      <Route path="/UnderConstruction" component={UnderConstruction} />
-      <Route path="/EnterTheCode" component={EnterTheCode} />
-      <Route path="/collection" component={Collection} />
-      <Route path="/portal" component={Portal} />
-    </div>
-  );
-}
-
-function Home() {
+export default function Home() {
   return (
     <div>
       <link rel="stylesheet" href="/src/css/with_love.css" />

src/components/index.js

@@ -3,10 +3,13 @@ import { render } from 'react-dom';
 import { Link } from 'react-router-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import s from '../styles/app.style';
-import {Routing} from './Home';
 
-const language = "ENG";
-const bkgrnd = "05";
+/* Components */
+import {PageNotFound, UnderConstruction} from './Snippets';
+import EnterTheCode from './account/EnterTheCode';
+import Collection from './collection/index';
+import Portal from './portal/index';
+import Home from './Home';
 
 render(
   <Router>
@@ -17,6 +20,22 @@ render(
   , document.getElementById('root'),
 );
 
+function Routing(props) {
+  return (
+    <div>
+      <Route exact path="/" component={Home} />
+      <Route path="/PageNotFound" component={PageNotFound} />
+      <Route path="/UnderConstruction" component={UnderConstruction} />
+      <Route path="/EnterTheCode" component={EnterTheCode} />
+      <Route path="/collection" component={Collection} />
+      <Route path="/portal" component={Portal} />
+    </div>
+  );
+}
+
+const language = "ENG";
+const bkgrnd = "05";
+
 function Base(props) {
 
   const children = <Routing {...props} />;

src/components/portal/Category/Creatures.js

@@ -96,13 +96,17 @@ export default class Creatures extends React.Component {
       );
     });
 
+    const tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => (
+      <Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={Creature} />
+    ));
+
     return (<div className="entry creatures">
       <div className="left">
         <div className="title">{path[2]}<hr /></div>
         {output}
       </div>
       <div className="right">
-        <Route path={`${this.props.match.url}/:card`} component={Creature} />
+        {tribes}
       </div>
     </div>);
   }

src/components/portal/Category/Mugic.js

@@ -100,13 +100,17 @@ export default class Mugic extends React.Component {
       );
     });
 
+    const tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => (
+      <Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={SingleMugic} />
+    ));
+
     return (<div className="entry mugic">
       <div className="left">
         <div className="title">{path[2]}<hr /></div>
         {output}
       </div>
       <div className="right">
-        <Route path={`${this.props.match.url}/:card`} component={SingleMugic} />
+        {tribes}
       </div>
     </div>);
   }

src/components/portal/Category/Tribes.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import Interactive from 'react-interactive';
-import { Link } from 'react-router-dom';
-import API from '../../SpreadsheetData';
-import s from '../../../styles/app.style';
+import { Link, Route } from 'react-router-dom';
 import {observer, inject} from 'mobx-react';
+import s from '../../../styles/app.style';
+import API from '../../SpreadsheetData';
+import Creature from '../Single/Creature';
+import Mugic from '../Single/Mugic';
 
 @inject((stores, props, context) => props) @observer
 export default class Tribes extends React.Component {
@@ -13,9 +15,6 @@ export default class Tribes extends React.Component {
   // to display the respective subcategories
   // -> /{Tribe}/Mugic || /{Tribe}/Creatures
   render() {
-    if (this.props.children) {
-      return (<div>{this.props.children}</div>);
-    }
 
     const store = API;
 
@@ -52,13 +51,19 @@ export default class Tribes extends React.Component {
       );
     }
 
-    return (
-      <div>
-        <h1>{tribe}</h1>
-        <br />
-        <Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Creatures"}>Creatures</Interactive><br />
-        <Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Mugic"}>Mugic</Interactive>
+    const output = (() => (
+      <div>Test</div>
+    ))();
+
+    return (<div className="entry creatures">
+      <div className="left">
+        <div className="title">{path[2]}<hr /></div>
+        {output}
       </div>
-    );
+      <div className="right">
+        <Route path={`${this.props.match.url}/Creatures/:card`} component={Creature} />
+        <Route path={`${this.props.match.url}/Mugic/:card`} component={Mugic} />
+      </div>
+    </div>);
   }
 }

src/components/portal/Home.js

@@ -1,35 +1,7 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
 import API from '../SpreadsheetData';
 
-import Attacks from './Category/Attacks';
-import Battlegear from './Category/Battlegear';
-import Creatures from './Category/Creatures';
-import Locations from './Category/Locations';
-import Mugic from './Category/Mugic';
-import Tribes from './Category/Tribes';
-
-export function Routing(props) {
-  console.log(props);
-  const match = props.match;
-
-  const tribes = API.tribes.map((tribe, i) => (
-    <Route key={i} path={`${match.url}/${tribe}`} component={Tribes} />
-  ));
-  return (
-    <div>
-      <Route exact path={match.url} component={Home} />
-      <Route path={`${match.url}/Attacks`} component={Attacks} />
-      <Route path={`${match.url}/Battlegear`} component={Battlegear} />
-      <Route path={`${match.url}/Creatures`} component={Creatures} />
-      <Route path={`${match.url}/Locations`} component={Locations} />
-      <Route path={`${match.url}/Mugic`} component={Mugic} />
-      {tribes}
-    </div>
-  );
-}
-
-class Home extends React.Component {
+export default class Home extends React.Component {
 
   componentDidMount() {
     this.coin = null;

src/components/portal/index.js

@@ -1,9 +1,17 @@
 import React from 'react';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import {Link} from 'react-router-dom';
-import {Routing} from './Home';
+import {Link, Route} from 'react-router-dom';
+
+import API from '../SpreadsheetData';
+import Home from './Home';
 import Search from './Search';
+import Attacks from './Category/Attacks';
+import Battlegear from './Category/Battlegear';
+import Creatures from './Category/Creatures';
+import Locations from './Category/Locations';
+import Mugic from './Category/Mugic';
+import Tribes from './Category/Tribes';
 
 @inject((stores, props, context) => props) @observer
 export default class Base extends React.Component {
@@ -20,12 +28,32 @@ export default class Base extends React.Component {
   }
 }
 
+function Routing(props) {
+  console.log(props);
+  const match = props.match;
+
+  const tribes = API.tribes.map((tribe, i) => (
+    <Route key={i} path={`${match.url}/${tribe}`} component={Tribes} />
+  ));
+  return (
+    <div>
+      <Route exact path={match.url} component={Home} />
+      <Route path={`${match.url}/Attacks`} component={Attacks} />
+      <Route path={`${match.url}/Battlegear`} component={Battlegear} />
+      <Route path={`${match.url}/Creatures`} component={Creatures} />
+      <Route path={`${match.url}/Locations`} component={Locations} />
+      <Route path={`${match.url}/Mugic`} component={Mugic} />
+      {tribes}
+    </div>
+  );
+}
+
 function Header() {
 
   const types = (() => {
     return (
       <li className="dropdown">
-        <Link to="javascript:void(0)" className="dropbtn">Types</Link>
+        <Link to=" " className="dropbtn">Types</Link>
         <div className="dropdown-content">
           <Link to="/portal/Attacks">Attacks</Link>
           <Link to="/portal/Battlegear">Battlegear</Link>