Replace dark mode button with capsule (#38)

Co-authored-by: Miroito <alban.vachette@gmail.com>
Reviewed-on: #38

client/Cargo.lock

@@ -170,6 +170,7 @@ version = "0.1.0"
 dependencies = [
  "chrono",
  "fantoccini",
+ "lazy_static",
  "perseus",
  "perseus-axum",
  "reqwasm",
@@ -1040,9 +1041,9 @@ checksum = "478c572c3d73181ff3c2539045f6eb99e5491218eae919370993b890cdbdd98e"
 
 [[package]]
 name = "perseus"
-version = "0.4.0"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c692ad07b59511f3f2faac6ae47136b0f7f28fe92a962da60459b659ddf947ca"
+checksum = "28b1230830033fe9611e1f65d26639ad18bc628877dbd9ce3034998897dd9e74"
 dependencies = [
  "async-trait",
  "chrono",
@@ -1082,9 +1083,9 @@ dependencies = [
 
 [[package]]
 name = "perseus-macro"
-version = "0.4.0"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "868803376c686cfe84dc5a84114ea631bd561f243f1a48115c4418b19c9d199b"
+checksum = "365751b4a34d7b5f0758d08e570c3052fd8e99300fe0433d00f45731ef4453ec"
 dependencies = [
  "darling",
  "proc-macro2",

client/Cargo.toml

@@ -9,13 +9,14 @@ edition = "2021"
 chrono = { version = "0.4.23", features = ["serde"] }
 serde = { version = "1.0.152", features = ["derive"] }
 serde_json = "1.0.91"
-perseus = { version = "0.4", features = ["hydrate"] }
+perseus = { version = "0.4.1", features = ["hydrate"] }
 sycamore = { version = "^0.8.1", features = [
     "ssr",
     "serde",
     "suspense",
     "hydrate",
 ] }
+lazy_static = "1"
 
 [target.'cfg(engine)'.dev-dependencies]
 fantoccini = "^0.19.3"

client/Dockerfile

@@ -7,7 +7,7 @@ RUN apt-get update \
     build-essential curl wget pkg-config
 
 # vars
-ENV PERSEUS_VERSION=0.4.0 \
+ENV PERSEUS_VERSION=0.4.1 \
     PERSEUS_SIZE_OPT_VERSION=0.1.9 \
     ESBUILD_VERSION=0.15.18 \
     BINARYEN_VERSION=112

client/src/capsules/dark_mode_btn.rs

@@ -0,0 +1,36 @@
+use lazy_static::lazy_static;
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+use crate::global_state::AppStateRx;
+
+lazy_static! {
+    pub static ref DARK_MODE_BTN: Capsule<PerseusNodeType, ()> = get_capsule();
+}
+
+fn dark_mode_btn<G: Html>(cx: Scope, _props: ()) -> View<G> {
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+
+    let toggle_dark_mode = move |_| {
+        global_state.dark_mode.set(!*global_state.dark_mode.get());
+    };
+
+    view! { cx,
+        button (on:click=toggle_dark_mode, class="py-1 px-2 mx-1 rounded-full bg-slate-200 dark:bg-slate-800")
+        { "Toggle dark mode" }
+    }
+}
+
+fn fallback<G: Html>(cx: Scope, _props: ()) -> View<G> {
+    view! { cx,
+        button (class="py-1 px-2 mx-1 rounded-full bg-slate-200 dark:bg-slate-800")
+        { "Toggle dark mode" }
+    }
+}
+
+pub fn get_capsule<G: Html>() -> Capsule<G, ()> {
+    Capsule::build(Template::build("dark_mode_btn"))
+        .fallback(fallback)
+        .view(dark_mode_btn)
+        .build()
+}

client/src/capsules/mod.rs

@@ -0,0 +1 @@
+pub mod dark_mode_btn;

client/src/components/the_header.rs

@@ -1,30 +1,10 @@
 use perseus::prelude::*;
 use sycamore::prelude::*;
 
-use crate::global_state::AppStateRx;
+use crate::capsules::dark_mode_btn::DARK_MODE_BTN;
 
 #[component]
 pub fn TheHeader<G: Html>(cx: Scope) -> View<G> {
-    // This is ugly and is only caused by the get_global_state function panicking when running on the server at build time
-    let global_state_sig: &Signal<Option<&AppStateRx>> = create_signal(cx, None);
-
-    #[cfg(client)]
-    global_state_sig.set(Some(
-        Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx),
-    ));
-
-    let dark_mode = create_signal(cx, true);
-    create_effect(cx, move || {
-        if let Some(gstate) = *global_state_sig.get() {
-            dark_mode.set(*gstate.dark_mode.get());
-        }
-    });
-    let toggle_dark_mode = move |_| {
-        if let Some(gstate) = *global_state_sig.get() {
-            gstate.dark_mode.set(!*dark_mode.get());
-        }
-    };
-
     view! { cx,
         header (class="p-2 w-full h-11 align-middle bg-gray-100 shadow-md backdrop-blur-lg dark:bg-slate-500/30") {
             div (class="flex") {
@@ -39,8 +19,7 @@ pub fn TheHeader<G: Html>(cx: Scope) -> View<G> {
                     }
                 }
                 div (class="flex-none") {
-                    button (on:click=toggle_dark_mode, class="py-1 px-2 mx-1 rounded-full bg-slate-200 dark:bg-slate-800")
+                    (DARK_MODE_BTN.widget(cx,"",()))
-                    { "Toggle dark mode" }
                 }
             }
         }

client/src/main.rs

@@ -2,6 +2,7 @@ use perseus::prelude::*;
 use sycamore::view;
 
 mod api;
+pub mod capsules;
 mod components;
 mod env;
 pub mod error_pages;
@@ -13,6 +14,7 @@ pub fn main<G: Html>() -> PerseusApp<G> {
     PerseusApp::new()
         .template(crate::templates::index::get_template())
         .template(crate::templates::transactions::get_template())
+        .capsule_ref(&*crate::capsules::dark_mode_btn::DARK_MODE_BTN)
         .global_state_creator(crate::global_state::get_global_state_creator())
         .error_views(crate::error_pages::get_error_views())
         .index_view(|cx| {