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),
+  ]);
 }

src/sagas/rootSagas.js

@@ -0,0 +1,25 @@
+import { call, put, takeLatest, all } from "redux-saga/effects";
+
+export function* isWorkingAsync() {
+  yield put({ type: "IS_WORKING", payload: true });
+}
+
+export function* isFinishedAsync() {
+  yield put({ type: "IS_WORKING", payload: false });
+}
+
+export function* counter2StartedIncrementing() {
+  yield takeLatest("INCREMENT_COUNTER_2_START", isWorkingAsync);
+}
+
+export function* counter2FinishedIncrementing() {
+  yield takeLatest("INCREMENT_COUNTER_2", isFinishedAsync);
+}
+
+export function* uiSagas() {
+  yield all([
+    //
+    call(counter2StartedIncrementing),
+    call(counter2FinishedIncrementing),
+  ]);
+}

src/sagas/ui/ui.sagas.js

@@ -26,14 +26,19 @@ App > div > div {
   padding: 1rem;
 }
 
+.App > div,
+.App > div > div {
+  padding-top: 3rem;
+}
+
 .App > div > div {
   width: 80%;
   border: 5px solid teal;
 }
 
 .App > div::before,
 .App > div > div::before {
-  content: "Depth: Level 1";
+  content: "Depth: 1";
   position: absolute;
   top: 0;
   left: 0;
@@ -42,8 +47,35 @@ App > div > div {
 }
 
 .App > div > div::before {
-  content: "Depth: Level 2";
+  content: "Depth: 2";
+}
+
+.loader {
+  position: relative;
 }
 
-.App__groundFloor {
+.loader__overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+}
+
+.loader__messageBox {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  font-size: 5rem;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader__image {
+  padding: 1rem;
+  background-color: white;
 }