Merge pull request #2 from boostup/new-version

New version

Author: boostup

public/images/loader.gif

@@ -3,16 +3,14 @@ import React from "react";
 import ButtonComponent from "./components/ButtonComponent";
 import FooterComponent from "./components/FooterComponent";
 import HeaderComponent from "./components/HeaderComponent";
+import Loader from "./components/Loader";
 
 import { useDataLayerValue } from "./context/DataLayer";
 
 import "./styles.css";
 
 export default function App() {
- const {
- // state,//so es-lint does not brag!
- put,
- } = useDataLayerValue();
+ const { state, put } = useDataLayerValue();
 
  function handleClick1() {
  put({ type: "INCREMENT_COUNTER_1_START" });
@@ -23,32 +21,46 @@ export default function App() {
  }
 
  return (
- <div className="App">
- <p>
- Imagine this is an actual website, where components need to display some
- state, or let's be crazy: even set some state !
- </p>
-
- <HeaderComponent />
-
- <p>
- We, buttons below, live on the ground floor, level 0, in the App.js file
- directly but, we're cool!
- </p>
-
- <p className="App__groundFloor">
- <ButtonComponent
- instructions="Press me to increment counter 1"
- onClick={handleClick1}
- />
+ <>
+ <div className="App">
+ <p>
+ Imagine this is an actual website, where components need to display
+ some state, or let's be crazy: even set some state !
+ </p>
+
+ <HeaderComponent />
+
+ <br />
+
+ <p>
+ We, buttons below, live on the ground floor, level 0, in the App.js
+ file directly but, we're cool!
+ </p>
+
+ <p>
+ <ButtonComponent
+ instructions="Press me to increment counter 1"
+ onClick={handleClick1}
+ />
+ </p>
+
  <hr />
- <ButtonComponent
- instructions="No no, press me to increment counter 2, he's much better ;)"
- onClick={handleClick2}
- />
- </p>
-
- <FooterComponent />
- </div>
+
+ <p>
+ <span role="img" aria-label="pulling my tongue">
+ 👀 👍
+ </span>
+ <ButtonComponent
+ instructions="PRESS ME!! BTW: whenever I see that counter 1 increments, I increment counter 2! This way, I'm always ahead of competition."
+ onClick={handleClick2}
+ />
+ </p>
+
+ <br />
+
+ <FooterComponent />
+ </div>
+ <Loader show={state.ui.isWorking} />
+ </>
  );
 }

src/App.js

@@ -1,6 +1,6 @@
 import React from "react";
 
 const ButtonComponent = ({ instructions, onClick }) => (
- <button onClick={onClick}>{instructions} (Asynchronous)</button>
+ <button onClick={onClick}>{instructions} (Takes from 1 to 3 seconds)</button>
 );
 export default ButtonComponent;

src/components/ButtonComponent.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+function Loader({ show }) {
+ console.log(show);
+ return (
+ <>
+ {show ? (
+ <div className="loader">
+ <div className="loader__overlay" />
+ <div className="loader__messageBox">
+ <div className="loader__image">
+ <img src="/images/loader.gif" alt="busy" />
+ </div>
+ </div>
+ </div>
+ ) : null}
+ </>
+ );
+}
+
+export default Loader;

src/components/Loader.jsx

@@ -1,7 +1,7 @@
 export const counter1initialState = 0;
 
 export function counter1Reducers(state, action) {
- console.log((state, action));
+ // console.log(state, action);
  switch (action.type) {
  case "INCREMENT_COUNTER_1":
  return state + 1;

src/reducers/counter1/counter1.reducers.js

@@ -1,7 +1,7 @@
 export const counter2initialState = 0;
 
 export function counter2Reducers(state, action) {
- console.log((state, action));
+ console.log(state, action);
  switch (action.type) {
  case "INCREMENT_COUNTER_2":
  return state + 1;

src/reducers/counter2/counter2.reducers.js

@@ -6,6 +6,7 @@ import {
  counter2initialState,
  counter2Reducers,
 } from "./counter2/counter2.reducers";
+import { uiInitialState, uiReducers } from "./ui/ui.reducers";
 
 function combineReducers(slices) {
  return function (prevState, action) {
@@ -21,11 +22,13 @@ function combineReducers(slices) {
 export const allInitialStates = {
  counter1: counter1initialState,
  counter2: counter2initialState,
+ ui: uiInitialState,
 };
 
 const allReducers = combineReducers({
  counter1: counter1Reducers,
  counter2: counter2Reducers,
+ ui: uiReducers,
 });
 
 export default allReducers;

src/reducers/rootReducers.js

@@ -0,0 +1,16 @@
+export const uiInitialState = {
+ isWorking: false,
+};
+
+export function uiReducers(state, action) {
+ console.log(state, action);
+ switch (action.type) {
+ case "IS_WORKING":
+ return {
+ ...state,
+ isWorking: action.payload,
+ };
+ default:
+ return state;
+ }
+}

src/reducers/ui/ui.reducers.js

@@ -1,4 +1,4 @@
-import { select, call, delay, put, takeLatest } from "redux-saga/effects";
+import { select, call, delay, put, takeLatest, all } from "redux-saga/effects";
 
 function* incrementAsync() {
  const previousState = yield select();
@@ -7,13 +7,30 @@ function* incrementAsync() {
  "I AM STARTING TO INCREMENT FROM",
  previousState.counter2
  );
- yield delay(1000);
+ yield delay(2000);
  yield put({ type: "INCREMENT_COUNTER_2" });
  const state = yield select();
  yield call(console.log, "I AM FINISHED INCREMENTING TO", state.counter2);
 }
 
+function* listenToCounter1IncrementsAsync() {
+ yield delay(1000);
+ yield put({ type: "INCREMENT_COUNTER_2" });
+}
+
 //increment saga
 export function* incrementCounter2Start() {
  yield takeLatest("INCREMENT_COUNTER_2_START", incrementAsync);
 }
+
+export function* listenToCounter1Increments() {
+ yield takeLatest("INCREMENT_COUNTER_1", listenToCounter1IncrementsAsync);
+}
+
+export function* counter1Sagas() {
+ yield all([
+ //
+ call(incrementCounter2Start),
+ call(listenToCounter1Increments),
+ ]);
+}

src/sagas/counter2/counter2.sagas.js

@@ -1,8 +1,14 @@
 import { all, call } from "redux-saga/effects";
 
 import { incrementCounter1Start } from "./counter1/counter1.sagas";
-import { incrementCounter2Start } from "./counter2/counter2.sagas";
+import { counter1Sagas } from "./counter2/counter2.sagas";
+import { uiSagas } from "./ui/ui.sagas";
 
 export default function* rootSaga() {
- yield all([call(incrementCounter1Start), call(incrementCounter2Start)]);
+ yield all([
+ //
+ call(incrementCounter1Start),
+ call(counter1Sagas),
+ call(uiSagas),
+ ]);
 }