@fadyshawky/react-native-magic 1.0.0

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

@@ -0,0 +1,13 @@
+export const onboardingLocalization = {
+  en: {
+    welcomeToApp: 'Welcome to\nApp',
+    firstHeader: 'Welcome',
+    firstBody: 'Thank you for choosing react-native-template-strong',
+    secondHeader: 'Learn',
+    secondBody:
+      'Some things are already done, to know more check the contents of pages and tabs',
+    thirdHeader: 'Star',
+    thirdBody:
+      'Star the repo if you find this project useful and participate in its development',
+  },
+};

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

@@ -0,0 +1,14 @@
+export const pagesLocalization = {
+  en: {
+    main: 'Home',
+    login: 'Login',
+    search: 'Search',
+    pickup: 'Pickup',
+    profile: 'Profile',
+    reports: 'Reports',
+    learnings: 'Learnings',
+    settings: 'Settings',
+    selectDate: 'Select date',
+    storybook: 'Storybook',
+  },
+};

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

@@ -0,0 +1,6 @@
+export const profileLocalization = {
+  en: {
+    studentProfile: 'Student Profile',
+    allDetails: 'All Details',
+  },
+};

package/template/src/common/urls/baseUrlOpener.ts

@@ -0,0 +1,31 @@
+import {Linking} from 'react-native';
+
+export abstract class BaseUrlOpener {
+  protected constructor() {
+    this.tryOpen = this.tryOpen.bind(this);
+  }
+
+  tryOpen(): void {
+    const url = this.generateUrl();
+    if (url == null) {
+      return;
+    }
+
+    this.tryOpenUrl(url);
+  }
+
+  async open(): Promise<void> {
+    const url = this.generateUrl();
+    if (url == null) {
+      return;
+    }
+
+    await this.tryOpenUrl(url);
+  }
+
+  protected async tryOpenUrl(url: string): Promise<void> {
+    Linking.openURL(url);
+  }
+
+  protected abstract generateUrl(): string | null;
+}

package/template/src/common/urls/emailUrl.ts

@@ -0,0 +1,20 @@
+import {BaseUrlOpener} from './baseUrlOpener';
+
+export class EmailUrl extends BaseUrlOpener {
+  constructor(private email: string | null) {
+    super();
+  }
+
+  protected generateUrl(): string | null {
+    if (this.email == null) {
+      return null;
+    } else {
+      let url = this.email;
+      if (!url.startsWith('mailto')) {
+        url = 'mailto://' + url;
+      }
+
+      return url;
+    }
+  }
+}

package/template/src/common/urls/httpUrl.ts

@@ -0,0 +1,19 @@
+import {BaseUrlOpener} from './baseUrlOpener';
+
+export class HttpUrl extends BaseUrlOpener {
+  constructor(private httpUrl: string | null) {
+    super();
+  }
+
+  protected generateUrl(): string | null {
+    if (this.httpUrl == null) {
+      return null;
+    } else {
+      if (this.httpUrl.startsWith('http')) {
+        return this.httpUrl;
+      } else {
+        return 'https://' + this.httpUrl;
+      }
+    }
+  }
+}

package/template/src/common/urls/mapUrl.ts

@@ -0,0 +1,22 @@
+import {isIos} from '../../core/theme/commonConsts';
+import {BaseUrlOpener} from './baseUrlOpener';
+
+export class MapUrl extends BaseUrlOpener {
+  constructor(
+    private latitude: number,
+    private longitude: number,
+    private address: string,
+  ) {
+    super();
+  }
+
+  protected generateUrl(): string | null {
+    if (isIos) {
+      return `https://maps.apple.com/?q=${encodeURIComponent(
+        this.address,
+      )}&sll=${this.latitude},${this.longitude}`;
+    } else {
+      return `geo:${this.latitude}, ${this.longitude}`;
+    }
+  }
+}

package/template/src/common/urls/phoneUrl.ts

@@ -0,0 +1,16 @@
+import {isIos} from '../../core/theme/commonConsts';
+import {BaseUrlOpener} from './baseUrlOpener';
+
+export class PhoneUrl extends BaseUrlOpener {
+  constructor(private phone: string | null) {
+    super();
+  }
+
+  protected generateUrl(): string | null {
+    if (this.phone == null) {
+      return null;
+    } else {
+      return (isIos ? 'telprompt:' : 'tel:') + this.phone;
+    }
+  }
+}

package/template/src/common/utils/createPerfectSize.ts

@@ -0,0 +1,15 @@
+import {Dimensions} from 'react-native';
+
+const windowDimensions = Dimensions.get('window');
+
+const currentResolution = Math.sqrt(
+  windowDimensions.height * windowDimensions.height +
+    windowDimensions.width * windowDimensions.width,
+);
+
+export const createPerfectSize = (width: number, height: number) => {
+  const designResolution = Math.sqrt(height * height + width * width);
+  const resolutionsProportions = currentResolution / designResolution;
+
+  return (size: number) => resolutionsProportions * size;
+};

package/template/src/common/utils/listHandlers.ts

@@ -0,0 +1,30 @@
+import {LoadState} from '../../../types';
+import {DEFAULT_PAGE_SIZE} from '../helpers/calculatePage';
+
+export function commonListFulfilledHandler<T>(
+  loadState: LoadState,
+  payloadList: T[],
+  storedList: T[],
+) {
+  const newLoadState =
+    payloadList.length >= DEFAULT_PAGE_SIZE
+      ? LoadState.idle
+      : LoadState.allIsLoaded;
+
+  let newData: T[] = [];
+
+  switch (loadState) {
+    case LoadState.firstLoad:
+    case LoadState.pullToRefresh:
+    case LoadState.refreshing:
+      newData = [...payloadList];
+      break;
+    case LoadState.loadingMore:
+      newData = [...storedList].concat(payloadList);
+      break;
+    default:
+      throw new Error(`LoadState ${loadState} is not valid in this context.`);
+  }
+
+  return {data: newData, error: null, loadState: newLoadState};
+}

package/template/src/common/utils/newState.ts

@@ -0,0 +1,5 @@
+export function newState<T>(obj: T, setter: Partial<T>): T {
+  const newObj = {...(obj as any)};
+
+  return Object.assign(newObj, setter);
+}

package/template/src/common/utils/serializeQueryParams.ts

@@ -0,0 +1,10 @@
+export function serializeQueryParams(obj: any): string {
+  const str = [];
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key) && obj[key] !== undefined) {
+      str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
+    }
+  }
+
+  return str.join('&');
+}

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

@@ -0,0 +1,15 @@
+import {localization} from '../localization/localization';
+import {emptyValidation} from './commonValidations';
+import {validationConstants} from './validationConstants';
+
+export function phoneValidations(checkValue: string): string | null {
+  const isEmpty = emptyValidation(checkValue);
+
+  if (isEmpty != null) {
+    return isEmpty;
+  } else {
+    return checkValue.length >= validationConstants.phone.minLength
+      ? null
+      : localization.errors.invalidPhoneNumber;
+  }
+}

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

@@ -0,0 +1,39 @@
+import {localization} from '../localization/localization';
+
+export function emptyValidation(checkValue: string): string | null {
+  return checkValue != null && checkValue != ''
+    ? null
+    : localization.errors.thisFieldIsRequired;
+}
+
+export function datesValidation(
+  from: Date,
+  to: Date,
+  fromLabel: string,
+  toLabel: string,
+  currentField: 'from' | 'to',
+): string | null {
+  const fromTime = from.getTime();
+  const toTime = to.getTime();
+
+  if (fromTime == toTime) {
+    return localization.errors.datesCantBeEqual(fromLabel, toLabel);
+  } else {
+    const isFromTimeLater = fromTime > toTime;
+
+    switch (currentField) {
+      case 'from':
+        return isFromTimeLater
+          ? localization.errors.invalidFromDate(fromLabel, toLabel)
+          : null;
+      case 'to':
+        return isFromTimeLater
+          ? localization.errors.invalidToDate(fromLabel, toLabel)
+          : null;
+      default:
+        throw new Error(
+          `Unknown dates validation current field: ${currentField}`,
+        );
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+import {localization} from '../localization/localization';
+import {unwrapResult} from '@reduxjs/toolkit';
+import {Alert} from 'react-native';
+import {IErrorResult, ErrorRepresentationType} from '../../../types';
+import Snackbar from 'react-native-snackbar';
+import {Colors} from '../../core/theme/colors';
+
+export function handlePromiseResult(
+  promiseAction: Promise<any>,
+  successMessage?: string,
+  successAction?: () => void,
+  processError?: (error: Error) => IErrorResult,
+  setError?: (errorMessage: string) => void,
+) {
+  promiseAction
+    .then(unwrapResult)
+    .then(() => {
+      successMessage &&
+        Snackbar.show({
+          text: successMessage,
+          duration: Snackbar.LENGTH_SHORT,
+          textColor: Colors.white,
+          backgroundColor: Colors.green,
+        });
+      successAction && successAction();
+    })
+    .catch((handledError: Error) => {
+      processError &&
+        handleErrorPostProcessing(processError(handledError), setError);
+    });
+}
+
+export function handleErrorPostProcessing(
+  error: IErrorResult,
+  setError?: (errorMessage: string) => void,
+) {
+  switch (error.visualRepresentation) {
+    case ErrorRepresentationType.alert:
+      Alert.alert(localization.errors.error, error.message);
+      break;
+    case ErrorRepresentationType.input:
+      setError && setError(error.message);
+      break;
+    case ErrorRepresentationType.toast:
+      Snackbar.show({
+        text: error.message,
+        duration: Snackbar.LENGTH_SHORT,
+        textColor: Colors.white,
+        backgroundColor: Colors.red,
+      });
+      break;
+    default:
+      throw new Error(
+        `Unknown error representation type: ${error.visualRepresentation}`,
+      );
+  }
+}
+
+export function recheckAllValidations(
+  recheckFunctions: (() => string | null)[],
+): boolean {
+  let isNull: boolean = true;
+
+  recheckFunctions.forEach(recheckFunc => {
+    const result = recheckFunc() == null;
+    if (!result) {
+      isNull = false;
+    }
+  });
+
+  return isNull;
+}

package/template/src/common/validations/hooks/useDatesError.ts

@@ -0,0 +1,40 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {datesValidation} from '../commonValidations';
+
+export function useDatesError(
+  fromDate: Date,
+  toDate: Date,
+  fromLabel: string,
+  toLabel: string,
+  currentField: 'from' | 'to',
+) {
+  const [error, setError] = useState<string | null>(null);
+  const didMountRef = useRef(false);
+
+  const recheckValue = useCallback(() => {
+    const result = datesValidation(
+      fromDate,
+      toDate,
+      fromLabel,
+      toLabel,
+      currentField,
+    );
+    setError(result);
+
+    return result;
+  }, [currentField, fromDate, fromLabel, toDate, toLabel]);
+
+  useEffect(() => {
+    if (didMountRef.current) {
+      recheckValue();
+    } else {
+      didMountRef.current = true;
+    }
+  }, [recheckValue]);
+
+  return {
+    error,
+    setError,
+    recheckValue,
+  };
+}

package/template/src/common/validations/hooks/useInputError.ts

@@ -0,0 +1,30 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+export function useInputError(
+  checkValue: string,
+  checkFunction: (valueToCheck: string) => string | null,
+) {
+  const [error, setError] = useState<string | null>(null);
+  const didMountRef = useRef(false);
+
+  const recheckValue = useCallback(() => {
+    const result = checkFunction(checkValue);
+    setError(result);
+
+    return result;
+  }, [checkFunction, checkValue]);
+
+  useEffect(() => {
+    if (didMountRef.current) {
+      recheckValue();
+    } else {
+      didMountRef.current = true;
+    }
+  }, [recheckValue]);
+
+  return {
+    error,
+    setError,
+    recheckValue,
+  };
+}

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

@@ -0,0 +1,30 @@
+import {emptyValidation} from './commonValidations';
+import {isEmail} from '../helpers/regexHelpers';
+import {validationConstants} from './validationConstants';
+import {localization} from '../localization/localization';
+
+export function emailValidations(checkValue: string): string | null {
+  const isEmpty = emptyValidation(checkValue);
+
+  if (isEmpty != null) {
+    return isEmpty;
+  } else if (!isEmail(checkValue)) {
+    return localization.errors.invalidEmail;
+  } else {
+    return null;
+  }
+}
+
+export function fullNameValidations(checkValue: string): string | null {
+  const isEmpty = emptyValidation(checkValue);
+
+  if (isEmpty != null) {
+    return isEmpty;
+  } else if (
+    checkValue.trim().length < validationConstants.fullName.minLength
+  ) {
+    return localization.errors.invalidFullName;
+  } else {
+    return null;
+  }
+}

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

@@ -0,0 +1,20 @@
+export const validationConstants = {
+  phone: {
+    minLength: 8,
+    maxLength: 18,
+  },
+  fullName: {
+    minLength: 3,
+    maxLength: 64,
+  },
+  comment: {
+    maxLength: 280,
+  },
+  email: {
+    maxLength: 254,
+  },
+  licensePlate: {
+    minLength: 4,
+    maxLength: 10,
+  },
+};

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

@@ -0,0 +1,43 @@
+import {AxiosResponse} from 'axios';
+import Snackbar from 'react-native-snackbar';
+import {Colors} from '../theme/colors';
+import {setLogout} from '../store/user/userSlice';
+import {store} from '../store/store';
+
+export const handleFetchJsonResponse = async (
+  response: AxiosResponse,
+  showSuccessMessage?: boolean,
+) => {
+  if (response.status === 401) {
+    store.dispatch(setLogout());
+  } else if (
+    !response.status ||
+    response.status < 200 ||
+    (response.status >= 300 && response.status !== 401)
+  ) {
+    return Snackbar.show({
+      text: response?.data?.message,
+      duration: Snackbar.LENGTH_SHORT,
+      textColor: Colors.white,
+      backgroundColor: Colors.red,
+    });
+  } else if (showSuccessMessage) {
+    Snackbar.show({
+      text: 'Success',
+      duration: Snackbar.LENGTH_SHORT,
+      textColor: Colors.white,
+      backgroundColor: Colors.green,
+    });
+  }
+
+  return response.data;
+};
+
+export const handleErrorResponse = async (message: string) => {
+  return Snackbar.show({
+    text: message,
+    duration: Snackbar.LENGTH_SHORT,
+    textColor: Colors.white,
+    backgroundColor: Colors.red,
+  });
+};

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

@@ -0,0 +1,39 @@
+import Config from 'react-native-config';
+import axios from 'axios';
+import {AxiosDefaults} from 'axios';
+
+export const defaultHeaders: HeadersInit_ = {
+  Connection: 'keep-alive',
+  'Content-Type': 'application/json',
+};
+declare type MethodData = {
+  url: AxiosDefaults['httpsAgent'];
+  data?: AxiosDefaults['data'];
+  config?: any;
+};
+
+const instance = axios.create({
+  baseURL: Config.API_BASE_URL,
+  timeout: 5000,
+  maxRate: 100,
+  headers: {
+    Connection: 'keep-alive',
+    'Content-Type': 'application/json',
+  },
+});
+
+export const post = ({url, data, config}: MethodData) => {
+  return instance.post(url, data, config);
+};
+
+export const get = ({url, config}: MethodData) => {
+  return instance.get(url, config);
+};
+
+export const put = ({url, data, config}: MethodData) => {
+  return instance.put(url, data, config);
+};
+
+export const deleteApi = ({url, config}: MethodData) => {
+  return instance.delete(url, config);
+};

package/template/src/core/store/app/appSlice.ts

@@ -0,0 +1,12 @@
+import {createSlice} from '@reduxjs/toolkit';
+import {newState} from '../../../common/utils/newState';
+
+import {appInitialState, AppInitialEntity} from './appState';
+
+export const {reducer: AppReducer, actions} = createSlice({
+  name: 'app',
+  initialState: appInitialState,
+  reducers: {},
+});
+
+export const {} = actions;

package/template/src/core/store/app/appState.ts

@@ -0,0 +1,3 @@
+export interface AppInitialEntity {}
+
+export const appInitialState: AppInitialEntity = {};

package/template/src/core/store/reduxHelpers.ts

@@ -0,0 +1,11 @@
+import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
+import {RootState} from './rootReducer';
+import {createAsyncThunk} from '@reduxjs/toolkit';
+import {AppDispatch} from './store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+export const createAppAsyncThunk = createAsyncThunk.withTypes<{
+  state: RootState;
+  dispatch: AppDispatch;
+}>();

package/template/src/core/store/rootReducer.ts

@@ -0,0 +1,10 @@
+import {combineReducers} from '@reduxjs/toolkit';
+import {AppReducer} from './app/appSlice';
+import {UserReducer} from './user/userSlice';
+
+export const rootReducer = combineReducers({
+  app: AppReducer,
+  user: UserReducer,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;

package/template/src/core/store/store.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Action, configureStore, ThunkAction} from '@reduxjs/toolkit';
+import {PersistConfig, persistReducer, persistStore} from 'redux-persist';
+import {rootReducer, RootState} from './rootReducer';
+import {Provider} from 'react-redux';
+import {PersistGate} from 'redux-persist/integration/react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {createWhitelistFilter} from 'redux-persist-transform-filter';
+
+const persistConfig: PersistConfig<RootState> = {
+  key: 'root',
+  storage: AsyncStorage,
+  version: 1,
+  timeout: 1000,
+  transforms: [createWhitelistFilter('user', ['accessToken', 'user'])],
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+});
+
+export const persistor = persistStore(store);
+
+export type AppDispatch = typeof store.dispatch;
+export type AppThunk = ThunkAction<void, RootState, unknown, Action<string>>;
+
+export const reduxProvider = (Component: any) => (props: any) => {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Component {...props} />
+      </PersistGate>
+    </Provider>
+  );
+};

package/template/src/core/store/user/userActions.ts

@@ -0,0 +1,31 @@
+import moment from 'moment';
+import {handleFetchJsonResponse} from '../../api/responseHandlers';
+import {get, post, put} from '../../api/serverHeaders';
+import {createAsyncThunk} from '@reduxjs/toolkit';
+
+export const userLogin = createAsyncThunk(
+  'user/login',
+  async (
+    {email, password}: {email: string; password: string},
+    {rejectWithValue, getState, dispatch}: any,
+  ) => {
+    try {
+      const data: {email: string; password: string} = {
+        email,
+        password,
+      };
+
+      const response = await post({
+        url: '/login',
+        data,
+      });
+
+      if (response.data?.user?.roleName !== 'Parent') {
+        return rejectWithValue('Not Authorized');
+      }
+      return handleFetchJsonResponse(response);
+    } catch (e: any) {
+      return rejectWithValue(e?.response);
+    }
+  },
+);