scenario 'order'

Author: HenriJ

src/App.tsx

@@ -5,6 +5,7 @@ import examplesUseEffect1 from "./examples/use-effect-1";
 import examplesUseRef1 from "./examples/use-ref-1";
 import examplesHooksOrder from "./examples/hooks-order";
 import examplesMemoization from "./examples/memoization";
+import examplesScenarioOrder from "./examples/scenario-order";
 import logo from "./logo.svg";
 import ExampleBloc from "./commons/ExampleBloc";
 import { IExample } from "./commons/types";
@@ -19,7 +20,8 @@ const App: React.FC = () => {
     .concat(examplesUseEffect1)
     .concat(examplesUseRef1)
     .concat(examplesHooksOrder)
-    .concat(examplesMemoization);
+    .concat(examplesMemoization)
+    .concat(examplesScenarioOrder);
 
   return (
     <div className="App">
@@ -90,8 +92,7 @@ const App: React.FC = () => {
 export default App;
 
 /*
-
-Idées:
+Autres idées:
  - pq utiliser un hook custom pour les contextes (permet d'éviter le typecheck sur null & co)
  - react context instantiation or mounting
 */

src/examples/memoization/index.tsx

@@ -80,7 +80,7 @@ const examples: IExample[] = [
       <>
         <strong>React.memo</strong> is not a hook, but a HOC that will perform a
         shallow comparison on the input props before triggering a render of the
-        wrapped component. SOmetime, it can be cleaner to use it instead of the
+        wrapped component. Sometimes, it can be cleaner to use it instead of the
         more general-pruprpose <strong>useMemo()</strong>
       </>
     ),

src/examples/scenario-order/Before.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+interface IOrderItem {
+  id: string;
+  quantity: number;
+}
+
+interface IOrderContent {
+  items: IOrderItem[];
+}
+
+const MyItemAudi = ({
+  orderContent,
+  setOrderContent
+}: {
+  orderContent: IOrderContent;
+  setOrderContent: (orderContent: IOrderContent) => void;
+}) => {
+  const quantity = orderContent.items.reduce(
+    (acc, item) => acc + (item.id === "audi" ? item.quantity : 0),
+    0
+  );
+
+  const more = () => {
+    setOrderContent({
+      items: orderContent.items
+        .filter(item => item.id !== "audi")
+        .concat({ id: "audi", quantity: quantity + 1 })
+    });
+  };
+
+  return (
+    <>
+      Audi cars are very nice [...more text...]. Quantity: {quantity}.{" "}
+      <button onClick={more}>Add more</button>
+    </>
+  );
+};
+
+const MyItemBmw = ({
+  orderContent,
+  setOrderContent
+}: {
+  orderContent: IOrderContent;
+  setOrderContent: (orderContent: IOrderContent) => void;
+}) => {
+  const quantity = orderContent.items.reduce(
+    (acc, item) => acc + (item.id === "bmw" ? item.quantity : 0),
+    0
+  );
+
+  const more = () => {
+    setOrderContent({
+      items: orderContent.items
+        .filter(item => item.id !== "bmw")
+        .concat({ id: "bmw", quantity: quantity + 1 })
+    });
+  };
+
+  return (
+    <>
+      BMW are nice too, although a little bit tacky [...more text...]. Quantity:{" "}
+      {quantity}. <button onClick={more}>Add more</button>
+    </>
+  );
+};
+
+const AllItems = ({
+  orderContent,
+  setOrderContent
+}: {
+  orderContent: IOrderContent;
+  setOrderContent: (orderContent: IOrderContent) => void;
+}) => {
+  const [selected, setSelected] = React.useState<string>("audi");
+
+  return (
+    <div>
+      <div>
+        Select car:{" "}
+        <select
+          onChange={e => {
+            setSelected(e.currentTarget.value);
+          }}
+        >
+          <option value="audi">Audi</option>
+          <option value="bmw">BMW</option>
+        </select>
+      </div>
+
+      <div>
+        Car description:
+        <div>
+          {selected === "audi" && (
+            <MyItemAudi
+              orderContent={orderContent}
+              setOrderContent={setOrderContent}
+            />
+          )}
+          {selected === "bmw" && (
+            <MyItemBmw
+              orderContent={orderContent}
+              setOrderContent={setOrderContent}
+            />
+          )}
+        </div>
+      </div>
+
+      <button onClick={() => setOrderContent({ items: [] })}>reset</button>
+    </div>
+  );
+};
+
+const OrderManager = () => {
+  const [orderContent, setOrderContent] = React.useState<IOrderContent>({
+    items: []
+  });
+
+  return (
+    <>
+      <pre>{JSON.stringify(orderContent, null, 2)}</pre>
+      <AllItems orderContent={orderContent} setOrderContent={setOrderContent} />
+    </>
+  );
+};
+
+export default OrderManager;

src/examples/scenario-order/index.tsx

@@ -0,0 +1,21 @@
+/* eslint import/no-webpack-loader-syntax: off */
+import BeforeCode from "!raw-loader!./Before";
+import React from "react";
+import { IExample } from "../../commons/types";
+import Before from "./Before";
+
+const examples: IExample[] = [
+  {
+    title: "Scenario 'order': before",
+    Component: Before,
+    code: BeforeCode,
+    preface: (
+      <>
+        Can you find a way to technically improve this very simple app by using
+        what you learned aboot React and hooks ?
+      </>
+    )
+  }
+];
+
+export default examples;