feat: Initial Infinite Scroll Implementation (#19)

* feat: initial infinite scrolling

* chore: remove incorrect license

* chore(post_view): add error handling

* feat(post_view): update url on post view change

* fix+feat: allow proper rendering of posts view on direct request

---------

Co-authored-by: rupansh <[email protected]>

Cargo.toml

@@ -28,6 +28,9 @@ serde = { version = "1.0.193", features = ["derive"] }
 candid = "0.10.1"
 ic-agent = { version = "0.31.0", default-features = false, features = ["pem", "reqwest"] }
 serde-wasm-bindgen = { version = "0.6.3" }
+futures = "0.3.30"
+leptos-use = "0.9.0"
+reqwest = { version = "0.11.23", default-features = false }
 
 [build-dependencies]
 candid_parser = "0.1.1"
@@ -36,7 +39,7 @@ serde_json = "1.0.110"
 convert_case = "0.6.0"
 
 [features]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate", "ic-agent/wasm-bindgen"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate", "ic-agent/wasm-bindgen", "reqwest/native-tls"]
 ssr = [
     "dep:axum",
     "dep:tokio",
@@ -47,6 +50,8 @@ ssr = [
     "leptos_meta/ssr",
     "leptos_router/ssr",
     "dep:tracing",
+    "leptos-use/ssr",
+    "reqwest/rustls-tls",
 ]
 
 # Defines a size-optimized profile for the WASM bundle in release mode

src/consts.rs

@@ -0,0 +1 @@
+pub const CF_STREAM_BASE: &str = "https://customer-2p3jflss4r4hmpnz.cloudflarestream.com";

src/js/mod.rs

@@ -7,12 +7,18 @@ pub mod wasp {
 
     #[wasm_bindgen(module = "/src/js/wasp-wrapper.js")]
     extern "C" {
-        pub type WaspHlsPlayer;
+        type WaspHlsPlayer;
 
         fn buildPlayer(videoElement: JsValue, config: JsValue) -> WaspHlsPlayer;
 
         #[wasm_bindgen(method)]
-        pub fn load(this: &WaspHlsPlayer, url: &str);
+        fn load(this: &WaspHlsPlayer, url: &str);
+        #[wasm_bindgen(method)]
+        fn dispose(this: &WaspHlsPlayer);
+        #[wasm_bindgen(method)]
+        fn addEventListener(this: &WaspHlsPlayer, event: &str, cb: &Closure<dyn Fn(String)>);
+        #[wasm_bindgen(method)]
+        fn stop(this: &WaspHlsPlayer);
     }
 
     #[derive(Serialize, Deserialize, Default)]
@@ -33,11 +39,35 @@ pub mod wasp {
         pub media_playlist_backoff_max: Option<f64>,
     }
 
-    impl WaspHlsPlayer {
+    pub struct WaspHlsPlayerW(WaspHlsPlayer);
+
+    impl WaspHlsPlayerW {
         pub fn new(video_element: &HtmlElement<Video>, config: Option<WaspHlsConfig>) -> Self {
             let video_raw: &JsValue = video_element.deref();
             let conf = serde_wasm_bindgen::to_value(&config).unwrap();
-            buildPlayer(video_raw.clone(), conf)
+            let wasp = buildPlayer(video_raw.clone(), conf);
+            Self(wasp)
+        }
+
+        pub fn load(&self, url: &str) {
+            self.0.load(url);
+        }
+
+        pub fn stop(&self) {
+            self.0.stop();
+        }
+
+        pub fn add_event_listener(&self, event: &str, cb: impl Fn(String) + 'static) {
+            let cb = Closure::new(cb);
+            self.0.addEventListener(event, &cb);
+            // move ownership to js GC
+            cb.forget();
+        }
+    }
+
+    impl Drop for WaspHlsPlayerW {
+        fn drop(&mut self) {
+            self.0.dispose();
         }
     }
 }

src/lib.rs

@@ -2,6 +2,7 @@ use cfg_if::cfg_if;
 pub mod app;
 pub mod canister;
 pub mod component;
+pub mod consts;
 pub mod error_template;
 pub mod fileserv;
 pub mod js;

src/main.rs

@@ -6,9 +6,9 @@ mod handlers {
         http::{header::HeaderMap, Request},
         response::{IntoResponse, Response},
     };
+    use hot_or_not_web_leptos_ssr::{app::App, state::server::AppState};
     use leptos::provide_context;
     use leptos_axum::handle_server_fns_with_context;
-    use hot_or_not_web_leptos_ssr::{app::App, state::server::AppState};
 
     pub async fn server_fn_handler(
         State(app_state): State<AppState>,
@@ -48,17 +48,14 @@ mod handlers {
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{
-        routing::{get, post},
-        Router,
-    };
+    use axum::{routing::get, Router};
     use handlers::*;
-    use leptos::*;
-    use leptos_axum::{generate_route_list, LeptosRoutes};
     use hot_or_not_web_leptos_ssr::app::*;
     use hot_or_not_web_leptos_ssr::fileserv::file_and_error_handler;
     use hot_or_not_web_leptos_ssr::state::canisters::Canisters;
     use hot_or_not_web_leptos_ssr::state::server::AppState;
+    use leptos::*;
+    use leptos_axum::{generate_route_list, LeptosRoutes};
 
     simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
 

src/page/err.rs

@@ -1,3 +1,5 @@
+use std::error::Error;
+
 use leptos::*;
 use leptos_router::*;
 
@@ -6,6 +8,25 @@ struct ServerErrParams {
     err: String,
 }
 
+#[macro_export]
+macro_rules! try_or_redirect {
+    ($e:expr) => {
+        match $e {
+            Ok(v) => v,
+            Err(e) => {
+                use $crate::page::err::failure_redirect;
+                failure_redirect(e);
+                return;
+            }
+        }
+    };
+}
+
+pub fn failure_redirect<E: Error>(err: E) {
+    let nav = use_navigate();
+    nav(&format!("/error?err={err}"), Default::default());
+}
+
 #[component]
 pub fn ServerErrorPage() -> impl IntoView {
     let params = use_query::<ServerErrParams>();
@@ -19,7 +40,7 @@ pub fn ServerErrorPage() -> impl IntoView {
     view! {
         <div>
             <h1>Server Error</h1>
-            <h3>{error()}</h3>
+            <h3>{error}</h3>
         </div>
     }
 }

src/page/post_view/error.rs

@@ -0,0 +1,12 @@
+use ic_agent::AgentError;
+use thiserror::Error;
+
+#[derive(Debug, Error)]
+pub enum PostViewError {
+    #[error("IC agent error {0}")]
+    Agent(#[from] AgentError),
+    #[error("Canister error {0}")]
+    Canister(String),
+    #[error("http fetch error {0}")]
+    HttpFetch(#[from] reqwest::Error),
+}