put back initial content

Author: tsnobip

src/Playground.res

@@ -1358,51 +1358,68 @@ and the different jsx modes (classic and automatic).
 module InitialContent = {
   let original = `module Button = {
   @react.component
-  let make = () => {
-    let (count, setCount) = React.useState(_ => 0)
+  let make = (~count) => {
     let times = switch count {
     | 1 => "once"
     | 2 => "twice"
     | n => n->Belt.Int.toString ++ " times"
     }
     let text = \`Click me $\{times\}\`
 
-    <button onClick={_ => setCount(c => c + 1)}> {msg->React.string} </button>
-  }
-}
-
-module App = {
-  @react.component
-  let make = () => {
-    <Button />
+    <button> {text->React.string} </button>
   }
 }
 `
 
-  let since_10_1 = `@@jsxConfig({version: 4, mode: "automatic"})
+  let since_10_1 = `@@jsxConfig({ version: 4, mode: "automatic" })
 
-module Button = {
+module CounterMessage = {
   @react.component
-  let make = () => {
-    let (count, setCount) = React.useState(_ => 0)
+  let make = (~count, ~username=?) => {
     let times = switch count {
     | 1 => "once"
     | 2 => "twice"
-    | n => n->Int.toString ++ " times"
+    | n => Belt.Int.toString(n) ++ " times"
     }
-    let msg = \`Click me $\{times\}\`
 
-    <button onClick={_ => setCount(c => c + 1)}> {msg->React.string} </button>
+    let name = switch username {
+    | Some("") => "Anonymous"
+    | Some(name) => name
+    | None => "Anonymous"
+    }
+
+    <div> {React.string(\`Hello \$\{name\}, you clicked me \` ++ times)} </div>
   }
 }
 
 module App = {
   @react.component
   let make = () => {
-    <Button />
+    let (count, setCount) = React.useState(() => 0)
+    let (username, setUsername) = React.useState(() => "Anonymous")
+
+    <div>
+      {React.string("Username: ")}
+      <input
+        type_="text"
+        value={username}
+        onChange={evt => {
+          evt->ReactEvent.Form.preventDefault
+          let username = (evt->ReactEvent.Form.target)["value"]
+          setUsername(_prev => username)
+        }}
+      />
+      <button
+        onClick={_evt => {
+          setCount(prev => prev + 1)
+        }}>
+        {React.string("Click me")}
+      </button>
+      <button onClick={_evt => setCount(_ => 0)}> {React.string("Reset")} </button>
+      <CounterMessage count username />
+    </div>
   }
 }
-
 `
 }