Update to fix redux-action and update hostname

package.json

@@ -42,8 +42,6 @@
     "react-remarkable": "^1.1.1",
     "redux": "^3.7.1",
     "redux-actions": "^2.2.1",
-    "redux-first-router": "^1.7.4",
-    "redux-first-router-link": "^1.0.7",
     "redux-promise": "^0.5.3",
     "redux-thunk": "^2.2.0",
     "uninett-bootstrap-theme": "^1.0.1"

src/actions/index.js

 import { createAction, createActions, handleActions, combineActions } from 'redux-actions'
 import promiseMiddleware from 'redux-promise';
 
-export const setHostname = createAction('setHostname')
+export const discoveryStart = createAction('discoveryStart')

src/components/Header.jsx

 import React from 'react'
 import {Navbar, Nav, NavItem} from 'react-bootstrap';
-import Link from 'redux-first-router-link';
 
-import BreadCrumb from './BreadCrumb'
+// import BreadCrumb from './BreadCrumb'
 
-import LoginController from '../containers/LoginController';
+// import LoginController from '../containers/LoginController';
 const uninettLogo = require('../../node_modules/uninett-bootstrap-theme/images/UNINETT_logo.svg')
 var FontAwesome = require('react-fontawesome')
 
@@ -13,18 +12,18 @@ const navStyle = {
   marginTop: "17px"
 }
 
-const checkActive = (currentLocation, check) => {
-  if (currentLocation === check ) {
-    return "active"
-  }
-  return ""
-}
+// const checkActive = (currentLocation, check) => {
+//   if (currentLocation === check ) {
+//     return "active"
+//   }
+//   return ""
+// }
 
-const Header = ({locationType, locationPayload}) => (
+const Header = ({}) => (
   <Navbar >
     <Navbar.Header>
       <Navbar.Brand>
-        <Link to="/"><img alt="UNINETT Logo" src={uninettLogo} /></Link>
+        <img alt="UNINETT Logo" src={uninettLogo} />
       </Navbar.Brand>
     </Navbar.Header>
     <ul style={navStyle} className="nav nav-pills">

src/components/HostnameInput.jsx

-import React from 'react'
+import React, { PureComponent } from 'react'
 import {Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
 import {Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock} from 'react-bootstrap'
 import FontAwesome from 'react-fontawesome'
 
+
+
 const foo = () => {
   console.log("AYA")
 }
 
 const defaultHost = "https://auth.dataporten.no/"
 
+class Component extends PureComponent {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      hostname: defaultHost
+    }
+  }
+
+  discoveryStart(e) {
+    console.log("Setting hostname")
+    this.props.discoveryStart(this.state.hostname)
+  }
 
-const Component = ({text="Loading..."}) => (
-  <div>
-    <FormGroup
-      className="gutter"
-      controlId="formBasicText"
-    >
-      <h4>OAuth Server hostname</h4>
-      <FormControl
-        type="text"
-        bsSize="large"
-        value={defaultHost}
-        placeholder="https://auth.yourplatform.org/"
-
-      />
-      <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OAuth Discovery. If not, please enter configuration manually.</HelpBlock>
-    </FormGroup>
-
-    <div><Button onCLick={foo} bsStyle="primary"><Glyphicon glyph="book" /> Discovery OAuth Provider</Button></div>
-  </div>
-)
+  updateHostfield(e) {
+    console.log("Updating hostname to ", e.target.value)
+    this.setState({hostname: e.target.value})
+  }
+
+  render() {
+    return (
+      <div>
+        <FormGroup
+          className="gutter"
+          controlId="formBasicText"
+        >
+          <h4>OAuth Server hostname</h4>
+          <FormControl
+            type="text"
+            bsSize="large"
+            defaultValue={defaultHost}
+            placeholder="https://auth.yourplatform.org/"
+            onChange={this.updateHostfield.bind(this)}
+          />
+          <HelpBlock>Fill out the hostname of your OAuth server. Will only work if your OAuth server support OAuth Discovery. If not, please enter configuration manually.</HelpBlock>
+        </FormGroup>
+
+        <div><Button onClick={this.discoveryStart.bind(this)} bsStyle="primary"><Glyphicon glyph="book" /> Discovery OAuth Provider</Button></div>
+      </div>
+    )
+  }
+
+}
 
 export default Component

src/components/MainContent.jsx

 import React from 'react'
 import {Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
 import {Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock} from 'react-bootstrap'
-import Link from 'redux-first-router-link';
 
-import HostnameInput from './HostnameInput'
+import HostnameController from '../containers/HostnameController'
 
 const MainContent = () => (
   <div>
@@ -13,12 +12,12 @@ const MainContent = () => (
 
         <p>Learn more about how OAuth 2.0 works, and explore OAuth protected APIs without entering any code.</p>
 
-        <HostnameInput />
+        <HostnameController />
 
         <p>Navigate the library of prepared applications, deploy and start using it within few minutes. This application platform is fully automated.</p>
         <p>
-          <Link to="/"><Button bsStyle="primary"><Glyphicon glyph="book" /> Library</Button></Link>&nbsp;
-          <Link to="/applications"><Button bsStyle="success"><Glyphicon glyph="modal-window" /> My installed applications</Button></Link>
+          <Button bsStyle="primary"><Glyphicon glyph="book" /> Library</Button> 
+          <Button bsStyle="success"><Glyphicon glyph="modal-window" /> My installed applications</Button>
         </p>
 
       </Jumbotron>

src/containers/App.js

 import React from 'react'
+import { connect } from 'react-redux'
+
 import Footer from '../components/Footer'
 import MainContent from '../components/MainContent'
 import Header from '../components/Header'
 
-import { connect } from 'react-redux'
-
-
-const mainContent = {
-  HOME: <MainContent />,
-}
-
-const App = ({locationType, locationPayload}) => (
+const App = ({}) => (
   <div>
-    <Header locationType={locationType} locationPayload={locationPayload} />
-    { mainContent[locationType] }
+    <Header />
+      <MainContent />
     <Footer />
   </div>
 )
 
 const mapStateToProps = (state) => ({
-  locationType: state.location.type,
-  locationPayload: state.location.payload
 })
 
 const mapDispatchToProps = {

src/containers/HostnameController.js

 import { connect } from 'react-redux'
 import HostnameInput from '../components/HostnameInput'
-import { setHostname } from '../actions/'
+import { discoveryStart } from '../actions/'
 
 const mapStateToProps = (state, ownProps) => (state)
 
 const mapDispatchToProps = {
-  setHostname
+  discoveryStart
 }
 
 const Controller = connect(

src/index.js

@@ -5,14 +5,14 @@ import ReactDOM from 'react-dom'
 import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
 import thunkMiddleware from 'redux-thunk'
-import { connectRoutes } from 'redux-first-router'
-import createHistory from 'history/createBrowserHistory'
+// import { connectRoutes } from 'redux-first-router'
+// import createHistory from 'history/createBrowserHistory'
 import reducers from './reducers/'
 import App from './containers/App'
 
 import logger from './middleware/logger'
 
-import { routesMap, options } from './routesMap'
+// import { routesMap, options } from './routesMap'
 // import { appJso, getUserInfo } from './actions/auth'
 
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
@@ -21,19 +21,17 @@ import './css/style.css'
 
 // import {packageInstallStart, packageInstallFailed} from './actions/packages'
 
-const history = createHistory()
+// const history = createHistory()
+
+// const routerSetup = connectRoutes(history, routesMap, options)
 
-const routerSetup = connectRoutes(history, routesMap, options)
 
 let store = createStore(
-  combineReducers({
-    ...reducers,
-    location: routerSetup.reducer
-  }),
+  reducers,
   compose(
-    routerSetup.enhancer,
+    // routerSetup.enhancer,
     applyMiddleware(
-      routerSetup.middleware,
+      // routerSetup.middleware,
       thunkMiddleware,
       logger
     )

src/reducers/index.js

-import auth from './auth'
-import packages from './packages'
-import applications from './applications'
-import installation from './installation'
-import namespaces from './namespaces'
-
-export default {
-  auth,
-  applications,
-  packages,
-  installation,
-  namespaces
-}
+import { handleActions } from 'redux-actions';
+
+
+const reducer = handleActions({
+  discoveryStart: (state, action) => ({
+    hostname: action.payload
+  }),
+
+  DECREMENT: (state, action) => ({
+    counter: state.counter - action.payload
+  })
+},
+{
+  hostname: "https://auth.dataporten"
+});
+
+
+export default reducer

src/routesMap.js

-import { getAllPackages, getPackage } from './actions/packages'
-import { prepareApplication, getAllApplications } from './actions/applications'
-import { login, isAuthenticated, loginAndRedirect } from './actions/auth'
+// import { getAllPackages, getPackage } from './actions/packages'
+// import { prepareApplication, getAllApplications } from './actions/applications'
+// import { login, isAuthenticated, loginAndRedirect } from './actions/auth'
 
 const routesMap = {
   HOME: '/',
@@ -19,11 +19,11 @@ const options = {
     }
     const requiresAuth = routesMap[action.type].requiresAuth
     window.scrollTo(0, 0)
-    if (requiresAuth) {
-      if (!isAuthenticated(getState())) {
-        dispatch(loginAndRedirect(action))
-      }
-    }
+    // if (requiresAuth) {
+    //   if (!isAuthenticated(getState())) {
+    //     dispatch(loginAndRedirect(action))
+    //   }
+    // }
   }
 }