@ccrf01/react-native-template 0.0.16

package/template/src/redux/reducers/index.ts

@@ -0,0 +1,21 @@
+import { combineReducers, Middleware } from '@reduxjs/toolkit'
+
+import app from './appSlice'
+import nonPersist from './nonPersistSlice'
+import setting from './settingSlice'
+import theme from './themeSlice'
+
+export default combineReducers({
+  nonPersist,
+  setting,
+  theme,
+  app,
+})
+
+export const blacklist = [
+  'appInit',
+  'error',
+  'nonPersist',
+]
+
+export const middlewares: Middleware[] = []

package/template/src/redux/reducers/nonPersistSlice.ts

@@ -0,0 +1,51 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export type NonPersistState = {
+  initiated: boolean
+  loading: boolean
+  loadingCount: number
+}
+
+const initialState = {
+  initiated: false,
+  loading: false,
+  loadingCount: 0,
+} as NonPersistState
+
+export const nonPersistSlice = createSlice({
+  name: 'nonPersist',
+  initialState,
+  reducers: {
+    showLoading: (state) => {
+      return {
+        ...state,
+        loadingCount: state.loadingCount + 1,
+        loading: true,
+      }
+    },
+    hideLoading: (state) => {
+      const newLoadingCount = state.loadingCount - 1 > -1 ? state.loadingCount - 1 : 0
+
+      return {
+        ...state,
+        loadingCount: newLoadingCount,
+        loading: newLoadingCount > 0,
+      }
+    },
+    hideAllLoading: (state) => {
+      return {
+        ...state,
+        loadingCount: 0,
+        loading: false,
+      }
+    },
+    setInitiated: (state, action: PayloadAction<boolean>) => {
+      state.initiated = action.payload
+    },
+  },
+})
+
+export const {
+  hideAllLoading, hideLoading, setInitiated, showLoading,
+} = nonPersistSlice.actions
+export default nonPersistSlice.reducer

package/template/src/redux/reducers/settingSlice.ts

@@ -0,0 +1,48 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+// import { ThemeType } from '@/constants/enum/ThemeType.enum'
+import { Locale, ThemeType } from '@/configs/constants/type'
+
+export type SettingState = {
+  locale: Locale|undefined
+  isNotificationEnabled: boolean
+  askedLocationPermission: boolean
+  askedLocationPermissionAfterBlocked: boolean
+}
+
+const initialState = {
+  locale: undefined,
+  isNotificationEnabled: false,
+  askedLocationPermission: false,
+  askedLocationPermissionAfterBlocked: false,
+} as SettingState
+
+export const settingSlice = createSlice({
+  name: 'setting',
+  initialState,
+  reducers: {
+    setLocale: (state, action: PayloadAction<Locale>) => {
+      const locale: Locale = action.payload
+
+      return {
+        ...state,
+        locale: action.payload,
+      }
+    },
+    setAskedLocationPermission: (state, action: PayloadAction<boolean>) => {
+      return {
+        ...state,
+        askedLocationPermission: action.payload,
+      }
+    },
+    setAskedLocationPermissionAfterBlocked: (state, action: PayloadAction<boolean>) => {
+      return {
+        ...state,
+        askedLocationPermissionAfterBlocked: action.payload,
+      }
+    },
+  },
+})
+
+export const { setAskedLocationPermission, setAskedLocationPermissionAfterBlocked, setLocale } = settingSlice.actions
+export default settingSlice.reducer

package/template/src/redux/reducers/themeSlice.ts

@@ -0,0 +1,55 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { FontScale } from '@/theme/types'
+
+type FontScaleType = keyof typeof FontScale
+export type ThemeState = {
+  theme: 'default' | null | undefined
+  darkMode: boolean | null | undefined
+  fontScale: FontScaleType | null | undefined
+}
+
+type ThemePayload = {
+  payload: {
+    theme?: 'default' | null | undefined
+    darkMode?: boolean | null | undefined
+    fontScale?: FontScaleType | null | undefined
+  }
+}
+
+const slice = createSlice({
+  name: 'theme',
+  initialState: {
+    theme: null,
+    darkMode: null,
+    fontScale: FontScale.MEDIUM,
+    darkModePreference: 'light',
+  } as ThemeState,
+  reducers: {
+    changeTheme: (state, { payload: { darkMode, fontScale, theme } }: ThemePayload) => {
+      if (typeof theme !== 'undefined') {
+        state.theme = theme
+      }
+      if (typeof darkMode !== 'undefined') {
+        state.darkMode = darkMode
+      }
+      if (typeof fontScale !== 'undefined') {
+        state.fontScale = fontScale
+      }
+    },
+    setDefaultTheme: (
+      state,
+      { payload: { darkMode, fontScale, theme } }: ThemePayload,
+    ) => {
+      if (!state.theme) {
+        state.theme = theme
+        state.darkMode = darkMode
+        state.fontScale = fontScale
+      }
+    },
+  },
+})
+
+export const { changeTheme, setDefaultTheme } = slice.actions
+
+export default slice.reducer

package/template/src/redux/saga/index.ts

@@ -0,0 +1,5 @@
+import { all } from 'redux-saga/effects'
+
+export default function* rootSaga() {
+  yield all([]) // add watchers here
+}

package/template/src/redux/saga/settingSaga.ts

@@ -0,0 +1,21 @@
+import {
+  call,
+  put,
+  select,
+  StrictEffect,
+  take,
+  takeLatest,
+} from 'redux-saga/effects'
+import { ActionType } from 'typesafe-actions'
+
+import { Locale } from '@/configs/constants/type'
+
+import { setLocale } from '../reducers/settingSlice'
+
+export function* handleLocaleChange(action: ActionType<typeof setLocale>): Generator<StrictEffect, void, never> {
+  const locale = action.payload
+}
+
+export function* watchLocaleChange() {
+  yield takeLatest(setLocale.type, handleLocaleChange)
+}

package/template/src/redux/selectors/app.ts

@@ -0,0 +1,9 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { AppState } from '@/redux/reducers/appSlice'
+
+import { RootState } from '../store'
+
+export const selectState = (state: RootState): AppState => state.app
+
+export const selectSelectedMarketId = createSelector(selectState, (state) => state.selectedMarketId)

package/template/src/redux/selectors/nonPersist.ts

@@ -0,0 +1,23 @@
+import { createSelector, Selector } from 'reselect'
+
+import { NonPersistState } from '@/redux/reducers/nonPersistSlice'
+
+import { RootState } from '../store'
+
+export const selectState = (state: RootState): NonPersistState => state.nonPersist
+
+export const selectLoading = createSelector<[Selector<RootState, NonPersistState>], boolean>(
+  selectState,
+  (state: NonPersistState): boolean => {
+    const { loadingCount } = state
+
+    return loadingCount > 0
+  }
+)
+
+export const selectInitiated = createSelector<[Selector<RootState, NonPersistState>], boolean>(
+  selectState,
+  (state: NonPersistState): boolean => {
+    return state.initiated
+  }
+)

package/template/src/redux/selectors/setting.ts

@@ -0,0 +1,29 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { SettingState } from '@/redux/reducers/settingSlice'
+
+import { RootState } from '../store'
+
+export const selectState = (state: RootState): SettingState => state.setting
+
+export const selectLocale = createSelector(
+  selectState,
+  (state: SettingState) => state.locale
+)
+
+export const selectApiLocale = createSelector(
+  selectState,
+  (state: SettingState) => {
+    return state.locale?.replace('_', '-')
+  }
+)
+
+export const selectAskedLocationPermission = createSelector(
+  selectState,
+  (state: SettingState) => state.askedLocationPermission
+)
+
+export const selectAskedLocationPermissionAfterBlocked = createSelector(
+  selectState,
+  (state: SettingState) => state.askedLocationPermissionAfterBlocked
+)

package/template/src/redux/selectors/theme.ts

@@ -0,0 +1,13 @@
+import { createSelector, Selector } from 'reselect'
+
+import { SettingState } from '@/redux/reducers/settingSlice'
+import { ThemeState } from '@/redux/reducers/themeSlice'
+
+import { RootState } from '../store'
+
+export const selectState = (state: RootState): ThemeState => state.theme
+
+export const selectFontScale = createSelector(
+  selectState,
+  (state: ThemeState) => state.fontScale
+)

package/template/src/redux/store/index.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import 'regenerator-runtime/runtime'
+
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { combineReducers, configureStore, Middleware, StoreEnhancer } from '@reduxjs/toolkit'
+import { Platform } from 'react-native'
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+// import createDebugger from 'redux-flipper'
+import {
+  createMigrate,
+  FLUSH,
+  MigrationManifest,
+  PAUSE,
+  PERSIST,
+  PersistedState,
+  persistReducer,
+  persistStore,
+  PURGE,
+  REGISTER,
+  REHYDRATE,
+} from 'redux-persist'
+
+import rootReducer, { blacklist, middlewares } from '@/redux/reducers'
+
+import reactotron from '../../../ReactotronConfig'
+
+const MIGRATION_DEBUG = true
+const migrations: MigrationManifest = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  0: (previousVersionState: PersistedState) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return previousVersionState
+  },
+}
+const persistConfig = {
+  key: 'root',
+  version: 0,
+  storage: AsyncStorage,
+  blacklist: [...blacklist],
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  // transforms: [immutableTransform()],
+  migrate: createMigrate(migrations, { debug: MIGRATION_DEBUG }),
+}
+const persistedReducer = persistReducer(persistConfig, rootReducer)
+
+const store = configureStore({
+  devTools: true,
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) => {
+    const debugMiddlewares: Middleware[] = []
+    if (__DEV__ && !process.env.JEST_WORKER_ID) {
+      // debugMiddlewares.push(createDebugger() as Middleware)
+    }
+
+    return getDefaultMiddleware({
+      thunk: true,
+      serializableCheck: {
+        ignoredActions: [
+          FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER,
+        ],
+      },
+    })
+      .concat(middlewares)
+      .concat(debugMiddlewares)
+  },
+  enhancers: getDefaultEnhancers => __DEV__ ? getDefaultEnhancers().concat(reactotron.createEnhancer()) : getDefaultEnhancers(),
+})
+
+const persistor = persistStore(store)
+
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+
+export { persistor, store }
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch

package/template/src/redux/store/types.d.ts

@@ -0,0 +1,5 @@
+declare module 'MyStoreTypes' {
+  export type RootAction = ActionType<typeof import('../actions').default>;
+  export type RootState = StateType<typeof import('../reducers').default>;
+  export type Store = StateType<typeof import('./index').default>;
+}

package/template/src/screens/Home/index.tsx

@@ -0,0 +1,146 @@
+import { REACT_APP_DEBUG } from '@env'
+import React from 'react'
+import { Alert, ScrollView, View } from 'react-native'
+import { List, TextInput } from 'react-native-paper'
+
+import {
+  Body,
+  Button,
+  Container,
+  Content,
+  IconX,
+  MaterialTextInput,
+} from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import logger from '@/infrastructures/common/logger'
+import { EncryptHelper } from '@/utils/encrypt-helper'
+
+const HomeScreen = () => {
+  const { Layout } = useTheme()
+
+  const test = async () => {
+    logger.log('test start')
+    const result = await EncryptHelper.encryptData('test')
+    logger.log('test end result', result)
+  }
+
+  void test()
+
+  const [expanded, setExpanded] = React.useState(true)
+
+  const handlePress = () => setExpanded(!expanded)
+
+  return (
+    <Container insetTop>
+      <ScrollView
+        style={[Layout.fullWidth]}
+      >
+        <Body>
+          <Button type="text" icon={<IconX origin={IconX.IONICONS} name="home" />} text="Login" />
+          <Content tPadding={'tiny'}>
+            <IconX origin={IconX.ANT_DESIGN} name="home" />
+          </Content>
+          <Content tPadding={'small'}>
+            <View
+              style={{
+                width: '100%',
+                backgroundColor: 'yellow',
+              }}
+            >
+              <MaterialTextInput
+                mode="outlined"
+                label="Label"
+                style={{
+                  backgroundColor: 'transparent',
+                }}
+              />
+            </View>
+          </Content>
+          <Content tPadding={'tiny'}>
+            <View
+              style={{
+                width: '100%',
+              }}
+            >
+              <MaterialTextInput
+                style={{
+                  // backgroundColor: 'green',
+                }}
+                secureTextEntry
+                showEye
+                textContentType="password"
+              />
+            </View>
+          </Content>
+          <Content tPadding={'tiny'}>
+            <TextInput />
+          </Content>
+          <Content tPadding={'tiny'}>
+            <Button
+              type="icon"
+              icon={<IconX origin={IconX.IONICONS} name="send" />}
+            />
+          </Content>
+          <List.Section title="Accordions">
+            <List.Accordion
+              title="Uncontrolled Accordion"
+              left={props => <List.Icon {...props} icon="folder" />}
+            >
+              <List.Item title="First item" />
+              <List.Item title="Second item" />
+            </List.Accordion>
+            <List.Accordion
+              title="Uncontrolled Accordion"
+              left={props => <List.Icon {...props} icon="folder" />}
+            >
+              <List.Item title="First item" />
+              <List.Item title="Second item" />
+            </List.Accordion>
+            <List.Accordion
+              title="Uncontrolled Accordion"
+              left={props => <List.Icon {...props} icon="folder" />}
+            >
+              <List.Item title="First item" />
+              <List.Item title="Second item" />
+            </List.Accordion>
+
+            <List.Accordion
+              title="Controlled Accordion"
+              left={props => <List.Icon {...props} icon="folder" />}
+              expanded={expanded}
+              onPress={handlePress}
+            >
+              <List.Item title="First item" />
+              <List.Item title="Second item" />
+            </List.Accordion>
+          </List.Section>
+          <List.Section title="Accordions">
+            <List.Accordion
+              title="Uncontrolled Accordion"
+              left={props => <List.Icon {...props} icon="folder" />}
+            >
+              <List.Item title="First item" />
+              <List.Item title="Second item" />
+            </List.Accordion>
+            <List.Accordion
+              title="Uncontrolled Accordion"
+              left={props => <List.Icon {...props} icon="folder" />}
+            >
+              <List.Item title="First item" />
+              <List.Item title="Second item" />
+            </List.Accordion>
+            <List.Accordion
+              title="Uncontrolled Accordion"
+              left={props => <List.Icon {...props} icon="folder" />}
+            >
+              <List.Item title="First item" />
+              <List.Item title="Second item" />
+            </List.Accordion>
+          </List.Section>
+        </Body>
+      </ScrollView>
+    </Container>
+  )
+}
+
+export default HomeScreen

package/template/src/screens/Settings/components/Item.tsx

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren, useMemo } from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Divider, Text } from 'react-native-paper'
+
+import { Content, PressableOpacity } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import { Theme } from '@/theme/types'
+
+export interface IItemProps extends PropsWithChildren {
+  onPress?: () => void|undefined
+}
+const Item: React.FC<IItemProps> = ({ children, onPress }) => {
+  const theme = useTheme()
+  const { Colors, Fonts, Gutters, Layout } = theme
+  const styles = useMemo(() => {
+    return makeStyles(theme)
+  }, [theme])
+
+  return (
+    <View>
+      <PressableOpacity
+        activeOpacity={onPress !== undefined ? .6 : 1}
+        onPress={onPress}
+      >
+        <Content
+          style={[styles.Item]}
+        >
+          {children}
+        </Content>
+      </PressableOpacity>
+      <Divider/>
+    </View>
+  )
+}
+
+const makeStyles = (theme: Theme) => StyleSheet.create({
+  Item: {
+    minHeight: 50,
+    justifyContent: 'center',
+    // borderBottomWidth: 1,
+    // borderBottomColor: theme.Colors.border,
+  },
+})
+
+export default Item

package/template/src/screens/Settings/index.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { ScrollView, View } from 'react-native'
+import DeviceInfo from 'react-native-device-info'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { Body, ButtonGroup, Container, Text } from '@/components/basic'
+import { Locale } from '@/configs/constants/type'
+import useTheme from '@/hooks/useTheme.ts'
+import { setLocale } from '@/redux/reducers/settingSlice.ts'
+import { selectLocale } from '@/redux/selectors/setting.ts'
+import Item from '@/screens/Settings/components/Item.tsx'
+import Dialogs from '@/services/Dialogs'
+import { normalize } from '@/utils'
+
+const SettingsScreen = () => {
+  const buildNumber = DeviceInfo.getBuildNumber()
+  const version = DeviceInfo.getVersion()
+
+  const dispatch = useDispatch()
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const { Colors, Fonts, Gutters, Layout } = theme
+
+  const lang = useSelector(selectLocale)
+
+  const onChangeLocale = (value: Locale) => {
+    // dispatch(setLocale(value))
+    Dialogs.confirm({
+      content: 'Are you sure you want to change language?',
+      onConfirm: () => {
+        dispatch(setLocale(value))
+      },
+    })
+  }
+
+  return (
+    <Container insetTop>
+      <Body>
+        <ScrollView overScrollMode={'never'}>
+          <View>
+            <Item>
+              <View style={[Layout.row, Layout.fill]} >
+                <View
+                  style={[Layout.justifyContentCenter]}
+                >
+                  <Text variant={'settingText'}>{t('general:version')}</Text>
+                </View>
+                <View
+                  style={[Layout.fill, Layout.justifyContentCenter, Layout.alignItemsEnd]}
+                >
+                  <Text variant={'settingText'}>{t('general:version_stringb', { version_name: version ?? '', build: buildNumber ?? '' })}</Text>
+                </View>
+              </View>
+            </Item>
+            <Item>
+              <View
+                style={[Layout.row, Layout.fill]}
+              >
+                <View
+                  style={[Layout.justifyContentCenter]}
+                >
+                  <Text variant={'settingText'}>{t('setting:language')}</Text>
+                </View>
+                <View
+                  style={[Layout.fill, Layout.justifyContentCenter, Layout.alignItemsEnd]}
+                >
+                  <ButtonGroup
+                    value={lang}
+                    options={[
+                      {
+                        label: '繁中',
+                        value: Locale.zhTW,
+                      },
+                      {
+                        label: 'EN',
+                        value: Locale.enUS,
+                      },
+                    ]}
+                    onSelect={(value) => {
+                      onChangeLocale(value)
+                    }}
+                    style={{ maxWidth: 140 }}
+                    backgroundColor={'white'}
+                    radius={normalize(20)}
+                  />
+                </View>
+              </View>
+            </Item>
+          </View>
+        </ScrollView>
+      </Body>
+    </Container>
+  )
+}
+
+export default SettingsScreen