fix persister and improve styling and title

gaucho-labs · Feb 23, 2024 · 510719a · 510719a
1 parent dc0d8d0
commit 510719a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 21 deletions.
diff --git a/example/start-csr/Cargo.toml b/example/start-csr/Cargo.toml
@@ -18,6 +18,7 @@ leptos_query_devtools = { path = "../../devtools", features = ["csr", "force"]}
 gloo-timers = "0.3.0"
 serde = { version = "1.0" }
 reqwest = { version = "0.11.24", features = ["json"] }
+leptos-use = "0.10.3"
 
 # utils
 # strum = { version = "0.25", features = ["derive", "strum_macros"] }

diff --git a/example/start-csr/src/layout.rs b/example/start-csr/src/layout.rs
@@ -1,7 +1,11 @@
+use std::str::FromStr;
+
 use leptos::*;
 use leptos_meta::Html;
 use leptos_query::query_persister::{IndexedDbPersister, LocalStoragePersister};
 use leptos_query::use_query_client;
+use leptos_use::storage::use_local_storage;
+use leptos_use::utils::FromToStringCodec;
 
 use crate::components::switch::Switch;
 
@@ -54,7 +58,10 @@ fn ThemeToggle() -> impl IntoView {
 
 #[component]
 fn SelectPersister() -> impl IntoView {
-    let persister = create_rw_signal(Persister::None);
+    let (persister, set_persister, _) =
+        use_local_storage::<Persister, FromToStringCodec>(Persister::None);
+
+    create_effect(move |_| set_persister(persister.get_untracked()));
 
     create_effect(move |_| {
         let client = use_query_client();
@@ -84,12 +91,12 @@ fn SelectPersister() -> impl IntoView {
         </label>
         <select
             id="query-persister"
-            class="form-select border-border border text-xs rounded-md block py-1 px-5 bg-input text-input-foreground line-clamp-1"
-            value=move || persister.get().as_str()
+            class="form-select border-border border text-xs rounded-md block py-1 pr-8 bg-input text-input-foreground line-clamp-1 focus:border-primary focus:ring focus:ring-primary/50 transition-colors"
+            prop:value=move || persister.get().as_str()
             on:change=move |ev| {
                 let new_value = event_target_value(&ev);
-                let option = Persister::from_string(&new_value);
-                persister.set(option);
+                let option = FromStr::from_str(&new_value).unwrap();
+                set_persister(option);
             }
         >
 
@@ -112,22 +119,14 @@ pub fn SidebarLink(#[prop(into)] href: String, children: Children) -> impl IntoV
     }
 }
 
-#[derive(Clone, Copy, Debug)]
+#[derive(Clone, Copy, Debug, PartialEq)]
 pub enum Persister {
     LocalStorage,
     IndexDB,
     None,
 }
 
 impl Persister {
-    pub fn from_string(s: &str) -> Self {
-        match s {
-            "LocalStorage" => Self::LocalStorage,
-            "IndexDB" => Self::IndexDB,
-            _ => Self::None,
-        }
-    }
-
     pub fn as_str(&self) -> &'static str {
         match self {
             Self::LocalStorage => "LocalStorage",
@@ -136,3 +135,35 @@ impl Persister {
         }
     }
 }
+
+impl std::fmt::Display for Persister {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.write_str(self.as_str())
+    }
+}
+
+impl std::str::FromStr for Persister {
+    type Err = ();
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        let result = match s {
+            "LocalStorage" => Self::LocalStorage,
+            "IndexDB" => Self::IndexDB,
+            _ => Self::None,
+        };
+
+        Ok(result)
+    }
+}
+
+impl AsRef<str> for Persister {
+    fn as_ref(&self) -> &str {
+        self.as_str()
+    }
+}
+
+impl Default for Persister {
+    fn default() -> Self {
+        Self::None
+    }
+}
diff --git a/example/start-csr/src/lib.rs b/example/start-csr/src/lib.rs
@@ -28,10 +28,8 @@ pub fn App() -> impl IntoView {
     view! {
         <Html lang="en" dir="ltr"/>
 
-        // sets the document title
-        <Title text="Welcome to Leptos CSR"/>
+        <Title text="Leptos Query"/>
 
-        // injects metadata in the <head> of the page
         <Meta charset="UTF-8"/>
         <Meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 

diff --git a/example/start-csr/src/pages/home.rs b/example/start-csr/src/pages/home.rs
@@ -69,14 +69,16 @@ pub fn Home() -> impl IntoView {
             <div class="flex flex-col lg:flex-row items-stretch gap-8 p-8 max-w-[1200px] mx-auto lg:min-h-72">
                 <InfoCard title="Simple & Expressive">
                     <p>
-                        Expressive, powerful, and client-side caching, handling background updates and stale data <Loud> out of the box with zero-configuration. </Loud>
+                        Expressive, powerful, and client-side caching, handling background updates and stale data
+                        <Loud>out of the box with zero-configuration.</Loud>
                     </p>
                     <p>
                         Unlocks features like optimistic updates, cancellation, persistance, and more.
                     </p>
                 </InfoCard>
                 <InfoCard title="Deep Leptos Integration">
-                    <Loud>Flawless support for CSR and SSR</Loud> rendering strategies, as well as
+                    <Loud>Flawless support for CSR and SSR</Loud>
+                    rendering strategies, as well as
                     {"Leptos's"}
                     fine-grained reactivity, ensuring your data fetching is performant and up to date.
                 </InfoCard>

diff --git a/example/start-csr/src/pages/single.rs b/example/start-csr/src/pages/single.rs
@@ -132,7 +132,8 @@ const CARD_CLASS: &str =
     "flex flex-col items-start gap-2 bg-card border rounded-md p-4 max-w-xl w-full h-40 grow overflow-hidden ";
 const LABEL_CLASS: &str =
     "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
-const INPUT_CLASS: &str= "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+const INPUT_CLASS: &str= "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus:border-primary focus:ring focus:ring-primary/50";
+
 const HEADER_CLASS: &str = "scroll-m-20 text-4xl font-bold tracking-tight";
 
 #[component]
@@ -145,7 +146,13 @@ fn SingleResource() -> impl IntoView {
         <div class="flex flex-col w-full gap-4">
 
             <h2 class=HEADER_CLASS>
-                Fetching with <a href="https://book.leptos.dev/async/10_resources.html">
+                Fetching with
+                <a
+                    href="https://book.leptos.dev/async/10_resources.html"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="hover:underline"
+                >
                     <Loud>Leptos Resource</Loud>
                 </a>
             </h2>