From 2aecb184ce435fc21103a7c0c3d7ff273a453223 Mon Sep 17 00:00:00 2001
From: Daniel <dds2130@rit.edu>
Date: Fri, 19 Jan 2018 21:21:13 -0500
Subject: [PATCH] #5 start updating react-router

---
 package.json                             |   4 +-
 src/components/Base.js                   |  16 +-
 src/components/Home.js                   |   2 +-
 src/components/index.js                  | 193 +++--------------------
 src/components/portal/Category/Tribes.js |  30 ++++
 5 files changed, 63 insertions(+), 182 deletions(-)

diff --git a/package.json b/package.json
index ab38a9a..164e5a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chaoticbackup",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Chaotic Backup",
   "scripts": {
     "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress",
@@ -22,7 +22,7 @@
     "react-dom": "^16.0.0",
     "react-interactive": "^0.8.1",
     "react-process-string": "^1.2.0",
-    "react-router": "^3.2.0",
+    "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-transition-group": "^1.2.1",
     "whatwg-fetch": "^2.0.3"
diff --git a/src/components/Base.js b/src/components/Base.js
index 924ed94..ee072e0 100644
--- a/src/components/Base.js
+++ b/src/components/Base.js
@@ -1,18 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Interactive from 'react-interactive';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import s from '../styles/app.style';
+import {Children} from './index';
 
 const language = "ENG";
 const bkgrnd = "05";
 
-const propTypes = {
-  children: PropTypes.element.isRequired,
-  routes: PropTypes.array.isRequired,
-};
+export default function Base(props) {
+
+  const children = <Children {...props} />;
 
-function App({ children, routes }) {
   return (
     <div>
       <div className="fix-pgBkgrnd-repeat-x">
@@ -122,7 +120,3 @@ function App({ children, routes }) {
     </div>
   );
 }
-
-App.propTypes = propTypes;
-
-export default App;
diff --git a/src/components/Home.js b/src/components/Home.js
index f36b2dd..32525a1 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Interactive from 'react-interactive';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import s from '../styles/home.style';
 
 function Home() {
diff --git a/src/components/index.js b/src/components/index.js
index 8c671bd..b6b8774 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,180 +1,37 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 /* Common Components */
-import App from './Base';
+import Base from './Base';
 import {PageNotFound, UnderConstruction} from './Snippets';
 
 /* Home Component */
 import Home from './Home';
 import EnterTheCode from './account/EnterTheCode';
 
-/* Test Components */
-import ExampleHome from './example/Home';
-import ExampleBase from './example/Base';
-import ExampleComponent from './example/ExampleComponent';
-import ExampleTwoDeepComponent from './example/ExampleTwoDeepComponent';
-
-/* Collection */
-import CollectionHome from './collection/Home';
-
-/* Portal */
-import PortalBase from './portal/Base';
-import PortalHome from './portal/Home';
-import Attacks from './portal/Category/Attacks';
-import SingleAttack from './portal/Single/Attack';
-import Battlegear from './portal/Category/Battlegear';
-import SingleBattlegear from './portal/Single/Battlegear';
-import Creatures from './portal/Category/Creatures';
-import SingleCreature from './portal/Single/Creature';
-import Locations from './portal/Category/Locations';
-import SingleLocation from './portal/Single/Location';
-import Mugic from './portal/Category/Mugic';
-import SingleMugic from './portal/Single/Mugic';
-import Tribes from './portal/Category/Tribes';
-
-
-const routes = (
-  <Route path="/" component={App} >
-    <IndexRoute component={Home} />
-
-    {/* Test */}
-    <Route path="example" mapMenuTitle="Example" component={ExampleBase}>
-      <IndexRoute component={ExampleComponent} />
-      <Route path="two-deep" mapMenuTitle="Two Deep" component={ExampleTwoDeepComponent} />
-    </Route>
-
-    {/* Construction */}
-    <Route path="Construction" component={UnderConstruction} />
-
-    {/* EnterTheCode */}
-    <Route path="EnterTheCode" component={EnterTheCode} />
-
-    {/* Collection */}
-    <Route path="collection">
-      <IndexRoute component={CollectionHome} />
-      <Route path="*" component={CollectionHome} />
-    </Route>
-
-    {/* Portal */}
-    <Route path="portal" component={PortalBase} >
-      <IndexRoute component={PortalHome} />
-
-      {/* Attacks */}
-      <Route path="Attacks" component={Attacks} >
-        <Route path="*" component={SingleAttack} />
-      </Route>
-
-      {/* Battlegear */}
-      <Route path="Battlegear" component={Battlegear} >
-        <Route path="*" component={SingleBattlegear} />
-      </Route>
-
-      {/* Locations */}
-      <Route path="Locations" component={Locations} >
-        <Route path="*" component={SingleLocation} />
-      </Route>
-
-      {/* Creatures */}
-      {/* Todo this isn't needed (tribe checking handled by components) */}
-      <Route path="Creatures" >
-        <IndexRoute component={Creatures} />
-        <Route path="OverWorld" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="UnderWorld" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mipedian" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Danian" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-      </Route>
-
-      {/* Mugic */}
-      <Route path="Mugic">
-        <IndexRoute component={Mugic} />
-        <Route path="OverWorld" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-        <Route path="UnderWorld" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-        <Route path="Mipedian" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-        <Route path="Danian" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-        <Route path="Generic" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-      </Route>
-
-      {/* OverWorld */}
-      <Route path="OverWorld" component={Tribes} >
-        <Route path="Creatures" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mugic" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-      </Route>
-
-      {/* UnderWorld */}
-      <Route path="UnderWorld" component={Tribes} >
-        <Route path="Creatures" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mugic" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-      </Route>
-
-      {/* Mipedian */}
-      <Route path="Mipedian" component={Tribes} >
-        <Route path="Creatures" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mugic" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-      </Route>
-
-      {/* Danian */}
-      <Route path="Danian" component={Tribes} >
-        <Route path="Creatures" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mugic" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-      </Route>
-
-      {/* Generic */}
-      <Route path="Generic" component={Tribes} >
-        <Route path="Creatures" component={Creatures} >
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mugic" component={Mugic} >
-          <Route path="*" component={SingleMugic} />
-        </Route>
-      </Route>
-
-      <Route path="*" component={PageNotFound} />
-
-    </Route>
-    <Route path="*" component={PageNotFound} />
-  </Route>
-);
-
 render(
-  <Router
-    history={browserHistory}
-    routes={routes}
-  />,
-  document.getElementById('root'),
+  <Router>
+    <App />
+  </Router>
+  ,document.getElementById('root'),
 );
+
+function App() {
+  return (
+    <div>
+      <Route path="/" component={Base}/>
+    </div>
+  );
+}
+
+export function Children(props) {
+  console.log(props);
+  const match = props.match;
+  return (
+    <div>
+      <Route exact path={match.url} component={Home} />
+      <Route path={`${match.url}EnterTheCode`} component={EnterTheCode} />
+    </div>
+  );
+}
diff --git a/src/components/portal/Category/Tribes.js b/src/components/portal/Category/Tribes.js
index 0a3ce13..f97ce04 100644
--- a/src/components/portal/Category/Tribes.js
+++ b/src/components/portal/Category/Tribes.js
@@ -17,11 +17,41 @@ export default class Tribes extends React.Component {
       return (<div>{this.props.children}</div>);
     }
 
+    const store = API;
+
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
     let tribe = path[2];
 
+    if (store.urls === null ||
+      store.portal === null ||
+      store.cards === null) {
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.tribes.includes(tribe)) {
+      return(
+        <div>
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/Danian"
+          >Danian</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/OverWorld"
+          >OverWorld</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/UnderWorld"
+          >UnderWorld</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Creatures/Mipedian"
+          >Mipedian</Interactive>
+        </div>
+      );
+    }
+
     return (
       <div>
         <h1>{tribe}</h1>