ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logging is working

Browse Source
This commit is contained in:
Federico Kereki
2018-07-25 21:38:42 -03:00
parent 1c1d6d750d
commit 9cf4a01c2c
16 changed files with 385 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter08/src/App.regions.js
+2 -6
View File
@@ -8,18 +8,14 @@ import {
ConnectedRegionsTable
} from "./regionsApp";
import { getCountries, getRegions } from "./regionsApp/serviceApi.js";
import { store } from "./regionsApp/store.js";
import { store } from "./regionsApp/store";
class App extends Component<{}> {
render() {
return (
<Provider store={store}>
<Fragment>
<ConnectedCountrySelect
getCountries={() => store.dispatch(getCountries())}
onSelect={c => store.dispatch(getRegions(c))}
/>
<ConnectedCountrySelect />
<ConnectedRegionsTable />
</Fragment>
</Provider>
chapter08/src/App.routing.js
+51
View File
@@ -0,0 +1,51 @@
/* noflow */
import React, { Component } from "react";
import { Provider } from "react-redux";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import { ConnectedLogin } from "./routingApp";
import { store } from "./routingApp/store";
/* eslint-disable */
class ProtectedRoutes extends React.Component {
render() {
return store.getState().token ? (
this.props.children
) : (
<Redirect to="/login" />
);
}
}
class App extends Component<{}> {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route path="/login" component={ConnectedLogin} />
<ProtectedRoutes>
<Route
path="/"
exact
render={() => <div>HOME SWEET HOME</div>}
/>
<Route
path="/AAA"
render={() => <div>AAA</div>}
/>
<Route
path="/BBB"
render={() => <div>BBB</div>}
/>
</ProtectedRoutes>
<Route render={() => <div>404 ERROR!</div>} />
</Switch>
</BrowserRouter>
</Provider>
);
}
}
export default App;
chapter08/src/index.js
+1 -1
View File
@@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.counter.js";
import App from "./App.routing";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(<App />, document.getElementById("root"));
chapter08/src/regionsApp/countrySelect.connected.js
+10 -1
View File
@@ -3,10 +3,19 @@
import { connect } from "react-redux";
import { CountrySelect } from "./countrySelect.component";
import { getCountries, getRegions } from "./world.actions";
const getProps = state => ({
list: state.countries,
loading: state.loadingCountries
});
export const ConnectedCountrySelect = connect(getProps)(CountrySelect);
const getDispatch = dispatch => ({
getCountries: () => dispatch(getCountries()),
onSelect: c => dispatch(getRegions(c))
});
export const ConnectedCountrySelect = connect(
getProps,
getDispatch
)(CountrySelect);
chapter08/src/regionsApp/serviceApi.js
+4 -58
View File
@@ -2,62 +2,8 @@
import axios from "axios";
import {
countriesRequest,
countriesSuccess,
countriesFailure,
regionsRequest,
regionsSuccess,
regionsFailure
} from "./world.actions";
export const getCountriesAPI = () =>
axios.get(`http://fk-server:8080/countries`);
export const getCountries = () => async dispatch => {
try {
dispatch(countriesRequest());
// the next line delays execution for 5 seconds:
// await new Promise(resolve => setTimeout(resolve, 5000));
const result = await axios.get(`http://fk-server:8080/countries`);
dispatch(countriesSuccess(result.data));
} catch (e) {
dispatch(countriesFailure());
}
};
export const getRegions = (country: string) => async dispatch => {
if (country) {
try {
dispatch(regionsRequest(country));
const result = await axios.get(
`http://fk-server:8080/regions/${country}`
);
dispatch(regionsSuccess(result.data));
} catch (e) {
dispatch(regionsFailure());
}
} else {
dispatch(regionsFailure());
}
};
export const getRegions2 = (country: string) => async (
dispatch,
getState
) => {
if (country === getState().currentCountry) {
console.log("Hey! You are getting the same country as before!");
}
if (country) {
try {
dispatch(regionsRequest(country));
const result = await axios.get(
`http://fk-server:8080/regions/${country}`
);
dispatch(regionsSuccess(result.data));
} catch (e) {
dispatch(regionsFailure());
}
} else {
dispatch(regionsFailure());
}
};
export const getRegionsAPI = country =>
axios.get(`http://fk-server:8080/regions/${country}`);
chapter08/src/regionsApp/world.actions.js
+51
View File
@@ -1,5 +1,7 @@
/* @flow */
import { getCountriesAPI, getRegionsAPI } from "./serviceApi";
// Countries actions
export const COUNTRIES_REQUEST = "countries:request";
@@ -55,3 +57,52 @@ export const regionsFailure = () =>
({
type: REGIONS_FAILURE
}: RegionsActions);
// Complex Actions:
export const getCountries = () => async dispatch => {
try {
dispatch(countriesRequest());
// the next line delays execution for 5 seconds:
// await new Promise(resolve => setTimeout(resolve, 5000));
const result = await getCountriesAPI();
dispatch(countriesSuccess(result.data));
} catch (e) {
dispatch(countriesFailure());
}
};
export const getRegions = (country: string) => async dispatch => {
if (country) {
try {
dispatch(regionsRequest(country));
const result = await getRegionsAPI(country);
dispatch(regionsSuccess(result.data));
} catch (e) {
dispatch(regionsFailure());
}
} else {
dispatch(regionsFailure());
}
};
export const getRegions2 = (country: string) => async (
dispatch,
getState
) => {
if (country === getState().currentCountry) {
console.log("Hey! You are getting the same country as before!");
}
if (country) {
try {
dispatch(regionsRequest(country));
const result = await getRegionsAPI(country);
dispatch(regionsSuccess(result.data));
} catch (e) {
dispatch(regionsFailure());
}
} else {
dispatch(regionsFailure());
}
};
chapter08/src/routingApp/index.js
+5
View File
@@ -0,0 +1,5 @@
/* @flow */
import { ConnectedLogin } from "./login.connected.js";
export { ConnectedLogin };
chapter08/src/routingApp/login.actions.js
+34
View File
@@ -0,0 +1,34 @@
/* @flow */
import { loginService } from "./serviceApi";
export const LOGIN_REQUEST = "login:request";
export const LOGIN_SUCCESS = "login:success";
export const LOGIN_FAILURE = "login:failure";
export const loginRequest = () => ({
type: LOGIN_REQUEST
});
export const loginSuccess = (token: string) => ({
type: LOGIN_SUCCESS,
token
});
export const loginFailure = () => ({
type: LOGIN_FAILURE
});
// Complex actions:
export const attemptLogin = (user, password) => async dispatch => {
try {
dispatch(loginRequest());
// the next line delays execution for 5 seconds:
// await new Promise(resolve => setTimeout(resolve, 5000));
const result = await loginService(user, password);
dispatch(loginSuccess(result.data));
} catch (e) {
dispatch(loginFailure());
}
};
chapter08/src/routingApp/login.component.js
+60
View File
@@ -0,0 +1,60 @@
/* noaunflow */
import React from "react";
import PropTypes from "prop-types";
import { Redirect } from "react-router-dom";
export class Login extends React.PureComponent<{
logging: boolean
}> {
static propTypes = {
onLogin: PropTypes.func.isRequired,
logging: PropTypes.bool.isRequired,
token: PropTypes.string.isRequired,
routeAfter: PropTypes.string.isRequired
};
state = {
userName: "",
password: ""
};
onUserNameBlur = e => this.setState({ userName: e.target.value });
onPasswordBlur = e => this.setState({ password: e.target.value });
onLoginClick = () =>
this.props.onLogin(this.state.userName, this.state.password);
render() {
if (
this.state.userName &&
this.state.password &&
this.props.token
) {
return <Redirect to={this.props.routeAfter} />;
} else {
return (
<div>
<h1>Login Form</h1>
<div>
User:{" "}
<input type="text" onBlur={this.onUserNameBlur} />
</div>
<div>
Password:{" "}
<input
type="password"
onBlur={this.onPasswordBlur}
/>
</div>
{this.props.logging ? (
"Logging in..."
) : (
<button onClick={this.onLoginClick}>Login</button>
)}
</div>
);
}
}
}
chapter08/src/routingApp/login.connected.js
+16
View File
@@ -0,0 +1,16 @@
/* @flow */
import { connect } from "react-redux";
import { Login } from "./login.component";
import { attemptLogin } from "./login.actions";
export const ConnectedLogin = connect(
state => ({
logging: state.logging,
token: state.token
}),
dispatch => ({
onLogin: (user, password) => dispatch(attemptLogin(user, password))
})
)(Login);
chapter08/src/routingApp/login.reducer.js
+41
View File
@@ -0,0 +1,41 @@
/* @flow */
import {
LOGIN_REQUEST,
LOGIN_SUCCESS,
LOGIN_FAILURE
} from "./login.actions";
export const reducer = (
state: object = {
// initial state
logging: false,
token: ""
},
action
) => {
switch (action.type) {
case LOGIN_REQUEST:
return {
...state,
logging: true,
token: ""
};
case LOGIN_SUCCESS:
return {
...state,
logging: false,
token: action.token
};
case LOGIN_FAILURE:
return {
...state,
logging: false
};
default:
return state;
}
};
chapter08/src/routingApp/serviceApi.js
+9
View File
@@ -0,0 +1,9 @@
/* @flow */
import axios from "axios";
export const loginService = (user, password) =>
axios.post(
`http://localhost:8443/gettoken`,
`user=${user}&password=${password}`
);
chapter08/src/routingApp/store.js
+8
View File
@@ -0,0 +1,8 @@
/* @flow */
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { reducer } from "./login.reducer.js";
export const store = createStore(reducer, applyMiddleware(thunk));