@ccrf01/react-native-template 0.0.16

package/template/src/hooks/useArray.ts

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+
+type GetIdFunc<T> = (item: T) => string|number
+const useArray = <T>(defaultValue: T[] = [], getId?: GetIdFunc<T>|undefined) => {
+  const [array, setArray] = useState(defaultValue)
+
+  const removeByIndex = (index: number) => {
+    const copy = [...array]
+    copy.splice(index, 1)
+    setArray(copy)
+  }
+
+  return {
+    array,
+    set: setArray,
+    add: (item: any, index?: number) => {
+      if (index === undefined) {
+        setArray([...array, item])
+      } else {
+        setArray(a => {
+          return [
+            ...a.slice(0, index),
+            item,
+            ...a.slice(index + 1, a.length),
+          ] as T[]
+        })
+      }
+    },
+    clear: () => setArray([]),
+    filter: (fn: (item: T) => boolean) => {
+      setArray(defaultValue.filter(fn))
+    },
+    reset: () => setArray([...defaultValue]),
+    remove: removeByIndex,
+    removeById: (id: string|number) => {
+      if (getId === undefined) {
+        throw new Error('getId is undefined')
+      }
+      const index = array.findIndex(item => getId(item) === id)
+      if (index !== -1) {
+        removeByIndex(index)
+      }
+    },
+  }
+}
+
+export default useArray

package/template/src/hooks/useAsync.ts

@@ -0,0 +1,42 @@
+import React, { useCallback, useEffect, useState } from 'react'
+
+const useAsync = <T, E = string>(
+  asyncFunction: () => Promise<T>,
+  immediate = true
+) => {
+  const [status, setStatus] = useState<
+    'idle' | 'pending' | 'success' | 'error'
+  >('idle')
+  const [value, setValue] = useState<T | null>(null)
+  const [error, setError] = useState<E | null>(null)
+  // The execute function wraps asyncFunction and
+  // handles setting state for pending, value, and error.
+  // useCallback ensures the below useEffect is not called
+  // on every render, but only if asyncFunction changes.
+  const execute = useCallback(() => {
+    setStatus('pending')
+    setValue(null)
+    setError(null)
+
+    return asyncFunction()
+      .then((response: any) => {
+        setValue(response)
+        setStatus('success')
+      })
+      .catch((asyncError: any) => {
+        setError(asyncError)
+        setStatus('error')
+      })
+  }, [asyncFunction])
+  // Call execute if we want to fire it right away.
+  // Otherwise, execute can be called later, such as
+  // in an onClick handler.
+  useEffect(() => {
+    if (immediate) {
+      void execute()
+    }
+  }, [execute, immediate])
+
+  return { execute, status, value, error }
+}
+export default useAsync

package/template/src/hooks/useAsyncStorage.ts

@@ -0,0 +1,41 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { MutableRefObject, useEffect } from 'react'
+import useState from 'react-usestateref'
+
+import logger from '@/infrastructures/common/logger'
+
+
+const useAsyncStorage = <T = string>(key: string, initialValue: T): [data: T, setNewData: (value: any) => Promise<void>, retrivedFromStorage: boolean, dataRef: MutableRefObject<T>] => {
+  const [data, setData, dataRef] = useState(initialValue)
+  const [retrievedFromStorage, setRetrievedFromStorage] = useState(false)
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const value = await AsyncStorage.getItem(key)
+        if (typeof value === 'string') {
+          setData((JSON.parse(value) as T) || initialValue)
+        } else {
+          setData(initialValue)
+        }
+        setRetrievedFromStorage(true)
+      } catch (error) {
+        // console.error('useAsyncStorage getItem error:', error)
+        logger.error('useAsyncStorage getItem error:', error)
+      }
+    }
+    void init()
+  }, [key, initialValue])
+
+  const setNewData = async (value: T) => {
+    try {
+      await AsyncStorage.setItem(key, JSON.stringify(value))
+      setData(value)
+    } catch (error) {
+      logger.error('useAsyncStorage setItem error:', error)
+    }
+  }
+
+  return [data, setNewData, retrievedFromStorage, dataRef]
+}
+export default useAsyncStorage

package/template/src/hooks/useBoolean.ts

@@ -0,0 +1,21 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react'
+
+type UseBooleanOutput = {
+  value: boolean
+  setValue: Dispatch<SetStateAction<boolean>>
+  setTrue: () => void
+  setFalse: () => void
+  toggle: () => void
+}
+
+const useBoolean = (defaultValue?: boolean): UseBooleanOutput => {
+  const [value, setValue] = useState(!!defaultValue)
+
+  const setTrue = useCallback(() => setValue(true), [])
+  const setFalse = useCallback(() => setValue(false), [])
+  const toggle = useCallback(() => setValue(x => !x), [])
+
+  return { value, setValue, setTrue, setFalse, toggle }
+}
+
+export default useBoolean

package/template/src/hooks/useBuildTheme.ts

@@ -0,0 +1,249 @@
+import { DarkTheme as NavigationDarkTheme, DefaultTheme as NavigationDefaultTheme, Theme as NavigationThemeType } from '@react-navigation/native'
+import merge from 'deepmerge'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useColorScheme } from 'react-native'
+import { adaptNavigationTheme, configureFonts, DefaultTheme as PaperDefaultTheme, MD3DarkTheme as PaperDarkTheme } from 'react-native-paper'
+import { useSelector } from 'react-redux'
+
+import { Locale } from '@/configs/constants/type'
+import { ThemeState } from '@/redux/reducers/themeSlice'
+import { selectLocale } from '@/redux/selectors/setting'
+import {
+  Common,
+  DefaultVariables,
+  Fonts,
+  Gutters,
+  Images,
+  Layout,
+  themes,
+} from '@/theme'
+import Icons from '@/theme/Icons'
+import {
+  CustomPaperThemeType,
+  FontScale,
+  MD3Fonts,
+  Theme,
+  ThemeCommon,
+  ThemeFonts,
+  ThemeNavigationColors,
+  ThemeNavigationFonts,
+  ThemeNavigationTheme,
+  ThemeNavigationThemeWithOwn,
+  ThemeVariables,
+} from '@/theme/types'
+
+const { DarkTheme, LightTheme } = adaptNavigationTheme({
+  reactNavigationLight: NavigationDefaultTheme,
+  reactNavigationDark: NavigationDarkTheme,
+})
+
+const CombinedDefaultTheme = merge(PaperDefaultTheme, LightTheme)
+const CombinedDarkTheme = merge(PaperDarkTheme, DarkTheme)
+
+const useBuildTheme = () => {
+  const colorScheme = useColorScheme()
+
+  // Get current theme from the store
+  const currentTheme = useSelector(
+    (state: { theme: ThemeState }) => state.theme.theme || 'default',
+  )
+  const isDark = useSelector(
+    (state: { theme: ThemeState }) => state.theme.darkMode,
+  )
+  const darkMode = useMemo(() => {
+    // use system color scheme if isDark is null
+    return isDark === null ? colorScheme === 'dark' : isDark
+  }, [colorScheme, isDark])
+  const fontScaleType = useSelector(
+    (state: { theme: ThemeState }) => state.theme.fontScale,
+  )
+  const fontScale = FontScale[fontScaleType || 'MEDIUM']
+
+  const createTheme = useCallback((): Theme & { PaperTheme: CustomPaperThemeType } & { NavigationTheme: NavigationThemeType } & { darkMode: boolean } => {
+    // Select the right theme light theme ({} if not exist)
+    const { Variables: themeConfigVars = {} as Partial<ThemeVariables>, ...themeConfig } = themes[currentTheme] || {}
+
+    const { Variables: darkThemeConfigVars = {} as Partial<ThemeVariables>, ...darkThemeConfig } = darkMode ? themes[`${currentTheme}_dark`] || {} : {}
+
+    const themeVariables: ThemeVariables = mergeVariables(
+      DefaultVariables as ThemeVariables,
+      themeConfigVars,
+      darkThemeConfigVars,
+    )
+    // const defaultNavTheme = darkMode ? Object.assign(DarkTheme, PaperDarkTheme) : Object.assign(DefaultTheme, PaperDefaultTheme)
+    const defaultNavTheme = darkMode ? CombinedDarkTheme : CombinedDefaultTheme
+
+    // Build the default theme
+    const baseTheme: Theme = {
+      Fonts: Fonts(themeVariables, fontScale),
+      Icons: Icons(themeVariables),
+      Gutters: Gutters(themeVariables),
+      Images: Images(themeVariables),
+      Layout: Layout(themeVariables),
+      Common: Common({
+        ...themeVariables,
+        Layout: Layout(themeVariables),
+        Gutters: Gutters(themeVariables),
+        Fonts: Fonts(themeVariables, fontScale),
+        Images: Images(themeVariables),
+      }),
+      ...themeVariables,
+      FontSize: themeVariables.ScaledFontSize[fontScale],
+      darkMode: !!darkMode,
+      Param: themeVariables.Param,
+      PaperTheme: PaperDefaultTheme as CustomPaperThemeType,
+      NavigationTheme: defaultNavTheme,
+    }
+
+    // Merge and return the current Theme
+    return buildTheme(
+      !!darkMode,
+      baseTheme,
+      formatTheme(themeVariables, themeConfig || {}),
+      formatTheme(themeVariables, darkThemeConfig || {}),
+    )
+  }, [currentTheme, darkMode, fontScale])
+
+  return createTheme()
+}
+
+export default useBuildTheme
+
+const formatTheme = (
+  variables: ThemeVariables,
+  theme: Partial<Theme>,
+): Partial<Theme> => {
+  return Object.entries(theme).reduce((acc, [name, generate]) => {
+
+    return {
+      ...acc,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      [name]: (generate)(variables),
+    }
+  }, {})
+}
+
+/**
+ * Merge all variables for building the theme
+ * baseTheme <- currentTheme <- currentDarkTheme
+ *
+ * @param variables : {MetricsSizes?: {small: number, large: number, tiny: number, regular: number}, NavigationColors?: {primary: string}, FontSize?: {small: number, large: number, regular: number}, Colors?: {white: string, success: string, text: string, error: string, transparent: string, primary: string}} variables from @Theme/Variables
+ * @param themeConfig : currentTheme form @Theme/themes
+ * @param darkThemeConfig : currentDarkTheme from @Theme/themes
+ * @return {{}|{[p: string]: *}}
+ */
+const mergeVariables = (
+  variables: ThemeVariables,
+  themeConfig: Partial<ThemeVariables>,
+  darkThemeConfig: Partial<ThemeVariables>,
+): ThemeVariables =>
+  Object.entries(variables).reduce((acc, [group, vars]) => {
+    return {
+      ...acc,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      [group]: {
+        ...vars,
+        ...((themeConfig as any)[group] || {}),
+        ...((darkThemeConfig as any)[group] || {}),
+      },
+    }
+  }, {} as ThemeVariables)
+
+/**
+ * Provide all the theme exposed with useTheme()
+ *
+ * @param darkMode : boolean
+ * @param baseTheme
+ * @param themeConfig
+ * @param darkThemeConfig
+ * @return {{[p: string]: *, NavigationTheme: {colors}, darkMode: *}}
+ */
+const buildTheme = (
+  darkMode: boolean,
+  baseTheme: Theme,
+  themeConfig: Partial<Theme>,
+  darkThemeConfig: Partial<Theme>,
+): Theme & { PaperTheme: CustomPaperThemeType } & { NavigationTheme: NavigationThemeType } & { darkMode: boolean } => {
+
+  const paperTheme = mergeNavigationTheme(
+    darkMode ? PaperDarkTheme : PaperDefaultTheme,
+    baseTheme.Colors,
+    baseTheme.Fonts as any,
+    baseTheme.Param.roundness,
+  )
+
+  const adaptedNavigationTheme = adaptNavigationTheme({
+    materialLight: paperTheme,
+    reactNavigationLight: NavigationDefaultTheme,
+    materialDark: paperTheme,
+    reactNavigationDark: NavigationDarkTheme,
+  })
+
+  return {
+    ...mergeTheme(baseTheme, themeConfig, darkThemeConfig),
+    darkMode,
+    PaperTheme: paperTheme,
+    NavigationTheme: darkMode ? adaptedNavigationTheme.DarkTheme : adaptedNavigationTheme.LightTheme,
+    // NavigationTheme: mergeNavigationTheme(
+    //   darkMode ? Object.assign(NavigationDarkTheme, PaperDarkTheme) : Object.assign(NavigationDefaultTheme, PaperDefaultTheme),
+    //   baseTheme.Colors,
+    //   baseTheme.Fonts as any,
+    //   baseTheme.Param.roundness,
+    // ),
+  }
+}
+
+
+/**
+ * Merge theme from baseTheme <- currentTheme <- currentDarkTheme
+ *
+ * @param baseTheme
+ * @param theme
+ * @param darkTheme
+ * @return {{[p: string]: *}}
+ */
+const mergeTheme = (
+  baseTheme: Theme,
+  theme: Partial<Theme>,
+  darkTheme: Partial<Theme>,
+): Theme =>
+  Object.entries(baseTheme).reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      [key]: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ...value,
+        ...((theme as any)[key] || {}),
+        ...((darkTheme as any)[key] || {}),
+      },
+    }),
+    {} as Theme,
+  )
+
+const mergeNavigationTheme = (
+  reactNavigationTheme: ThemeNavigationTheme,
+  overrideColors: ThemeNavigationColors,
+  overrideFonts: ThemeNavigationFonts,
+  roundness: number,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+): ThemeNavigationThemeWithOwn => ({
+  ...reactNavigationTheme,
+  colors: {
+    ...reactNavigationTheme.colors,
+    ...overrideColors,
+  },
+  fonts: {
+    ...reactNavigationTheme.fonts,
+    ...configureFonts({
+      config: {
+        ...overrideFonts,
+      },
+    }),
+    ...overrideFonts,
+  },
+  roundness: roundness,
+})

package/template/src/hooks/useCountDown.ts

@@ -0,0 +1,111 @@
+import { useCallback } from 'react'
+
+import logger from '@/infrastructures/common/logger'
+
+import useBoolean from './useBoolean'
+import useCounter from './useCounter'
+import useInterval from './useInterval'
+
+// New interface IN & OUT
+type CountdownOption = {
+  countStart: number
+  intervalMs?: number
+  isIncrement?: boolean
+  countStop?: number
+}
+type CountdownControllers = {
+  startCountdown: () => void
+  stopCountdown: () => void
+  resetCountdown: () => void
+}
+
+/**
+ * New interface with default value
+ *
+ * @param  {CountdownOption} countdownOption
+ * @param  {number} countdownOption.countStart - the countdown's starting number, initial value of the returned number.
+ * @param  {?number} countdownOption.countStop -  `0` by default, the countdown's stopping number. Pass `-Infinity` to decrease forever.
+ * @param  {?number} countdownOption.intervalMs - `1000` by default, the countdown's interval, in milliseconds.
+ * @param  {?boolean} countdownOption.isIncrement - `false` by default, true if the countdown is increment.
+ * @returns [counter, CountdownControllers]
+ */
+
+const useCountdown = (
+  countdownOption:  CountdownOption,
+): [number, CountdownControllers] => {
+  /**
+   * Use to determine the API call is a deprecated version.
+   */
+  let isDeprecated = false
+
+  let countStart
+  let intervalMs
+  let isIncrement: boolean | undefined
+  let countStop: number | undefined
+
+  if ('seconds' in countdownOption) {
+    logger.warn(
+      '[useCountdown:DEPRECATED] new interface is already available (see https://usehooks-ts.com/react-hook/use-countdown), the old version will retire on usehooks-ts@3.',
+    )
+
+    isDeprecated = true
+    countStart = countdownOption.countStart
+    intervalMs = countdownOption.intervalMs
+    isIncrement = countdownOption.isIncrement
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-extra-semi
+    ;({ countStart, countStop, intervalMs, isIncrement } = countdownOption)
+  }
+
+  // default values
+  intervalMs = intervalMs ?? 1000
+  isIncrement = isIncrement ?? false
+  countStop = countStop ?? 0
+
+  const { count, decrement, increment, reset: resetCounter } = useCounter(countStart)
+
+  /**
+   * Note: used to control the useInterval
+   * running: If true, the interval is running
+   * start: Should set running true to trigger interval
+   * stop: Should set running false to remove interval
+   */
+  const { setFalse: stopCountdown, setTrue: startCountdown, value: isCountdownRunning } = useBoolean(false)
+
+  /**
+   * Will set running false and reset the seconds to initial value
+   */
+  const resetCountdown = () => {
+    stopCountdown()
+    resetCounter()
+  }
+
+  const countdownCallback = useCallback(() => {
+    if (count === countStop) {
+      stopCountdown()
+
+      return
+    }
+
+    if (isIncrement) {
+      increment()
+    } else {
+      decrement()
+    }
+  }, [
+    count, countStop, decrement, increment, isIncrement, stopCountdown,
+  ])
+
+  useInterval(countdownCallback, isCountdownRunning ? intervalMs : null)
+
+  return [
+    count,
+    {
+      startCountdown,
+      stopCountdown,
+      resetCountdown,
+    } as CountdownControllers,
+  ]
+}
+
+export default useCountdown

package/template/src/hooks/useCounter.ts

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction, useState } from 'react'
+
+type UseCounterOutput = {
+  count: number
+  increment: () => void
+  decrement: () => void
+  reset: () => void
+  setCount: Dispatch<SetStateAction<number>>
+}
+
+const useCounter = (initialValue?: number): UseCounterOutput => {
+  const [count, setCount] = useState(initialValue || 0)
+
+  const increment = () => setCount(x => x + 1)
+  const decrement = () => setCount(x => x - 1)
+  const reset = () => setCount(initialValue || 0)
+
+  return {
+    count,
+    increment,
+    decrement,
+    reset,
+    setCount,
+  }
+}
+
+export default useCounter

package/template/src/hooks/useDebounce.ts

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react'
+
+const useDebounce = <T>(value: T, delay: number): T => {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value)
+      }, delay)
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  )
+
+  return debouncedValue
+}
+export default useDebounce

package/template/src/hooks/useDebouncedValidate.ts

@@ -0,0 +1,32 @@
+import { FormikValues } from 'formik'
+import { FormikConfig } from 'formik/dist/types'
+import { debounce } from 'lodash'
+import { useCallback, useEffect, useRef } from 'react'
+
+const useDebouncedValidate = <T extends FormikValues>({ debounceTime = 200, validate, values }: {
+  values: T
+  validate: FormikConfig<T>['validate']
+  debounceTime?: number
+}) => {
+  const debouncedFunction = useRef(
+    debounce((validateFunc: FormikConfig<T>['validate'], data: T) => {
+      return validateFunc ? validateFunc(data) : () => {}
+    }, debounceTime),
+  )
+
+  const debounceValidate = useCallback((data: T) => {
+    return debouncedFunction.current(validate, data)
+  }, [])
+
+  useEffect(() => {
+    debounceValidate(values)
+  }, [values])
+
+  useEffect(() => {
+    return () => {
+      debouncedFunction.current.cancel()
+    }
+  }, [])
+}
+
+export default useDebouncedValidate

package/template/src/hooks/useDebugInformation.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react'
+
+import logger from '@/infrastructures/common/logger'
+
+import useRenderCount from './useRenderCount'
+
+const useDebugInformation = (componentName: string, props: Record<string, unknown>) => {
+  const count = useRenderCount()
+  const changedProps = useRef({})
+  const previousProps = useRef(props)
+  const lastRenderTimestamp = useRef(Date.now())
+
+  const propKeys = Object.keys({ ...props, ...previousProps })
+  changedProps.current = propKeys.reduce((obj, key) => {
+    if (props[key] === previousProps.current[key]) return obj
+
+    return {
+      ...obj,
+      [key]: { previous: previousProps.current[key], current: props[key] },
+    }
+  }, {})
+  const info = {
+    count,
+    changedProps: changedProps.current,
+    timeSinceLastRender: Date.now() - lastRenderTimestamp.current,
+    lastRenderTimestamp: lastRenderTimestamp.current,
+  }
+
+  useEffect(() => {
+    previousProps.current = props
+    lastRenderTimestamp.current = Date.now()
+    logger.log('[debug-info] - ' + componentName, info)
+  })
+
+  return info
+}
+
+export default useDebugInformation

package/template/src/hooks/useDeviceToken.ts

@@ -0,0 +1,20 @@
+import { MutableRefObject, useCallback, useState } from 'react'
+
+import { StorageKey } from '@/configs/constants/type'
+import useEncryptedStorage from '@/hooks/useEncryptedStorage'
+
+const useDeviceToken = ():[string, (value: string) => void, boolean, MutableRefObject<string>] => {
+  const [
+    deviceToken,
+    setDeviceToken,
+    retrievedDeviceTokenFromStorage,
+    tokenRef,
+  ] = useEncryptedStorage(StorageKey.deviceToken, '')
+  const setNewDeviceToken = useCallback((newDeviceToken: string) => {
+    void setDeviceToken(newDeviceToken)
+  }, [setDeviceToken])
+
+  return [deviceToken, setNewDeviceToken, retrievedDeviceTokenFromStorage, tokenRef]
+}
+
+export default useDeviceToken