app: Extract a RemoveUserFromGroup component

app/src/components/select.rs

@@ -1,8 +1,10 @@
 use yew::{html::ChangeData, prelude::*};
+use yewtil::NeqAssign;
 
 pub struct Select {
     link: ComponentLink<Self>,
     props: SelectProps,
+    node_ref: NodeRef,
 }
 
 #[derive(yew::Properties, Clone, PartialEq, Debug)]
@@ -26,49 +28,48 @@ impl Select {
             .nth(nth as usize)
             .map(|child| child.props)
     }
+
+    fn send_selection_update(&self) {
+        let select_node = self.node_ref.cast::<web_sys::HtmlSelectElement>().unwrap();
+        self.props
+            .on_selection_change
+            .emit(self.get_nth_child_props(select_node.selected_index()))
+    }
 }
 
 impl Component for Select {
     type Message = SelectMsg;
     type Properties = SelectProps;
     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let res = Self { link, props };
-        res.props
-            .on_selection_change
-            .emit(res.get_nth_child_props(0));
-        res
+        Self {
+            link,
+            props,
+            node_ref: NodeRef::default(),
+        }
     }
+
+    fn rendered(&mut self, _first_render: bool) {
+        self.send_selection_update();
+    }
+
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            SelectMsg::OnSelectChange(data) => match data {
-                ChangeData::Select(e) => {
-                    self.props
-                        .on_selection_change
-                        .emit(self.get_nth_child_props(e.selected_index()));
-                }
-                _ => unreachable!(),
-            },
+        let SelectMsg::OnSelectChange(data) = msg;
+        match data {
+            ChangeData::Select(_) => self.send_selection_update(),
+            _ => unreachable!(),
         }
         false
     }
+
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props.children.len() != props.children.len() {
-            let was_empty = self.props.children.is_empty();
-            self.props = props;
-            if self.props.children.is_empty() || was_empty {
-                self.props
-                    .on_selection_change
-                    .emit(self.get_nth_child_props(0));
-            }
-            true
-        } else {
-            false
-        }
+        self.props.children.neq_assign(props.children)
     }
+
     fn view(&self) -> Html {
         html! {
             <select
-                  onchange=self.link.callback(SelectMsg::OnSelectChange)>
+              ref=self.node_ref.clone()
+              onchange=self.link.callback(SelectMsg::OnSelectChange)>
             { self.props.children.clone() }
             </select>
         }
@@ -79,7 +80,7 @@ pub struct SelectOption {
     props: SelectOptionProps,
 }
 
-#[derive(yew::Properties, Clone, PartialEq)]
+#[derive(yew::Properties, Clone, PartialEq, Debug)]
 pub struct SelectOptionProps {
     pub value: String,
     pub text: String,
@@ -88,20 +89,19 @@ pub struct SelectOptionProps {
 impl Component for SelectOption {
     type Message = ();
     type Properties = SelectOptionProps;
+
     fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
         Self { props }
     }
+
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         false
     }
+
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
+        self.props.neq_assign(props)
     }
+
     fn view(&self) -> Html {
         html! {
           <option value=self.props.value.clone()>