Add web frontend in Yew

2022-03-21 17:10:51 +01:00
parent 5958a3ed29
commit c746325495
12 changed files with 374 additions and 30 deletions
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -0,0 +1,62 @@
+use components::tasks_list::TasksList;
+use contextswitch::Task;
+use reqwasm::http::Request;
+use uikit_rs as uk;
+use yew::prelude::*;
+
+mod components;
+
+#[function_component(App)]
+pub fn app() -> Html {
+    let tasks = use_state(Vec::new);
+    {
+        let tasks = tasks.clone();
+        use_effect_with_deps(
+            move |_| {
+                wasm_bindgen_futures::spawn_local(async move {
+                    let fetched_tasks: Vec<Task> =
+                        Request::get("http://localhost:8000/tasks?filter=task")
+                            .send()
+                            .await
+                            .unwrap() // TODO
+                            .json()
+                            .await
+                            .unwrap(); // TODO
+                    tasks.set(fetched_tasks);
+                });
+                || ()
+            },
+            (),
+        );
+    }
+    let selected_task = use_state(|| None);
+    let on_task_select = {
+        let selected_task = selected_task.clone();
+        Callback::from(move |task: Option<Task>| {
+            selected_task.set(task);
+        })
+    };
+
+    html! {
+        <uk::Section style={uk::SectionStyle::Default}>
+          <uk::Container size={uk::ContainerSize::Small}>
+            <uk::Filter target=".status-filter"
+              filter_width={uk::Width::_Expand}
+              filter_component={uk::UIKitComponent::SubNav}
+              filter_class={"uk-subnav-pill"}
+              filters={vec![uk::FilterData { class: "".to_string(), label: "all".to_string() },
+                            uk::FilterData { class: ".task-status-pending".to_string(), label: "pending".to_string() },
+                            uk::FilterData { class: ".task-status-completed".to_string(), label: "completed".to_string() }]}>
+              <uk::Grid gap_size={uk::GridGapSize::Small}
+                        margin={vec![uk::Margin::Default]}
+                        height_match={true}
+                        class={"status-filter"}>
+                <TasksList tasks={(*tasks).clone()}
+                           selected_task={(*selected_task).clone()}
+                           on_task_select={on_task_select} />
+              </uk::Grid>
+            </uk::Filter>
+          </uk::Container>
+        </uk::Section>
+    }
+}