Properly use scoping

konnectd/ui/src/components/Loading.js

@@ -13,15 +13,14 @@ import renderIf from 'render-if';
 import { retryHello } from '../actions/common';
 import { ErrorMessage } from '../errors';
 
-function retry(event, dispatch) {
-  event.preventDefault();
-
-  dispatch(retryHello());
-}
-
 function Loading(props) {
   const { error } = props;
 
+  const retry = (event) => {
+    event.preventDefault();
+    dispatch(retryHello());
+  }
+
   return (
     <Grid item align="center">
       {renderIf(error === null)(() => (
@@ -40,7 +39,7 @@ function Loading(props) {
             color="primary"
             variant="contained"
             className="oc-button-primary oc-mt-l"
-            onClick={(event) => retry(event, props.dispatch)}
+            onClick={(event) => retry(event)}
           >
             <FormattedMessage id="konnect.login.retryButton.label" defaultMessage="Retry" />
           </Button>

konnectd/ui/src/containers/Login/Chooseaccount.js

@@ -32,20 +32,6 @@ const styles = theme => ({
   }
 });
 
-function logon(event, { hello, dispatch, history }) {
-  event.preventDefault();
-  dispatch(executeLogonIfFormValid(hello.username, '', true)).then((response) => {
-    if (response.success) {
-      dispatch(advanceLogonFlow(response.success, history));
-    }
-  });
-}
-
-function logoff(event, history) {
-  event.preventDefault();
-  history.push(`/identifier${history.location.search}${history.location.hash}`);
-}
-
 function Chooseaccount(props) {
   const { loading, errors, classes, hello, history } = props;
 
@@ -69,6 +55,20 @@ function Chooseaccount(props) {
     username = hello.username;
   }
 
+  const logon = (event) => {
+    event.preventDefault();
+    dispatch(executeLogonIfFormValid(hello.username, '', true)).then((response) => {
+      if (response.success) {
+        dispatch(advanceLogonFlow(response.success, history));
+      }
+    });
+  }
+
+  const logoff = (event) => {
+    event.preventDefault();
+    history.push(`/identifier${history.location.search}${history.location.hash}`);
+  }
+
   return (
     <div>
       <Typography variant="h5" component="h3">
@@ -79,14 +79,14 @@ function Chooseaccount(props) {
         </FormattedMessage>
       </Typography>
 
-      <form action="" onSubmit={(event) => logon(event, props)}>
+      <form action="" onSubmit={(event) => logon(event)}>
         <List disablePadding className={classes.accountList}>
           <ListItem
             button
             disableGutters
             className={classes.accountListItem}
             disabled={!!loading}
-            onClick={(event) => logon(event, props)}
+            onClick={(event) => logon(event)}
           ><ListItemAvatar><Avatar>{username.substr(0, 1)}</Avatar></ListItemAvatar>
             <ListItemText primary={username} />
           </ListItem>
@@ -95,7 +95,7 @@ function Chooseaccount(props) {
             disableGutters
             className={classes.accountListItem}
             disabled={!!loading}
-            onClick={(event) => logoff(event, history)}
+            onClick={(event) => logoff(event)}
           >
             <ListItemAvatar>
               <Avatar>