feat(app-signup): add loading and error management

packages/game-app/src/_shared/requests-status/createRequestHook.ts

@@ -16,7 +16,7 @@ export function createRequestHook<T extends Array<any>>(
   triggerAction: (...args: T) => Action,
   options?: HookOptions,
 ): () => GeneralHookResponse<T> {
-  return function (): GeneralHookResponse<T> {
+  const hook = function useRequest(): GeneralHookResponse<T> {
     const t = useTranslate();
     const dispatch = useDispatch();
     const keySelector = useMemo(() => selectRequestStatus(requestKey), []);
@@ -53,4 +53,11 @@ export function createRequestHook<T extends Array<any>>(
 
     return { loading, success, error, translatedError, call, reset };
   };
+
+  Object.defineProperty(hook, 'name', {
+    value: `use${requestKey}Request`,
+    configurable: true,
+  });
+
+  return hook;
 }

packages/game-app/src/_shared/store/reducers.ts

@@ -1,9 +1,11 @@
 import { name as i18nName, reducer as i18nReducer } from '@pipeline/i18n';
 import { name as authName, reducer as authReducer } from '@pipeline/auth';
+import { name as requestsStatusName, reducer as requestsStatusReducer } from '@pipeline/requests-status';
 
 const reducers = {
   [i18nName]: i18nReducer,
   [authName]: authReducer,
+  [requestsStatusName]: requestsStatusReducer,
 };
 
 export default reducers;

packages/game-app/src/signup/components/Signup/Signup.tsx

@@ -50,14 +50,14 @@ const Signup: React.FC<Props> = ({}) => {
 
   const { handleSubmit } = methods;
 
-  const { execute } = useSignup();
+  const { call: signup, loading, translatedError, success } = useSignup();
 
   const submit = useMemo(
     () =>
       handleSubmit((info: SignupInfo) => {
-        execute(info);
+        signup(info);
       }),
-    [handleSubmit],
+    [signup, handleSubmit],
   );
 
   return (
@@ -73,6 +73,9 @@ const Signup: React.FC<Props> = ({}) => {
           <button id="signup-button" onClick={submit}>
             Signup
           </button>
+          {loading ? <span>Loading</span> : null}
+          {translatedError ? <span className="error-message">{translatedError}</span> : null}
+          {loading ? <span>Success</span> : null}
         </FormProvider>
       </div>
     </div>

packages/game-app/src/signup/hooks/useSignup.ts

@@ -1,16 +1,8 @@
-import { useCallback } from 'react';
-import { SignupInfo } from '../types/signupInfo';
-import { useDispatch } from 'react-redux';
 import * as actions from '../actions';
+import { createRequestHook } from '@pipeline/requests-status';
 
-export default function useSignup() {
-  const dispatch = useDispatch();
+const useSignup = createRequestHook('signup', actions.signup, {
+  errorMessagesScope: 'signup',
+});
 
-  const execute = useCallback((info: SignupInfo) => {
-    dispatch(actions.signup(info));
-  }, []);
-
-  return {
-    execute,
-  };
-}
+export default useSignup;

packages/game-app/src/signup/sagas/signup.ts

@@ -2,13 +2,16 @@ import * as actions from '../actions';
 import { executeSignup } from '../apis/executeSignup';
 import { call, takeEvery, takeLeading } from 'redux-saga/effects';
 import { User } from '../../_shared/auth/slice';
+import { addRequestStatusManagement } from '@pipeline/requests-status';
 
 function* signupSaga(action: ReturnType<typeof actions.signup>) {
   try {
     const user: User = yield call(executeSignup, action.payload);
-  } catch (e) {}
+  } catch (e) {
+    throw e;
+  }
 }
 
 export default function* runSignup() {
-  yield takeLeading(actions.signup, signupSaga);
+  yield takeLeading(actions.signup, addRequestStatusManagement(signupSaga, 'signup'));
 }