[change] functional components -> class

changed routes

src/components/Category/Creatures.js

@@ -1,30 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import URLS from '../URLS';
-import 'whatwg-fetch';
+import URLS from '../Spreadsheet';
 
-const propTypes = {
-  children: PropTypes.element,
-};
+export default class Creatures extends React.Component {
+  children;
 
-function Creatures({children}) {
-  fetch(URLS.Creature_Overworld)
-    .then(function(response) {
-      return response.json();
-    }).then(function(json) {
-      console.log('parsed json', json.feed.entry);
-    }).catch(function(ex) {
-      console.log('parsing failed', ex);
-    })
+  constructor(props) {
+    super (props);
+    console.log(props);
+    this.children = props.children;
+    this.state = {creatures: []}
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
     return (
       <div>
-      {children||
-        <div>test</div>
+      {this.children||
+        <div>creatures</div>
       }
       </div>
     );
+  }
 }
-
-Creatures.propTypes = propTypes;
-
-export default Creatures;

src/components/Category/Tribes.js

@@ -1,12 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import PageNotFound from '../PageNotFound';
-import UnderConstruction from '../UnderConstruction';
-
-const propTypes = {
-  location: PropTypes.object.isRequired,
-};
-
+import URLS from '../Spreadsheet';
 
 // This module handles tribe pages and subpages
 // Allows for urls such as
@@ -22,10 +16,26 @@ const propTypes = {
 // gives a brief summary and the option of "mugic" or "tribe"
 // -> /{Tribe}/Mugic || /{Tribe}/Creatures
 
-function Tribes({location}) {
-  return(<UnderConstruction location={location}/>);
+export default class Tribes extends React.Component {
+  children;
+
+  constructor(props) {
+    super (props);
+    console.log(props);
+    this.children = props.children;
+    this.state = {creatures: []}
+  }
+
+  componentDidMount() {
+  }
+
+  render() {
+    return (
+      <div>
+      {this.children||
+        <div>tribes</div>
+      }
+      </div>
+    );
+  }
 }
-
-Tribes.propTypes = propTypes;
-
-export default Tribes;

src/components/Single/Creature.js

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 // import {browserHistory} from 'react-router';
 import PageNotFound from '../PageNotFound';
 import Tribes from '../Category/Tribes';
+import UnderConstruction from '../UnderConstruction';
 
 const propTypes = {
   location: PropTypes.object.isRequired,
+  children: PropTypes.element,
 };
 
 function SingleCreature() {
@@ -16,16 +18,11 @@ function SingleCreature() {
   // /portal/Creatures/{Tribe}/{Name}
   // /portal/{Tribe}/Creatures/{Name}
   // The first / gets counted
-  if (path.length === 4 && path[2] === "Creatures") {
-    // Special case: render tribe
-    // return(<Tribe location={location}/>);
-  }
-  else if ( path.length !== 5 )
+  if ( path.length !== 5 )
   {
     //PageNotFound
     return(<PageNotFound location={location}/>);
     //return(browserHistory.push('/PageNotFound'));
-    return(<PageNotFound location={location}/>);
   }
 
   let Tribe = "";
@@ -43,7 +40,11 @@ function SingleCreature() {
     case 'Danian':
     case 'Marrillian':
     case 'Generic':
-      return(<div>{path[4]}</div>);
+      return(
+        <div><UnderConstruction location={location}/>
+        {path[4]}
+        </div>
+      );
       break;
     default:
       return(<PageNotFound location={location}/>);

src/components/Spreadsheet.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'whatwg-fetch';
 
 class URLS {
   static base_url = "https://spreadsheets.google.com/feeds/list/";
@@ -7,14 +8,6 @@ class URLS {
 
   constructor() {}
 
-  static path(spreadsheetID) {
-    return URLS.base_url + spreadsheetID + URLS.data_format;
-  }
-
-  get Creature_Overworld() {
-    return URLS.path("1Z4_MmlV7uE34nLzrcxslqQKRwL4OBXNA15s7G8eteXU");
-  }
-
   // Singleton
   static instance = null;
   static createInstance() {
@@ -28,6 +21,27 @@ class URLS {
       }
       return URLS.instance;
   }
+
+  static getSpreedsheet(spreadsheet) {
+    fetch(spreadsheet)
+      .then(function(response) {
+        return response.json();
+      }).then(function(json) {
+        return json.feed.entry;
+      }).catch(function(err) {
+        console.log('parsing failed', err);
+        return null;
+      })
+  }
+
+  static path(spreadsheetID) {
+    return URLS.base_url + spreadsheetID + URLS.data_format;
+  }
+
+  get Creature_Overworld() {
+    return URLS.path("1Z4_MmlV7uE34nLzrcxslqQKRwL4OBXNA15s7G8eteXU");
+  }
+
 }
 
 export default URLS.getInstance();

src/index.js

@@ -39,7 +39,21 @@ const routes = (
       </Route>
 
       <Route path="Creatures" component={Creatures}>
-        <Route path="*" component={SingleCreature} />
+        <Route path="Overworld" component={Tribes}>
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Underworld" component={Tribes}>
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Mipedian" component={Tribes}>
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Danian" component={Tribes}>
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Marrillian" component={Tribes}>
+          <Route path="*" component={SingleCreature} />
+        </Route>
       </Route>
 
       <Route path="Locations" component={UnderConstruction}>
@@ -47,7 +61,21 @@ const routes = (
       </Route>
 
       <Route path="Mugic" component={UnderConstruction}>
-        <Route path="*" component={UnderConstruction} />
+        <Route path="Overworld" component={Tribes}>
+          <Route path="*" component={UnderConstruction} />
+        </Route>
+        <Route path="Underworld" component={Tribes}>
+          <Route path="*" component={UnderConstruction} />
+        </Route>
+        <Route path="Mipedian" component={Tribes}>
+          <Route path="*" component={UnderConstruction} />
+        </Route>
+        <Route path="Danian" component={Tribes}>
+          <Route path="*" component={UnderConstruction} />
+        </Route>
+        <Route path="Marrillian" component={Tribes}>
+          <Route path="*" component={UnderConstruction} />
+        </Route>
       </Route>
 
       <Route path="Overworld" component={Tribes}>