pretty print responds to state updates

Author: boostup

src/App.js

@@ -39,22 +39,28 @@ export default function App() {
 
         <p>
           <ButtonComponent
-            instructions="Press me to increment counter 1"
+            instructions={`Press me to increment counter 1 => ${state.counter1}`}
             onClick={handleClick1}
           />
         </p>
 
         <hr />
 
         <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."
+            instructions={`PRESS ME for counter 2 => ${state.counter2}`}
             onClick={handleClick2}
           />
         </p>
+        <span role="img" aria-label="pulling my tongue">
+          👀 👍
+        </span>
+        <p>
+          <strong>
+            BTW: whenever I see that counter 1 increments, I increment counter
+            2! This way, I'm always ahead of competition.
+          </strong>
+        </p>
 
         <br />
 

src/components/ButtonComponent.jsx

@@ -1,6 +1,18 @@
 import React from "react";
+import { useDataLayerValue } from "../context/DataLayer";
 
-const ButtonComponent = ({ instructions, onClick }) => (
-  <button onClick={onClick}>{instructions} (Takes from 1 to 3 seconds)</button>
-);
+const ButtonComponent = ({ instructions, onClick }) => {
+  const { dispatch } = useDataLayerValue();
+
+  function handleClick() {
+    dispatch({ type: "IS_WORKING", payload: true });
+    onClick();
+
+    let timer = setTimeout(() => {
+      dispatch({ type: "IS_WORKING", payload: false });
+    }, 1000);
+  }
+
+  return <button onClick={handleClick}>{instructions}</button>;
+};
 export default ButtonComponent;

src/components/HeaderComponent.jsx

@@ -12,7 +12,9 @@ function HeaderComponent() {
         state:
       </p>
 
-      <PrettyPrint toPrint={state} />
+      <div>
+        <PrettyPrint toPrint={state} />
+      </div>
     </div>
   );
 }

src/components/Loader.jsx

@@ -1,19 +1,16 @@
 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 className={`loader ${show ? "In" : "Out"}`}>
+        <div className="loader__overlay" />
+        <div className="loader__messageBox">
+          <div className="loader__image">
+            <img src="/images/loader.gif" alt="busy" />
           </div>
         </div>
-      ) : null}
+      </div>
     </>
   );
 }

src/components/PrettyPrint.jsx

@@ -1,5 +1,27 @@
-import React from "react";
-const PrettyPrint = ({ toPrint }) => (
-  <pre>{JSON.stringify(toPrint, null, 2)}</pre>
-);
+import React, { useEffect, useLayoutEffect, useState } from "react";
+const PrettyPrint = ({ toPrint }) => {
+  const [In, setIn] = useState("---");
+
+  useEffect(() => {
+    let timer = null;
+
+    setIn("Out");
+
+    timer = setTimeout(() => {
+      setIn("In");
+    }, 100);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [toPrint.counter1, toPrint.counter2]);
+
+  return (
+    <div className="prettyPrint">
+      <pre title="I animate when counters increment!" className={In}>
+        {JSON.stringify(toPrint, null, 2)}
+      </pre>
+    </div>
+  );
+};
 export default PrettyPrint;

src/reducers/counter1/counter1.reducers.js

@@ -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/sagas/rootSagas.js

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

src/sagas/ui/ui.sagas.js

@@ -38,7 +38,7 @@ App > div > div {
 
 .App > div::before,
 .App > div > div::before {
-  content: "Depth: 1";
+  content: "Nesting Level: 1";
   position: absolute;
   top: 0;
   left: 0;
@@ -47,15 +47,21 @@ App > div > div {
 }
 
 .App > div > div::before {
-  content: "Depth: 2";
+  content: "Nesting Level: 2";
 }
 
 .loader {
   position: relative;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.loader.In {
+  opacity: 1;
 }
 
 .loader__overlay {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.3);
   position: fixed;
   height: 100vh;
   width: 100vw;
@@ -78,4 +84,37 @@ App > div > div {
 .loader__image {
   padding: 1rem;
   background-color: white;
+  transform: scaleY(0);
+  transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.In .loader__image {
+  transform: scaleY(1);
+}
+
+.prettyPrint {
+  border: 1px solid teal;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.prettyPrint pre {
+  margin: 0;
+  background-color: teal;
+  padding: 1rem;
+  font-weight: 800;
+  cursor: help;
+}
+
+.prettyPrint pre.In {
+  animation: animate 700ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes animate {
+  from {
+    transform: rotate3d(0);
+  }
+  to {
+    transform: perspective(600px) rotateX(360deg) scale(1.3);
+  }
 }