a working counter

src/frontend/pages/counter.rs

@@ -1,48 +1,40 @@
-use std::rc::Rc;
+use yew::{function_component, html, use_state_eq, Callback, Html, UseStateHandle};
-
+use yew_agent::reactor::ReactorProvider;
-use yew::{function_component, html, use_context, use_state_eq, Callback, Html};
-use yew_agent::{prelude::{use_reactor_bridge, use_reactor_subscription}, reactor::{ReactorEvent, ReactorProvider}};
 
 #[function_component]
 pub fn Counter() -> Html {
-    let count_value = use_state_eq(||None);
+    let count_value: UseStateHandle<u64> = use_state_eq(|| 0);
-    let counter = use_reactor_subscription::<crate::frontend::worker::Counter>();
+
+    #[cfg(feature = "frontend")]
     let callback = {
-        let counter_handle = counter.clone();
+        use yew_agent::reactor::{use_reactor_bridge, ReactorEvent};
-        let count_value = count_value.clone();
+
+        let count_value_ = count_value.clone();
+        let counter_bridge = use_reactor_bridge::<crate::frontend::worker::Counter, _>(move |ev| {
+            if let ReactorEvent::Output(value) = ev {
+                count_value_.set(value);
+            }
+        });
 
         Callback::from(move |_: yew::MouseEvent| {
-            counter_handle.send(());
+            counter_bridge.send(());
-
-            let count_default = Rc::new(0);
-            let count_result = **(counter.iter().next().unwrap_or(&count_default));
-            count_value.set(Some(count_result));
         })
     };
-
+    #[cfg(not(feature = "frontend"))]
-    let counter_widget = if let Some(value) = *count_value {
+    let callback = { Callback::noop() };
-        html! {
-            <h1 class="mx-auto my-auto" onclick={callback}>{format!("{}", value)}</h1>
-        }
-    } else {
-        html! {
-            <h1 class="mx-auto my-auto" onclick={callback}>{"not yet"}</h1>
-        }
-    } ;
 
     html! {
         <div class="w-full h-full flex">{"Counter: "}
-            {counter_widget}
+            <h1 class="mx-auto my-auto" onclick={callback}>{format!("{}", *count_value)}</h1>
         </div>
     }
 }
 
 #[function_component]
 pub fn CounterPage() -> Html {
-    
     html! {
-        <ReactorProvider<crate::frontend::worker::Counter> path="/worker.js">
+        <ReactorProvider<crate::frontend::worker::Counter> path="/static/worker.js">
             <Counter />
         </ReactorProvider<crate::frontend::worker::Counter>>
     }
-}
+}

src/frontend/worker.rs

@@ -5,9 +5,9 @@ use futures::stream::StreamExt;
 #[reactor(Counter)]
 pub async fn counter(mut scope: ReactorScope<(), u64>) {
     let mut count = 0;
-    while let Some(input) = scope.next().await {
+    while let Some(_) = scope.next().await {
         count += 1;
-        let _ = scope.send(count+1).await;
+        let _ = scope.send(count).await;
     }
 }