@fadyshawky/react-native-magic 2.2.0 → 2.3.0

package/template/src/common/helpers/arrayHelpers.ts

@@ -4,7 +4,7 @@ export function getItemIndex<T, V>(
   comparisonValue: V,
 ) {
   const index = data.findIndex(
-    item => item[comparisonParam] == comparisonValue,
+    item => item[comparisonParam] === comparisonValue,
   );
 
   const itemExists = index > -1;
@@ -17,7 +17,7 @@ export function filterBySearch<T>(
   param: keyof T,
   searchText: string,
 ): T[] {
-  if (searchText != '') {
+  if (searchText !== '') {
     const lowerCaseSearch = searchText.toLowerCase();
 
     return data.filter(item =>

package/template/src/common/helpers/defaultKeyIdExtractor.ts

@@ -1,5 +1,5 @@
 export function defaultKeyIdExtractor<T extends {id: string | number}>(
   item: T,
 ): string {
-  return item?._id;
+  return ((item as any)?._id ?? item?.id ?? '').toString();
 }

package/template/src/common/helpers/regexHelpers.ts

@@ -1,7 +1,6 @@
 export function isEmail(email: string): boolean {
   const emailRegex =
-    // eslint-disable-next-line max-len
-    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
   return emailRegex.test(email);
 }

package/template/src/common/helpers/stringsHelpers.ts

@@ -8,7 +8,6 @@ export function removeHtmlTags(text: string): string {
 
 export function removeEmojis(text: string): string {
   return text.replace(
-    // eslint-disable-next-line max-len
     /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,
     '',
   );

package/template/src/common/hooks/useBackHandler.ts

@@ -3,8 +3,11 @@ import {BackHandler} from 'react-native';
 
 export function useBackHandler(handler: () => boolean, deps?: DependencyList) {
   useEffect(() => {
-    BackHandler.addEventListener('hardwareBackPress', handler);
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      handler,
+    );
 
-    return () => BackHandler.removeEventListener('hardwareBackPress', handler);
+    return () => subscription.remove();
   }, [deps, handler]);
 }

package/template/src/common/hooks/useEventRegister.ts

@@ -22,7 +22,7 @@ export function useEventRegister(
     return () => {
       listeners.set(
         eventName,
-        callbacks.filter(i => i.id != id),
+        callbacks.filter(i => i.id !== id),
       );
     };
   }, [eventName, callback]);

package/template/src/common/hooks/useFlatListActions.ts

@@ -16,7 +16,7 @@ export function useFlatListActions(
   const dispatch = useAppDispatch();
 
   const loadMore = useCallback(() => {
-    loadState == LoadState.idle && dispatch(request(LoadState.loadingMore));
+    loadState === LoadState.idle && dispatch(request(LoadState.loadingMore));
   }, [dispatch, request, loadState]);
 
   const tryAgain = useCallback(() => {

package/template/src/common/hooks/useWhyDidYouUpdate.ts

@@ -1,7 +1,7 @@
 import {useEffect, useRef} from 'react';
 
 export function useWhyDidYouUpdate<T>(name: string, props: T): void {
-  const previousProps = useRef<T>();
+  const previousProps = useRef<T | undefined>(undefined);
 
   useEffect(() => {
     if (previousProps.current) {

package/template/src/common/localization/LocalizationProvider.tsx

@@ -112,7 +112,7 @@ export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
       }
 
       return result[key] || key;
-    } catch (error) {
+    } catch {
       console.warn(
         `Translation not found for key: ${key} in section: ${section}`,
       );

package/template/src/common/localization/RTLInitializer.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {I18nManager, Platform, NativeModules} from 'react-native';
+import {I18nManager} from 'react-native';
 import {useAppSelector} from '../../core/store/reduxHelpers';
 import {Languages} from './localization';
 

package/template/src/common/localization/dateFormatter.ts

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs';
-// eslint-disable-next-line import/no-unassigned-import
 import 'dayjs/locale/en';
 import calendar from 'dayjs/plugin/calendar';
 import {ICalendarSpec} from '../../../types';

package/template/src/common/localization/intlFormatter.ts

@@ -1,6 +1,5 @@
 import Intl from 'intl';
 import {getLanguage} from './localization';
-// eslint-disable-next-line import/no-unassigned-import
 import 'intl/locale-data/jsonp/en';
 
 export function formatPercent(percent: number | string): string {

package/template/src/common/localization/localization.ts

@@ -67,5 +67,5 @@ export function setLanguage(language?: Languages): void {
   setDateLocale(localizationLanguage);
 }
 
-// Default language is Arabic
-export const DEFAULT_LANGUAGE = Languages.ar;
+// Default language is English (LTR). Arabic/RTL stays available and switchable.
+export const DEFAULT_LANGUAGE = Languages.en;

package/template/src/common/localization/translations/homeLocalization.ts

@@ -2,9 +2,23 @@ export const homeLocalization = {
   en: {
     welcome: 'Welcome',
     title: 'Home',
+    greeting: 'Hi,',
+    there: 'there',
+    heroEyebrow: 'GET STARTED',
+    heroTitle: 'Build something great',
+    heroSubtitle: 'Your starter is wired and ready to ship.',
+    explore: 'Explore',
+    items: 'Items',
   },
   ar: {
     welcome: 'مرحباً',
     title: 'الرئيسية',
+    greeting: 'مرحباً،',
+    there: 'صديقي',
+    heroEyebrow: 'ابدأ الآن',
+    heroTitle: 'اصنع شيئاً رائعاً',
+    heroSubtitle: 'القالب جاهز ومُهيّأ للانطلاق.',
+    explore: 'استكشف',
+    items: 'العناصر',
   },
 };

package/template/src/common/localization/translations/loginLocalization.ts

@@ -3,11 +3,15 @@ export const loginLocalization = {
     Login: 'Login',
     welcome: 'Welcome Back',
     welcome_description: 'Sign in to your account to continue',
+    signIn: 'Sign in',
+    needHelp: 'Need help?',
+    phoneOrEmail: 'Phone or email',
     Email: 'Email',
     EnterEmail: 'Enter your email',
     Password: 'Password',
     EnterPassword: 'Enter your password',
     PhoneNumber: 'Phone Number',
+    EnterPhone: 'Enter your phone number',
     forgetPassword: 'Forgot Password?',
     continue: 'Continue',
     notMember: 'Not a member?',
@@ -34,12 +38,16 @@ export const loginLocalization = {
     Login: 'تسجيل الدخول',
     welcome: 'مرحباً بك',
     welcome_description: 'سجل دخولك للمتابعة',
+    signIn: 'تسجيل الدخول',
+    needHelp: 'تحتاج مساعدة؟',
+    phoneOrEmail: 'الهاتف أو البريد',
     identification_number: 'رقم الهوية',
     Email: 'البريد الإلكتروني',
     EnterEmail: 'أدخل بريدك الإلكتروني',
     Password: 'كلمة المرور',
     EnterPassword: 'أدخل كلمة المرور',
     PhoneNumber: 'رقم الهاتف',
+    EnterPhone: 'أدخل رقم الهاتف',
     EnterPhoneNumber: 'أدخل رقم الهاتف',
     Country: 'الدولة',
     EnterCountry: 'أدخل الدولة',

package/template/src/common/localization/translations/mainNavigationLocalization.ts

@@ -2,6 +2,7 @@ export const mainNavigationLocalization = {
   en: {
     tabs: {
       Main: 'Home',
+      Components: 'Components',
       Favorites: 'Favorites',
       Financials: 'Financials',
       Account: 'Account',
@@ -16,6 +17,7 @@ export const mainNavigationLocalization = {
   ar: {
     tabs: {
       Main: 'الرئيسية',
+      Components: 'المكوّنات',
       Favorites: 'المفضلة',
       Financials: 'المالية',
       Account: 'الحساب',

package/template/src/common/localization/translations/profileLocalization.ts

@@ -6,6 +6,14 @@ export const profileLocalization = {
     darkMode: 'Dark Mode',
     language: 'Language',
     account: 'Account',
+    fullName: 'Full name',
+    mobileNumber: 'Mobile number',
+    appearance: 'Appearance',
+    light: 'Light',
+    dark: 'Dark',
+    logoutConfirm: 'Are you sure you want to log out?',
+    notifications: 'Notifications',
+    system: 'System',
     editProfile: 'Edit Profile',
     changePassword: 'Change Password',
     logout: 'Logout',
@@ -20,6 +28,14 @@ export const profileLocalization = {
     darkMode: 'الوضع الداكن',
     language: 'اللغة',
     account: 'الحساب',
+    fullName: 'الاسم الكامل',
+    mobileNumber: 'رقم الهاتف',
+    appearance: 'المظهر',
+    light: 'فاتح',
+    dark: 'داكن',
+    logoutConfirm: 'هل تريد تسجيل الخروج؟',
+    notifications: 'الإشعارات',
+    system: 'النظام',
     editProfile: 'تعديل الملف الشخصي',
     changePassword: 'تغيير كلمة المرور',
     logout: 'تسجيل الخروج',

package/template/src/common/utils/index.tsx

@@ -1,11 +1,5 @@
-// Fee calculation utilities
-export {initFees, calculateFees} from './FeesCaalculation';
-
 // State management utility
 export {newState} from './newState';
 
 // Size calculation utility
 export {createPerfectSize} from './createPerfectSize';
-
-// Print data utility
-export {makePrintData} from './printData';

package/template/src/common/validations/commonValidations.ts

@@ -1,7 +1,7 @@
 import {localization} from '../localization/localization';
 
 export function emptyValidation(checkValue: string): string | null {
-  return checkValue != null && checkValue != ''
+  return checkValue != null && checkValue !== ''
     ? null
     : localization.errors.thisFieldIsRequired;
 }
@@ -16,7 +16,7 @@ export function datesValidation(
   const fromTime = from.getTime();
   const toTime = to.getTime();
 
-  if (fromTime == toTime) {
+  if (fromTime === toTime) {
     return localization.errors.datesCantBeEqual(fromLabel, toLabel);
   } else {
     const isFromTimeLater = fromTime > toTime;

package/template/src/core/api/errorHandler.ts

@@ -30,7 +30,7 @@ export const extractServerError = (error: any) => {
     } else if (error?.message) {
       errorObj.message = ensureString(error.message);
     }
-  } catch (e) {}
+  } catch {}
 
   // Final safety check
   errorObj.message = ensureString(errorObj.message);

package/template/src/core/api/responseHandlers.ts

@@ -1,11 +1,9 @@
 import {AxiosResponse} from 'axios';
 import Snackbar from 'react-native-snackbar';
-import {setLogout} from '../store/user/userSlice';
-import {store} from '../store/store';
 
 export const handleFetchJsonResponse = (
   response: AxiosResponse,
-  showSuccessMessage?: boolean,
+  _showSuccessMessage?: boolean,
 ) => {
   return response.data;
 };

package/template/src/core/api/serverHeaders.ts

@@ -1,9 +1,15 @@
-import axios, {AxiosDefaults, AxiosError, AxiosResponse} from 'axios';
+import axios, {
+  AxiosDefaults,
+  AxiosError,
+  AxiosRequestConfig,
+  AxiosResponse,
+} from 'axios';
+import {API_BASE_URL} from '../config';
 import {store} from '../store/store';
+import {refreshUserToken} from '../store/user/userActions';
 import {setLogout} from '../store/user/userSlice';
-import {API_BASE_URL} from '../config';
 
-export const defaultHeaders: HeadersInit = {
+export const defaultHeaders: Record<string, string> = {
   Connection: 'keep-alive',
   'Content-Type': 'application/json',
 };
@@ -16,9 +22,8 @@ declare type MethodData = {
 
 const instance = axios.create({
   baseURL: API_BASE_URL,
-  headers: {
-    ...defaultHeaders,
-  },
+  timeout: 30000,
+  headers: {...defaultHeaders},
 });
 
 instance.interceptors.request.use(
@@ -35,19 +40,63 @@ instance.interceptors.request.use(
   error => Promise.reject(error),
 );
 
+/**
+ * Dedup concurrent 401s: only one refresh request in flight at a time;
+ * other failing requests await the same promise and retry once the new
+ * token is available.
+ */
+let refreshPromise: Promise<string | null> | null = null;
+
+async function runRefresh(): Promise<string | null> {
+  try {
+    const result = await store.dispatch(refreshUserToken());
+    if (refreshUserToken.fulfilled.match(result)) {
+      return result.payload.accessToken;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
 instance.interceptors.response.use(
   (response: AxiosResponse) => response,
   async (error: AxiosError) => {
-    const originalRequest = error.config;
-    if (
-      originalRequest?.url?.includes('/login') ||
-      originalRequest?.url?.includes('/refresh-token')
-    ) {
+    const originalRequest = error.config as AxiosRequestConfig & {
+      _retry?: boolean;
+    };
+
+    const url = originalRequest?.url ?? '';
+    const isAuthEndpoint =
+      url.includes('/login') || url.includes('/auth/refresh');
+
+    if (isAuthEndpoint) {
       return Promise.reject(error);
     }
-    if (error.response?.status === 401 || error.response?.status === 402) {
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      if (!refreshPromise) {
+        refreshPromise = runRefresh().finally(() => {
+          refreshPromise = null;
+        });
+      }
+      const newToken = await refreshPromise;
+      if (newToken) {
+        originalRequest.headers = {
+          ...(originalRequest.headers ?? {}),
+          Authorization: `Bearer ${newToken}`,
+        };
+        return instance.request(originalRequest);
+      }
       store.dispatch(setLogout());
+      return Promise.reject(error);
     }
+
+    if (error.response?.status === 402) {
+      store.dispatch(setLogout());
+    }
+
     return Promise.reject(error);
   },
 );

package/template/src/core/notifications/notificationAuth.ts

@@ -0,0 +1,6 @@
+import {store} from '../store/store';
+
+export function isUserLoggedIn(): boolean {
+  const state = store.getState();
+  return !!state.user?.accessToken;
+}

package/template/src/core/notifications/notificationService.ts

@@ -0,0 +1,125 @@
+import messaging, {
+  FirebaseMessagingTypes,
+} from '@react-native-firebase/messaging';
+import {AppState, AppStateStatus, Platform} from 'react-native';
+import Snackbar from 'react-native-snackbar';
+import {store} from '../store/store';
+import {updateFcmToken} from '../store/user/userSlice';
+import {isUserLoggedIn} from './notificationAuth';
+import {routeFromNotificationData} from './routeFromNotificationData';
+
+type Data = FirebaseMessagingTypes.RemoteMessage['data'];
+
+let pendingBackgroundNotificationData: Data | null = null;
+let appStateSubscription: {remove: () => void} | null = null;
+let unsubscribeStore: (() => void) | null = null;
+
+export function queueNotificationRouteFromBackgroundData(data: Data) {
+  pendingBackgroundNotificationData = data ?? null;
+}
+
+function tryFlushPending() {
+  if (!pendingBackgroundNotificationData) return;
+  if (!isUserLoggedIn()) return;
+  const data = pendingBackgroundNotificationData;
+  if (routeFromNotificationData(data as Record<string, string>)) {
+    pendingBackgroundNotificationData = null;
+  }
+}
+
+async function requestPermissionIfNeeded() {
+  try {
+    if (Platform.OS === 'ios') {
+      await messaging().requestPermission();
+    }
+  } catch (e) {
+    if (__DEV__) console.warn('[push] permission request failed', e);
+  }
+}
+
+async function syncToken() {
+  try {
+    const token = await messaging().getToken();
+    if (token) {
+      store.dispatch(updateFcmToken(token));
+    }
+  } catch (e) {
+    if (__DEV__) console.warn('[push] getToken failed', e);
+  }
+}
+
+/**
+ * Register all push-notification listeners.
+ * Returns an unsubscribe function — call it on app unmount.
+ *
+ * Listeners covered:
+ *  - cold-start tap (getInitialNotification)
+ *  - foreground message (onMessage)
+ *  - background tap (onNotificationOpenedApp)
+ *  - token refresh (onTokenRefresh)
+ *  - AppState resume + auth-state change → flush pending route
+ */
+export function startPushNotificationListeners() {
+  requestPermissionIfNeeded();
+  syncToken();
+
+  const unsubOnMessage = messaging().onMessage(remoteMessage => {
+    const title =
+      remoteMessage.notification?.title ?? remoteMessage.data?.title;
+    const body =
+      remoteMessage.notification?.body ?? remoteMessage.data?.body;
+    const text = [title, body].filter(Boolean).join(' — ');
+    if (text) {
+      Snackbar.show({text, duration: Snackbar.LENGTH_SHORT});
+    }
+  });
+
+  const unsubOnOpenedApp = messaging().onNotificationOpenedApp(remoteMessage => {
+    if (!remoteMessage?.data) return;
+    if (isUserLoggedIn()) {
+      routeFromNotificationData(remoteMessage.data as Record<string, string>);
+    } else {
+      pendingBackgroundNotificationData = remoteMessage.data;
+    }
+  });
+
+  messaging()
+    .getInitialNotification()
+    .then(remoteMessage => {
+      if (!remoteMessage?.data) return;
+      pendingBackgroundNotificationData = remoteMessage.data;
+      tryFlushPending();
+    });
+
+  const unsubOnTokenRefresh = messaging().onTokenRefresh(token => {
+    store.dispatch(updateFcmToken(token));
+  });
+
+  appStateSubscription = AppState.addEventListener(
+    'change',
+    (state: AppStateStatus) => {
+      if (state === 'active') tryFlushPending();
+    },
+  );
+
+  let lastAccessToken = store.getState().user?.accessToken;
+  unsubscribeStore = store.subscribe(() => {
+    const next = store.getState().user?.accessToken;
+    if (next && next !== lastAccessToken) {
+      lastAccessToken = next;
+      tryFlushPending();
+    } else {
+      lastAccessToken = next;
+    }
+  });
+
+  return () => {
+    unsubOnMessage();
+    unsubOnOpenedApp();
+    unsubOnTokenRefresh();
+    appStateSubscription?.remove();
+    appStateSubscription = null;
+    unsubscribeStore?.();
+    unsubscribeStore = null;
+  };
+}

package/template/src/core/notifications/routeFromNotificationData.ts

@@ -0,0 +1,32 @@
+import {navigate, navigationRef} from '../../navigation/RootNavigation';
+
+/**
+ * Generic notification-tap router.
+ *
+ * FCM payloads carry routing hints in `data`. Convention:
+ *   data.screen     – screen name in any registered navigator
+ *   data.params     – JSON string of route params (optional)
+ *
+ * Extend per project: switch on `data.type` or `data.target` for
+ * deeper routing logic.
+ */
+export function routeFromNotificationData(
+  data: Record<string, string | undefined> | null | undefined,
+) {
+  if (!data || !navigationRef.isReady()) return false;
+
+  const screen = data.screen;
+  if (!screen) return false;
+
+  let params: Record<string, unknown> | undefined;
+  if (data.params) {
+    try {
+      params = JSON.parse(data.params);
+    } catch {
+      params = undefined;
+    }
+  }
+
+  navigate(screen as never, params as never);
+  return true;
+}

package/template/src/core/store/categories/categoriesActions.ts

@@ -0,0 +1,25 @@
+import {createAsyncThunk} from '@reduxjs/toolkit';
+import {extractServerError} from '../../api/errorHandler';
+import {handleFetchJsonResponse} from '../../api/responseHandlers';
+import {get} from '../../api/serverHeaders';
+import {ensureString} from '../../utils/stringUtils';
+import {Category} from './categoriesState';
+
+/**
+ * Example data thunk — GETs /categories and returns the list.
+ * Mirrors the user thunks: api helper + extractServerError + rejectWithValue.
+ */
+export const fetchCategories = createAsyncThunk<
+  Category[],
+  void,
+  {rejectValue: {message: string}}
+>('categories/fetch', async (_arg, {rejectWithValue}) => {
+  try {
+    const response = await get({url: '/categories'});
+    const data = handleFetchJsonResponse(response);
+    return (data?.data ?? data ?? []) as Category[];
+  } catch (e: any) {
+    const serverError = extractServerError(e);
+    return rejectWithValue({message: ensureString(serverError.message)});
+  }
+});

package/template/src/core/store/categories/categoriesSlice.ts

@@ -0,0 +1,51 @@
+import {PayloadAction, createSlice} from '@reduxjs/toolkit';
+import {LoadState} from '../../../../types';
+import {newState} from '../../../common/utils/newState';
+import {fetchCategories} from './categoriesActions';
+import {
+  Category,
+  CategoriesInitialState,
+  CategoriesState,
+} from './categoriesState';
+
+function pendingHandler(state: CategoriesState) {
+  return newState(state, {
+    loadState: state.categories.length
+      ? LoadState.pullToRefresh
+      : LoadState.firstLoad,
+    error: null,
+  });
+}
+
+function fulfilledHandler(
+  state: CategoriesState,
+  action: PayloadAction<Category[]>,
+) {
+  return newState(state, {
+    categories: action.payload ?? [],
+    loadState: LoadState.allIsLoaded,
+    error: null,
+  });
+}
+
+function rejectedHandler(
+  state: CategoriesState,
+  action: PayloadAction<{message: string} | undefined>,
+) {
+  return newState(state, {
+    loadState: LoadState.error,
+    error: action.payload?.message ?? 'Failed to load categories',
+  });
+}
+
+export const {reducer: CategoriesReducer} = createSlice({
+  name: 'categories',
+  initialState: CategoriesInitialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(fetchCategories.pending, pendingHandler)
+      .addCase(fetchCategories.fulfilled, fulfilledHandler)
+      .addCase(fetchCategories.rejected, rejectedHandler);
+  },
+});

package/template/src/core/store/categories/categoriesState.ts

@@ -0,0 +1,19 @@
+import {LoadState} from '../../../../types';
+
+export interface Category {
+  id: string;
+  name: string;
+  icon?: string;
+}
+
+export interface CategoriesState {
+  categories: Category[];
+  loadState: LoadState;
+  error: string | null;
+}
+
+export const CategoriesInitialState: CategoriesState = {
+  categories: [],
+  loadState: LoadState.needLoad,
+  error: null,
+};