#5 portal; types; single attacks

src/components/Home.js

@@ -7,10 +7,15 @@ 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={props.match.url} component={Home} />
+      <Route exact path="/" component={Home} />
       <Route path="/PageNotFound" component={PageNotFound} />
       <Route path="/UnderConstruction" component={UnderConstruction} />
       <Route path="/EnterTheCode" component={EnterTheCode} />

src/components/example/Base.js

@@ -1,7 +1,7 @@
 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';
 
 const propTypes = {

src/components/example/ExampleComponent.js

@@ -1,7 +1,7 @@
 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/exampleComponent.style';
 
 const propTypes = {

src/components/example/ExampleTwoDeepComponent.js

@@ -1,7 +1,7 @@
 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/exampleTwoDeepComponent.style';
 
 const propTypes = {

src/components/example/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 ExampleHome() {

src/components/portal/Category/Attacks.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import Interactive from 'react-interactive';
-import { Link } from 'react-router';
+import { Link, Route } from 'react-router-dom';
-import API from '../../SpreadsheetData';
-import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
+import s from '../../../styles/app.style';
+import API from '../../SpreadsheetData';
+import Attack from '../Single/Attack';
 
 @inject((stores, props, context) => props) @observer
 export default class Attacks extends React.Component {
@@ -52,7 +53,7 @@ export default class Attacks extends React.Component {
         {output}
       </div>
       <div className="right">
-        {this.props.children}
+        <Route path={`${this.props.match.url}/:card`} component={Attack} />
       </div>
     </div>);
   }

src/components/portal/Category/Battlegear.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Category/Creatures.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Category/Locations.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Category/Mugic.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Category/Tribes.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Home.js

@@ -2,14 +2,29 @@ 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}collection`} component={CollectionHome} /> */}
+      <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>
   );
 }

src/components/portal/Single/Attack.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Single/Battlegear.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Single/Creature.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 {PageNotFound} from '../../Snippets';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';

src/components/portal/Single/Location.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 API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Single/Mugic.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 {PageNotFound} from '../../Snippets';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';