update Loger, changes useState and useEffect with more basic case, started useContext

Author: DESKTOP-E7TEPSG

src/App.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import "./App.css";
 import examplesUseState1 from "./examples/use-state-1";
 import examplesUseEffect1 from "./examples/use-effect-1";
+import examplesUseContext1 from "./examples/use-context-1";
 import examplesUseRef1 from "./examples/use-ref-1";
 import examplesHooksOrder from "./examples/hooks-order";
 import examplesMemoization from "./examples/memoization";
@@ -18,6 +19,7 @@ const App: React.FC = () => {
   let examples: IExample[] = ([] as IExample[])
     .concat(examplesUseState1)
     .concat(examplesUseEffect1)
+    .concat(examplesUseContext1)
     .concat(examplesUseRef1)
     .concat(examplesHooksOrder)
     .concat(examplesMemoization)

src/commons/ExampleBloc/index.tsx

@@ -1,30 +1,52 @@
-import React, { useContext, useMemo, useReducer } from "react";
+import React, { useContext, useMemo, useRef, useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import highlightStyle from "react-syntax-highlighter/dist/esm/styles/prism/tomorrow";
 import Explanation from "../Explanation";
 import Preface from "../Preface";
 import cloneDeep from "lodash.clonedeep";
 
-export interface ILogger {
-  log: (message: string, mixed?: any) => void;
-}
-
-interface ILogs {
-  logs: ILog[];
-  id: number;
-}
-
-interface ILog {
-  id: number;
+interface Log {
   message: string;
+  fireDate: number;
+  elapsedTime: number | null;
   mixed?: any;
-  time: number;
 }
+type LogAction = (message: string, mixed?: any) => void;
+interface LogContext {
+  action: LogAction;
+  logs: React.MutableRefObject<Log[]>;
+  observers: React.MutableRefObject<(() => void)[]>;
+}
+const LoggerContext = React.createContext<LogContext | null>(null);
+export const useLog = () => {
+  const context = useContext(LoggerContext)!;
+  useEffect(() => {
+    const renderDate = Date.now();
+    context.logs.current = context.logs.current.map(tLog => {
+      return !tLog.elapsedTime ? {
+        ...tLog,
+        elapsedTime: renderDate - tLog.fireDate
+      } : tLog;
+    });
+    context.observers.current.forEach(observer => observer());
+  });
 
-const LoggerContext = React.createContext<ILogger | null>(null);
+  return context.action;
+};
+const useLogObserver = () => {
+  const context = useContext(LoggerContext)!;
+  const [_, setTrigger] = useState<number>(0);
 
-export const useLog = () => {
-  return useContext(LoggerContext)!.log;
+  useEffect(() => {
+    const callback = () => {
+      setTrigger(t => t + 1);
+    }
+    context.observers.current.push(callback);
+    return () => {
+      context.observers.current = context.observers.current.filter(observer => observer !== callback);
+    };
+  }, [context]);
+  return context.logs.current;
 };
 
 const Code = ({ code }: { code?: string | null }) => {
@@ -51,7 +73,9 @@ const Code = ({ code }: { code?: string | null }) => {
   );
 };
 
-const Logs = ({ logs, clear }: { logs: ILog[]; clear: () => void }) => {
+const Logs = ({ clear }: { clear: () => void }) => {
+  const logs = useLogObserver();
+
   return (
     <div
       style={{
@@ -73,12 +97,12 @@ const Logs = ({ logs, clear }: { logs: ILog[]; clear: () => void }) => {
       {logs
         .map((log, i) => (
           <div
-            key={log.id}
+            key={i}
             style={{ margin: 10, borderBottom: "1px #EEE solid" }}
           >
-            [<span style={{ fontWeight: "bold" }}>{log.id}</span>] (
+            [<span style={{ fontWeight: "bold" }}>{i}</span>] (
             <span style={{ fontStyle: "italic" }}>
-              +{log.time - (logs[i - 1] || log).time}ms
+              +{log.elapsedTime || "..."}ms
             </span>
             ) {log.message}
             <pre>{JSON.stringify(log.mixed, null, 2)}</pre>
@@ -178,39 +202,104 @@ const ExampleBloc = ({
   preface,
   explanation
 }: IProps) => {
-  const [logs, dispatch] = useReducer(
-    (logs: ILogs, action): ILogs => {
-      switch (action.type) {
-        case "add":
-          return {
-            logs: [...logs.logs, { ...action.payload, id: logs.id }],
-            id: logs.id + 1
-          };
-
-        case "clear":
-          return { logs: [], id: 1 };
-
-        default:
-          throw new Error("Not implemented: " + action.type);
-      }
-    },
-    { logs: [], id: 1 }
-  );
+  const logStorage = useRef<Log[]>([]);
+  const logObservers = useRef<(() => void)[]>([]);
 
   const memoComponent = useMemo(() => {
     const log = (message: string, mixed?: any) => {
-      dispatch({
-        type: "add",
-        payload: { message, time: Date.now(), mixed: cloneDeep(mixed) }
-      });
+      const newLog: Log = {
+        message: message,
+        fireDate: Date.now(),
+        elapsedTime: null,
+        mixed: cloneDeep(mixed)
+      };
+      logStorage.current.push(newLog);
     };
 
     return (
-      <LoggerContext.Provider value={{ log }}>
-        <Component />
+      <LoggerContext.Provider value={{ action: log, logs: logStorage, observers: logObservers }}>
+        <section
+          style={{
+            position: "relative",
+            height: "100vh",
+            width: "100%",
+            margin: "40px 0",
+            color: "#FFFFFF",
+            backgroundColor: "#282c34",
+            textAlign: "left",
+            fontFamily:
+              "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
+          }}
+        >
+          <h3
+            id={id}
+            style={{
+              margin: 10,
+              padding: 10,
+              borderBottom: "1px solid #61dafb",
+              display: "flex",
+              justifyContent: "space-between"
+            }}
+          >
+            <a style={{ color: "#61dafb", textDecoration: "none" }} href={`#${id}`}>
+              {title}
+            </a>
+            <div>
+              {prev && (
+                <a
+                  style={{
+                    color: "#61dafb",
+                    textDecoration: "none",
+                    margin: "0 10px"
+                  }}
+                  href={`#${prev}`}
+                >
+                  ⇐
+            </a>
+              )}
+              {next && (
+                <a
+                  style={{ color: "#61dafb", textDecoration: "none" }}
+                  href={`#${next}`}
+                >
+                  ⇒
+            </a>
+              )}
+            </div>
+          </h3>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-around",
+              position: "absolute",
+              top: 50,
+              bottom: 0,
+              left: 0,
+              right: 0
+            }}
+          >
+            <Col percentage={40} margin={30}>
+              <Code code={code} />
+            </Col>
+
+            <Col percentage={40} margin={30}>
+              <ComponentAndText preface={preface} explanation={explanation}>
+                <Component />
+              </ComponentAndText>
+            </Col>
+
+            <Col percentage={20} margin={30}>
+              <Logs clear={() => {
+                logStorage.current = [];
+                logObservers.current.forEach(observer => observer());
+              }} />
+            </Col>
+          </div>
+        </section>
       </LoggerContext.Provider>
     );
-  }, []);
+  }, [logStorage, logObservers, id, title, prev, next, code, preface, explanation]);
 
   if (code) {
     code = code.replace(/\r/g, "");
@@ -219,84 +308,7 @@ const ExampleBloc = ({
     code = code.trim();
   }
 
-  return (
-    <section
-      style={{
-        position: "relative",
-        height: "100vh",
-        width: "100%",
-        margin: "40px 0",
-        color: "#FFFFFF",
-        backgroundColor: "#282c34",
-        textAlign: "left",
-        fontFamily:
-          "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
-      }}
-    >
-      <h3
-        id={id}
-        style={{
-          margin: 10,
-          padding: 10,
-          borderBottom: "1px solid #61dafb",
-          display: "flex",
-          justifyContent: "space-between"
-        }}
-      >
-        <a style={{ color: "#61dafb", textDecoration: "none" }} href={`#${id}`}>
-          {title}
-        </a>
-        <div>
-          {prev && (
-            <a
-              style={{
-                color: "#61dafb",
-                textDecoration: "none",
-                margin: "0 10px"
-              }}
-              href={`#${prev}`}
-            >
-              ⇐
-            </a>
-          )}
-          {next && (
-            <a
-              style={{ color: "#61dafb", textDecoration: "none" }}
-              href={`#${next}`}
-            >
-              ⇒
-            </a>
-          )}
-        </div>
-      </h3>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-around",
-          position: "absolute",
-          top: 50,
-          bottom: 0,
-          left: 0,
-          right: 0
-        }}
-      >
-        <Col percentage={40} margin={30}>
-          <Code code={code} />
-        </Col>
-
-        <Col percentage={40} margin={30}>
-          <ComponentAndText preface={preface} explanation={explanation}>
-            {memoComponent}
-          </ComponentAndText>
-        </Col>
-
-        <Col percentage={20} margin={30}>
-          <Logs logs={logs.logs} clear={() => dispatch({ type: "clear" })} />
-        </Col>
-      </div>
-    </section>
-  );
+  return <>{memoComponent}</>;
 };
 
 export default ExampleBloc;

src/examples/use-context-1/ExampleUseContext101.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import ActionButton from "../../commons/ActionButton";
+
+interface CounterProps {
+  counter: number;
+  setCounter: (newCounter: number) => void;
+}
+
+const CounterContext = React.createContext<CounterProps | null>(null);
+
+const Displayer = () => {
+  const context = React.useContext(CounterContext);
+  if (context) return <pre>{JSON.stringify(context, null, 2)}</pre>;
+  else return <></>;
+};
+const Consumer = () => {
+  const context = React.useContext(CounterContext);
+
+  if (context)
+    return (
+      <ul>
+        <li>
+          <ActionButton
+            label="Do nothing state-wise"
+            onClick={() => {
+              /* NOOP */
+            }}
+          />
+        </li>
+        <li>
+          <ActionButton
+            label="Increment"
+            onClick={() => {
+              context.setCounter(context.counter + 1);
+            }}
+          />
+        </li>
+        <li>
+          <ActionButton
+            label="Reset"
+            onClick={() => {
+              context.setCounter(0);
+            }}
+          />
+        </li>
+      </ul>
+    );
+  else return <></>;
+};
+
+const ExampleUseContext101 = () => {
+  const [counter, setCounter] = React.useState<number>(0);
+
+  return (
+    <>
+      <CounterContext.Provider value={{ counter, setCounter }}>
+        <Displayer />
+        <Consumer />
+      </CounterContext.Provider>
+    </>
+  );
+};
+
+export default ExampleUseContext101;