update

Author: davidkna

.cargo/config.toml

@@ -0,0 +1,2 @@
+[build]
+target = "wasm32-unknown-unknown"

Cargo.toml

@@ -11,15 +11,17 @@ codegen-units = 1
 lto = true
 
 [dependencies]
+anyhow = "1.0"
 console_error_panic_hook = "0.1.6"
 js-sys = "0.3.25"
 log = "0.4"
+http = "0.2"
 serde = "1"
 serde_derive = "1"
 serde_json = "1"
-serde_urlencoded = "0.6.1"
-strum = "0.17"
-strum_macros = "0.17"
+serde_urlencoded = "0.7.0"
+strum = "0.20"
+strum_macros = "0.20.1"
 wasm-bindgen = "0.2.58"
 wasm-bindgen-futures = "0.4.18"
 wasm-logger = "0.2"

package.json

@@ -23,13 +23,13 @@
   },
   "devDependencies": {
     "@wasm-tool/wasm-pack-plugin": "^1.3.1",
-    "copy-webpack-plugin": "^6.2.1",
-    "cross-env": "^7.0.2",
+    "copy-webpack-plugin": "^7.0.0",
+    "cross-env": "^7.0.3",
     "css-loader": "^5.0.0",
     "style-loader": "^2.0.0",
     "wasm-pack": "^0.9.1",
-    "webpack": "^5.2.0",
+    "webpack": "^5.11.0",
     "webpack-cli": "^4.1.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^4.0.0-beta.0"
   }
 }

src/app.rs

@@ -1,25 +1,58 @@
-use crate::autocomplete_service::AutocompleteService;
+use http::{Request, Response};
 use serde_derive::{Deserialize, Serialize};
+use serde_json::value::Value;
 use serde_urlencoded;
 use yew::{
     events::InputData,
-    format::Json,
+    format::{Json, Nothing},
     html,
-    services::storage::{Area, StorageService},
+    services::{
+        fetch::{FetchOptions, FetchService, FetchTask},
+        storage::{Area, StorageService},
+    },
     Component, ComponentLink, Href, Html, Renderable, ShouldRender,
 };
 
 pub struct App {
     suggestions: Vec<String>,
     value: String,
-    autocomplete_service: AutocompleteService,
+    autcomplete_fetcher: Option<FetchTask>,
     link: ComponentLink<Self>,
+    api_url: String,
 }
 
 pub enum Msg {
     Input(String),
     CompleteUpdate(Vec<String>),
-    Nop,
+    Noop,
+}
+
+struct AutocompleteItem {
+    name: String,
+    url: String,
+}
+
+#[derive(Serialize)]
+struct AutocompleteRequest {
+    format: &'static str,
+    action: &'static str,
+    search: String,
+    redirects: &'static str,
+    limit: usize,
+    origin: &'static str,
+}
+
+impl AutocompleteRequest {
+    fn new(search_term: &str) -> Self {
+        Self {
+            format: "json",
+            action: "opensearch",
+            search: search_term.into(),
+            limit: 10,
+            origin: "*",
+            redirects: "resolve",
+        }
+    }
 }
 
 impl Component for App {
@@ -30,9 +63,8 @@ impl Component for App {
         Self {
             suggestions: Vec::new(),
             value: "".into(),
-            autocomplete_service: AutocompleteService::new(
-                "https://en.wikipedia.org/w/api.php".into(),
-            ),
+            autcomplete_fetcher: None,
+            api_url: "https://en.wikipedia.org/w/api.php".into(),
             link,
         }
     }
@@ -41,8 +73,31 @@ impl Component for App {
         match msg {
             Msg::Input(text) => {
                 self.suggestions = Vec::new();
-                self.autocomplete_service
-                    .get_suggestions(&text, self.link.callback(Msg::CompleteUpdate));
+                let query = AutocompleteRequest::new(&text);
+                let query = serde_urlencoded::to_string(query).unwrap();
+                let url = format!("{}?{}", self.api_url, query);
+                let request = Request::get(url).body(Nothing).unwrap();
+                let task = FetchService::fetch(
+                    request,
+                    self.link
+                        .callback(|response: Response<Json<Result<Value, anyhow::Error>>>| {
+                            if let (meta, Json(Ok(body))) = response.into_parts() {
+                                if meta.status.is_success() {
+                                    return body[1]
+                                        .as_array()
+                                        .map(|list| {
+                                            list.iter()
+                                                .filter_map(|i| i.as_str().map(|s| s.to_string()))
+                                                .collect()
+                                        })
+                                        .map(Msg::CompleteUpdate)
+                                        .unwrap_or(Msg::Noop);
+                                }
+                            }
+                            Msg::Noop
+                        }),
+                );
+                self.autcomplete_fetcher = task.ok();
                 self.value = text;
             }
             Msg::CompleteUpdate(list) => {

src/autocomplete_service.rs

@@ -1,7 +1,6 @@
 #![recursion_limit = "512"]
 
 mod app;
-mod autocomplete_service;
 mod utils;
 
 use wasm_bindgen::prelude::*;

src/lib.rs

@@ -6,7 +6,7 @@ const distPath = path.resolve(__dirname, "dist");
 module.exports = (env, argv) => {
   return {
     devServer: {
-      contentBase: distPath,
+      static: [distPath],
       compress: argv.mode === "production",
       port: 8000,
     },