Merge pull request #9 from melange-re/order-conf

Add order confirmation chapter

docs/.vitepress/config.js

@@ -33,6 +33,7 @@ export default defineConfig({
           { text: 'Celsius Converter', link: '/celsius-converter-exception/' },
           { text: 'Celsius Converter using Option', link: '/celsius-converter-option/' },
           { text: 'Introduction to Dune', link: '/intro-to-dune/' },
+          { text: 'Order Confirmation', link: '/order-confirmation/' },
         ]
       }
     ],

docs/celsius-converter-exception/index.md

@@ -195,6 +195,11 @@ rendered: "°C". We can't rely on OCaml strings to [deal with Unicode
 correctly](https://melange.re/v2.1.0/communicate-with-javascript/#strings), so
 any string that contains non-ASCII text must be delimited using `{js||js}`.
 
+::: tip
+Note that quoted string literals using the `js` identifier are specific to
+Melange and are not available in native OCaml.
+:::
+
 <b>2.</b> Rewriting `onChange` the handler to use a single expression creates a
 potential problem with stale values coming from the event object:
 

docs/order-confirmation/Snippets.re

@@ -0,0 +1,161 @@
+module ItemV1 = {
+  // #region type-t
+  type t =
+    | Sandwich
+    | Burger;
+  // #endregion type-t
+
+  // #region to-price
+  let toPrice = t =>
+    switch (t) {
+    | Sandwich => 10.
+    | Burger => 15.
+    };
+  // #endregion to-price
+};
+
+module Item = {
+  type t =
+    | Sandwich
+    | Burger;
+
+  // #region to-price-fun
+  let toPrice =
+    fun
+    | Sandwich => 10.
+    | Burger => 15.;
+  // #endregion to-price-fun
+
+  // #region to-emoji
+  let toEmoji =
+    fun
+    | Sandwich => {js|🥪|js}
+    | Burger => {js|🍔|js};
+  // #endregion to-emoji
+
+  // #region make
+  [@react.component]
+  let make = (~item: t) =>
+    <tr>
+      <td> {item |> toEmoji |> React.string} </td>
+      <td>
+        {item
+         |> toPrice
+         |> Js.Float.toFixedWithPrecision(~digits=2)
+         |> React.string}
+      </td>
+    </tr>;
+  // #endregion make
+};
+
+module Order = {
+  // #region order
+  type t = array(Item.t);
+
+  [@react.component]
+  let make = (~items: t) => {
+    let total =
+      items
+      |> Js.Array.reduce((acc, order) => acc +. Item.toPrice(order), 0.);
+
+    <table>
+      <tbody>
+        {items |> Js.Array.map(item => <Item item />) |> React.array}
+        <tr>
+          <td> {React.string("Total")} </td>
+          <td>
+            {total |> Js.Float.toFixedWithPrecision(~digits=2) |> React.string}
+          </td>
+        </tr>
+      </tbody>
+    </table>;
+  };
+  // #endregion order
+
+  let makeWithItemRows = (~items: t) => {
+    // #region order-make-item-rows
+    let total =
+      items
+      |> Js.Array.reduce((acc, order) => acc +. Item.toPrice(order), 0.);
+
+    let itemRows: array(React.element) =
+      items |> Js.Array.map(item => <Item item />);
+
+    <table>
+      <tbody>
+        {itemRows |> React.array}
+        <tr>
+          <td> {React.string("Total")} </td>
+          <td>
+            {total |> Js.Float.toFixedWithPrecision(~digits=2) |> React.string}
+          </td>
+        </tr>
+      </tbody>
+    </table>;
+    // #endregion order-make-item-rows
+  };
+};
+
+module Index = {
+  // #region index
+  module App = {
+    let items: Order.t = [|Sandwich, Burger, Sandwich|];
+
+    [@react.component]
+    let make = () =>
+      <div>
+        <h1> {React.string("Order confirmation")} </h1>
+        <Order items />
+      </div>;
+  };
+
+  let node = ReactDOM.querySelector("#root");
+  switch (node) {
+  | None =>
+    Js.Console.error("Failed to start React: couldn't find the #root element")
+  | Some(root) => ReactDOM.render(<App />, root)
+  };
+  // #endregion index
+};
+
+let _ = {
+  let items = [||];
+  // #region mapi
+  items
+  |> Js.Array.mapi((item, index) =>
+       <Item key={"item-" ++ string_of_int(index)} item />
+     )
+  |> React.array
+  // #endregion mapi
+  |> ignore;
+};
+
+module ItemV2 = {
+  // #region hotdog
+  type t =
+    | Sandwich
+    | Burger
+    | Hotdog;
+
+  let toPrice =
+    fun
+    | Sandwich => 10.
+    | Burger => 15.
+    | Hotdog => 5.;
+
+  let toEmoji =
+    fun
+    | Sandwich => {js|🥪|js}
+    | Burger => {js|🍔|js}
+    | Hotdog => {js|🌭|js};
+  // #endregion hotdog
+};
+
+let _ = {
+  // #region react-array-demo
+  let elemArray: array(React.element) =
+    [|"a", "b", "c"|] |> Js.Array.map(x => React.string(x));
+  Js.log(elemArray);
+  Js.log(React.array(elemArray));
+  // #endregion react-array-demo
+};

docs/order-confirmation/dune

@@ -0,0 +1,6 @@
+(melange.emit
+ (target output)
+ (libraries reason-react)
+ (preprocess
+  (pps melange.ppx reason-react-ppx))
+ (module_systems es6))