From dc1fb77dd40367a8c191064c22c6b838b50ff067 Mon Sep 17 00:00:00 2001
From: andrie <apdevries@gmail.com>
Date: Wed, 31 Jul 2024 10:45:28 +0100
Subject: [PATCH] Port 202-reactive-event to shiny express

---
 .../2-reactivity/2.3-reactive-event/app.py    | 16 ----------
 .../apps/202-reactive-event}/README           |  0
 .../apps/202-reactive-event/app-core.py       |  0
 docs/apps/202-reactive-event/app.py           | 11 +++++++
 .../apps/202-reactive-event}/requirements.txt |  0
 docs/reactivity-slides.qmd                    | 31 ++++++++++++-------
 6 files changed, 30 insertions(+), 28 deletions(-)
 delete mode 100644 apps/core/2-reactivity/2.3-reactive-event/app.py
 rename {apps/core/2-reactivity/2.3-reactive-event => docs/apps/202-reactive-event}/README (100%)
 rename apps/core/2-reactivity/2.3-reactive-event/app-solution.py => docs/apps/202-reactive-event/app-core.py (100%)
 create mode 100644 docs/apps/202-reactive-event/app.py
 rename {apps/core/2-reactivity/2.3-reactive-event => docs/apps/202-reactive-event}/requirements.txt (100%)

diff --git a/apps/core/2-reactivity/2.3-reactive-event/app.py b/apps/core/2-reactivity/2.3-reactive-event/app.py
deleted file mode 100644
index c7e17cd..0000000
--- a/apps/core/2-reactivity/2.3-reactive-event/app.py
+++ /dev/null
@@ -1,16 +0,0 @@
-from shiny import Inputs, Outputs, Session, App, reactive, render, req, ui
-
-app_ui = ui.page_fluid(
-    ui.input_text("input_txt", "Enter text"),
-    ui.output_text_verbatim("output_txt"),
-)
-
-
-def server(input, output, session):
-    @output
-    @render.text
-    def output_txt():
-        return input.input_txt()
-
-
-app = App(app_ui, server)
diff --git a/apps/core/2-reactivity/2.3-reactive-event/README b/docs/apps/202-reactive-event/README
similarity index 100%
rename from apps/core/2-reactivity/2.3-reactive-event/README
rename to docs/apps/202-reactive-event/README
diff --git a/apps/core/2-reactivity/2.3-reactive-event/app-solution.py b/docs/apps/202-reactive-event/app-core.py
similarity index 100%
rename from apps/core/2-reactivity/2.3-reactive-event/app-solution.py
rename to docs/apps/202-reactive-event/app-core.py
diff --git a/docs/apps/202-reactive-event/app.py b/docs/apps/202-reactive-event/app.py
new file mode 100644
index 0000000..7eae64d
--- /dev/null
+++ b/docs/apps/202-reactive-event/app.py
@@ -0,0 +1,11 @@
+from shiny.express import ui, render, input
+from shiny import reactive
+
+ui.input_text("input_txt", "Enter text")
+ui.input_action_button("send", "Enter")
+@render.text
+@reactive.event(input.send)
+def output_txt():
+    return input.input_txt()
+
+
diff --git a/apps/core/2-reactivity/2.3-reactive-event/requirements.txt b/docs/apps/202-reactive-event/requirements.txt
similarity index 100%
rename from apps/core/2-reactivity/2.3-reactive-event/requirements.txt
rename to docs/apps/202-reactive-event/requirements.txt
diff --git a/docs/reactivity-slides.qmd b/docs/reactivity-slides.qmd
index 54ab2ca..38cd4a8 100644
--- a/docs/reactivity-slides.qmd
+++ b/docs/reactivity-slides.qmd
@@ -430,7 +430,7 @@ flowchart TD
 - So far we've been working with shallow reactive graphs
 - Each input is passed to a rendering function which produces an output
 - Input -> Recipe -> Output can produce repetitive, inefficient applications
-- `@reactive.Calc` creates calculations whose results can be used by one _or more_ outputs
+- `@reactive.calc` creates calculations whose results can be used by one _or more_ outputs
 - This adds intermediate nodes to the reactive graph
 
 ## Reactive Calc example
@@ -474,7 +474,7 @@ include_shiny_folder(
 
 ## Reactive Calculation to the rescue
 ```{.python code-line-numbers="1-4,9,15"}
-    @reactive.Calc
+    @reactive.calc
     def sampled_df():
         rand = np.random.rand(input.n_rows(), 1)
         df = pd.DataFrame(rand, columns=["col_1"])
@@ -496,7 +496,7 @@ include_shiny_folder(
 ```
 
 ## Reactive calculations
-- Defined with the `@reactive.Calc` decorator
+- Defined with the `@reactive.calc` decorator
 - Called like other inputs
 - Can read inputs, reactive values, or other reactive calculations
 - Caches its value, so it's cheap to call repeatedly
@@ -746,9 +746,9 @@ flowchart TD
 # | echo: false
 # | output: asis
 include_shiny_folder(
-    "../apps/core/2-reactivity/2.3-reactive-event",
-    file_name="app-solution.py",
-    exclusions=["app.py"],
+    "apps/202-reactive-event",
+    file_name="app.py",
+    # exclusions=["app.py"],
     components="viewer",
     viewer_height=700,
 )
@@ -757,15 +757,22 @@ include_shiny_folder(
 ## reactive.event
 
 ```{.python}
-@output
+from shiny.express import ui, render, input
+from shiny import reactive
+
+ui.input_text("input_txt", "Enter text")
+ui.input_action_button("send", "Enter")
 @render.text
-@reactive.event(input.my_input)
-def txt():
-  return "Here is my text"
+@reactive.event(input.send)
+def output_txt():
+    return input.input_txt()
+
+
+
 ```
 
 - `@reactive.event` overrides the usual _implicit_ dependency detection with an _explicit_ trigger
-- It can be applied to rendering functions or to `@reactive.Calc`
+- It can be applied to rendering functions or to `@reactive.calc`
 - It tells Shiny to invalidate the object whenever or more inputs change
 - `@reactive.event` is often used with action buttons or action links
 
@@ -780,7 +787,7 @@ def txt():
 
 - How Shiny re-renders elements 
 - How Shiny detects dependencies between elements (inputs and outputs)
-- How to create reusable calculations with `@reactive.Calc`
+- How to create reusable calculations with `@reactive.calc`
 - How to explicitly control reactivity with `@reactive.event`
 
 ## Is that enough?