From b3fdd651e2981bb5e8e68d1744da02bd44ae51e1 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 4 May 2017 14:31:27 -0400 Subject: [PATCH] more fun with routes stubbing out functionality and figure out path heiarchy flow --- src/components/Category/Tribes.js | 31 +++++++++++++++ src/components/Single/Creature.js | 45 ++++++++++++++++++---- src/components/UnderConstruction.js | 18 +++++++++ src/index.js | 59 ++++++++++++++++++++++------- 4 files changed, 132 insertions(+), 21 deletions(-) create mode 100644 src/components/Category/Tribes.js create mode 100644 src/components/UnderConstruction.js diff --git a/src/components/Category/Tribes.js b/src/components/Category/Tribes.js new file mode 100644 index 0000000..93b3e78 --- /dev/null +++ b/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(); +} + +Tribes.propTypes = propTypes; + +export default Tribes; diff --git a/src/components/Single/Creature.js b/src/components/Single/Creature.js index bfbc1cc..c9a3bbd 100644 --- a/src/components/Single/Creature.js +++ b/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(); + } + else if ( path.length !== 5 ) { - //TODO return PageNotFound - return(
not valid
); + //PageNotFound + return(); + //return(browserHistory.push('/PageNotFound')); + return(); } - return( -
test
- ); + 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(
{path[4]}
); + break; + default: + return(); + break; + } + + return (
test
); } SingleCreature.propTypes = propTypes; diff --git a/src/components/UnderConstruction.js b/src/components/UnderConstruction.js new file mode 100644 index 0000000..37dea0b --- /dev/null +++ b/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 ( +

+ This page is currently under construction {s.code(location.pathname)} +

+ ); +} + +UnderConstruction.propTypes = propTypes; + +export default UnderConstruction; diff --git a/src/index.js b/src/index.js index 03637f7..0100cfe 100644 --- a/src/index.js +++ b/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 = ( @@ -29,28 +30,58 @@ const routes = ( - - + + - - + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + );