more fun with routes

stubbing out functionality and figure out path heiarchy flow

src/components/Category/Tribes.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PageNotFound from '../PageNotFound';
+import UnderConstruction from '../UnderConstruction';
+
+const propTypes = {
+  location: PropTypes.object.isRequired,
+};
+
+
+// This module handles tribe pages and subpages
+// Allows for urls such as
+// /Creatures/{Tribe}
+// /{Tribe}/Creatures}
+
+// /Mugic/{Tribe}
+// /{Tribe}/Mugic
+// to display the respective subcategories
+// (list of tribe's mugic/creatures)
+
+// /{Tribe}
+// gives a brief summary and the option of "mugic" or "tribe"
+// -> /{Tribe}/Mugic || /{Tribe}/Creatures
+
+function Tribes({location}) {
+  return(<UnderConstruction location={location}/>);
+}
+
+Tribes.propTypes = propTypes;
+
+export default Tribes;

src/components/Single/Creature.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+// import {browserHistory} from 'react-router';
+import PageNotFound from '../PageNotFound';
+import Tribes from '../Category/Tribes';
 
 const propTypes = {
   location: PropTypes.object.isRequired,
@@ -9,17 +12,45 @@ function SingleCreature() {
   let path = location.pathname.split("/");
   if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-  // /portal/Creatures/Tribe/Name
+  // ** Process the tribe ** //
+  // /portal/Creatures/{Tribe}/{Name}
+  // /portal/{Tribe}/Creatures/{Name}
   // The first / gets counted
-  if( path.length !== 5 )
+  if (path.length === 4 && path[2] === "Creatures") {
+    // Special case: render tribe
+    // return(<Tribe location={location}/>);
+  }
+  else if ( path.length !== 5 )
   {
-    //TODO return PageNotFound
-    return(<div>not valid</div>);
+    //PageNotFound
+    return(<PageNotFound location={location}/>);
+    //return(browserHistory.push('/PageNotFound'));
+    return(<PageNotFound location={location}/>);
   }
 
-  return(
-    <div>test</div>
-  );
+  let Tribe = "";
+
+  //Handle both url layouts
+  if (path[2] === "Creatures") Tribe = path[3];
+  if (path[3] === "Creatures") Tribe = path[2];
+
+  // TODO
+  // Get spreadsheet data based on tribe/name
+  switch (Tribe) {
+    case 'Overworld':
+    case 'Underworld':
+    case 'Mipedian':
+    case 'Danian':
+    case 'Marrillian':
+    case 'Generic':
+      return(<div>{path[4]}</div>);
+      break;
+    default:
+      return(<PageNotFound location={location}/>);
+      break;
+  }
+
+  return (<div className={Tribe}>test</div>);
 }
 
 SingleCreature.propTypes = propTypes;

src/components/UnderConstruction.js

@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react';
+import s from '../styles/pageNotFound.style';
+
+const propTypes = {
+  location: PropTypes.object.isRequired,
+};
+
+function UnderConstruction({ location }) {
+  return (
+    <p style={s.p}>
+      This page is currently under construction {s.code(location.pathname)}
+    </p>
+  );
+}
+
+UnderConstruction.propTypes = propTypes;
+
+export default UnderConstruction;

src/index.js

@@ -5,6 +5,7 @@ import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 import App from './components/App';
 import Home from './components/Home';
 import PageNotFound from './components/PageNotFound';
+import UnderConstruction from './components/UnderConstruction';
 import ExampleComponent from './components/ExampleComponent';
 import ExampleTwoDeepComponent from './components/ExampleTwoDeepComponent';
 
@@ -13,12 +14,12 @@ import ExampleTwoDeepComponent from './components/ExampleTwoDeepComponent';
 import Creatures from './components/Category/Creatures';
 // import Locations from './component/Category/Locations';
 // import Mugic from './component/Category/Mugic';
-
-// import Attacks from './component/Category/Attacks';
-// import Battlegear from './component/Category/Battlegear';
+import Tribes from './components/Category/Tribes';
+// import SingleAttack from './component/Category/Attacks';
+// import SingleBattlegear from './component/Category/Battlegear';
 import SingleCreature from './components/Single/Creature';
-// import Locations from './component/Category/Locations';
-// import Mugic from './component/Category/Mugic';
+// import SingleLocation from './component/Category/Locations';
+// import SingleMugic from './component/Category/Mugic';
 
 const routes = (
   <Route path="/" component={App}>
@@ -29,28 +30,58 @@ const routes = (
         <Route path="two-deep" mapMenuTitle="Two Deep" component={ExampleTwoDeepComponent} />
       </Route>
 
-      <Route path="Attacks" component={PageNotFound}>
-        <Route path="*" component={PageNotFound} />
+      <Route path="Attacks" component={UnderConstruction}>
+        <Route path="*" component={UnderConstruction} />
       </Route>
 
-      <Route path="Battlegear" component={PageNotFound}>
-        <Route path="*" component={PageNotFound} />
+      <Route path="Battlegear" component={UnderConstruction}>
+        <Route path="*" component={UnderConstruction} />
       </Route>
 
       <Route path="Creatures" component={Creatures}>
         <Route path="*" component={SingleCreature} />
       </Route>
 
-      <Route path="Locations" component={PageNotFound}>
-        <Route path="*" component={PageNotFound} />
+      <Route path="Locations" component={UnderConstruction}>
+        <Route path="*" component={UnderConstruction} />
       </Route>
 
-      <Route path="Mugic" component={PageNotFound}>
-        <Route path="*" component={PageNotFound} />
+      <Route path="Mugic" component={UnderConstruction}>
+        <Route path="*" component={UnderConstruction} />
+      </Route>
+
+      <Route path="Overworld" component={Tribes}>
+        <Route path="Creatures" component={SingleCreature} />
+        <Route path="Mugic" component={UnderConstruction} />
+      </Route>
+
+      <Route path="Underworld" component={Tribes}>
+        <Route path="Creatures" component={SingleCreature} />
+        <Route path="Mugic" component={UnderConstruction} />
+      </Route>
+
+      <Route path="Mipedian" component={Tribes}>
+        <Route path="Creatures" component={SingleCreature} />
+        <Route path="Mugic" component={UnderConstruction} />
+      </Route>
+
+      <Route path="Danian" component={Tribes}>
+        <Route path="Creatures" component={SingleCreature} />
+        <Route path="Mugic" component={UnderConstruction} />
+      </Route>
+
+      <Route path="Marrillian" component={Tribes}>
+        <Route path="Creatures" component={SingleCreature} />
+        <Route path="Mugic" component={UnderConstruction} />
+      </Route>
+
+      <Route path="Generic" component={Tribes}>
+        <Route path="Creatures" component={SingleCreature} />
+        <Route path="Mugic" component={UnderConstruction} />
       </Route>
 
     </Route>
-    <Route path="*" mapMenuTitle="Page Not Found" component={PageNotFound} />
+    <Route path="*" component={PageNotFound} />
   </Route>
 );