#5 collection; portal home page

src/components/Home.js

@@ -1,9 +1,26 @@
 import React from 'react';
-import Interactive from 'react-interactive';
-import { Link } from 'react-router-dom';
-import s from '../styles/home.style';
+import { Route, Link } from 'react-router-dom';
 
-export default function Home() {
+/* Components */
+import {PageNotFound, UnderConstruction} from './Snippets';
+import EnterTheCode from './account/EnterTheCode';
+import Collection from './collection/index';
+import Portal from './portal/index';
+
+export function Routing(props) {
+  return (
+    <div>
+      <Route exact path={props.match.url} component={Home} />
+      <Route path="/PageNotFound" component={PageNotFound} />
+      <Route path="/UnderConstruction" component={UnderConstruction} />
+      <Route path="/EnterTheCode" component={EnterTheCode} />
+      <Route path="/collection" component={Collection} />
+      <Route path="/portal" component={Portal} />
+    </div>
+  );
+}
+
+function Home() {
   return (
     <div>
       <link rel="stylesheet" href="/src/css/with_love.css" />

src/components/Routing.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-
-import {PageNotFound, UnderConstruction} from './Snippets';
-import Home from './Home';
-import EnterTheCode from './account/EnterTheCode';
-
-export function Routing(props) {
-  console.log(props);
-  const match = props.match;
-  return (
-    <div>
-      <Route exact path={match.url} component={Home} />
-      <Route path={`${match.url}EnterTheCode`} component={EnterTheCode} />
-      <Route path="/PageNotFound" component={PageNotFound} />
-      <Route path="/UnderConstruction" component={UnderConstruction} />
-    </div>
-  );
-}

src/components/collection/index.js

@@ -7,7 +7,7 @@ import CardList from './List';
 import SearchForm from './Search';
 
 @inject((stores, props, context) => props) @observer
-export default class CollectionHome extends React.Component {
+export default class Home extends React.Component {
   @observable n = 10;
   @observable p = 1;
   @observable content = [];

src/components/index.js

@@ -2,9 +2,8 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Link } from 'react-router-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-
 import s from '../styles/app.style';
-import {Routing} from './Routing';
+import {Routing} from './Home';
 
 const language = "ENG";
 const bkgrnd = "05";

src/components/portal/Home.js

@@ -1,7 +1,20 @@
 import React from 'react';
+import { Route } from 'react-router-dom';
 import API from '../SpreadsheetData';
 
-export default class PortalHome extends React.Component {
+export function Routing(props) {
+  console.log(props);
+  const match = props.match;
+
+  return (
+    <div>
+      <Route exact path={match.url} component={Home} />
+      {/* <Route path={`${match.url}collection`} component={CollectionHome} /> */}
+    </div>
+  );
+}
+
+class Home extends React.Component {
 
   componentDidMount() {
     this.coin = null;

src/components/portal/index.js

@@ -1,14 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import s from '../../styles/app.style';
-import Interactive from 'react-interactive';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import { Link } from 'react-router';
+import {Link} from 'react-router-dom';
+import {Routing} from './Home';
 import Search from './Search';
 
 @inject((stores, props, context) => props) @observer
-export default class PortalBase extends React.Component {
+export default class Base extends React.Component {
 
   render() {
     return (
@@ -16,13 +14,13 @@ export default class PortalBase extends React.Component {
         <link rel="stylesheet" href="/src/css/portal.css" />
         <Header />
         <br />
-        {this.props.children}
+        <Routing {...this.props} />
       </div>
     );
   }
 }
 
-function Header(props) {
+function Header() {
 
   const types = (() => {
     return (