@ccrf01/react-native-template 0.0.16

package/template/src/hooks/useEncryptedStorage.ts

@@ -0,0 +1,41 @@
+import { MutableRefObject, useEffect } from 'react'
+import EncryptedStorage from 'react-native-encrypted-storage'
+import useState from 'react-usestateref'
+
+import logger from '@/infrastructures/common/logger'
+
+const useEncryptedStorage = <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 EncryptedStorage.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('useEncryptedStorage getItem error:', error)
+      }
+    }
+    void init()
+  }, [key, initialValue])
+
+  const setNewData = async (value: T) => {
+    try {
+      await EncryptedStorage.setItem(key, JSON.stringify(value))
+      setData(value)
+    } catch (error) {
+      logger.error('useAsyncStorage setItem error:', error)
+    }
+  }
+
+  return [data, setNewData, retrievedFromStorage, dataRef]
+}
+
+export default useEncryptedStorage

package/template/src/hooks/useFontFamily.ts

@@ -0,0 +1,13 @@
+import { useSelector } from 'react-redux'
+
+import { FONT_FAMILY } from '@/configs'
+import { Locale } from '@/configs/constants/type'
+import { selectLocale } from '@/redux/selectors/setting'
+
+const useFontFamily = () => {
+  const lang = useSelector(selectLocale)
+
+  return lang === Locale.zhTW ? FONT_FAMILY.CHI : FONT_FAMILY.ENG
+}
+
+export default useFontFamily

package/template/src/hooks/useHttp.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react'
+
+import AxiosClient from '@/infrastructures/NetClient/AxiosClient'
+import { INetClient } from '@/infrastructures/NetClient/interfaces/INetClient'
+
+const makeHttpClinet = (netClientType: string, endpoint: string) => {
+  const netClient = new AxiosClient(endpoint)
+
+  return (path: string) => {
+
+
+    return [{}]
+  }
+
+}
+export const useHttp = () => {
+
+}

package/template/src/hooks/useInterval.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react'
+const useInterval = (callback: () => void, delay: number | null) => {
+  const savedCallback = useRef(callback)
+
+  // Remember the latest callback if it changes.
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay)
+
+    return () => clearInterval(id)
+  }, [delay])
+}
+
+export default useInterval

package/template/src/hooks/useIsForeground.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
+
+export const useIsForeground = (): boolean => {
+  const [isForeground, setIsForeground] = useState(true)
+
+  useEffect(() => {
+    const onChange = (state: AppStateStatus): void => {
+      setIsForeground(state === 'active')
+    }
+    const listener = AppState.addEventListener('change', onChange)
+
+    return () => listener.remove()
+  }, [setIsForeground])
+
+  return isForeground
+}

package/template/src/hooks/usePrevious.ts

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from 'react'
+
+const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>()
+  useEffect(() => {
+    ref.current = value
+  })
+
+  return ref.current
+}
+
+export default usePrevious

package/template/src/hooks/useRenderCount.ts

@@ -0,0 +1,10 @@
+import { useEffect, useRef } from 'react'
+
+const useRenderCount = () => {
+  const count = useRef<number>(1)
+  useEffect(() => { count.current++ })
+
+  return count.current
+}
+
+export default useRenderCount

package/template/src/hooks/useTheme.ts

@@ -0,0 +1,17 @@
+import _ from 'lodash'
+import { useContext } from 'react'
+
+import { ThemeContext } from '@/contexts/ThemeContext'
+
+const useTheme = () => {
+  const themeContext = _.cloneDeep(useContext(ThemeContext))
+  if (!themeContext) {
+    throw new Error(
+      'No ThemeContext.Provider found when calling useTheme.'
+    )
+  }
+
+  return themeContext
+}
+
+export default useTheme

package/template/src/hooks/useTimeCountDown.ts

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useState } from 'react'
+
+import useBoolean from '@/hooks/useBoolean'
+import useInterval from '@/hooks/useInterval'
+import logger from '@/infrastructures/common/logger'
+
+type CountdownControllers = {
+  isCountdownRunning: boolean
+  startCountdown: () => void
+  stopCountdown: () => void
+  resetCountdown: () => void
+}
+type CountdownOption = {
+  /*
+    * The initial value of the countdown in seconds
+   */
+  countStart: number
+  intervalMs?: number
+  isIncrement?: boolean
+  countStop?: number
+}
+
+const useTimeCountDown = (
+  countdownOption:  CountdownOption,
+): [number, CountdownControllers] => {
+
+  const { countStart, countStop = 0, intervalMs = 1000, isIncrement = false } = countdownOption
+
+  const [count, setCount] = useState(countStart)
+  const [timestampStart, setTimestampStart] = useState(0)
+  // const [lastTimestamp, setLastTimestamp] = useState(0)
+  const { setFalse: stopCountdown, setTrue: startCountdown, value: isCountdownRunning } = useBoolean(false)
+
+  // const runStart = () => {
+  //   const startTime = Date.now()
+  //   setTimestampStart(startTime)
+  //   // setLastTimestamp(startTime)
+  // }
+
+  useEffect(() => {
+    if (isCountdownRunning) {
+      const startTime = Date.now()
+      setTimestampStart(startTime)
+    } else {
+      // TODO:
+    }
+  }, [isCountdownRunning])
+
+  const resetCounter = () => {
+    setCount(countStart)
+  }
+
+  const countdownCallback = useCallback(() => {
+    const timeDiff = Date.now() - timestampStart
+    const nextCount = Math.round(!isIncrement ? countStart - timeDiff / 1000 : count + timeDiff / 1000)
+    if (!isIncrement) {
+      if (nextCount <= countStop) {
+        setCount(countStop)
+        stopCountdown()
+
+        return
+      }
+    } else {
+      if (nextCount >= countStop) {
+        setCount(countStop)
+        stopCountdown()
+
+        return
+      }
+    }
+    setCount(nextCount)
+  }, [count, countStop, timestampStart, isIncrement, stopCountdown])
+
+  useInterval(countdownCallback, isCountdownRunning ? intervalMs : null)
+
+  const resetCountdown = () => {
+    stopCountdown()
+    resetCounter()
+  }
+
+  return [
+    count, {
+      isCountdownRunning,
+      stopCountdown,
+      startCountdown,
+      resetCountdown,
+    },
+  ]
+}
+
+export default useTimeCountDown

package/template/src/index.tsx

@@ -0,0 +1,65 @@
+import { NewAppScreen } from '@react-native/new-app-screen'
+import React, { Suspense, useEffect } from 'react'
+import { I18nextProvider } from 'react-i18next'
+import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native'
+import { MD2Colors } from 'react-native-paper'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
+
+import { persistor, store } from '@/redux/store'
+
+import AppContainer from './AppContainer'
+import i18n from './locales/i18n'
+
+function App() {
+  const isDarkMode = useColorScheme() === 'dark'
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <I18nextProvider i18n={i18n}>
+        <Suspense fallback={'is loading'}>
+          <Provider store={store}>
+            <PersistGate
+              loading={
+                <View
+                  style={{
+                    flex: 1,
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: MD2Colors.grey700,
+                  }}
+                />
+              }
+              persistor={persistor}
+            >
+              <AppContainer />
+            </PersistGate>
+          </Provider>
+        </Suspense>
+      </I18nextProvider>
+    </SafeAreaProvider>
+  )
+}
+
+function AppContent() {
+  const safeAreaInsets = useSafeAreaInsets()
+
+  return (
+    <View style={styles.container}>
+      <NewAppScreen
+        templateFileName="App.tsx"
+        safeAreaInsets={safeAreaInsets}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+})
+
+export default App

package/template/src/infrastructures/NetClient/AbstractClient.ts

@@ -0,0 +1,66 @@
+import { ApisauceInstance } from 'apisauce'
+import { AxiosInstance } from 'axios'
+
+import { IFetchNetClientInstance } from './FetchNetClient'
+export default class AbstractClient<T extends AxiosInstance|ApisauceInstance|IFetchNetClientInstance> {
+  instance: T
+  endpoint: string
+  constructor(endpoint: string) {
+    this.endpoint = endpoint
+    this.instance = this.createInstance()
+  }
+
+  createInstance():T {
+    throw new Error()
+  }
+
+  protected paramsToQueryString = (
+    params: Record<string, unknown>,
+    skipEmpty = false,
+    encodeToken = false,
+  ) => {
+    const paramKeys = Object.keys(params)
+    let query = ''
+    // const formBody:string[] = [];
+    paramKeys.sort()
+    paramKeys.forEach((key) => {
+      if (
+        params[key] !== null &&
+        ((skipEmpty && params[key] !== '') || !skipEmpty)
+      ) {
+        if (query !== '') {
+          query += '&'
+        }
+
+        if (params[key] instanceof Array) {
+          const paramsArray: any[] = params[key] as any[]
+          paramsArray.sort()
+          paramsArray.forEach((param: any) => {
+            query +=
+              '&' +
+              key +
+              '=' +
+              (encodeToken
+                ? encodeURI(encodeURIComponent(param))
+                : encodeURIComponent(param))
+            // query += '&' + key + '=' + encodeURI(encodeURIComponent(param));
+          })
+        } else {
+          const value: string = params[key] as string
+          query +=
+            key +
+            '=' +
+            (encodeToken
+              ? encodeURI(encodeURIComponent(value))
+              : encodeURIComponent(value))
+          // query += key + '=' + encodeURI(encodeURIComponent(params[key]));
+        }
+      }
+    })
+    if (query.startsWith('&')) {
+      query = query.substring(1)
+    }
+
+    return query
+  }
+}

package/template/src/infrastructures/NetClient/ApiResponse.ts

@@ -0,0 +1,16 @@
+export default class APIResponse<T = any> {
+  origResp: unknown
+  ok:boolean
+  status: number
+  headers?: Record<string, unknown>
+  data?: T
+  error?: Error
+  // problem?: string;
+  constructor(status: number, headers?: Record<string, unknown>, data?: T, error?: Error, origResp?: unknown) {
+    this.status = status
+    this.headers = headers
+    this.data = data as T
+    this.error = error
+    this.ok = status >= 200 && status <= 299
+  }
+}

package/template/src/infrastructures/NetClient/ApisauceClient.ts

@@ -0,0 +1,76 @@
+/* eslint-disable no-console */
+import { ApiResponse, ApisauceInstance, create } from 'apisauce'
+import { AxiosError, AxiosResponse } from 'axios'
+
+import logger from '../common/logger'
+import AbstractClient from './AbstractClient'
+import APIResponse from './ApiResponse'
+import { API } from './config'
+
+export default class ApiSauceClient extends AbstractClient<ApisauceInstance>{
+  constructor(endpoint: string) {
+    super(endpoint)
+  }
+
+  createInstance(): ApisauceInstance {
+    return create({
+      baseURL: this.endpoint,
+      timeout: API.Timeout,
+    })
+  }
+
+  public get<T>(path: string, params: Record<string, any>, headerParams: Record<string, string>): Promise<APIResponse<T>> {
+    return new Promise<APIResponse<T>>((resolve) => {
+      const paramString = this.paramsToQueryString(params)
+      const finalPath = path + (paramString.length > 0 ? `?${paramString}` : '')
+      logger.request('GET', headerParams, finalPath)
+      this.instance.get<T>(finalPath, { headers: headerParams }).then((response: ApiResponse<T>) => {
+        logger.resp(response)
+        logger.responseBody(response.data as Record<string, unknown>)
+        if (response.status && response.status >= 200 && response.status <= 299) {
+          const apiResponse = new APIResponse<T>(response.status, response.headers, response.data)
+          resolve(apiResponse)
+        } else {
+          const apiErrorResponse = new APIResponse<T>(response.status ? response.status : -1, response.headers, response.data)
+          resolve(apiErrorResponse)
+        }
+      })
+        .catch((error: Error) => {
+          const axiosErrorResponse = error.hasOwnProperty('response') ? (error as AxiosError<T>).response : undefined
+          if (axiosErrorResponse !== undefined) {
+            const errorResponse = new APIResponse<T>(axiosErrorResponse.status, axiosErrorResponse.headers, axiosErrorResponse.data, error)
+            resolve(errorResponse)
+          } else {
+            resolve(new APIResponse<T>(-1, undefined, undefined, error))
+          }
+        })
+    })
+  }
+
+  public postJson<T>(path: string, json: Record<string, any>, headerParams: Record<string, string>): Promise<APIResponse<T>> {
+    return new Promise<APIResponse<T>>((resolve) => {
+      const finalPath = path
+      this.instance.post<T>(finalPath, json, { headers: headerParams }).then((response: ApiResponse<T>) => {
+        logger.resp(response)
+        logger.responseBody(response.data as Record<string, unknown>)
+        if (response.status && response.status >= 200 && response.status <= 299) {
+          const apiResponse = new APIResponse<T>(response.status, response.headers, response.data)
+          resolve(apiResponse)
+        } else {
+          const apiErrorResponse = new APIResponse<T>(response.status ? response.status : -1, response.headers, response.data)
+          resolve(apiErrorResponse)
+        }
+      })
+        .catch((error: AxiosError|Error) => {
+          const axiosErrorResponse = error.hasOwnProperty('response') ? (error as AxiosError<T>).response : undefined
+          if (axiosErrorResponse !== undefined) {
+            const errorResponse = new APIResponse<T>(axiosErrorResponse.status, axiosErrorResponse.headers, axiosErrorResponse.data, error)
+            resolve(errorResponse)
+          } else {
+            resolve(new APIResponse<T>(-1, undefined, undefined, error))
+          }
+        })
+    })
+  }
+}
+

package/template/src/infrastructures/NetClient/AxiosClient.ts

@@ -0,0 +1,80 @@
+import axios, { AxiosError, AxiosInstance, AxiosResponse } from 'axios'
+
+import logger from '../common/logger'
+import AbstractClient from './AbstractClient'
+import APIResponse from './ApiResponse'
+import { API } from './config'
+import { INetClient } from './interfaces/INetClient'
+
+class AxiosClient extends AbstractClient<AxiosInstance> implements INetClient {
+  constructor(endpoint: string) {
+    super(endpoint)
+  }
+
+  createInstance(): AxiosInstance {
+    return axios.create({
+      baseURL: this.endpoint,
+      timeout: API.Timeout,
+    })
+  }
+
+  public get<T>(path: string, params: Record<string, unknown>, headerParams: Record<string, string>): Promise<APIResponse<T>> {
+    return new Promise<APIResponse<T>>((resolve) => {
+      const paramString = this.paramsToQueryString(params)
+      const finalPath = path + (paramString.length > 0 ? `?${paramString}` : '')
+      logger.request('GET', headerParams, finalPath)
+      this.instance.get<T>(finalPath, { headers: headerParams }).then((response: AxiosResponse<T>) => {
+        logger.resp(response)
+        // logger.responseBody(response.data as Record<string, unknown>)
+        if (response.status >= 200 && response.status <= 299) {
+          const apiResponse = new APIResponse<T>(response.status, response.headers as Record<string, unknown>, response.data)
+          resolve(apiResponse)
+        } else {
+          const apiErrorResponse = new APIResponse<T>(response.status, response.headers as Record<string, unknown>, response.data)
+          resolve(apiErrorResponse)
+        }
+      })
+        .catch((error: AxiosError<T>|Error) => {
+          logger.log('request error', error)
+          const axiosErrorResponse:AxiosResponse<T>|undefined = error.hasOwnProperty('response') ? (error as AxiosError<T>).response : undefined
+
+          logger.log('request axiosErrorResponse', axiosErrorResponse)
+          if (axiosErrorResponse !== undefined) {
+            const errorResponse = new APIResponse<T>(axiosErrorResponse.status, axiosErrorResponse.headers as Record<string, unknown>, axiosErrorResponse.data, error)
+            resolve(errorResponse)
+          } else {
+            resolve(new APIResponse<T>(-1, undefined, undefined, error))
+          }
+        })
+    })
+  }
+
+  public postJson<T>(path: string, json: Record<string, unknown>, headerParams: Record<string, string>): Promise<APIResponse<T>> {
+    return new Promise<APIResponse<T>>((resolve) => {
+      const finalPath = path
+      logger.request('POST', headerParams, finalPath)
+      this.instance.post<T>(finalPath, json, { headers: headerParams }).then((response: AxiosResponse<T>) => {
+        logger.resp(response)
+        // logger.responseBody(response.data as Record<string, unknown>)
+        if (response.status >= 200 && response.status <= 299) {
+          const apiResponse = new APIResponse<T>(response.status, response.headers as Record<string, unknown>, response.data)
+          resolve(apiResponse)
+        } else {
+          const apiErrorResponse = new APIResponse<T>(response.status, response.headers as Record<string, unknown>, response.data)
+          resolve(apiErrorResponse)
+        }
+      })
+        .catch((error: AxiosError<T>|Error) => {
+          const axiosErrorResponse: AxiosResponse<T>|undefined  = error.hasOwnProperty('response') ? (error as AxiosError<T>).response : undefined
+          if (axiosErrorResponse !== undefined) {
+            const errorResponse = new APIResponse<T>(axiosErrorResponse.status, axiosErrorResponse.headers as Record<string, unknown>, axiosErrorResponse.data, error)
+            resolve(errorResponse)
+          } else {
+            resolve(new APIResponse<T>(-1, undefined, undefined, error))
+          }
+        })
+    })
+  }
+}
+
+export default AxiosClient

package/template/src/infrastructures/NetClient/FetchNetClient.ts

@@ -0,0 +1,120 @@
+import logger from '../common/logger'
+import Timeout from '../common/Timeout'
+import AbstractClient from './AbstractClient'
+import APIResponse from './ApiResponse'
+import { API } from './config'
+
+export interface IFetchNetClientInstance {
+  create: () => void
+}
+
+export default class FetchNetClient extends AbstractClient<IFetchNetClientInstance> {
+  constructor(endpoint: string) {
+    super(endpoint)
+  }
+
+  private _request = async (url: string, options: RequestInit): Promise<Response> => {
+    return fetch(url, options)
+  }
+
+  private _headersToRecord = (headers: Headers) => {
+    const result:Record<string, string> = {}
+    headers.forEach((k: string, v: string) => {
+      Object.assign(result, { [k]: v })
+    })
+
+    return result
+  }
+
+  private _fetchWithTimeout = async (path: string, options: RequestInit, timeout = API.Timeout): Promise<Response> => {
+    const timeoutObj = new Timeout<Response>({ ms: timeout })
+
+    return new Promise((resolve, reject) => {
+
+      Promise
+        .race([
+          this._request(path, options),
+          timeoutObj.start(),
+        ])
+        .then((success: Response) => {
+          timeoutObj.clear()
+          // handle response
+          resolve(success)
+        }, (error: any) => {
+          timeoutObj.clear()
+          // handle error
+          reject(error)
+        })
+    })
+  }
+
+  createInstance(): IFetchNetClientInstance {
+    return {
+      create: () => {
+        // TODO:
+      },
+    }
+  }
+
+  /**
+   * REST - GET
+   *
+   * @param path  API Path
+   * @param params  Query Param
+   * @param header API Header
+   */
+  public get<T>(path: string, params: Record<string, any>, headerParams: Record<string, string>):Promise<APIResponse<T>> {
+    return new Promise<APIResponse<T>>((resolve) => {
+      let paramString = '?' + this.paramsToQueryString(params)
+      if (paramString.startsWith('&')) paramString = paramString.substring(1)
+      if (paramString !== '') paramString = '?' + paramString
+      const finalPath = path + paramString
+
+      logger.request('GET', headerParams, finalPath)
+      void this._fetchWithTimeout(finalPath, {
+        method: 'GET',
+        headers: headerParams,
+      })
+        .then(async (response) => {
+          logger.resp(response)
+          const headers = this._headersToRecord(response.headers)
+          const data: T = await response.json() as T
+
+          resolve(new APIResponse(response.status, headers, data))
+        })
+        .catch((error: Error) => {
+          resolve(new APIResponse<T>(-1, undefined, undefined, error))
+        })
+    })
+  }
+
+  /**
+   * REST - POST => [JSON Body]
+   *
+   * @param path  API Path
+   * @param params  Body in json format
+   * @param header API Header
+   */
+  public postJson<T>(path: string, json: Record<string, any>, headerParams: Record<string, string>): Promise<APIResponse<T>> {
+    return new Promise((resolve) => {
+      headerParams['Content-Type'] = 'application/json'
+      const jsonString = JSON.stringify(json)
+
+      logger.request('POST', headerParams, path, jsonString)
+      void this._fetchWithTimeout(path, {
+        method: 'POST',
+        headers: headerParams,
+        body: jsonString,
+      })
+        .then(async (response) => {
+          logger.resp(response)
+          const headers = this._headersToRecord(response.headers)
+          const data: T = await response.json() as T
+          resolve(new APIResponse<T>(response.status, headers, data))
+        })
+        .catch((error: Error) => {
+          resolve(new APIResponse<T>(-1, undefined, undefined, error))
+        })
+    })
+  }
+}

package/template/src/infrastructures/NetClient/config.ts

@@ -0,0 +1,3 @@
+export const API = {
+  Timeout: 6000,
+}