I love macros!

Temp
2022-09-05 20:16:13 +02:00 · 2022-09-05 19:27:41 +02:00
5 changed files with 136 additions and 119 deletions
--- a/web/dist/index.html
+++ b/web/dist/index.html
@ -4,9 +4,9 @@
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet">
    <title>Yew App</title>
  
-<link rel="preload" href="/index-167b3e062ee4dd95_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-<link rel="modulepreload" href="/index-167b3e062ee4dd95.js"></head>
+<link rel="preload" href="/index-b24e51ea036df368_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="modulepreload" href="/index-b24e51ea036df368.js"></head>
    <body class="base theme-dark bg-gray-900 text-gray-400">
 	

-<script type="module">import init from '/index-167b3e062ee4dd95.js';init('/index-167b3e062ee4dd95_bg.wasm');</script></body></html>
+<script type="module">import init from '/index-b24e51ea036df368.js';init('/index-b24e51ea036df368_bg.wasm');</script></body></html>
--- a/web/src/components/mod.rs
+++ b/web/src/components/mod.rs
@ -11,10 +11,21 @@ use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::{Event, HtmlInputElement, InputEvent};
 use yew::prelude::*;

+#[derive(Clone, PartialEq)]
+pub struct Binding<T> {
+    pub onchange: Callback<T>,
+    pub value: T,
+}
+
+impl<T> Binding<T> {
+    pub fn new(value: T, onchange: Callback<T>) -> Self {
+        Self { value, onchange }
+    }
+}
+
 #[derive(Clone, PartialEq, Properties)]
 pub struct InputProps {
-    pub value: String,
-    pub onchange: Callback<String>,
+    pub bind: Binding<String>,
    pub class: Classes,
 }

@ -29,9 +40,8 @@ fn get_value_from_input_event(e: InputEvent) -> String {
 #[function_component(TextInput)]
 pub fn text_input(props: &InputProps) -> Html {
    let InputProps {
-        value,
-        onchange,
        class,
+        bind: Binding { onchange, value },
    } = props.clone();

    let oninput = Callback::from(move |input_event: InputEvent| {
--- a/web/src/pages/events.rs
+++ b/web/src/pages/events.rs
@ -1,4 +1,8 @@
-use crate::components::{Page, RenderEvent};
+use crate::{
+    components::{Page, RenderEvent},
+    init,
+};
+use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 use yew_hooks::*;

@ -6,25 +10,18 @@ use crate::{clone, util::api_request};

 #[function_component(EventsPage)]
 pub fn events_page() -> Html {
-    let events: UseAsyncHandle<Vec<lan_party_core::event::Event>, _> = use_async(async move {
-        api_request::<_, Vec<lan_party_core::event::Event>>("GET", "/event", Option::<()>::None)
+    let events = use_state(|| Vec::new());
+
+    init!(events => {
+        events.set(api_request::<_, Vec<lan_party_core::event::Event>>("GET", "/event", Option::<()>::None)
            .await
            .map(|inner| inner.unwrap())
-            .map_err(|_| "failed to load users")
+            .unwrap())
    });

-    clone!(events; use_effect_with_deps(move |_| {
-        if events.data.is_none() {
-            events.run();
-        }
-        || ()
-    }, ()));
-
    html! {
        <Page>
-            { if let Some(events) = &events.data {
-                events.view()
-            } else { html! {} }}
+            { events.view() }
        </Page>
    }
 }
--- a/web/src/pages/users.rs
+++ b/web/src/pages/users.rs
@ -1,6 +1,7 @@
 use crate::{
-    clone, clone_cb,
-    components::{Button, Loading, Page, Table, TextInput},
+    bind, bind_change, bind_value, clone, clone_cb, clone_cb_spawn,
+    components::{Binding, Button, Loading, Page, Table, TextInput},
+    init,
    util::api_request,
 };
 use lan_party_core::user::User;
@ -15,118 +16,85 @@ pub fn users_page() -> Html {
    let new_username = use_state(|| String::new());
    let score_edit: UseStateHandle<Option<usize>> = use_state(|| Option::None);
    let current_score = use_state(|| String::new());
-    let users: UseAsyncHandle<Vec<User>, _> = use_async(async move {
-        api_request::<_, Vec<User>>("GET", "/user", Option::<()>::None)
+    let users = use_state(|| Vec::new());
+
+    init!(users => {
+        users.set(api_request::<_, Vec<User>>("GET", "/user", Option::<()>::None)
            .await
            .map(|inner| inner.unwrap())
-            .map_err(|_| "failed to load users")
+            .unwrap());
    });

-    clone!(users; use_effect_with_deps(move |_| {
-        if users.data.is_none() {
-            users.run();
+    let oncheck = clone_cb_spawn!(score_edit, current_score, users => {
+        if let (Some(score_edit), Ok(score)) = (*score_edit, current_score.parse()) {
+            let user: &User = &users[score_edit];
+            api_request::<_, ()>("POST", &format!("/user/{}/score", user.name), Some(score))
+                .await
+                .unwrap();
+            let mut cloned = (*users).clone();
+            cloned[score_edit].score = score;
+            users.set(cloned);
        }
-        || ()
-    }, ()));
-
-    let oncheck = clone_cb!(score_edit, current_score, users; move |_| {
-        clone!(score_edit, users, current_score; {
-            spawn_local(async move {
-                if let (Some(score_edit), Some(users_inner)) = (*score_edit, &users.data) {
-                    if let Ok(score) = current_score.parse() {
-                        let user: &User = &users_inner[score_edit];
-                        api_request::<_, ()>("POST", &format!("/user/{}/score", user.name), Some(score)).await.unwrap();
-                        let mut cloned = users_inner.clone();
-                        cloned[score_edit].score = score;
-                        users.update(cloned);
-                    }
-                }
-                score_edit.set(None);
-            });
-        });
+        score_edit.set(None);
    });

-    let onedit = clone_cb!(current_score, score_edit, users; i => move |_| {
-        if let Some(users) = &users.data {
-            let user: &User = &users[i];
-            current_score.set(user.score.to_string());
-            score_edit.set(Some(i));
-        }
+    let onedit = clone_cb!(current_score, score_edit, users => i => move |_| {
+        let user: &User = &users[i];
+        current_score.set(user.score.to_string());
+        score_edit.set(Some(i));
    });

-    let ondelete = clone_cb!(users; i => move |_| {
-        clone!(users; {
-            spawn_local(async move {
-                if let Some(users_inner) = &users.data {
-                    let user: &User = &users_inner[i];
-                    api_request::<_, ()>("DELETE", &format!("/user/{}", user.name), Option::<()>::None).await.unwrap();
-                    let cloned = users_inner.iter().cloned().filter(|u| u.name != user.name).collect();
-                    users.update(cloned);
-                }
-            });
-        });
+    let ondelete = clone_cb_spawn!(users => i => {
+        let user: &User = &users[i];
+        api_request::<_, ()>("DELETE", &format!("/user/{}", user.name), Option::<()>::None).await.unwrap();
+        let cloned = users.iter().cloned().filter(|u| u.name != user.name).collect();
+        users.set(cloned);
    });

-    let onadd = clone_cb!(new_username, users; move |_| {
-        clone!(new_username, users; {
-            spawn_local(async move {
-                if let Some(users_inner) = &users.data {
-                    let user = api_request::<String, User>("POST", "/user", Some((*new_username).clone())).await.unwrap();
-                    let mut cloned = users_inner.clone();
-                    cloned.push(user.unwrap());
-                    users.update(cloned);
-                }
-            });
-        });
+    let onadd = clone_cb_spawn!(new_username, users => {
+        let user = api_request::<String, User>("POST", "/user", Some((*new_username).clone())).await.unwrap();
+        let mut cloned = (*users).clone();
+        cloned.push(user.unwrap());
+        users.set(cloned);
    });

    html! {
        <Page>
            <Table headers={headers.clone()} loading=false rows={vec![]}>
-                { if let Some(users) = &users.data {
-                    {users.iter().enumerate().map(move |(i, user)| html! {
-                        <tr>
-                            <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-400">{&user.name}</td>
-                            <td class="whitespace-nowrap px-3 text-sm text-slate-400">
-                                {if Some(i) == *score_edit.clone() { html! {
-                                    <>
-                                        <span class="inline-block">
-                                            <TextInput
-                                                class={"mx-2 appearance-none block bg-gray-700 text-slate-400 border border-gray-600 rounded py-2 px-2 w-20 leading-tight focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500"}
-                                                onchange={clone_cb!(current_score; move |value| current_score.set(value))}
-                                                value={(*current_score).clone()}
-                                                />
-                                        </span>
-                                        <Button icon={"mdi-check"} onclick={oncheck.clone()} />
-                                    </>
-                                }} else { html! {
-                                    <>
-                                        <span class="my-3 w-20">
-                                            {user.score}
-                                        </span>
-                                        <Button icon={"mdi-pencil"} onclick={onedit.clone()(i)} />
-                                    </>
-                                }}}
-                            </td>
-                            <td class="whitespace-nowrap py-4 text-sm text-slate-400">
-                                <Button icon={"mdi-delete"} onclick={ondelete.clone()(i)} />
-                            </td>
-                        </tr>
-                    }).collect::<Html>()}
-                } else {
-                    html! {
-                        <div class="grid place-items-center">
-                            <Loading />
-                        </div>
-                    }
-                }}
+                {users.iter().enumerate().map(move |(i, user)| html! {
+                    <tr>
+                        <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-400">{&user.name}</td>
+                        <td class="whitespace-nowrap px-3 text-sm text-slate-400">
+                            {if Some(i) == *score_edit.clone() { html! {
+                                <>
+                                    <span class="inline-block">
+                                        <TextInput
+                                            class={"mx-2 appearance-none block bg-gray-700 text-slate-400 border border-gray-600 rounded py-2 px-2 w-20 leading-tight focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500"}
+                                            bind={bind!(current_score)}
+                                            />
+                                    </span>
+                                    <Button icon={"mdi-check"} onclick={oncheck.clone()} />
+                                </>
+                            }} else { html! {
+                                <>
+                                    <span class="my-3 w-20">
+                                        {user.score}
+                                    </span>
+                                    <Button icon={"mdi-pencil"} onclick={onedit.clone()(i)} />
+                                </>
+                            }}}
+                        </td>
+                        <td class="whitespace-nowrap py-4 text-sm text-slate-400">
+                            <Button icon={"mdi-delete"} onclick={ondelete.clone()(i)} />
+                        </td>
+                    </tr>
+                }).collect::<Html>()}
                <tr>
                    <td class="whitespace-nowrap px-3 text-sm text-slate-400">
                        <span class="inline-block">
                            <TextInput
                                class={"mx-2 appearance-none block bg-gray-700 text-slate-400 border border-gray-600 rounded py-2 px-2 w-50 leading-tight focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500"}
-                                onchange={clone_cb!(new_username; move |value| new_username.set(value))}
-                                value={(*new_username).clone()}
+                                bind={bind!(new_username)}
                                />
                        </span>
                    </td>
--- a/web/src/util.rs
+++ b/web/src/util.rs
@ -77,7 +77,7 @@ pub async fn api_request<B: Serialize, R: for<'a> Deserialize<'a>>(

 #[macro_export]
 macro_rules! clone {
-    ($($var:ident),* $(,)? ; $body:expr) => {{
+    ($($var:ident),* $(,)? => $body:expr) => {{
        $(let $var = $var.clone();)*
        $body
    }};
@ -85,16 +85,58 @@ macro_rules! clone {

 #[macro_export]
 macro_rules! clone_cb {
-    ($($var:ident),* ; $body:expr) => {
-        clone!($($var,)* ; {
+    ($($var:ident),* $(,)? => $body:expr) => {
+        clone!($($var,)* => {
            Callback::from($body)
        })
    };
-    ($($var:ident),* ; $($param:ident),* => $body:expr) => {
-        clone!($($var,)* ; {
+    ($($var:ident),* $(,)? => $($param:ident),* $(,)? => $body:expr) => {
+        clone!($($var,)* => {
            move |$($param,)*| {
                Callback::from($body)
            }
        })
    };
 }
+
+#[macro_export]
+macro_rules! clone_cb_spawn {
+    ($($var:ident),* => $body:expr) => {
+        clone_cb!($($var,)* => move |_| {
+            clone!($($var,)* => spawn_local(async move { $body }))
+        })
+    };
+    ($($var:ident),* $(,)? => $($param:ident),* => $body:expr) => {
+        clone_cb!($($var,)* => $($param),* => move |_| {
+            clone!($($var,)* => spawn_local(async move { $body }))
+        })
+    };
+}
+
+#[macro_export]
+macro_rules! init {
+    ($var:ident => $body:expr) => {
+        clone!($var => use_mount(move || spawn_local(async move { $body })))
+    };
+}
+
+#[macro_export]
+macro_rules! bind_value {
+    ($value:ident) => {
+        (*$value).clone()
+    };
+}
+
+#[macro_export]
+macro_rules! bind_change {
+    ($value:ident) => {
+        clone_cb!($value => move |value| $value.set(value))
+    };
+}
+
+#[macro_export]
+macro_rules! bind {
+    ($value:ident) => {
+        Binding::new(bind_value!($value), bind_change!($value))
+    };
+}
Author	SHA1	Message	Date
Daan Vanoverloop	cdc056dadc	I love macros!	2022-09-05 20:16:13 +02:00
Daan Vanoverloop	277782f16b	Temp	2022-09-05 19:27:41 +02:00