feat(app-general): add centralized loading and error management

packages/game-app/src/_shared/i18n/index.ts

@@ -2,6 +2,7 @@ import I18n from 'i18n-js';
 import enTranslations from '@assets/i18n/en';
 import { reducer, actions, name } from './slice';
 import { useTranslate } from './useTranslate';
+import translateError from './translateError';
 
 export function initializeI18n() {
   const defaultLocale = 'en-EN';
@@ -12,4 +13,4 @@ export function initializeI18n() {
   I18n.translations[defaultLocale] = enTranslations;
 }
 
-export { reducer, actions, name, useTranslate };
+export { reducer, actions, name, useTranslate, translateError };

packages/game-app/src/_shared/i18n/translateError.ts

@@ -0,0 +1,22 @@
+import { useTranslate } from './useTranslate';
+
+const defaultError = 'errors.general';
+
+export default function translateError(
+  t: ReturnType<typeof useTranslate>,
+  error: { code?: string; errorCode?: string; message?: string },
+  scope?: string,
+) {
+  const errorCode = error.code || error.errorCode;
+  let message = t(`${scope || 'errors.code'}.${errorCode}` as any, {
+    default: '',
+  });
+
+  if (!message) {
+    message = t(`errors.code.${errorCode}` as any, {
+      default: error.message,
+    });
+  }
+
+  return message || t(defaultError as any);
+}

packages/game-app/src/_shared/i18n/useTranslate.ts

@@ -10,7 +10,15 @@ export function useTranslate() {
 }
 
 export function translateFactory(language: string) {
-  return function translate(key: Path<typeof enTranslations>) {
-    return I18n.t(key, { locale: language });
+  return function translate(
+    key: Path<typeof enTranslations>,
+    options?: {
+      default?: string;
+    },
+  ) {
+    return I18n.t(key, {
+      locale: language,
+      defaultValue: options?.default,
+    });
   };
 }

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

@@ -0,0 +1,56 @@
+import { Action } from '@reduxjs/toolkit';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { translateError, useTranslate } from '@pipeline/i18n';
+import { selectRequestStatus } from './selectors';
+import { RequestsKeys } from './requestsKeys';
+import { actions as requestsActions } from './index';
+import { GeneralHookResponse } from './types';
+
+type HookOptions = {
+  errorMessagesScope?: string;
+};
+
+export function createRequestHook<T extends Array<any>>(
+  requestKey: keyof RequestsKeys,
+  triggerAction: (...args: T) => Action,
+  options?: HookOptions,
+): () => GeneralHookResponse<T> {
+  return function (): GeneralHookResponse<T> {
+    const t = useTranslate();
+    const dispatch = useDispatch();
+    const keySelector = useMemo(() => selectRequestStatus(requestKey), []);
+
+    const { loading, success, error } = useSelector(keySelector);
+
+    const getErrorMessage = (error: any) => {
+      return error ? translateError(t, error, options?.errorMessagesScope) : undefined;
+    };
+
+    const [translatedError, setTranslatedError] = useState(getErrorMessage(error));
+
+    useEffect(() => {
+      const errorText = error ? getErrorMessage(error) : undefined;
+      setTranslatedError(errorText);
+    }, [error]);
+
+    const call = useCallback(
+      (...args: T) => {
+        dispatch(triggerAction(...args));
+      },
+      [dispatch],
+    );
+
+    const reset = useCallback(() => {
+      dispatch(requestsActions.resetStatus(requestKey));
+    }, [dispatch]);
+
+    useEffect(() => {
+      return () => {
+        dispatch(requestsActions.resetStatus(requestKey));
+      };
+    }, []);
+
+    return { loading, success, error, translatedError, call, reset };
+  };
+}

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

@@ -0,0 +1,10 @@
+import reducer, { actions, name } from './slice';
+import { RequestsKeys } from './requestsKeys';
+import { addRequestStatusManagement } from './sagaIntegrations';
+import { selectRequestStatus } from './selectors';
+import { GeneralHookResponse, RequestStatus } from './types';
+import { createRequestHook } from './createRequestHook';
+
+export { actions, addRequestStatusManagement, createRequestHook, name, reducer, selectRequestStatus };
+
+export type { GeneralHookResponse, RequestStatus, RequestsKeys };

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

@@ -0,0 +1,7 @@
+/**
+ * @packageDocumentation
+ */
+
+export interface RequestsKeys {
+  signup: null;
+}

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

@@ -0,0 +1,19 @@
+import { RequestsKeys } from './requestsKeys';
+import { call, put } from 'redux-saga/effects';
+import { actions as loadingActions } from './index';
+import { SagaIterator } from 'redux-saga';
+
+export function addRequestStatusManagement<T = any, Fn extends (...args: any[]) => SagaIterator<T> = () => any>(
+  gen: Fn,
+  requestKey: keyof RequestsKeys,
+) {
+  return function* composed(...args: Parameters<Fn>) {
+    try {
+      yield put(loadingActions.startRequest(requestKey));
+      yield call(gen, ...args);
+      yield put(loadingActions.requestSuccess(requestKey));
+    } catch (e) {
+      yield put(loadingActions.requestError({ key: requestKey, error: e }));
+    }
+  };
+}

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

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import { State as RequestsState, name } from './slice';
+import { RequestsKeys } from './requestsKeys';
+
+type State = {} & { [name]: RequestsState };
+
+const getRequestsStatusState = (state: State) => state[name];
+
+export const selectRequestStatus = (key: keyof RequestsKeys) =>
+  createSelector(
+    getRequestsStatusState,
+    requests => requests[key] || { loading: false, error: undefined, success: false },
+  );

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

@@ -0,0 +1,48 @@
+import { RequestsKeys } from './requestsKeys';
+import { RequestStatus } from './types';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export type State = {
+  [key in keyof RequestsKeys]?: RequestStatus;
+};
+
+const requestManagementSlice = createSlice({
+  name: 'requestsStatus',
+  initialState: {} as State,
+  reducers: {
+    resetStatus(state, action: PayloadAction<keyof RequestsKeys>) {
+      state[action.payload] = {
+        loading: false,
+        success: false,
+        error: undefined,
+      };
+    },
+    startRequest(state, action: PayloadAction<keyof RequestsKeys>) {
+      state[action.payload] = {
+        loading: true,
+        success: false,
+        error: undefined,
+      };
+    },
+    requestError(state, action: PayloadAction<{ key: keyof RequestsKeys; error: { message: string; code: string } }>) {
+      state[action.payload.key] = {
+        loading: false,
+        success: false,
+        error: action.payload.error,
+      };
+    },
+    requestSuccess(state, action: PayloadAction<keyof RequestsKeys>) {
+      state[action.payload] = {
+        loading: false,
+        success: true,
+        error: undefined,
+      };
+    },
+  },
+});
+
+export default requestManagementSlice.reducer;
+
+export const actions = requestManagementSlice.actions;
+
+export const name = requestManagementSlice.name;

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

@@ -0,0 +1,17 @@
+export interface RequestStatus {
+  loading: boolean;
+  error?: {
+    message: string;
+    code: string;
+  };
+  success: boolean;
+}
+
+export type GeneralHookResponse<T extends Array<any>> = {
+  loading: boolean;
+  success: boolean;
+  error?: { message: string; code: string };
+  translatedError?: string;
+  call: (...args: T) => void;
+  reset: () => void;
+};

packages/game-app/src/_shared/routing/routingPath.ts

@@ -2,4 +2,6 @@ export enum RoutingPath {
   Login = '/login',
   Signup = '/signup',
   Dashboard = '/dashboard',
+  EmailVerificationRequired = '/email-verification-required',
+  VerifyEmail = '/verify-email',
 }

packages/game-app/tsconfig.paths.json

@@ -6,7 +6,8 @@
       "@pipeline/app-config": ["src/_shared/config"],      
       "@pipeline/i18n": ["src/_shared/i18n"],
       "@pipeline/routing": ["src/_shared/routing"],
-      "@pipeline/auth": ["src/_shared/auth"]
+      "@pipeline/auth": ["src/_shared/auth"],
+      "@pipeline/requests-status": ["src/_shared/requests-status"]
     }
   }
 }