Add use_permission hook (#48)

Co-authored-by: Francis Murillo <oxidation_unbolted489@simplelogin.com>

Author: FrancisMurillo

README.md

@@ -136,6 +136,7 @@ fn counter() -> Html {
 - `use_swipe` - detects swipe based on TouchEvent.
 - `use_visible` - checks if an element is visible.
 - `use_hovered` - checks if an element is hovered.
+- `use_permission` - tracks browser's permission changes using the `Permissions` API.
 
 ### UI
 

crates/yew-hooks/Cargo.toml

@@ -45,6 +45,9 @@ features = [
     "IntersectionObserverEntry",
     "MessageEvent",
     "Navigator",
+    "Permissions",
+    "PermissionState",
+    "PermissionStatus",
     "Position",
     "PositionError",
     "PositionOptions",

crates/yew-hooks/src/hooks/mod.rs

@@ -29,6 +29,7 @@ mod use_map;
 mod use_measure;
 mod use_media;
 mod use_mount;
+mod use_permission;
 mod use_previous;
 mod use_queue;
 mod use_raf;
@@ -86,6 +87,7 @@ pub use use_map::*;
 pub use use_measure::*;
 pub use use_media::*;
 pub use use_mount::*;
+pub use use_permission::*;
 pub use use_previous::*;
 pub use use_queue::*;
 pub use use_raf::*;

crates/yew-hooks/src/hooks/use_permission.rs

@@ -0,0 +1,73 @@
+use gloo::utils::window;
+use js_sys::{Object, Reflect};
+use wasm_bindgen::{prelude::*, JsCast};
+use wasm_bindgen_futures::{spawn_local, JsFuture};
+use web_sys::{PermissionState, PermissionStatus};
+use yew::prelude::*;
+
+use crate::use_effect_once;
+
+/// A sensor hook that tracks browser's permission changes
+///
+/// # Example
+///
+/// ```rust
+/// # use yew::prelude::*;
+/// #
+/// use yew_hooks::prelude::*;
+///
+/// #[function_component(UsePermission)]
+/// fn permission() -> Html {
+///     let state = use_permission("notifications".to_owned());
+///
+///     html! {
+///         <>
+///             <b>{ " state: " }</b>
+///             { state.to_string() }
+///         </>
+///     }
+/// }
+/// ```
+#[hook]
+pub fn use_permission(name: String) -> UseStateHandle<Option<PermissionState>> {
+    let state = use_state(Option::<PermissionState>::default);
+
+    {
+        let state = state.clone();
+
+        use_effect_once(move || {
+            let state = state.clone();
+
+            spawn_local(async move {
+                let permissions = window().navigator().permissions().unwrap();
+
+                let obj = Object::new();
+                Reflect::set(&obj, &"name".into(), &name.into()).unwrap();
+
+                let fut = JsFuture::from(permissions.query(&obj).unwrap());
+                let stat = PermissionStatus::from(fut.await.unwrap());
+
+                let onchange = {
+                    let state = state.clone();
+
+                    Closure::wrap(Box::new(move |event: Event| {
+                        if let Some(target) = event.target() {
+                            let stat: PermissionStatus = target.dyn_into().unwrap();
+
+                            state.set(Some(stat.state()));
+                        }
+                    }) as Box<dyn FnMut(Event)>)
+                };
+
+                stat.set_onchange(Some(onchange.as_ref().unchecked_ref()));
+                onchange.forget();
+
+                state.set(Some(stat.state()));
+            });
+
+            move || {}
+        });
+    }
+
+    state
+}