From 274166d60c9b122022cac02bdf55451190d6da8f Mon Sep 17 00:00:00 2001 From: Federico Kereki Date: Mon, 23 Jul 2018 22:05:33 -0300 Subject: [PATCH] Regions example ready --- chapter08/src/App.regions.functional.js | 32 ++++++++++ chapter08/src/App.regions.js | 6 +- .../src/counterApp/clicksDisplay.component.js | 4 +- chapter08/src/counterApp/counter.component.js | 4 +- chapter08/src/index.js | 2 +- .../src/regionsApp/countrySelect.component.js | 4 +- chapter08/src/regionsApp/serviceApi.js | 27 ++++++++- chapter08/src/regionsApp/world.actions.js | 59 +++++++++++++------ chapter08/src/regionsApp/worlds.reducer.js | 6 +- 9 files changed, 115 insertions(+), 29 deletions(-) create mode 100644 chapter08/src/App.regions.functional.js diff --git a/chapter08/src/App.regions.functional.js b/chapter08/src/App.regions.functional.js new file mode 100644 index 0000000..de43760 --- /dev/null +++ b/chapter08/src/App.regions.functional.js @@ -0,0 +1,32 @@ +/* @flow */ + +import React, { Component, Fragment } from "react"; +import { Provider } from "react-redux"; + +import { + ConnectedCountrySelect, + ConnectedRegionsTable +} from "./regionsApp"; + +import { getCountries, getRegions } from "./regionsApp/serviceApi.js"; +import { store } from "./regionsApp/store.js"; + +const dispatcher = fn => (...args) => store.dispatch(fn(...args)); + +class App extends Component<{}> { + render() { + return ( + + + + + + + ); + } +} + +export default App; diff --git a/chapter08/src/App.regions.js b/chapter08/src/App.regions.js index de43760..1516ece 100644 --- a/chapter08/src/App.regions.js +++ b/chapter08/src/App.regions.js @@ -11,16 +11,14 @@ import { import { getCountries, getRegions } from "./regionsApp/serviceApi.js"; import { store } from "./regionsApp/store.js"; -const dispatcher = fn => (...args) => store.dispatch(fn(...args)); - class App extends Component<{}> { render() { return ( store.dispatch(getCountries())} + onSelect={c => store.dispatch(getRegions(c))} /> diff --git a/chapter08/src/counterApp/clicksDisplay.component.js b/chapter08/src/counterApp/clicksDisplay.component.js index 49df12d..1eb0619 100644 --- a/chapter08/src/counterApp/clicksDisplay.component.js +++ b/chapter08/src/counterApp/clicksDisplay.component.js @@ -1,7 +1,7 @@ /* @flow */ -import React from "../../../../../.cache/typescript/2.9/node_modules/@types/react"; -import { PropTypes } from "../../../../../.cache/typescript/2.9/node_modules/@types/prop-types"; +import React from "react"; +import { PropTypes } from "prop-types"; export class ClicksDisplay extends React.PureComponent<{ clicks: number diff --git a/chapter08/src/counterApp/counter.component.js b/chapter08/src/counterApp/counter.component.js index 275230d..d38fc4e 100644 --- a/chapter08/src/counterApp/counter.component.js +++ b/chapter08/src/counterApp/counter.component.js @@ -1,7 +1,7 @@ /* @flow */ -import React from "../../../../../.cache/typescript/2.9/node_modules/@types/react"; -import { PropTypes } from "../../../../../.cache/typescript/2.9/node_modules/@types/prop-types"; +import React from "react"; +import { PropTypes } from "prop-types"; import { increment, diff --git a/chapter08/src/index.js b/chapter08/src/index.js index 3a446b6..f51ea7d 100644 --- a/chapter08/src/index.js +++ b/chapter08/src/index.js @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; -import App from "./App.regions.js"; +import App from "./App.counter.js"; import registerServiceWorker from "./registerServiceWorker"; ReactDOM.render(, document.getElementById("root")); diff --git a/chapter08/src/regionsApp/countrySelect.component.js b/chapter08/src/regionsApp/countrySelect.component.js index 978f4c6..73855fc 100644 --- a/chapter08/src/regionsApp/countrySelect.component.js +++ b/chapter08/src/regionsApp/countrySelect.component.js @@ -16,7 +16,9 @@ export class CountrySelect extends React.PureComponent<{ }; componentDidMount() { - this.props.getCountries(); + if (this.props.list.length === 0) { + this.props.getCountries(); + } } onSelect = (e: { target: HTMLOptionElement }) => diff --git a/chapter08/src/regionsApp/serviceApi.js b/chapter08/src/regionsApp/serviceApi.js index 125e4a4..8b69e20 100644 --- a/chapter08/src/regionsApp/serviceApi.js +++ b/chapter08/src/regionsApp/serviceApi.js @@ -14,6 +14,8 @@ import { 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) { @@ -24,7 +26,30 @@ export const getCountries = () => async dispatch => { export const getRegions = (country: string) => async dispatch => { if (country) { try { - dispatch(regionsRequest()); + 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}` ); diff --git a/chapter08/src/regionsApp/world.actions.js b/chapter08/src/regionsApp/world.actions.js index c2d8da8..cdee793 100644 --- a/chapter08/src/regionsApp/world.actions.js +++ b/chapter08/src/regionsApp/world.actions.js @@ -1,32 +1,57 @@ /* @flow */ +// Countries actions + export const COUNTRIES_REQUEST = "countries:request"; export const COUNTRIES_SUCCESS = "countries:success"; export const COUNTRIES_FAILURE = "countries:failure"; +export type CountriesAction = { + type: string, + country?: string, + listOfCountries?: [object] +}; + +export const countriesRequest = () => + ({ + type: COUNTRIES_REQUEST + }: CountriesActions); + +export const countriesSuccess = (listOfCountries: []) => + ({ + type: COUNTRIES_SUCCESS, + listOfCountries + }: CountriesActions); + +export const countriesFailure = () => + ({ + type: COUNTRIES_FAILURE + }: CountriesActions); + +// Regions actions + export const REGIONS_REQUEST = "regions:request"; export const REGIONS_SUCCESS = "regions:success"; export const REGIONS_FAILURE = "regions:failure"; -export type worldAction = { +export type RegionsAction = { type: string, - value?: number + listOfRegions?: [object] }; -export const countriesRequest = () => ({ type: COUNTRIES_REQUEST }); +export const regionsRequest = (country: string) => + ({ + type: REGIONS_REQUEST, + country + }: RegionsActions); -export const countriesSuccess = (listOfCountries: []) => ({ - type: COUNTRIES_SUCCESS, - listOfCountries -}); +export const regionsSuccess = (listOfRegions: [{}]) => + ({ + type: REGIONS_SUCCESS, + listOfRegions + }: RegionsActions); -export const countriesFailure = () => ({ type: COUNTRIES_FAILURE }); - -export const regionsRequest = () => ({ type: REGIONS_REQUEST }); - -export const regionsSuccess = (listOfRegions: []) => ({ - type: REGIONS_SUCCESS, - listOfRegions -}); - -export const regionsFailure = () => ({ type: REGIONS_FAILURE }); +export const regionsFailure = () => + ({ + type: REGIONS_FAILURE + }: RegionsActions); diff --git a/chapter08/src/regionsApp/worlds.reducer.js b/chapter08/src/regionsApp/worlds.reducer.js index 3d09377..da159e9 100644 --- a/chapter08/src/regionsApp/worlds.reducer.js +++ b/chapter08/src/regionsApp/worlds.reducer.js @@ -9,17 +9,20 @@ import { REGIONS_FAILURE } from "./world.actions"; +import type { CountriesAction, RegionsAction } from "./world.actions"; + // import type { CounterAction } from "./world.actions.js"; export const reducer = ( state: object = { // initial state loadingCountries: false, + currentCountry: "", countries: [], loadingRegions: false, regions: [] }, - action: object + action: CountriesAction | RegionsAction ) => { switch (action.type) { case COUNTRIES_REQUEST: @@ -47,6 +50,7 @@ export const reducer = ( return { ...state, loadingRegions: true, + currentCountry: action.country, regions: [] };