Add detail view for notes

noters/src/components.rs

@@ -1,7 +1,7 @@
 use sycamore::prelude::*;
 
 use crate::{
-    date::{get_current_time_millis, time_hr},
+    date::{self, get_current_time_millis, time_hr},
     local_storage, log, AppMode,
 };
 
@@ -41,6 +41,12 @@ pub fn default_view(props: DefaultViewProps) -> Template<G> {
                     let trunced = truncate(note, 75);
 
                     let timestamp = format!("Created at {}", time_hr(res.parse::<u64>().unwrap()));
+                    let new = (&res[..]).to_string();
+
+                    let start_detail = cloned!((mode, selected) => move |_| {
+                        selected.set((&new[..]).to_string());
+                        mode.set(AppMode::Detail);
+                    });
 
                     let start_edit = cloned!((mode, selected) => move |_| {
                         selected.set((&res[..]).to_string());
@@ -56,6 +62,7 @@ pub fn default_view(props: DefaultViewProps) -> Template<G> {
                                 (timestamp)
                             }
                             br
+                            button(on:click=start_detail) { "View" }
                             button(on:click=start_edit) { "Edit" }
                             button(class="button-danger") { "Delete" }
                         }
@@ -176,3 +183,47 @@ pub fn edit_view(props: EditViewProps) -> Template<G> {
         }
     }
 }
+
+#[derive(Clone, Debug)]
+pub struct NoteDetailViewProps {
+    mode: Signal<AppMode>,
+    selected: StateHandle<String>,
+}
+
+impl NoteDetailViewProps {
+    pub fn new(mode: Signal<AppMode>, selected: StateHandle<String>) -> Self {
+        Self { mode, selected }
+    }
+}
+
+#[component(NoteDetailView<G>)]
+pub fn note_detail_view(props: NoteDetailViewProps) -> Template<G> {
+    let mode = props.clone().mode;
+    let selected = props.clone().selected;
+
+    let timestamp_raw: &str = &*selected.get();
+    let timestamp = format!(
+        "Created at {}",
+        date::time_hr(timestamp_raw.parse::<u64>().unwrap())
+    );
+
+    let value = local_storage::get_item(timestamp_raw);
+
+    let go_back = cloned!((mode) => move |_| {
+        mode.set(AppMode::Default);
+    });
+
+    template! {
+        div(class="pull-left") {
+            button(on:click=go_back) { "Go Back" }
+        }
+        div(class="card") {
+            (value)
+            br
+            br
+            small {
+                (timestamp)
+            }
+        }
+    }
+}

noters/src/main.rs

@@ -19,6 +19,7 @@ pub enum AppMode {
     Default, // note list view
     Create,  // note create view (might be merged into edit)
     Edit,    // note edit view
+    Detail,  // note detail view
 }
 
 fn main() {
@@ -40,6 +41,9 @@ fn main() {
                     AppMode::Edit => template! {
                         EditView(EditViewProps::new(cloned!((mode) => mode), cloned!((selected) => selected.handle())))
                     },
+                    AppMode::Detail => template! {
+                        NoteDetailView(NoteDetailViewProps::new(cloned!((mode) => mode), cloned!((selected) => selected.handle())))
+                    },
                     _ => template! {
                         DefaultView(DefaultViewProps::new(cloned!((mode) => mode), cloned!((selected) => selected)))
                     }

noters/style.css

@@ -19,6 +19,7 @@
     border-radius: .4rem;
     padding: .6rem 1.0rem .7rem;
     margin-bottom: 1.5rem;
+    word-wrap: break-word;
 }
 
 .button-danger {