From 510158f381cbdd5cd3e147b3b43f32c0b789e39a Mon Sep 17 00:00:00 2001
From: Matthew Kaminski <kaminskimateusz7@gmail.com>
Date: Thu, 29 Aug 2024 22:43:55 -0400
Subject: [PATCH] Fix error component, add to all pages

---
 src/capsules/forgot_password_form.rs | 17 ++++-------------
 src/capsules/login_form.rs           |  3 ++-
 src/capsules/register_form.rs        | 18 ++++--------------
 src/components/error_block.rs        | 11 ++++++-----
 4 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/src/capsules/forgot_password_form.rs b/src/capsules/forgot_password_form.rs
index d9d5e00..bf914eb 100644
--- a/src/capsules/forgot_password_form.rs
+++ b/src/capsules/forgot_password_form.rs
@@ -4,6 +4,8 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::components::error_block::ErrorBlock;
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
@@ -114,19 +116,8 @@ fn forgot_password_form_capsule<G: Html>(
                     div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
                         h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Forgot Password"}
 
-                        (match state.error.get().as_ref() != "" {
-                            true => { view!{cx,
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
+                        // Add component for handling error messages
+                        ErrorBlock(error = state.error.clone())
 
                         div {
                             label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
diff --git a/src/capsules/login_form.rs b/src/capsules/login_form.rs
index f3374b3..2db3b73 100644
--- a/src/capsules/login_form.rs
+++ b/src/capsules/login_form.rs
@@ -152,7 +152,8 @@ fn login_form_capsule<G: Html>(
                     div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
                         h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Sign in"}
 
-                        ErrorBlock(error =  state.error.clone())
+                        // Add component for handling error messages
+                        ErrorBlock(error = state.error.clone())
 
                         div {
                             label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
diff --git a/src/capsules/register_form.rs b/src/capsules/register_form.rs
index 8b9dd60..d662042 100644
--- a/src/capsules/register_form.rs
+++ b/src/capsules/register_form.rs
@@ -4,6 +4,8 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::components::error_block::ErrorBlock;
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
@@ -125,20 +127,8 @@ fn register_form_capsule<G: Html>(
                     div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
                         h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Register"}
 
-
-                        (match state.error.get().as_ref() != "" {
-                            true => { view!{cx,
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
+                        // Add component for handling error messages
+                        ErrorBlock(error = state.error.clone())
 
                         div {
                             label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
diff --git a/src/components/error_block.rs b/src/components/error_block.rs
index 6bbb765..b66751b 100644
--- a/src/components/error_block.rs
+++ b/src/components/error_block.rs
@@ -15,18 +15,19 @@ pub struct ErrorBlockProps {
     error: RcSignal<String>,
 }
 
-#[component]
-pub fn ErrorBlock<G: Html>(cx: Scope, props: ErrorBlockProps) -> View<G> {
-    let is_empty = create_selector(cx, || props.error.get().is_empty());
+#[component(inline_props)]
+pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal<String>) -> View<G> {
+    let error = create_ref(cx, error);
+    let is_empty = create_selector(cx, || error.get().is_empty());
     view! { cx,
-        (match *is_empty.get() {
+        (match !(*is_empty.get()) {
             true => { view!{cx,
                 div (role="alert") {
                     div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
                         "Error"
                     }
                     div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                        p {(*props.error.get())}
+                        p {(*error.get())}
                     }
                 }
             }},