From 0fcd8cbb03a635607c0fa993ed4a4772497e387d Mon Sep 17 00:00:00 2001 From: Jerko Steiner Date: Sun, 20 Jan 2019 00:48:22 +0100 Subject: [PATCH] Move login logic into a single folder --- packages/client/src/actions/index.ts | 1 - .../src/containers/LoginFormContainer.tsx | 31 ---------------- .../UserActions.ts => login/LoginActions.ts} | 26 +++++++------- packages/client/src/login/LoginConnector.tsx | 35 +++++++++++++++++++ .../src/{components => login}/LoginForm.tsx | 3 +- packages/client/src/login/LoginReducer.ts | 26 ++++++++++++++ packages/client/src/reducers/index.ts | 7 ---- packages/client/src/reducers/user.ts | 23 ------------ packages/client/src/redux/IStateSlicer.ts | 3 ++ packages/client/src/redux/index.ts | 1 + packages/client/src/store.ts | 13 ------- 11 files changed, 78 insertions(+), 91 deletions(-) delete mode 100644 packages/client/src/containers/LoginFormContainer.tsx rename packages/client/src/{actions/UserActions.ts => login/LoginActions.ts} (52%) create mode 100644 packages/client/src/login/LoginConnector.tsx rename packages/client/src/{components => login}/LoginForm.tsx (95%) create mode 100644 packages/client/src/login/LoginReducer.ts delete mode 100644 packages/client/src/reducers/index.ts delete mode 100644 packages/client/src/reducers/user.ts create mode 100644 packages/client/src/redux/IStateSlicer.ts create mode 100644 packages/client/src/redux/index.ts delete mode 100644 packages/client/src/store.ts diff --git a/packages/client/src/actions/index.ts b/packages/client/src/actions/index.ts index a4fb173..ee8b3bf 100644 --- a/packages/client/src/actions/index.ts +++ b/packages/client/src/actions/index.ts @@ -2,4 +2,3 @@ export * from './ActionTypes' export * from './IAction' export * from './IErrorAction' export * from './UnionType' -export * from './UserActions' diff --git a/packages/client/src/containers/LoginFormContainer.tsx b/packages/client/src/containers/LoginFormContainer.tsx deleted file mode 100644 index 9c1395a..0000000 --- a/packages/client/src/containers/LoginFormContainer.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import {UserActions} from '../actions/UserActions' -import {connect} from 'react-redux' -import {bindActionCreators, Dispatch} from 'redux' -import {IState} from '../reducers' -// import {LoginForm} from '../components/LoginForm' -import React from 'react' - -export class LoginFormContainer { - constructor( - protected readonly Form: typeof React.PureComponent | typeof React.Component, - protected readonly userActions: UserActions, // TODO interface - ) {} - - connect() { - return connect(this.mapStateToProps, this.mapDispatchToProps)() - } - - mapStateToProps = (state: IState) => { - return { - csrfToken: '', // TODO this should be read from the state too - error: state.user.error, - user: state.user.user, - } - } - - mapDispatchToProps = (dispatch: Dispatch) => { - return { - logIn: bindActionCreators(this.userActions.logIn, dispatch), - } - } -} diff --git a/packages/client/src/actions/UserActions.ts b/packages/client/src/login/LoginActions.ts similarity index 52% rename from packages/client/src/actions/UserActions.ts rename to packages/client/src/login/LoginActions.ts index dfa5f4e..9a8c1c3 100644 --- a/packages/client/src/actions/UserActions.ts +++ b/packages/client/src/login/LoginActions.ts @@ -1,10 +1,8 @@ -import {ActionTypes} from './ActionTypes' +import {IAction, IErrorAction, ActionTypes} from '../actions' import {IAPIDef, ICredentials, IUser} from '@rondo/common' -import {IAction} from './IAction' -import {IErrorAction} from './IErrorAction' import {IHTTPClient} from '../http/IHTTPClient' -export enum UserActionKeys { +export enum LoginActionKeys { USER_LOG_IN = 'USER_LOG_IN', USER_LOG_IN_PENDING = 'USER_LOG_IN_PENDING', USER_LOG_IN_REJECTED = 'USER_LOG_IN_REJECTED', @@ -14,32 +12,32 @@ export enum UserActionKeys { USER_LOG_OUT_REJECTED = 'USER_LOG_OUT_REJECTED', } -export class UserActions { +export class LoginActions { constructor(protected readonly http: IHTTPClient) {} - logIn = - (credentials: ICredentials): IAction => { + logIn = (credentials: ICredentials) + : IAction => { return { payload: this.http.post('/auth/login', credentials), - type: UserActionKeys.USER_LOG_IN, + type: LoginActionKeys.USER_LOG_IN, } } - logInError = - (error: Error): IErrorAction => { + logInError = (error: Error) + : IErrorAction => { return { error, - type: UserActionKeys.USER_LOG_IN_REJECTED, + type: LoginActionKeys.USER_LOG_IN_REJECTED, } } - logOut = (): IAction => { + logOut = (): IAction => { return { payload: this.http.get('/auth/logout'), - type: UserActionKeys.USER_LOG_OUT, + type: LoginActionKeys.USER_LOG_OUT, } } } // This makes it very easy to write reducer code. -export type UserActionType = ActionTypes +export type LoginActionType = ActionTypes diff --git a/packages/client/src/login/LoginConnector.tsx b/packages/client/src/login/LoginConnector.tsx new file mode 100644 index 0000000..78b09a0 --- /dev/null +++ b/packages/client/src/login/LoginConnector.tsx @@ -0,0 +1,35 @@ +import {ILoginState} from './LoginReducer' +import {LoginActions} from './LoginActions' +import {LoginForm} from './LoginForm' +import {bindActionCreators, Dispatch} from 'redux' +import {connect} from 'react-redux' +import {IStateSlicer} from '../redux' + +export class LoginConnector { + constructor( + protected readonly loginActions: LoginActions, + protected readonly slice: IStateSlicer, + ) {} + + connect() { + return connect( + this.mapStateToProps, + this.mapDispatchToProps, + )(LoginForm) + } + + mapStateToProps = (globalState: GlobalState) => { + const state = this.slice(globalState) + return { + csrfToken: '123', // TODO this should be read from the state too + error: state.error, + user: state.user, + } + } + + mapDispatchToProps = (dispatch: Dispatch) => { + return { + onSubmit: bindActionCreators(this.loginActions.logIn, dispatch), + } + } +} diff --git a/packages/client/src/components/LoginForm.tsx b/packages/client/src/login/LoginForm.tsx similarity index 95% rename from packages/client/src/components/LoginForm.tsx rename to packages/client/src/login/LoginForm.tsx index 72ba1ef..20eba22 100644 --- a/packages/client/src/components/LoginForm.tsx +++ b/packages/client/src/login/LoginForm.tsx @@ -1,7 +1,6 @@ import React from 'react' -import {Input} from './Input' +import {Input} from '../components/Input' import {ICredentials} from '@rondo/common' -import {IState} from '../reducers' export interface ILoginFormProps { error?: string diff --git a/packages/client/src/login/LoginReducer.ts b/packages/client/src/login/LoginReducer.ts new file mode 100644 index 0000000..568749c --- /dev/null +++ b/packages/client/src/login/LoginReducer.ts @@ -0,0 +1,26 @@ +import {IUser} from '@rondo/common' +import {LoginActionKeys, LoginActionType} from './LoginActions' + +export interface ILoginState { + readonly error?: string, + readonly user?: IUser +} + +const defaultState: ILoginState = { + error: undefined, + user: undefined, +} + +export function Login( + state = defaultState, + action: LoginActionType, +): ILoginState { + switch (action.type) { + case LoginActionKeys.USER_LOG_IN: + return {...state, user: action.payload} + case LoginActionKeys.USER_LOG_OUT: + return {...state, user: undefined} + case LoginActionKeys.USER_LOG_IN_REJECTED: + return {...state, error: action.error.message} + } +} diff --git a/packages/client/src/reducers/index.ts b/packages/client/src/reducers/index.ts deleted file mode 100644 index f27c65f..0000000 --- a/packages/client/src/reducers/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export * from './user' - -import {combineReducers} from 'redux' -import * as user from './user' - -export const reducers = combineReducers(user) -export type IState = ReturnType diff --git a/packages/client/src/reducers/user.ts b/packages/client/src/reducers/user.ts deleted file mode 100644 index 3b6b497..0000000 --- a/packages/client/src/reducers/user.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {IUser} from '@rondo/common' -import {UserActionKeys, UserActionType} from '../actions/UserActions' - -export interface IUserState { - error?: string, - user?: IUser -} - -const defaultState: IUserState = { - error: undefined, - user: undefined, -} - -export function user(state = defaultState, action: UserActionType): IUserState { - switch (action.type) { - case UserActionKeys.USER_LOG_IN: - return {...state, user: action.payload} - case UserActionKeys.USER_LOG_OUT: - return {...state, user: undefined} - case UserActionKeys.USER_LOG_IN_REJECTED: - return {...state, error: action.error.message} - } -} diff --git a/packages/client/src/redux/IStateSlicer.ts b/packages/client/src/redux/IStateSlicer.ts new file mode 100644 index 0000000..77577b1 --- /dev/null +++ b/packages/client/src/redux/IStateSlicer.ts @@ -0,0 +1,3 @@ +export type IStateSlicer + = (state: GlobalState) => StateSlice + diff --git a/packages/client/src/redux/index.ts b/packages/client/src/redux/index.ts new file mode 100644 index 0000000..ff10871 --- /dev/null +++ b/packages/client/src/redux/index.ts @@ -0,0 +1 @@ +export * from './IStateSlicer' diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts deleted file mode 100644 index 8cd40d2..0000000 --- a/packages/client/src/store.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {PromiseMiddleware} from './middleware' -import {applyMiddleware, createStore as create} from 'redux' -import {reducers, IState} from './reducers' - -export function createStore(state?: IState) { - return create( - reducers, - state, - applyMiddleware( - new PromiseMiddleware().handle, - ), - ) -}