feat: add new hooks, unify names

.prettierrc

@@ -4,5 +4,6 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "endOfLine": "auto"
 }

src/components/Form/Form.tsx

@@ -88,13 +88,14 @@ export const Form: FC<FormProps> = ({
   const [internalLoading, setInternalLoading] = useSafeSetState<boolean>(loading);
   const [requiredChildren, setRequiredChildren] = useState<Array<string>>([]);
   const showSnackbar = useSnackbar();
-
+  console.log(onSubmit);
   useEffect(() => {
     setInternalLoading(loading);
   }, [loading]);
 
   const handleOnSubmit = useCallback((values) => {
     setInternalLoading(true);
+    console.log(onSubmit);
     return (
       onSubmit &&
       onSubmit(values)

src/containers/ConfirmSignUp/ConfirmSignUp.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useCallback } from 'react';
-import { Auth } from '@aws-amplify/auth';
 import clsx from 'clsx';
 import { FormInput } from '../../components/FormInput/FormInput';
 import { Form, FormWithDefaultsProps } from '../../components/Form/Form';
+import { useConfirmSignupCode } from '../../hooks/useConfirmSignupCode';
 import {
   ResendConfirmationCodeButton,
   ResendConfirmationCodeBaseProps,
@@ -27,14 +27,13 @@ export const ConfirmSignUp: FC<ConfirmSignUpProps> = ({
   resendButtonColor = 'default',
   ...rest
 }) => {
+  const confirmCode = useConfirmSignupCode({
+    onSuccess: onSubmitResult,
+    successMsg: onSuccessLoginMsg,
+  });
   const confirmSignUp = useCallback(async (values: any) => {
     const { email, code } = values;
-    const formattedEmail = email.trim().toLowerCase();
-
-    return Auth.confirmSignUp(formattedEmail, code).then(async (result: any) => {
-      onSubmitResult && (await onSubmitResult(result));
-      return onSuccessLoginMsg;
-    });
+    return confirmCode({ username: email, code });
   }, []);
 
   const formActionsBeforeConfirm = (

src/containers/ConfirmSignUp/ResendConfirmationCodeButton.tsx

@@ -1,9 +1,8 @@
 import React, { FC, useCallback, useState } from 'react';
-import { Auth } from '@aws-amplify/auth';
 import { PropTypes } from '@material-ui/core';
 import { FormActionsProps } from '../../components/Form/Form';
 import { useSnackbar } from '../../hooks/useSnackbar';
-import { CognitoError } from '../../common/interfaces/CognitoError';
+import { useRequestConfirmationCode } from '../../hooks/useRequestConfirmationCode';
 import { FormButton } from '../../components/FormButton/FormButton';
 import { StyledFormActionsContainer } from './ResendConfirmationCodeButton.styled';
 
@@ -26,22 +25,23 @@ export const ResendConfirmationCodeButton: FC<ResendConfirmationCodeProps> = ({
 }) => {
   const [internalLoading, setInternalLoading] = useState(false);
   const showSnackbar = useSnackbar();
+  const resendCode = useRequestConfirmationCode();
 
-  const resendCode = useCallback(async () => {
+  const requestCode = useCallback(async () => {
     setInternalLoading(true);
     const { email } = values;
-    const formattedEmail = email.trim().toLowerCase();
 
-    await Auth.resendSignUp(formattedEmail)
-      .then(() => {
-        showSnackbar({ message: onSuccessResendMsg, severity: 'success' });
-      })
-      .catch(({ message }: CognitoError) => {
-        showSnackbar({ message, severity: 'error' });
-      })
-      .finally(() => {
-        setInternalLoading(false);
+    try {
+      await resendCode(email);
+      showSnackbar({ message: onSuccessResendMsg, severity: 'success' });
+    } catch (error) {
+      showSnackbar({
+        message: error?.message || 'Oops, Something went wrong',
+        severity: 'error',
       });
+    }
+
+    setInternalLoading(false);
   }, [values.email]);
 
   return (
@@ -50,7 +50,7 @@ export const ResendConfirmationCodeButton: FC<ResendConfirmationCodeProps> = ({
         color={resendButtonColor}
         disabled={loading || internalLoading}
         fullWidth={fullWidth}
-        onClick={resendCode}
+        onClick={requestCode}
       >
         {resendCodeLabel}
       </FormButton>

src/containers/ResetPassword/ResetPassword.tsx

@@ -7,6 +7,8 @@ import { FormInput } from '../../components/FormInput/FormInput';
 import { Form, FormWithDefaultsProps } from '../../components/Form/Form';
 import * as MultiStep from '../../components/MultiStep/MultiStep';
 import { ProgressBarPosition } from '../../components/MultiStep/MultiStep.styled';
+import { useRequestResetCode } from '../../hooks/useRequestResetCode';
+import { useSetNewPassword } from '../../hooks/useSetNewPassword';
 
 interface ResetPasswordProps extends FormWithDefaultsProps {
   progressBarPosition?: ProgressBarPosition;
@@ -42,10 +44,10 @@ export const ResetPassword: FC<ResetPasswordProps> = ({
   ...rest
 }) => {
   const [sentEmail, setSentEmail] = useState<string | undefined>(undefined);
-
+  const sendEmailReset = useRequestResetCode({ onSuccess: onSubmitResult });
+  const setNewPassword = useSetNewPassword({ onSuccess: onSubmitResult });
   const onSendEmailResetPassword = useCallback(async ({ email }): Promise<string> => {
-    await Auth.forgotPassword(email);
-    onSubmitResult && (await onSubmitResult({}));
+    await sendEmailReset(email);
     setSentEmail(email);
     return 'done';
   }, []);
@@ -54,8 +56,7 @@ export const ResetPassword: FC<ResetPasswordProps> = ({
     if (!sentEmail) {
       return 'err';
     }
-    Auth.forgotPasswordSubmit(sentEmail, code, password);
-    onSubmitResult && (await onSubmitResult({}));
+    await setNewPassword({ username: sentEmail, code, password });
     return 'done';
   }, []);
 

src/containers/SignIn/SignIn.tsx

@@ -25,7 +25,7 @@ export const SignIn: FC<SignInProps> = ({
   className,
   ...rest
 }) => {
-  const signIn = useLogin({ onLogin: onSubmitResult, onSuccessLoginMsg });
+  const signIn = useLogin({ onSuccess: onSubmitResult, successMsg: onSuccessLoginMsg });
 
   return (
     <>

src/containers/SignUp/SignUp.tsx

@@ -34,7 +34,7 @@ export const SignUp: FC<SignUpProps> = ({
   subheaderSignInBtnColor = 'primary',
   ...rest
 }) => {
-  const signUp = useSignUp({ onSuccessSignUpMsg: onSuccessLoginMsg, onSignUp: onSubmitResult });
+  const signUp = useSignUp({ onSuccess: onSubmitResult, successMsg: onSuccessLoginMsg });
 
   const SubheaderContent = () => (
     <>

src/hooks/useConfirmSignupCode.ts

@@ -0,0 +1,20 @@
+import { Auth } from '@aws-amplify/auth';
+
+export interface UseConfirmSignupCodeProps {
+  onSuccess?: (values: any) => Promise<void>;
+  successMsg?: string;
+}
+
+interface ConfirmCodeProps {
+  username: string;
+  code: string;
+}
+
+export const useConfirmSignupCode = ({ onSuccess, successMsg }: UseConfirmSignupCodeProps = {}): ((
+  values: ConfirmCodeProps,
+) => Promise<string | undefined>) => async ({ username, code }) => {
+  return Auth.confirmSignUp(username.trim().toLowerCase(), code).then(async (response) => {
+    onSuccess && (await onSuccess(response));
+    return successMsg;
+  });
+};

src/hooks/useLogin.ts

@@ -1,22 +1,22 @@
 import { Auth } from '@aws-amplify/auth';
 
 export interface UseLoginProps {
-  onLogin?: (values: any) => Promise<void>;
-  onSuccessLoginMsg?: string;
+  onSuccess?: (values: any) => Promise<void>;
+  successMsg?: string;
 }
 
 export interface LoginProps {
   email: string;
   password: string;
 }
 
-export const useLogin = (
-  options?: UseLoginProps,
-): ((values: LoginProps) => Promise<string | undefined>) => async ({ email, password }) =>
+export const useLogin = ({ onSuccess, successMsg }: UseLoginProps = {}): ((
+  values: LoginProps,
+) => Promise<string | undefined>) => async ({ email, password }) =>
   Auth.signIn({
     username: email.trim().toLowerCase(),
     password,
-  }).then(async (user) => {
-    options?.onLogin && (await options.onLogin(user));
-    return options?.onSuccessLoginMsg;
+  }).then(async (response) => {
+    onSuccess && (await onSuccess(response));
+    return successMsg;
   });

src/hooks/useRequestConfirmationCode.ts

@@ -0,0 +1,3 @@
+import { Auth } from '@aws-amplify/auth';
+
+export const useRequestConfirmationCode = () => async (email: string) => Auth.resendSignUp(email);

src/hooks/useRequestResetCode.ts

@@ -0,0 +1,19 @@
+import { Auth } from '@aws-amplify/auth';
+
+export interface UseSendResentPasswordProps {
+  onSuccess?: (values: any) => Promise<void>;
+  successMsg?: string;
+}
+
+export interface SendResetPasswordProps {
+  username: string;
+}
+
+export const useRequestResetCode = ({ onSuccess, successMsg }: UseSendResentPasswordProps = {}): ((
+  values: SendResetPasswordProps,
+) => Promise<string | undefined>) => async ({ username }) => {
+  return Auth.forgotPassword(username.trim().toLowerCase()).then(async () => {
+    onSuccess && (await onSuccess({}));
+    return successMsg;
+  });
+};

src/hooks/useSetNewPassword.ts

@@ -0,0 +1,23 @@
+import { Auth } from '@aws-amplify/auth';
+
+export interface SseSetNewPasswordProps {
+  onSuccess?: (values: any) => Promise<void>;
+  successMsg?: string;
+}
+
+interface NewPasswordProps {
+  username: string;
+  code: string;
+  password: string;
+}
+
+export const useSetNewPassword = ({ onSuccess, successMsg }: SseSetNewPasswordProps = {}): ((
+  values: NewPasswordProps,
+) => Promise<string | undefined>) => async ({ username, code, password }) => {
+  return Auth.forgotPasswordSubmit(username.trim().toLowerCase(), code, password).then(
+    async (response) => {
+      onSuccess && (await onSuccess(response));
+      return successMsg;
+    },
+  );
+};

src/hooks/useSignUp.ts

@@ -6,8 +6,8 @@ export interface OnSignUpProps<T> extends ISignUpResult {
 }
 
 export interface UseSignUpProps {
-  onSignUp?: (values: OnSignUpProps<any>) => Promise<void>;
-  onSuccessSignUpMsg: string;
+  onSuccess?: (values: OnSignUpProps<any>) => Promise<void>;
+  successMsg?: string;
 }
 export interface SignUpRequires {
   email: string;
@@ -18,7 +18,7 @@ export interface SignUpRequires {
 // 1.) signUp({ email, password });
 // 2.) signUp<ValuesInterface>({ email, password, age });
 
-export const useSignUp = ({ onSignUp, onSuccessSignUpMsg }: UseSignUpProps) => {
+export const useSignUp = ({ onSuccess, successMsg }: UseSignUpProps = {}) => {
   return async <T extends SignUpRequires>(props: any): Promise<string | undefined> => {
     const { email, password } = props;
     const formattedEmail = email.trim().toLowerCase();
@@ -37,8 +37,8 @@ export const useSignUp = ({ onSignUp, onSuccessSignUpMsg }: UseSignUpProps) => {
         formValues = rest;
       }
       const packedUser = { ...result, formValues };
-      onSignUp && (await onSignUp(packedUser));
-      return onSuccessSignUpMsg;
+      onSuccess && (await onSuccess(packedUser));
+      return successMsg;
     });
   };
 };

src/index.ts

@@ -11,6 +11,9 @@ export { useSafeSetState } from './hooks/useSafeSetState';
 export { useAuthenticated } from './hooks/useAuthenticated';
 export { useSignUp } from './hooks/useSignUp';
 export { useSnackbar } from './hooks/useSnackbar';
+export { useRequestConfirmationCode } from './hooks/useRequestConfirmationCode';
+export { useConfirmSignupCode } from './hooks/useConfirmSignupCode';
+export { useRequestResetCode } from './hooks/useRequestResetCode';
 export { PageLoading } from './components/PageLoading/PageLoading';
 export { Card } from './components/Card/Card';
 export { Form } from './components/Form/Form';