Remove unnecessary delete function from user settings

src/pages/UserSettings/index.tsx

@@ -13,7 +13,6 @@ import {
   Select,
   Alert,
   Spinner,
-  Modal,
 } from '../../components';
 import { Wrapper } from './styles';
 import { ArrowLeft, Profile, Security } from '../../assets';
@@ -24,14 +23,11 @@ import {
   UpdateUserPasswordMutationVariables,
   GetCountryCodesQuery,
   GetCountryCodesQueryVariables,
-  DeleteUserMutation,
-  DeleteUserMutationVariables,
   GetUserByIdQuery,
   GetUserByIdQueryVariables,
   UserResponseModel,
 } from '../../graphql/types';
 import {
-  DELETE_USER,
   GET_COUNTRY_CODES,
   GET_USER_BY_ID,
   UPDATE_USER_INFO,
@@ -64,7 +60,6 @@ const UserSettings = () => {
   >('general');
   const [error, setError] = useState<string>('');
   const [success, setSuccess] = useState<boolean>(false);
-  const [deleteAccountModal, setDeleteAccountModal] = useState<boolean>(false);
 
   const [updateUserInfo, { loading: generalLoading }] = useMutation<
     UpdateUserInfoMutation,
@@ -184,39 +179,6 @@ const UserSettings = () => {
       }),
   });
 
-  const [deleteUser] = useMutation<
-    DeleteUserMutation,
-    DeleteUserMutationVariables
-  >(DELETE_USER, {
-    onCompleted() {
-      setDeleteAccountModal(false);
-      history.goBack();
-    },
-    onError({ graphQLErrors }) {
-      setDeleteAccountModal(false);
-      setError(graphQLErrors[0]?.extensions?.info);
-      setTimeout(() => setError(''), 3000);
-    },
-  });
-
-  const deleteAccountForm = useFormik({
-    initialValues: {
-      password: '',
-    },
-    validationSchema: Yup.object().shape({
-      password: Yup.string()
-        .required('Password is required')
-        .min(6, 'Password is 6 characters minimum'),
-    }),
-    onSubmit: ({ password }, { resetForm }) => {
-      try {
-        deleteUser({ variables: { id: userToEdit?.id!, password } });
-      } finally {
-        resetForm();
-      }
-    },
-  });
-
   return role === 'admin' ? (
     <Wrapper>
       <Box>
@@ -446,98 +408,71 @@ const UserSettings = () => {
             </>
           )}
           {selectedSection === 'security' && (
-            <>
+            <form onSubmit={securityForm.handleSubmit}>
-              {deleteAccountModal && (
+              <Box
-                <Modal
+                display='grid'
+                gridTemplateColumns='auto'
+                rowGap='0.5rem'
+                position='relative'
+              >
+                <Input
+                  name='oldPassword'
+                  label='Old Password'
                   color={role || 'client'}
-                  title='Delete Account'
+                  type='password'
-                  description='Enter password to confirm account deletion.
+                  value={securityForm.values.oldPassword}
-                If you delete your account you cannot recover any of your projects.'
+                  onChange={securityForm.handleChange}
-                  onClose={() => setDeleteAccountModal(false)}
+                  onBlur={securityForm.handleBlur}
-                  onConfirm={deleteAccountForm.handleSubmit}
+                  error={
-                >
+                    securityForm.touched.oldPassword &&
-                  <Input
+                    !!securityForm.errors.oldPassword
-                    type='password'
+                  }
-                    placeholder='Password'
+                  errorMessage={securityForm.errors.oldPassword}
-                    name='password'
+                />
-                    value={deleteAccountForm.values.password}
+                <Input
-                    onChange={deleteAccountForm.handleChange}
+                  name='newPassword'
-                    onBlur={deleteAccountForm.handleBlur}
+                  label='New Password'
-                    color={role || 'client'}
+                  color={role || 'client'}
-                    error={
+                  type='password'
-                      deleteAccountForm.touched.password &&
+                  value={securityForm.values.newPassword}
-                      !!deleteAccountForm.errors.password
+                  onChange={securityForm.handleChange}
-                    }
+                  onBlur={securityForm.handleBlur}
-                    errorMessage={deleteAccountForm.errors.password}
+                  error={
-                  />
+                    securityForm.touched.newPassword &&
-                </Modal>
+                    !!securityForm.errors.newPassword
-              )}
+                  }
-              <form onSubmit={securityForm.handleSubmit}>
+                  errorMessage={securityForm.errors.newPassword}
+                />
+                <Input
+                  name='confirmNewPassword'
+                  label='Confirm New Password'
+                  color={role || 'client'}
+                  type='password'
+                  value={securityForm.values.confirmNewPassword}
+                  onChange={securityForm.handleChange}
+                  onBlur={securityForm.handleBlur}
+                  error={
+                    securityForm.touched.confirmNewPassword &&
+                    !!securityForm.errors.confirmNewPassword
+                  }
+                  errorMessage={securityForm.errors.confirmNewPassword}
+                />
                 <Box
-                  display='grid'
+                  marginTop='0.5rem'
-                  gridTemplateColumns='auto'
+                  display='flex'
-                  rowGap='0.5rem'
+                  justifyContent='flex-end'
-                  position='relative'
                 >
-                  <Input
+                  <Button
-                    name='oldPassword'
+                    variant='primary-action'
-                    label='Old Password'
                     color={role || 'client'}
-                    type='password'
+                    text='Save'
-                    value={securityForm.values.oldPassword}
+                    type='submit'
-                    onChange={securityForm.handleChange}
+                    loading={securityLoading}
-                    onBlur={securityForm.handleBlur}
+                    disabled={securityLoading}
-                    error={
-                      securityForm.touched.oldPassword &&
-                      !!securityForm.errors.oldPassword
-                    }
-                    errorMessage={securityForm.errors.oldPassword}
                   />
-                  <Input
-                    name='newPassword'
-                    label='New Password'
-                    color={role || 'client'}
-                    type='password'
-                    value={securityForm.values.newPassword}
-                    onChange={securityForm.handleChange}
-                    onBlur={securityForm.handleBlur}
-                    error={
-                      securityForm.touched.newPassword &&
-                      !!securityForm.errors.newPassword
-                    }
-                    errorMessage={securityForm.errors.newPassword}
-                  />
-                  <Input
-                    name='confirmNewPassword'
-                    label='Confirm New Password'
-                    color={role || 'client'}
-                    type='password'
-                    value={securityForm.values.confirmNewPassword}
-                    onChange={securityForm.handleChange}
-                    onBlur={securityForm.handleBlur}
-                    error={
-                      securityForm.touched.confirmNewPassword &&
-                      !!securityForm.errors.confirmNewPassword
-                    }
-                    errorMessage={securityForm.errors.confirmNewPassword}
-                  />
-                  <Box
-                    marginTop='0.5rem'
-                    display='flex'
-                    justifyContent='flex-end'
-                  >
-                    <Button
-                      variant='primary-action'
-                      color={role || 'client'}
-                      text='Save'
-                      type='submit'
-                      loading={securityLoading}
-                      disabled={securityLoading}
-                    />
-                  </Box>
                 </Box>
-              </form>
+              </Box>
-            </>
+            </form>
           )}
         </Box>
       </Box>