-
-
-
+export const LoginComponent: React.StatelessComponent
= (props) => (
+
+);
+
+const performLogin = (props: Props) => () => {
+ props.performLogin(props.loginEntity);
+};
diff --git a/06 SimpleApp_Navigation/src/pages/login/loginContainer.tsx b/06 SimpleApp_Navigation/src/pages/login/loginContainer.tsx
index fe5135e..429e485 100644
--- a/06 SimpleApp_Navigation/src/pages/login/loginContainer.tsx
+++ b/06 SimpleApp_Navigation/src/pages/login/loginContainer.tsx
@@ -1,23 +1,20 @@
import { connect } from 'react-redux';
import { LoginComponent } from './login';
-import { LoginEntity } from '../../model/login';
+import { State } from '../../reducers';
+import { LoginEntity } from '../../model';
import { updateEditingLogin } from './actions/updateEditingLogin';
-import { loginRequestStartedAction} from './actions/loginRequestStarted';
+import { loginRequestStartedAction } from './actions/loginRequest';
-const mapStateToProps = (state) => {
- return {
- loginInfo: state.sessionReducer.editingLogin
- }
-}
+const mapStateToProps = (state: State) => ({
+ loginEntity: state.session.loginEntity,
+});
-const mapDispatchToProps = (dispatch) => {
- return {
- updateLoginInfo: (loginInfo : LoginEntity) => dispatch(updateEditingLogin(loginInfo)),
- performLogin: (loginInfo : LoginEntity) => dispatch(loginRequestStartedAction(loginInfo))
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ updateLoginEntity: (loginEntity: LoginEntity) => dispatch(updateEditingLogin(loginEntity)),
+ performLogin: (loginEntity: LoginEntity) => dispatch(loginRequestStartedAction(loginEntity)),
+});
export const LoginContainer = connect(
- mapStateToProps
- ,mapDispatchToProps
- )(LoginComponent);
+ mapStateToProps,
+ mapDispatchToProps,
+)(LoginComponent);
diff --git a/06 SimpleApp_Navigation/src/pages/student-detail/index.ts b/06 SimpleApp_Navigation/src/pages/student-detail/index.ts
new file mode 100644
index 0000000..1dd8c52
--- /dev/null
+++ b/06 SimpleApp_Navigation/src/pages/student-detail/index.ts
@@ -0,0 +1 @@
+export { StudentDetailContainer } from './studentDetailContainer';
diff --git a/06 SimpleApp_Navigation/src/pages/student-detail/index.tsx b/06 SimpleApp_Navigation/src/pages/student-detail/index.tsx
deleted file mode 100644
index ba7f440..0000000
--- a/06 SimpleApp_Navigation/src/pages/student-detail/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import {StudentDetailContainer} from './studentDetailContainer';
-
-export {
- StudentDetailContainer
-}
diff --git a/06 SimpleApp_Navigation/src/pages/student-detail/studentDetailContainer.tsx b/06 SimpleApp_Navigation/src/pages/student-detail/studentDetailContainer.tsx
index de5e682..3287cf2 100644
--- a/06 SimpleApp_Navigation/src/pages/student-detail/studentDetailContainer.tsx
+++ b/06 SimpleApp_Navigation/src/pages/student-detail/studentDetailContainer.tsx
@@ -1,17 +1,15 @@
import { connect } from 'react-redux';
import { StudentDetailComponent } from './studentDetail';
-const mapStateToProps = (state) => {
- return {
- }
-}
+const mapStateToProps = (state) => ({
-const mapDispatchToProps = (dispatch) => {
- return {
- }
-}
+});
+
+const mapDispatchToProps = (dispatch) => ({
+
+});
export const StudentDetailContainer = connect(
- mapStateToProps
- ,mapDispatchToProps
- )(StudentDetailComponent);
+ mapStateToProps,
+ mapDispatchToProps,
+)(StudentDetailComponent);
diff --git a/06 SimpleApp_Navigation/src/pages/student-list/index.ts b/06 SimpleApp_Navigation/src/pages/student-list/index.ts
index 435be76..13cfacc 100644
--- a/06 SimpleApp_Navigation/src/pages/student-list/index.ts
+++ b/06 SimpleApp_Navigation/src/pages/student-list/index.ts
@@ -1,5 +1 @@
-import {StudentListContainer} from './studentListContainer';
-
-export {
- StudentListContainer
-}
+export { StudentListContainer } from './studentListContainer';
diff --git a/06 SimpleApp_Navigation/src/pages/student-list/studentListContainer.tsx b/06 SimpleApp_Navigation/src/pages/student-list/studentListContainer.tsx
index bcb8b5d..cce7e61 100644
--- a/06 SimpleApp_Navigation/src/pages/student-list/studentListContainer.tsx
+++ b/06 SimpleApp_Navigation/src/pages/student-list/studentListContainer.tsx
@@ -1,17 +1,15 @@
import { connect } from 'react-redux';
import { StudentListComponent } from './studentList';
-const mapStateToProps = (state) => {
- return {
- }
-}
+const mapStateToProps = (state) => ({
-const mapDispatchToProps = (dispatch) => {
- return {
- }
-}
+});
+
+const mapDispatchToProps = (dispatch) => ({
+
+});
export const StudentListContainer = connect(
- mapStateToProps
- ,mapDispatchToProps
- )(StudentListComponent);
+ mapStateToProps,
+ mapDispatchToProps,
+)(StudentListComponent);
diff --git a/06 SimpleApp_Navigation/src/reducers/index.ts b/06 SimpleApp_Navigation/src/reducers/index.ts
index f7dc905..8771f0e 100644
--- a/06 SimpleApp_Navigation/src/reducers/index.ts
+++ b/06 SimpleApp_Navigation/src/reducers/index.ts
@@ -1,8 +1,10 @@
import { combineReducers } from 'redux';
-import { sessionReducer } from './session';
-import { routerReducer } from 'react-router-redux'
+import { sessionReducer, SessionState } from './session';
-export const reducers = combineReducers({
- sessionReducer,
- routing: routerReducer
+export interface State {
+ session: SessionState;
+}
+
+export const reducers = combineReducers({
+ session: sessionReducer,
});
diff --git a/06 SimpleApp_Navigation/src/reducers/session.ts b/06 SimpleApp_Navigation/src/reducers/session.ts
index dbd2b9c..6824ae5 100644
--- a/06 SimpleApp_Navigation/src/reducers/session.ts
+++ b/06 SimpleApp_Navigation/src/reducers/session.ts
@@ -1,48 +1,43 @@
-import {actionsEnums} from '../common/actionsEnums';
-import {UserProfile} from '../model/userProfile';
-import {LoginResponse} from '../model/loginResponse';
-import {LoginEntity} from '../model/login';
-
-class SessionState {
- isUserLoggedIn : boolean;
- userProfile : UserProfile;
- editingLogin : LoginEntity;
-
- public constructor()
- {
- this.isUserLoggedIn = false;
- this.userProfile = new UserProfile();
- this.editingLogin = new LoginEntity();
- }
+import { actionsEnums } from '../common/actionsEnums';
+import {
+ UserProfile,
+ createEmptyUserProfile,
+ LoginEntity,
+ createEmptyLoginEntity,
+ LoginResponse,
+} from '../model';
+
+export interface SessionState {
+ isUserLoggedIn: boolean;
+ userProfile: UserProfile;
+ loginEntity: LoginEntity;
}
-export const sessionReducer = (state : SessionState = new SessionState(), action) => {
- switch (action.type) {
- case actionsEnums.USERPROFILE_PERFORM_LOGIN:
- return handlePerformLogin(state, action.payload);
- case actionsEnums.USERPROFILE_UPDATE_EDITING_LOGIN:
- return handleUpdateEditingLogin(state, action.payload);
-
- }
+const createEmptyState = (): SessionState => ({
+ isUserLoggedIn: false,
+ userProfile: createEmptyUserProfile(),
+ loginEntity: createEmptyLoginEntity(),
+})
- return state;
-};
+export const sessionReducer = (state = createEmptyState(), action) => {
+ switch (action.type) {
+ case actionsEnums.USERPROFILE_PERFORM_LOGIN:
+ return userProfilePerformLoginHandler(state, action.payload);
+ case actionsEnums.USERPROFILE_UPDATE_EDITING_LOGIN:
+ return userProfileUpdateEditingLoginHandler(state, action.payload);
+ }
-const handlePerformLogin = (state : SessionState, payload : LoginResponse) => {
- return {...state,
- isUserLoggedIn: payload.succeeded,
- userProfile: payload.userProfile
- };
+ return state;
}
+const userProfilePerformLoginHandler = (state: SessionState, payload: LoginResponse) => ({
+ ...state,
+ isUserLoggedIn: payload.succeeded,
+ userProfile: payload.userProfile,
+});
-const handleUpdateEditingLogin = (state: SessionState, payload : LoginEntity) => {
- const newState = {
- ...state,
- editingLogin: payload
- };
-
- return newState;
-}
-
+const userProfileUpdateEditingLoginHandler = (state: SessionState, payload: LoginEntity) => ({
+ ...state,
+ loginEntity: payload,
+});
diff --git a/06 SimpleApp_Navigation/src/rest-api/loginApi.ts b/06 SimpleApp_Navigation/src/rest-api/loginApi.ts
index 1c72393..571ffdd 100644
--- a/06 SimpleApp_Navigation/src/rest-api/loginApi.ts
+++ b/06 SimpleApp_Navigation/src/rest-api/loginApi.ts
@@ -1,22 +1,15 @@
-import {LoginEntity} from '../model/login';
-import {UserProfile} from '../model/userProfile';
-import {LoginResponse} from '../model/loginResponse';
-import {} from 'core-js'
+import { LoginEntity, LoginResponse, createEmptyLoginResponse } from "../model";
-class LoginApi {
- login(loginInfo : LoginEntity) : Promise {
- let loginResponse = new LoginResponse();
+export const login = (loginEntity: LoginEntity): Promise => {
+ const loginResponse = createEmptyLoginResponse();
- if(loginInfo.login === 'admin' && loginInfo.password === 'test') {
- loginResponse.succeeded = true;
- loginResponse.userProfile = {fullname: "John Doe", role: 'admin' };
- } else {
- loginResponse.succeeded = false;
- loginResponse = null;
- }
-
- return Promise.resolve(loginResponse);
+ if (loginEntity.login === 'admin' && loginEntity.password === 'test') {
+ loginResponse.succeeded = true;
+ loginResponse.userProfile = {
+ fullname: 'John Doe',
+ role: 'admin',
+ };
}
-}
-export const loginApi = new LoginApi();
+ return Promise.resolve(loginResponse);
+}
diff --git a/06 SimpleApp_Navigation/src/store.ts b/06 SimpleApp_Navigation/src/store.ts
new file mode 100644
index 0000000..cae7697
--- /dev/null
+++ b/06 SimpleApp_Navigation/src/store.ts
@@ -0,0 +1,18 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import reduxThunk from 'redux-thunk';
+import { reducers } from './reducers';
+
+const middlewares = [
+ reduxThunk,
+];
+
+const composeEnhancers = (process.env.NODE_ENV !== 'production' && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ?
+ (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ :
+ compose;
+
+export const store = createStore(
+ reducers,
+ composeEnhancers(
+ applyMiddleware(...middlewares),
+ ),
+);
diff --git a/06 SimpleApp_Navigation/webpack.config.js b/06 SimpleApp_Navigation/webpack.config.js
index 744b3f2..63ca4d8 100644
--- a/06 SimpleApp_Navigation/webpack.config.js
+++ b/06 SimpleApp_Navigation/webpack.config.js
@@ -11,13 +11,24 @@ module.exports = {
extensions: ['.js', '.ts', '.tsx']
},
- entry: [
- './main.tsx',
- '../node_modules/bootstrap/dist/css/bootstrap.css'
- ],
+ entry: {
+ app: './main.tsx',
+ vendor: [
+ 'babel-polyfill',
+ 'react',
+ 'react-dom',
+ 'react-redux',
+ 'react-router-dom',
+ 'redux',
+ 'redux-thunk',
+ ],
+ vendorStyles: [
+ '../node_modules/bootstrap/dist/css/bootstrap.css'
+ ],
+ },
output: {
path: path.join(basePath, 'dist'),
- filename: 'bundle.js'
+ filename: '[name].js',
},
devtool: 'source-map',
@@ -42,6 +53,24 @@ module.exports = {
},
},
},
+ {
+ test: /\.scss$/,
+ exclude: /node_modules/,
+ loader: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: [
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ localIdentName: '[name]__[local]___[hash:base64:5]',
+ camelCase: true,
+ },
+ },
+ { loader: 'sass-loader', },
+ ],
+ }),
+ },
{
test: /\.css$/,
include: /node_modules/,
@@ -80,9 +109,12 @@ module.exports = {
hash: true
}),
new ExtractTextPlugin({
- filename: '[chunkhash].[name].css',
+ filename: '[name].css',
disable: false,
allChunks: true,
}),
+ new webpack.optimize.CommonsChunkPlugin({
+ names: ['vendor', 'manifest'],
+ }),
]
}