From 91226e9bb43abde7aebb4c5bc6dcd23867f65371 Mon Sep 17 00:00:00 2001 From: Mason Le Date: Mon, 11 Jul 2022 10:20:15 +0700 Subject: [PATCH] change slice --- template/src/app/common/method/index.ts | 2 +- template/src/app/common/redux/listener.ts | 16 ++++----- template/src/app/common/yup-validate/login.ts | 2 +- template/src/app/config/type.ts | 2 +- .../login/components/form-login.tsx | 2 +- .../login/components/input.tsx | 2 +- .../un-authentication/login/index.tsx | 4 +-- .../features/un-authentication/login/type.ts | 2 +- .../src/app/library/networking/service.ts | 2 +- .../app/model/{login.ts => authentication.ts} | 3 +- .../src/app/navigation/app-navigation.tsx | 2 +- template/src/app/redux/action-slice/app.ts | 18 +++++----- .../app/redux/action-slice/authentication.ts | 29 ++++++++++++++++ template/src/app/redux/action-slice/index.ts | 2 +- template/src/app/redux/action-slice/login.ts | 34 ------------------- .../app/redux/action-type/authentication.ts | 3 ++ template/src/app/redux/action-type/login.ts | 3 -- template/src/app/redux/listener/app.ts | 8 ++--- .../listener/{login.ts => authentication.ts} | 4 +-- template/src/app/redux/listener/index.ts | 2 +- 20 files changed, 68 insertions(+), 74 deletions(-) rename template/src/app/model/{login.ts => authentication.ts} (66%) create mode 100644 template/src/app/redux/action-slice/authentication.ts delete mode 100644 template/src/app/redux/action-slice/login.ts create mode 100644 template/src/app/redux/action-type/authentication.ts delete mode 100644 template/src/app/redux/action-type/login.ts rename template/src/app/redux/listener/{login.ts => authentication.ts} (82%) diff --git a/template/src/app/common/method/index.ts b/template/src/app/common/method/index.ts index 713c07d7..0daaa8e6 100644 --- a/template/src/app/common/method/index.ts +++ b/template/src/app/common/method/index.ts @@ -80,7 +80,7 @@ export const execFunc = any>( export const isIos = Platform.OS === 'ios'; export const logout = () => { - dispatch(appActions.onLogout()); + dispatch(appActions.logout()); remove(STORAGE_KEY_TOKEN); }; diff --git a/template/src/app/common/redux/listener.ts b/template/src/app/common/redux/listener.ts index 0ed86f0b..d2541d9d 100644 --- a/template/src/app/common/redux/listener.ts +++ b/template/src/app/common/redux/listener.ts @@ -15,11 +15,11 @@ export const takeLatestListeners = listenerApi.cancelActiveListeners(); await listenerApi.delay(15); if (withLoading) { - listenerApi.dispatch(appActions.onStartProcess()); + listenerApi.dispatch(appActions.startProcess()); } await startListeningOption.effect(action, listenerApi); if (withLoading) { - listenerApi.dispatch(appActions.onEndProcess()); + listenerApi.dispatch(appActions.endProcess()); } }, }); @@ -32,11 +32,11 @@ export const takeLeadingListeners = effect: async (action, listenerApi) => { listenerApi.unsubscribe(); if (withLoading) { - listenerApi.dispatch(appActions.onStartProcess()); + listenerApi.dispatch(appActions.startProcess()); } await startListeningOption.effect(action, listenerApi); if (withLoading) { - listenerApi.dispatch(appActions.onEndProcess()); + listenerApi.dispatch(appActions.endProcess()); } listenerApi.subscribe(); }, @@ -52,11 +52,11 @@ export const debounceListeners = listenerApi.cancelActiveListeners(); await listenerApi.delay(msDuration); if (withLoading) { - listenerApi.dispatch(appActions.onStartProcess()); + listenerApi.dispatch(appActions.startProcess()); } await startListeningOption.effect(action, listenerApi); if (withLoading) { - listenerApi.dispatch(appActions.onEndProcess()); + listenerApi.dispatch(appActions.endProcess()); } }, }); @@ -70,11 +70,11 @@ export const throttleListeners = effect: async (action, listenerApi) => { listenerApi.unsubscribe(); if (withLoading) { - listenerApi.dispatch(appActions.onStartProcess()); + listenerApi.dispatch(appActions.startProcess()); } await startListeningOption.effect(action, listenerApi); if (withLoading) { - listenerApi.dispatch(appActions.onEndProcess()); + listenerApi.dispatch(appActions.endProcess()); } await listenerApi.delay(msDuration); listenerApi.subscribe(); diff --git a/template/src/app/common/yup-validate/login.ts b/template/src/app/common/yup-validate/login.ts index f0e43126..760dcf4c 100644 --- a/template/src/app/common/yup-validate/login.ts +++ b/template/src/app/common/yup-validate/login.ts @@ -1,4 +1,4 @@ -import { FormLoginType } from '@model/login'; +import { FormLoginType } from '@model/authentication'; import * as yup from 'yup'; export const loginValidation: yup.SchemaOf = yup.object().shape({ diff --git a/template/src/app/config/type.ts b/template/src/app/config/type.ts index f6478217..5ff93844 100644 --- a/template/src/app/config/type.ts +++ b/template/src/app/config/type.ts @@ -21,7 +21,7 @@ export interface ParamsNetwork { export enum SLICE_NAME { APP = 'APP_', - LOGIN = 'LOGIN_', + AUTHENTICATION = 'AUTHENTICATION_', } export type ValidateMessageObject = { diff --git a/template/src/app/features/un-authentication/login/components/form-login.tsx b/template/src/app/features/un-authentication/login/components/form-login.tsx index 9cdd43fa..fb13c911 100644 --- a/template/src/app/features/un-authentication/login/components/form-login.tsx +++ b/template/src/app/features/un-authentication/login/components/form-login.tsx @@ -4,7 +4,7 @@ import { Button } from 'react-native'; import { FormProvider, useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; -import { FormLoginType } from '@model/login'; +import { FormLoginType } from '@model/authentication'; import { loginValidation } from '@validate/login'; import { Input } from './input'; diff --git a/template/src/app/features/un-authentication/login/components/input.tsx b/template/src/app/features/un-authentication/login/components/input.tsx index 181994d6..4a0f2fe7 100644 --- a/template/src/app/features/un-authentication/login/components/input.tsx +++ b/template/src/app/features/un-authentication/login/components/input.tsx @@ -6,7 +6,7 @@ import { useController, useFormContext } from 'react-hook-form'; import { CustomOmit } from '@common'; import { HelperText, TextField } from '@components'; import { InputFlatProps } from '@components/text-field/components/flat/type'; -import { FormLoginType } from '@model/login'; +import { FormLoginType } from '@model/authentication'; interface InputProps> extends CustomOmit, diff --git a/template/src/app/features/un-authentication/login/index.tsx b/template/src/app/features/un-authentication/login/index.tsx index 3fb3fcc5..0992fe6d 100644 --- a/template/src/app/features/un-authentication/login/index.tsx +++ b/template/src/app/features/un-authentication/login/index.tsx @@ -27,7 +27,7 @@ import { Wallpaper, } from '@components'; import { useAnimatedState } from '@hooks'; -import { FormLoginType } from '@model/login'; +import { FormLoginType } from '@model/authentication'; import { appActions } from '@redux-slice'; import { FormLogin } from './components/form-login'; @@ -45,7 +45,7 @@ const LoginComponent = () => { // function const onSubmit = (data: FormLoginType) => { - dispatch(appActions.onSetAppTheme('dark')); + dispatch(appActions.setAppTheme('dark')); Alert.alert(JSON.stringify(data)); }; diff --git a/template/src/app/features/un-authentication/login/type.ts b/template/src/app/features/un-authentication/login/type.ts index e8782d1b..5a8a8cd3 100644 --- a/template/src/app/features/un-authentication/login/type.ts +++ b/template/src/app/features/un-authentication/login/type.ts @@ -1,4 +1,4 @@ -import { FormLoginType } from '@model/login'; +import { FormLoginType } from '@model/authentication'; export interface FormLoginProps { onSubmit: (data: FormLoginType) => void; diff --git a/template/src/app/library/networking/service.ts b/template/src/app/library/networking/service.ts index d6a92e26..c1fffeff 100644 --- a/template/src/app/library/networking/service.ts +++ b/template/src/app/library/networking/service.ts @@ -39,7 +39,7 @@ AxiosInstance.interceptors.response.use( if (newToken === null) { return Promise.reject(error); } - dispatch(appActions.onSetToken(newToken)); + dispatch(appActions.setToken(newToken)); originalRequest.headers[tokenKeyHeader] = newToken; return AxiosInstance(originalRequest); } diff --git a/template/src/app/model/login.ts b/template/src/app/model/authentication.ts similarity index 66% rename from template/src/app/model/login.ts rename to template/src/app/model/authentication.ts index 66a6cfc9..d4487df4 100644 --- a/template/src/app/model/login.ts +++ b/template/src/app/model/authentication.ts @@ -3,7 +3,6 @@ export type FormLoginType = { password: string; }; -export interface LoginState { +export interface AuthenticationState { loading: boolean; - count: number; } diff --git a/template/src/app/navigation/app-navigation.tsx b/template/src/app/navigation/app-navigation.tsx index 808c4497..c1bbfabd 100644 --- a/template/src/app/navigation/app-navigation.tsx +++ b/template/src/app/navigation/app-navigation.tsx @@ -24,7 +24,7 @@ export const AppContainer = () => { // effect useEffect(() => { - dispatch(appActions.onLoadApp()); + dispatch(appActions.startLoadApp()); }, []); useEffect(() => { diff --git a/template/src/app/redux/action-slice/app.ts b/template/src/app/redux/action-slice/app.ts index dabcbbf8..be415575 100644 --- a/template/src/app/redux/action-slice/app.ts +++ b/template/src/app/redux/action-slice/app.ts @@ -18,31 +18,31 @@ const appSlice = createSlice({ name: SLICE_NAME.APP, initialState: initialAppState, reducers: { - onSetInternet: (state, { payload }: PayloadAction) => { + setInternetState: (state, { payload }: PayloadAction) => { state.internetState = payload; }, - onSetToken: (state, { payload }: PayloadAction) => { + setToken: (state, { payload }: PayloadAction) => { state.token = payload; }, - onSetAppProfile: (state, { payload }: PayloadAction) => { + setAppProfile: (state, { payload }: PayloadAction) => { state.profile = payload; }, - onSetAppTheme: (state, { payload }: PayloadAction) => { + setAppTheme: (state, { payload }: PayloadAction) => { state.theme = payload; }, - onLoadApp: state => { + startLoadApp: state => { state.loadingApp = true; }, - onLoadAppEnd: state => { + endLoadApp: state => { state.loadingApp = false; }, - onStartProcess: state => { + startProcess: state => { state.showDialog = true; }, - onEndProcess: state => { + endProcess: state => { state.showDialog = false; }, - onLogout: state => { + logout: state => { state.token = undefined; state.profile = {}; }, diff --git a/template/src/app/redux/action-slice/authentication.ts b/template/src/app/redux/action-slice/authentication.ts new file mode 100644 index 00000000..a1985fb3 --- /dev/null +++ b/template/src/app/redux/action-slice/authentication.ts @@ -0,0 +1,29 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { SLICE_NAME } from '@config/type'; +import { AuthenticationState } from '@model/authentication'; +import * as Action from '@redux-action-type/authentication'; +import { createAction, createSlice } from '@reduxjs/toolkit'; + +const initialState: AuthenticationState = { + loading: false, +}; +const authenticationSlice = createSlice({ + name: SLICE_NAME.AUTHENTICATION, + initialState: initialState, + reducers: { + reset: () => initialState, + }, +}); + +const login = createAction( + Action.LOGIN, + (body: any, onSucceeded: () => void, onFailure: (msg: string) => void) => ({ + payload: { + body, + onSucceeded, + onFailure, + }, + }), +); +export const authenticationActions = { ...authenticationSlice.actions, login }; +export const authenticationReducer = authenticationSlice.reducer; diff --git a/template/src/app/redux/action-slice/index.ts b/template/src/app/redux/action-slice/index.ts index 1bfb81fc..4b2c0faf 100644 --- a/template/src/app/redux/action-slice/index.ts +++ b/template/src/app/redux/action-slice/index.ts @@ -1,2 +1,2 @@ export * from './app'; -export * from './login'; +export * from './authentication'; diff --git a/template/src/app/redux/action-slice/login.ts b/template/src/app/redux/action-slice/login.ts deleted file mode 100644 index 029a80f8..00000000 --- a/template/src/app/redux/action-slice/login.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { SLICE_NAME } from '@config/type'; -import { LoginState } from '@model/login'; -import * as Action from '@redux-action-type/login'; -import { createAction, createSlice } from '@reduxjs/toolkit'; - -const initialState: LoginState = { - loading: false, - count: 0, -}; -const loginSlice = createSlice({ - name: SLICE_NAME.LOGIN, - initialState: initialState, - reducers: { - reset: () => { - return { ...initialState }; - }, - onStart: () => { - console.log('onStart'); - }, - }, -}); -const onLogin = createAction( - Action.LOGIN, - (body: any, onSucceeded: () => void, onFailure: (msg: string) => void) => ({ - payload: { - body, - onSucceeded, - onFailure, - }, - }), -); -export const loginActions = { ...loginSlice.actions, onLogin }; -export const loginReducer = loginSlice.reducer; diff --git a/template/src/app/redux/action-type/authentication.ts b/template/src/app/redux/action-type/authentication.ts new file mode 100644 index 00000000..410b2f7e --- /dev/null +++ b/template/src/app/redux/action-type/authentication.ts @@ -0,0 +1,3 @@ +import { SLICE_NAME } from '@config/type'; + +export const LOGIN = SLICE_NAME.AUTHENTICATION + 'LOGIN'; diff --git a/template/src/app/redux/action-type/login.ts b/template/src/app/redux/action-type/login.ts deleted file mode 100644 index 883be807..00000000 --- a/template/src/app/redux/action-type/login.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { SLICE_NAME } from '@config/type'; - -export const LOGIN = SLICE_NAME.LOGIN + 'LOGIN'; diff --git a/template/src/app/redux/listener/app.ts b/template/src/app/redux/listener/app.ts index 25b563cb..b8793423 100644 --- a/template/src/app/redux/listener/app.ts +++ b/template/src/app/redux/listener/app.ts @@ -10,20 +10,20 @@ import { loadString } from '@utils/storage'; import { appActions } from '../action-slice/app'; takeLatestListeners()({ - actionCreator: appActions.onLoadApp, + actionCreator: appActions.startLoadApp, effect: async (_, listenerApi) => { const appTheme = loadString(STORAGE_KEY_APP_THEME); const token = loadString(STORAGE_KEY_TOKEN); if (typeof token === 'string') { - listenerApi.dispatch(appActions.onSetToken(token)); + listenerApi.dispatch(appActions.setToken(token)); } if ( typeof appTheme === 'string' && checkKeyInObject(MyAppTheme, appTheme) ) { - listenerApi.dispatch(appActions.onSetAppTheme(appTheme as ThemeType)); + listenerApi.dispatch(appActions.setAppTheme(appTheme as ThemeType)); } - listenerApi.dispatch(appActions.onLoadAppEnd()); + listenerApi.dispatch(appActions.endLoadApp()); }, }); diff --git a/template/src/app/redux/listener/login.ts b/template/src/app/redux/listener/authentication.ts similarity index 82% rename from template/src/app/redux/listener/login.ts rename to template/src/app/redux/listener/authentication.ts index 8d1c94cd..f192a5a2 100644 --- a/template/src/app/redux/listener/login.ts +++ b/template/src/app/redux/listener/authentication.ts @@ -2,10 +2,10 @@ import { handleErrorResponse } from '@common' import { takeLatestListeners } from '@listener'; import { ApiConstants, NetWorkService } from '@networking'; -import { loginActions } from '../action-slice/login'; +import { authenticationActions } from '../action-slice/authentication'; takeLatestListeners(true)({ - actionCreator: loginActions.onLogin, + actionCreator: authenticationActions.login, effect: async (action, listenerApi) => { const { body } = action.payload; console.log({ body }); diff --git a/template/src/app/redux/listener/index.ts b/template/src/app/redux/listener/index.ts index 0a594be0..2bb23584 100644 --- a/template/src/app/redux/listener/index.ts +++ b/template/src/app/redux/listener/index.ts @@ -1,4 +1,4 @@ export { listenerMiddleware } from '@listener'; -export * from './login'; +export * from './authentication'; export * from './app';