fix: remove logic unnecessarily tied to components and error handling

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

@@ -13,9 +13,6 @@ import { STATES } from './states'
 
 const useStyles = makeStyles(styles)
 
-const LoginCard = () => {
-  const classes = useStyles()
-
 const initialState = {
   twoFAField: '',
   clientField: '',
@@ -29,6 +26,9 @@ const LoginCard = () => {
   return { ...state, ...payload, loginState: type }
 }
 
+const LoginCard = () => {
+  const classes = useStyles()
+
   const [state, dispatch] = useReducer(reducer, initialState)
 
   const renderState = () => {

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

@@ -61,11 +61,6 @@ const initialValues = {
   confirmPassword: ''
 }
 
-const Register = () => {
-  const classes = useStyles()
-  const history = useHistory()
-  const token = QueryParams().get('t')
-
 const initialState = {
   username: null,
   role: null,
@@ -77,16 +72,21 @@ const Register = () => {
   return { ...state, ...payload, result: type }
 }
 
+const Register = () => {
+  const classes = useStyles()
+  const history = useHistory()
+  const token = QueryParams().get('t')
+
   const [state, dispatch] = useReducer(reducer, initialState)
 
   const { error: queryError, loading } = useQuery(VALIDATE_REGISTER_LINK, {
     variables: { token: token },
     onCompleted: ({ validateRegisterLink: info }) => {
       if (!info) {
-        dispatch({
+        return dispatch({
           type: 'failure'
         })
-      } else {
+      }
       dispatch({
         type: 'success',
         payload: {
@@ -94,13 +94,11 @@ const Register = () => {
           role: info.role
         }
       })
-      }
     },
-    onError: () => {
+    onError: () =>
       dispatch({
         type: 'failure'
       })
-    }
   })
 
   const [register, { error: mutationError }] = useMutation(REGISTER, {

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

@@ -14,7 +14,6 @@ import { primaryColor } from 'src/styling/variables'
 
 import styles from './shared.styles'
 
-const QueryParams = () => new URLSearchParams(useLocation().search)
 const useStyles = makeStyles(styles)
 
 const VALIDATE_RESET_2FA_LINK = gql`
@@ -33,15 +32,6 @@ const RESET_2FA = gql`
   }
 `
 
-const Reset2FA = () => {
-  const classes = useStyles()
-  const history = useHistory()
-  const token = QueryParams().get('t')
-
-  const [isShowing, setShowing] = useState(false)
-  const [invalidToken, setInvalidToken] = useState(false)
-  const [twoFAConfirmation, setTwoFAConfirmation] = useState('')
-
 const initialState = {
   userID: null,
   secret: null,
@@ -54,6 +44,16 @@ const Reset2FA = () => {
   return { ...state, ...payload, result: type }
 }
 
+const Reset2FA = () => {
+  const classes = useStyles()
+  const history = useHistory()
+  const QueryParams = () => new URLSearchParams(useLocation().search)
+  const token = QueryParams().get('t')
+
+  const [isShowing, setShowing] = useState(false)
+  const [invalidToken, setInvalidToken] = useState(false)
+  const [twoFAConfirmation, setTwoFAConfirmation] = useState('')
+
   const [state, dispatch] = useReducer(reducer, initialState)
 
   const handle2FAChange = value => {

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

@@ -14,7 +14,6 @@ import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 
 import styles from './shared.styles'
 
-const QueryParams = () => new URLSearchParams(useLocation().search)
 const useStyles = makeStyles(styles)
 
 const VALIDATE_RESET_PASSWORD_LINK = gql`
@@ -53,6 +52,7 @@ const initialValues = {
 const ResetPassword = () => {
   const classes = useStyles()
   const history = useHistory()
+  const QueryParams = () => new URLSearchParams(useLocation().search)
   const token = QueryParams().get('t')
   const [userID, setUserID] = useState(null)
   const [isLoading, setLoading] = useState(true)

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

@@ -33,12 +33,6 @@ const GET_USERS = gql`
   }
 `
 
-const Users = () => {
-  const classes = useStyles()
-  const { userData } = useContext(AppContext)
-
-  const { data: userResponse } = useQuery(GET_USERS)
-
 const initialState = {
   showCreateUserModal: false,
   showResetPasswordModal: false,
@@ -59,6 +53,11 @@ const Users = () => {
   }
 }
 
+const Users = () => {
+  const classes = useStyles()
+  const { userData } = useContext(AppContext)
+
+  const { data: userResponse } = useQuery(GET_USERS)
   const [state, dispatch] = useReducer(reducer, initialState)
 
   const [userInfo, setUserInfo] = useState(null)

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

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import React, { useState } from 'react'
 
+import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
 import { Button } from 'src/components/buttons'
 import { Info2, P } from 'src/components/typography'
@@ -32,7 +33,8 @@ const useStyles = makeStyles(styles)
 const ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => {
   const classes = useStyles()
 
-  const [changeUserRole] = useMutation(CHANGE_USER_ROLE, {
+  const [changeUserRole, { error }] = useMutation(CHANGE_USER_ROLE, {
+    onCompleted: () => handleClose(),
     refetchQueries: () => ['users']
   })
 
@@ -46,7 +48,6 @@ const ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => {
         newRole: user.role === 'superuser' ? 'user' : 'superuser'
       }
     })
-    handleClose()
   }
 
   const handleClose = () => {
@@ -81,6 +82,7 @@ const ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => {
         </P>
         <P className={classes.info}>Do you wish to proceed?</P>
         <div className={classes.footer}>
+          {error && <ErrorMessage>{error}</ErrorMessage>}
           <Button className={classes.submit} onClick={() => submit()}>
             Confirm
           </Button>

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

@@ -39,12 +39,6 @@ const initialValues = {
   role: ''
 }
 
-const CreateUserModal = ({ state, dispatch }) => {
-  const classes = useStyles()
-
-  const [usernameField, setUsernameField] = useState('')
-  const [createUserURL, setCreateUserURL] = useState(null)
-
 const radioOptions = [
   {
     code: 'user',
@@ -56,6 +50,12 @@ const CreateUserModal = ({ state, dispatch }) => {
   }
 ]
 
+const CreateUserModal = ({ state, dispatch }) => {
+  const classes = useStyles()
+
+  const [usernameField, setUsernameField] = useState('')
+  const [createUserURL, setCreateUserURL] = useState(null)
+
   const handleClose = () => {
     setCreateUserURL(null)
     dispatch({

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

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import React, { useState } from 'react'
 
+import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
 import { Button } from 'src/components/buttons'
 import { Info2, P } from 'src/components/typography'
@@ -32,11 +33,13 @@ const useStyles = makeStyles(styles)
 const EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => {
   const classes = useStyles()
 
-  const [enableUser] = useMutation(ENABLE_USER, {
+  const [enableUser, { error: enableError }] = useMutation(ENABLE_USER, {
+    onCompleted: () => handleClose(),
     refetchQueries: () => ['users']
   })
 
-  const [disableUser] = useMutation(DISABLE_USER, {
+  const [disableUser, { error: disableError }] = useMutation(DISABLE_USER, {
+    onCompleted: () => handleClose(),
     refetchQueries: () => ['users']
   })
 
@@ -62,7 +65,6 @@ const EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => {
 
   const submit = () => {
     user?.enabled ? disable() : enable()
-    handleClose()
   }
 
   const handleClose = () => {
@@ -115,6 +117,8 @@ const EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => {
           </>
         )}
         <div className={classes.footer}>
+          {disableError && <ErrorMessage>{disableError}</ErrorMessage>}
+          {enableError && <ErrorMessage>{enableError}</ErrorMessage>}
           <Button className={classes.submit} onClick={() => submit()}>
             Confirm
           </Button>

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

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import React, { useEffect, useState } from 'react'
 
+import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
 import { Info2, P, Mono } from 'src/components/typography'
 import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
@@ -28,7 +29,7 @@ const Reset2FAModal = ({ state, dispatch, user, requiresConfirmation }) => {
   const classes = useStyles()
   const [reset2FAUrl, setReset2FAUrl] = useState('')
 
-  const [createReset2FAToken, { loading }] = useMutation(
+  const [createReset2FAToken, { loading, error }] = useMutation(
     CREATE_RESET_2FA_TOKEN,
     {
       onCompleted: ({ createReset2FAToken: token }) => {
@@ -88,6 +89,7 @@ const Reset2FAModal = ({ state, dispatch, user, requiresConfirmation }) => {
             Safely share this link with {user.username} for a two-factor
             authentication reset.
           </P>
+          {!error && (
             <div className={classes.addressWrapper}>
               <Mono className={classes.address}>
                 <strong>
@@ -100,6 +102,8 @@ const Reset2FAModal = ({ state, dispatch, user, requiresConfirmation }) => {
                 </strong>
               </Mono>
             </div>
+          )}
+          {error && <ErrorMessage>{error}</ErrorMessage>}
         </Modal>
       ))
   )

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

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import React, { useEffect, useState } from 'react'
 
+import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
 import { Info2, P, Mono } from 'src/components/typography'
 import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
@@ -36,7 +37,7 @@ const ResetPasswordModal = ({
   const classes = useStyles()
   const [resetPasswordUrl, setResetPasswordUrl] = useState('')
 
-  const [createResetPasswordToken, { loading }] = useMutation(
+  const [createResetPasswordToken, { loading, error }] = useMutation(
     CREATE_RESET_PASSWORD_TOKEN,
     {
       onCompleted: ({ createResetPasswordToken: token }) => {
@@ -95,6 +96,7 @@ const ResetPasswordModal = ({
           <P className={classes.info}>
             Safely share this link with {user.username} for a password reset.
           </P>
+          {!error && (
             <div className={classes.addressWrapper}>
               <Mono className={classes.address}>
                 <strong>
@@ -107,6 +109,8 @@ const ResetPasswordModal = ({
                 </strong>
               </Mono>
             </div>
+          )}
+          {error && <ErrorMessage>{error}</ErrorMessage>}
         </Modal>
       ))
   )