routing, browser and history

.eslintrc

+{
+  "extends": "airbnb",
+  "globals": {
+    "document": false
+  },
+  "rules": {
+    "react/jsx-filename-extension": 0,
+    "jsx-quotes": ["error", "prefer-single"],
+    "import/prefer-default-export": 0,
+    "react/prop-types": 1,
+    "react/prefer-stateless-function": 0
+  }
+}
+

.gitlab-ci.yml

-# This file is a template, and might need editing before it works on your project.
-# Official framework image. Look for the different tagged releases at:
-# https://hub.docker.com/r/library/node/tags/
-image: node:alpine
-
-# This folder is cached between builds
-# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
-cache:
-  paths:
-  - node_modules/
-  
-stages:
-  - lint
-  - build
-  - test
-
-build:
-  stage: build
-  script:
-   - npm install
-   - npm run build
-   
-test:
-  stage: test
-  script:
-  - npm install
-  - npm run test

package.json

@@ -3,14 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-scripts": "1.0.13"
+    "history": "^4.7.2",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
+    "react-router-redux": "^4.0.8",
+    "react-scripts": "1.1.0",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "eslint": "^4.16.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.5.1"
   }
-}
\ No newline at end of file
+}

src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

src/App.js

-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
-}
-
-export default App;

src/App.test.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-});

src/components/App.js

+import React from 'react';
+import Header from './Header';
+import Main from './Main';
+
+const App = () => (
+  <div>
+    <Header />
+    <Main />
+  </div>
+);
+
+export default App;

src/components/Header.js

+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Header = () => (
+  <header>
+    <nav>
+      <ul>
+        <li><Link to='/'>Home</Link></li>
+        <li><Link to='/roster'>Roster</Link></li>
+        <li><Link to='/schedule'>Schedule</Link></li>
+      </ul>
+    </nav>
+  </header>
+);
+
+export default Header;

src/components/Main.js

+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Roster from './pages/Roster';
+import Schedule from './pages/Schedule';
+
+const Main = () => (
+  <main>
+    <Switch>
+      <Route exact path='/' component={Home} />
+      <Route path='/roster' component={Roster} />
+      <Route path='/schedule' component={Schedule} />
+    </Switch>
+  </main>
+);
+
+export default Main;

src/components/pages/Home.js

+import React from 'react';
+
+const Home = () => (
+  <div>
+    <h1>Welcome to the Tornadoes Website!</h1>
+  </div>
+);
+
+export default Home;

src/components/pages/Roster.js

+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import FullRoster from './roster/FullRoster';
+import Player from './roster/Player';
+
+const Roster = () => (
+  <Switch>
+    <Route exact path='/roster' component={FullRoster} />
+    <Route path='/roster/:number' component={Player} />
+  </Switch>
+);
+
+
+export default Roster;

src/components/pages/Schedule.js

+import React from 'react';
+
+const Schedule = () => (
+  <div>
+    <ul>
+      <li>6/5 @ Evergreens</li>
+      <li>6/8 vs Kickers</li>
+      <li>6/14 @ United</li>
+    </ul>
+  </div>
+);
+
+export default Schedule;

src/components/pages/roster/FullRoster.js

+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const FullRoster = () => (
+  <div>
+    <ul>
+      <Link to={'/roster/0'}>0</Link>
+    </ul>
+  </div>
+);
+
+export default FullRoster;

src/components/pages/roster/Player.js

+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Player = () => (
+  <div>
+    Sorry
+    <Link to='/roster'>Back</Link>
+  </div>
+);
+
+export default Player;

src/config.js.temp

+export const APIKEY = '';