GH-501 client side improvements

client/actions/checks.js

@@ -20,6 +20,15 @@ function deleteCheck(status, payload = null) {
   }
 }
 
+function refreshToken(status, payload = null) {
+  return {
+    type: REFRESH_TOKEN,
+    status,
+    payload
+  }
+}
+
+
 function enableCheck(check) {
   return (dispatch) => {
     dispatch(putCheck(PENDING, check))
@@ -38,6 +47,15 @@ function disableCheck(check) {
   }
 }
 
+function updateTokenForChecks(repo){
+  return (dispatch) => {
+    dispatch(refreshToken(PENDING, {}))
+    CheckService.refreshTokens(repo.id)
+                .then(() => dispatch(refreshToken(SUCCESS, check)))
+                .catch(err => dispatch(refreshToken(ERROR, err)))
+  }
+}
+
 /**
  * Enable or disable a check for a particular repo.
  *
@@ -50,3 +68,11 @@ export function toggleCheck(check) {
     return disableCheck(check)
   }
 }
+
+export function updateToken(repo) {
+  if(repo) {
+    return updateTokenForChecks(repo)
+  } else {
+    return {}
+  }
+}

client/components/RefreshTokenButton.jsx

@@ -0,0 +1,7 @@
+const RefreshTokenButton = () => (
+<Button>
+  <span className={classes('fa', 'fa-fw', 'fa-refresh')}></span>
+    Refresh OAuth Token
+</Button>);
+
+export default RefreshTokenButton;

client/components/RepositoryConfigValidation.jsx

@@ -80,7 +80,7 @@ class Result extends React.Component {
   }
 }
 
-export default function RepositoryConfigValidation({validation, onValidate, refreshingToken = true, refreshToken}) {
+export default function RepositoryConfigValidation({validation, onValidate, refreshingToken = false, refreshToken}) {
   const placeholder = <div style={{marginTop: '1em'}} />
   let result = placeholder
   if (validationFinished(validation.status)) {
@@ -99,10 +99,6 @@ export default function RepositoryConfigValidation({validation, onValidate, refr
       })}/>
         Validate Zappr configuration
     </Button>
-    <Button onClick={refreshToken}>
-    <span className={classes('fa', 'fa-fw', 'fa-refresh')}></span>
-      Refresh OAuth Token
-    </Button>
     {result}
   </div>);
 }
@@ -114,5 +110,6 @@ RepositoryConfigValidation.propTypes = {
     message: PropTypes.string,
     config: PropTypes.object
   }).isRequired,
-  onValidate: PropTypes.func.isRequired
+  onValidate: PropTypes.func.isRequired,
+
 }

client/containers/RepositoryDetail.jsx

@@ -5,7 +5,9 @@ import DocumentTitle from 'react-document-title'
 
 import RepositoryCheck from './../components/RepositoryCheck.jsx'
 import ConfigValidation from './../components/RepositoryConfigValidation.jsx'
-import { toggleCheck } from '../actions/checks'
+import RefreshTokenButton from './../components/RefreshTokenButton.jsx'
+
+import { toggleCheck, updateToken } from '../actions/checks'
 import { requestConfigValidation } from '../actions/validate'
 
 import { checkId } from '../model/schema'
@@ -35,9 +37,9 @@ class RepositoryDetail extends Component {
     this.props.requestConfigValidation(repo)
   }
 
-  shouldRefreshToken() {
+  shouldRefreshToken(repo) {
     console.log("refresh Token");
-    // this.props.requestNewToken();
+    this.props.updateToken(repo);
   }
 
   render() {
@@ -65,7 +67,8 @@ class RepositoryDetail extends Component {
             <ConfigValidation
               validation={validations[repository.full_name]}
               onValidate={this.onValidateConfig.bind(this, repository)}
-              refreshToken={this.shouldRefreshToken()}/>
+              refreshToken={this.shouldRefreshToken()} />
+            <RefreshTokenButton onClick={this.shouldRefreshToken.bind(this, repository)} />
           </Col>
           <Col md={12}>
             {CHECK_TYPES
@@ -90,4 +93,4 @@ class RepositoryDetail extends Component {
   }
 }
 
-export default connect(mapStateToProps, {toggleCheck, requestConfigValidation})(RepositoryDetail)
+export default connect(mapStateToProps, {toggleCheck, updateToken, requestConfigValidation})(RepositoryDetail)

client/reducers/repos/checks.js

@@ -63,6 +63,25 @@ function check(state = {
         default:
           return state
       }
+    case REFRESH_TOKEN:
+      switch(action.status) {
+        case PENDING:
+          return {...state, isRefreshingToken: true}
+        case SUCCESS: 
+          return {
+            ...state,
+            isRefreshingToken: false,
+            error: false
+          }
+        case ERROR: 
+          return {
+            ...state,
+            isRefreshingToken: false,
+            error: action.payload
+          }
+        default: 
+          return state
+      }
     default:
       return state
   }

client/service/CheckService.js

@@ -70,4 +70,26 @@ export default class CheckService extends Service {
       }
     })
   }
+
+  static refreshTokens(repoId) {
+    return fetch(Service.url(`/api/repos/${repoId}/refreshTokens`), {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      credentials: 'same-origin',
+      body: {}
+    }).then(response => {
+      return new Promise((resolve, reject) => {
+        return response.json().then(json => {
+          if(response.ok) {
+            resolve(json)
+          } else {
+            reject(json)
+          }
+        })
+      });
+    })
+  }
 }

client/service/RepoService.js

@@ -32,26 +32,4 @@ export default class RepoService extends Service {
       })
     })
   }
-
-  static refreshTokens(repoId) {
-    return fetch(Service.url(`/api/repos/${repoId}/refreshTokens`), {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      credentials: 'same-origin',
-      body: {}
-    }).then(response => {
-      return new Promise((resolve, reject) => {
-        return response.json().then(json => {
-          if(response.ok) {
-            resolve(json)
-          } else {
-            reject(json)
-          }
-        })
-      });
-    })
-  }
 }