Merge pull request #1 from boostup/new-version

some styling and some nesting for demo purposes

Author: boostup

src/App.js

@@ -1,22 +1,18 @@
-/**
- *
- * Original: https://codesandbox.io/s/usereactsaga-usereducer-exercise-stuctured-into-files-context-api-pnsdk?file=/src/App.js
- */
-
 import React from "react";
 
 import ButtonComponent from "./components/ButtonComponent";
-
-import DisplayStateComponent from "./components/DisplayStateComponent";
-
-import PrettyPrint from "./components/PrettyPrint";
+import FooterComponent from "./components/FooterComponent";
+import HeaderComponent from "./components/HeaderComponent";
 
 import { useDataLayerValue } from "./context/DataLayer";
 
 import "./styles.css";
 
 export default function App() {
- const { state, put } = useDataLayerValue();
+ const {
+ // state,//so es-lint does not brag!
+ put,
+ } = useDataLayerValue();
 
  function handleClick1() {
  put({ type: "INCREMENT_COUNTER_1_START" });
@@ -28,23 +24,31 @@ export default function App() {
 
  return (
  <div className="App">
- {/* Imagine this is in the header of your website */}
- Header <DisplayStateComponent />
- <hr />
- <ButtonComponent
- instructions="Increment counter 1"
- onClick={handleClick1}
- />
- <hr />
- <ButtonComponent
- instructions="Increment counter 2"
- onClick={handleClick2}
- />
- <hr />
- State: <PrettyPrint toPrint={state} />
- <hr />
- {/* and this the footer */}
- Footer <DisplayStateComponent />
+ <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}
+ />
+ <hr />
+ <ButtonComponent
+ instructions="No no, press me to increment counter 2, he's much better ;)"
+ onClick={handleClick2}
+ />
+ </p>
+
+ <FooterComponent />
  </div>
  );
 }

src/components/DisplayStateComponent.jsx

@@ -1,12 +1,18 @@
 import React from "react";
 import { useDataLayerValue } from "../context/DataLayer";
 import PrettyPrint from "./PrettyPrint";
+import SomeNestedComponent from "./SomeNestedComponent";
 
 const DisplayStateComponent = () => {
  const { state } = useDataLayerValue();
  return (
  <div>
+ <p>
+ I have access to everything: I'm the king of the world! Look at all that
+ state :
+ </p>
  <PrettyPrint toPrint={state} />
+ <SomeNestedComponent />
  </div>
  );
 };

src/components/FooterComponent.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useDataLayerValue } from "../context/DataLayer";
+import ButtonComponent from "./ButtonComponent";
+import DisplayStateComponent from "./DisplayStateComponent";
+
+function FooterComponent() {
+ const { put } = useDataLayerValue();
+
+ function handleClick2() {
+ put({ type: "INCREMENT_COUNTER_2_START" });
+ }
+
+ return (
+ <div>
+ <p>
+ Hey, dude, Footer here. Don't mean to brag, but my children too have
+ access to the state, and I'm not even passing any props to them!{" "}
+ </p>
+
+ <DisplayStateComponent />
+
+ <p>
+ <ButtonComponent
+ instructions="Increment counter 2"
+ onClick={handleClick2}
+ />
+ </p>
+ </div>
+ );
+}
+
+export default FooterComponent;

src/components/HeaderComponent.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useDataLayerValue } from "../context/DataLayer";
+import PrettyPrint from "./PrettyPrint";
+
+function HeaderComponent() {
+ const { state } = useDataLayerValue();
+
+ return (
+ <div>
+ <p>
+ Hey! what's up!? I'm the Header of this website. Look at my pretty
+ state:
+ </p>
+
+ <PrettyPrint toPrint={state} />
+ </div>
+ );
+}
+
+export default HeaderComponent;

src/components/SomeNestedComponent.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import ButtonComponent from "./ButtonComponent";
+
+import { useDataLayerValue } from "../context/DataLayer";
+
+function SomeNestedComponent() {
+ const { put } = useDataLayerValue();
+
+ function handleClick() {
+ put({ type: "INCREMENT_COUNTER_1_START" });
+ }
+
+ return (
+ <div>
+ <p>
+ Some Nested Component - but no Prop drilling is allowed here
+ <span role="img" aria-label="pulling my tongue">
+ 👅
+ </span>
+ </p>
+ <ButtonComponent
+ instructions="Press me also to increment counter 1"
+ onClick={handleClick}
+ />
+ </div>
+ );
+}
+
+export default SomeNestedComponent;

src/sagas/counter1/counter1.sagas.js

@@ -7,7 +7,7 @@ function* incrementAsync() {
  "I AM STARTING TO INCREMENT FROM",
  previousState.counter1
  );
- yield delay(2000);
+ yield delay(1000);
  yield put({ type: "INCREMENT_COUNTER_1" });
  const state = yield select();
  yield call(console.log, "I AM FINISHED INCREMENTING TO", state.counter1);

src/sagas/counter2/counter2.sagas.js

@@ -7,7 +7,7 @@ function* incrementAsync() {
  "I AM STARTING TO INCREMENT FROM",
  previousState.counter2
  );
- yield delay(2000);
+ yield delay(1000);
  yield put({ type: "INCREMENT_COUNTER_2" });
  const state = yield select();
  yield call(console.log, "I AM FINISHED INCREMENTING TO", state.counter2);

src/styles.css

@@ -1,4 +1,49 @@
-.App {
+* {
+ box-sizing: border-box;
+}
+
+button {
+ padding: 1rem;
+}
+
+.App,
+.App > div,
+App > div > div {
+ position: relative;
  font-family: sans-serif;
  text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.App > div,
+.App > div > div {
+ position: relative;
+ border: 5px solid hotpink;
+ width: 95vw;
+ padding: 1rem;
+}
+
+.App > div > div {
+ width: 80%;
+ border: 5px solid teal;
+}
+
+.App > div::before,
+.App > div > div::before {
+ content: "Depth: Level 1";
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 1rem;
+ border: 5px dotted rebeccapurple;
+}
+
+.App > div > div::before {
+ content: "Depth: Level 2";
+}
+
+.App__groundFloor {
 }