refactor: getErrorMsg() to pure functions

new-lamassu-admin/src/pages/Authentication/LoginState.js

@@ -34,20 +34,20 @@ const initialValues = {
   rememberMe: false
 }
 
+const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
+  if (!formikErrors || !formikTouched) return null
+  if (mutationError) return 'Invalid login/password combination'
+  if (formikErrors.client && formikTouched.client) return formikErrors.client
+  if (formikErrors.password && formikTouched.password)
+    return formikErrors.password
+  return null
+}
+
 const LoginState = ({ state, dispatch }) => {
   const classes = useStyles()
 
   const [login, { error: mutationError }] = useMutation(LOGIN)
 
-  const getErrorMsg = (formikErrors, formikTouched) => {
-    if (!formikErrors || !formikTouched) return null
-    if (mutationError) return 'Invalid login/password combination'
-    if (formikErrors.client && formikTouched.client) return formikErrors.client
-    if (formikErrors.password && formikTouched.password)
-      return formikErrors.password
-    return null
-  }
-
   const submitLogin = async (username, password, rememberMe) => {
     const { data: loginResponse } = await login({
       variables: {
@@ -88,7 +88,7 @@ const LoginState = ({ state, dispatch }) => {
             fullWidth
             autoFocus
             className={classes.input}
-            error={getErrorMsg(errors, touched)}
+            error={getErrorMsg(errors, touched, mutationError)}
           />
           <Field
             name="password"
@@ -96,7 +96,7 @@ const LoginState = ({ state, dispatch }) => {
             component={SecretInput}
             label="Password"
             fullWidth
-            error={getErrorMsg(errors, touched)}
+            error={getErrorMsg(errors, touched, mutationError)}
           />
           <div className={classes.rememberMeWrapper}>
             <Field
@@ -107,9 +107,9 @@ const LoginState = ({ state, dispatch }) => {
             <Label3>Keep me logged in</Label3>
           </div>
           <div className={classes.footer}>
-            {getErrorMsg(errors, touched) && (
+            {getErrorMsg(errors, touched, mutationError) && (
               <P className={classes.errorMessage}>
-                {getErrorMsg(errors, touched)}
+                {getErrorMsg(errors, touched, mutationError)}
               </P>
             )}
             <Button

new-lamassu-admin/src/pages/Authentication/Register.js

@@ -72,6 +72,21 @@ const reducer = (state, action) => {
   return { ...state, ...payload, result: type }
 }
 
+const getErrorMsg = (
+  formikErrors,
+  formikTouched,
+  queryError,
+  mutationError
+) => {
+  if (!formikErrors || !formikTouched) return null
+  if (queryError || mutationError) return 'Internal server error'
+  if (formikErrors.password && formikTouched.password)
+    return formikErrors.password
+  if (formikErrors.confirmPassword && formikTouched.confirmPassword)
+    return formikErrors.confirmPassword
+  return null
+}
+
 const Register = () => {
   const classes = useStyles()
   const history = useHistory()
@@ -107,16 +122,6 @@ const Register = () => {
     }
   })
 
-  const getErrorMsg = (formikErrors, formikTouched) => {
-    if (!formikErrors || !formikTouched) return null
-    if (queryError || mutationError) return 'Internal server error'
-    if (formikErrors.password && formikTouched.password)
-      return formikErrors.password
-    if (formikErrors.confirmPassword && formikTouched.confirmPassword)
-      return formikErrors.confirmPassword
-    return null
-  }
-
   return (
     <Grid
       container
@@ -166,9 +171,19 @@ const Register = () => {
                         fullWidth
                       />
                       <div className={classes.footer}>
-                        {getErrorMsg(errors, touched) && (
+                        {getErrorMsg(
+                          errors,
+                          touched,
+                          queryError,
+                          mutationError
+                        ) && (
                           <P className={classes.errorMessage}>
-                            {getErrorMsg(errors, touched)}
+                            {getErrorMsg(
+                              errors,
+                              touched,
+                              queryError,
+                              mutationError
+                            )}
                           </P>
                         )}
                         <Button

new-lamassu-admin/src/pages/Authentication/ResetPassword.js

@@ -49,6 +49,16 @@ const initialValues = {
   confirmPassword: ''
 }
 
+const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
+  if (!formikErrors || !formikTouched) return null
+  if (mutationError) return 'Internal server error'
+  if (formikErrors.password && formikTouched.password)
+    return formikErrors.password
+  if (formikErrors.confirmPassword && formikTouched.confirmPassword)
+    return formikErrors.confirmPassword
+  return null
+}
+
 const ResetPassword = () => {
   const classes = useStyles()
   const history = useHistory()
@@ -81,16 +91,6 @@ const ResetPassword = () => {
     }
   })
 
-  const getErrorMsg = (formikErrors, formikTouched) => {
-    if (!formikErrors || !formikTouched) return null
-    if (error) return 'Internal server error'
-    if (formikErrors.password && formikTouched.password)
-      return formikErrors.password
-    if (formikErrors.confirmPassword && formikTouched.confirmPassword)
-      return formikErrors.confirmPassword
-    return null
-  }
-
   return (
     <Grid
       container
@@ -139,9 +139,9 @@ const ResetPassword = () => {
                         fullWidth
                       />
                       <div className={classes.footer}>
-                        {getErrorMsg(errors, touched) && (
+                        {getErrorMsg(errors, touched, error) && (
                           <P className={classes.errorMessage}>
-                            {getErrorMsg(errors, touched)}
+                            {getErrorMsg(errors, touched, error)}
                           </P>
                         )}
                         <Button

new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.js

@@ -50,6 +50,14 @@ const radioOptions = [
   }
 ]
 
+const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
+  if (!formikErrors || !formikTouched) return null
+  if (mutationError) return 'Internal server error'
+  if (formikErrors.username && formikTouched.username)
+    return formikErrors.username
+  return null
+}
+
 const CreateUserModal = ({ state, dispatch }) => {
   const classes = useStyles()
 
@@ -74,14 +82,6 @@ const CreateUserModal = ({ state, dispatch }) => {
     [classes.error]: formikErrors.role && formikTouched.role
   })
 
-  const getErrorMsg = (formikErrors, formikTouched) => {
-    if (!formikErrors || !formikTouched) return null
-    if (error) return 'Internal server error'
-    if (formikErrors.username && formikTouched.username)
-      return formikErrors.username
-    return null
-  }
-
   return (
     <>
       {state.showCreateUserModal && !createUserURL && (
@@ -125,8 +125,10 @@ const CreateUserModal = ({ state, dispatch }) => {
                   options={radioOptions}
                 />
                 <div className={classes.footer}>
-                  {getErrorMsg(errors, touched) && (
+                  {getErrorMsg(errors, touched, error) && (
-                    <ErrorMessage>{getErrorMsg(errors, touched)}</ErrorMessage>
+                    <ErrorMessage>
+                      {getErrorMsg(errors, touched, error)}
+                    </ErrorMessage>
                   )}
                   <Button
                     type="submit"