tvl-depot/corp/rih/frontend/src/main.rs

use fuzzy_matcher::skim::SkimMatcherV2;
use fuzzy_matcher::FuzzyMatcher;
use gloo::console;
use gloo::history::{BrowserHistory, History};
use gloo::net::http;
use gloo::storage::{LocalStorage, Storage};
use rand::seq::IteratorRandom;
use rand::thread_rng;
use serde::{Deserialize, Serialize};
use static_markdown::markdown;
use std::collections::BTreeSet;
use uuid::Uuid;
use wasm_bindgen::closure::Closure;
use wasm_bindgen::{JsCast, JsValue};
use web_sys::{HtmlInputElement, HtmlTextAreaElement, KeyboardEvent};
use yew::html::Scope;
use yew::prelude::*;
use yew_router::prelude::*;

/// Form submission is protected with a captcha. The development
/// version of the captcha does not do domain checking and works on
/// `localhost` as well.
#[cfg(debug_assertions)]
const CAPTCHA_KEY: &'static str = "ysc1_K7iOi3FSmsyO8pZGu8Im2iQClCtPsVx7jSRyhyCV435a732c";

#[cfg(not(debug_assertions))]
const CAPTCHA_KEY: &'static str = "ysc1_a3LVlaDRDMwU8CLSZ0WKENTI2exyOxz5J2c6x28P5339d410";

// Form data is submitted to different endpoints in dev/prod.
#[cfg(debug_assertions)]
const SUBMIT_URL: &'static str = "http://localhost:9090/submit";

#[cfg(not(debug_assertions))]
const SUBMIT_URL: &'static str = "https://api.russiaishiring.com/submit";

/// This code ends up being compiled for the native and for the
/// webassembly architectures during the build & test process.
/// However, the `rust_iso3166` crate exposes a different API (!)
/// based on the platform.
///
/// This trait acts as a platform-independent wrapper for the crate.
///
/// Upstream issue: https://github.com/rust-iso/rust_iso3166/issues/7
trait CountryCodeAccess {
    fn country_alpha2(&self) -> String;
    fn country_alpha3(&self) -> String;
    fn country_name(&self) -> String;
}

#[cfg(target_arch = "wasm32")]
impl CountryCodeAccess for rust_iso3166::CountryCode {
    fn country_alpha2(&self) -> String {
        self.alpha2()
    }

    fn country_alpha3(&self) -> String {
        self.alpha3()
    }

    fn country_name(&self) -> String {
        self.name()
    }
}

#[cfg(not(target_arch = "wasm32"))]
impl CountryCodeAccess for rust_iso3166::CountryCode {
    fn country_alpha2(&self) -> String {
        self.alpha2.to_string()
    }

    fn country_alpha3(&self) -> String {
        self.alpha3.to_string()
    }

    fn country_name(&self) -> String {
        self.name.to_string()
    }
}

const VISTA_URL: &'static str = "https://vista-immigration.ru/";

#[derive(Debug, Clone, Copy, PartialEq, Routable)]
enum Route {
    #[at("/")]
    Home,
    #[at("/privacy-policy")]
    PrivacyPolicy,
    #[not_found]
    #[at("/404")]
    NotFound,
}

/// Represents a single record as filled in by a user. This is the
/// primary data structure we want to populate and persist somewhere.
#[derive(Clone, Default, Debug, Deserialize, Serialize)]
struct Record {
    // Record-specific metadata
    uuid: Uuid,

    // Personal information
    name: String,
    email: String,
    citizenship: String, // TODO
    personal_details: String,

    // Job information
    position: String,
    technologies: BTreeSet<String>,
    job_details: String,
    work_background: String,
}

impl Record {
    fn is_complete(&self) -> bool {
        !self.name.is_empty()
            && !self.email.is_empty()
            && !self.citizenship.is_empty()
            && !self.position.is_empty()
            && !self.technologies.is_empty()
    }
}

struct App {
    // The record being populated.
    record: Record,

    // Is the citizenship input focused?
    citizenship_focus: bool,

    // Current query in the citizenship field.
    citizenship_query: String,

    // History handler.
    history: BrowserHistory,

    // Captcha token, if the captcha has been solved.
    captcha_token: Option<String>,

    // Captcha callback closure which needs to be kept alive for the
    // lifecycle of the app.
    captcha_callback: Closure<dyn FnMut(String)>,

    // Has data been submitted already by this user?
    submitted: bool,
}

#[derive(Clone, Debug)]
enum Msg {
    NoOp,
    AddTechnology(String),
    RemoveTechnology(String),

    FocusCitizenship,
    BlurCitizenship,
    QueryCitizenship(String),
    SetCitizenship(String),

    SetName(String),
    SetEmail(String),
    SetPersonalDetails(String),
    SetPosition(String),
    SetJobDetails(String),
    SetWorkBackground(String),

    CaptchaSolved(String),
    Submit,
}

/// Callback handler for adding a technology.
fn add_tech(e: KeyboardEvent) -> Msg {
    if e.key_code() != 13 {
        return Msg::NoOp;
    }

    let input = e.target_unchecked_into::<HtmlInputElement>();
    let tech = input.value();
    input.set_value("");
    Msg::AddTechnology(tech)
}

fn select_country_enter(event: KeyboardEvent) -> Msg {
    if event.key_code() != 13 {
        return Msg::NoOp;
    }

    let input = event.target_unchecked_into::<HtmlInputElement>();
    if let Some(country) = fuzzy_country_matches(&input.value()).next() {
        input.set_value(&country.country_name());
        return Msg::SetCitizenship(country.country_name());
    }

    Msg::NoOp
}

fn fuzzy_country_matches(query: &str) -> Box<dyn Iterator<Item = rust_iso3166::CountryCode> + '_> {
    if query.is_empty() {
        let rng = &mut thread_rng();
        return Box::new(
            rust_iso3166::ALL
                .iter()
                .choose_multiple(rng, 5)
                .into_iter()
                .map(Clone::clone),
        );
    }

    let matcher = SkimMatcherV2::default();
    let query = query.to_lowercase();
    let query_len = query.len();

    let mut results: Vec<_> = rust_iso3166::ALL
        .iter()
        .filter_map(|code| {
            let mut score = None;
            // Prioritize exact matches for country codes if query length <= 3
            if query_len <= 3 {
                if code.country_alpha2().eq_ignore_ascii_case(&query)
                    || code.country_alpha3().eq_ignore_ascii_case(&query)
                {
                    score = Some(100);
                }
            }
            // If no exact match, do a fuzzy match
            if score.is_none() {
                score = matcher.fuzzy_match(&code.country_name().to_lowercase(), &query);
            }

            score.map(|score| (score, code))
        })
        .collect();

    // Sort by score in descending order
    results.sort_by(|a, b| b.0.cmp(&a.0));

    // Get iterator over the best matches
    Box::new(results.into_iter().map(|(_score, code)| *code))
}

// Callback for an input element's value being mapped straight into a
// message.
fn input_message(e: InputEvent, msg: fn(String) -> Msg) -> Msg {
    let input = e.target_unchecked_into::<HtmlInputElement>();
    msg(input.value())
}

// Callback for a text area's value being mapped straight into a
// message.
fn textarea_message(e: InputEvent, msg: fn(String) -> Msg) -> Msg {
    let textarea = e.target_unchecked_into::<HtmlTextAreaElement>();
    msg(textarea.value())
}

fn schedule_blur(event: FocusEvent, link: Scope<App>) -> Msg {
    let input = event.target_unchecked_into::<HtmlInputElement>();
    let closure = Closure::once_into_js(Box::new(move || {
        if let Some(app) = link.get_component() {
            input.set_value(&app.record.citizenship);
        }

        link.send_message(Msg::BlurCitizenship);
    }) as Box<dyn FnOnce()>);

    let window = web_sys::window().expect("no global `window` exists");
    let _ =
        window.set_timeout_with_callback_and_timeout_and_arguments_0(closure.unchecked_ref(), 100);

    Msg::NoOp
}

/// Creates an input field for citizenship selection with suggestions.
fn citizenship_input(app: &App, link: &Scope<App>) -> Html {
    let dropdown_classes = if app.citizenship_focus {
        "dropdown-menu show"
    } else {
        "dropdown-menu"
    };

    let choices = fuzzy_country_matches(&app.citizenship_query).map(|country| {
        let msg = Msg::SetCitizenship(country.country_name());
        html! {
            <li><a class="dropdown-item" onclick={link.callback(move |_| msg.clone())}>{country.country_name()}</a></li>
        }
    });

    let blur_link = link.clone();
    html! {
      <div class="dropdown">
        <input type="text" class="form-control" id="citizenship" aria-describedby="citizenshipHelp"
            autocomplete="off"
            oninput={link.callback(|event| input_message(event, Msg::QueryCitizenship))}
            onkeypress={link.callback(select_country_enter)}
            onfocus={link.callback(|_| Msg::FocusCitizenship)}
            onblur={link.callback(move |event| schedule_blur(event, blur_link.clone()))} />
            <ul class={dropdown_classes} style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 40px);" data-popper-placement="bottom-start">
          { choices.collect::<Html>() }
        </ul>
      </div>
    }
}

/// Creates a list of technologies which can be deleted again by clicking them.
fn render_technologies(link: &Scope<App>, technologies: &BTreeSet<String>) -> Html {
    if technologies.is_empty() {
        return html! {};
    }

    let items = technologies.iter().map(|tech| {
        let msg: Msg = Msg::RemoveTechnology(tech.to_string());
        html! {
            <>
              <span class="btn btn-secondary btn-sm"
                onclick={link.callback(move |_| msg.clone())}>
                {tech}
                <span class="mx-auto text-center text-black">{" x"}</span>
              </span>{" "}
            </>
        }
    });
    html! {
        <div class="p-1">
            { items.collect::<Html>() }
        </div>
    }
}

/// Submit the collected data to the backend service.
async fn submit_data(captcha_token: &str, record: &Record) -> bool {
    let response = http::Request::get(SUBMIT_URL)
        .method(http::Method::POST)
        .json(&serde_json::json!({
            "captcha_token": captcha_token,
            "record": record,
        }))
        .expect("serialising a serde_json::Value can not fail")
        .send()
        .await
        .unwrap();

    // currently there is nothing we can actually do with the response
    // here, but we should add some way to communicate back some
    // server errors etc., even if the whole thing should be as
    // forgiving as possible.
    response.ok()
}

/// Handle the submit event, if all data was successfully collected.
fn handle_submit(app: &App, _link: Scope<App>) -> Msg {
    let token = app.captcha_token.as_ref().unwrap().clone();
    let record = app.record.clone();

    wasm_bindgen_futures::spawn_local(async move {
        if !submit_data(&token, &record).await {
            console::warn!("failed to submit data for some reason");
        } else {
            console::log!("submitted data successfully");
        }
    });

    Msg::NoOp
}

impl Component for App {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        App {
            record: LocalStorage::get("record").unwrap_or_else(|_| {
                let mut new_record = Record::default();
                new_record.uuid = Uuid::new_v4();
                new_record
            }),
            citizenship_focus: false,
            citizenship_query: String::default(),
            history: BrowserHistory::default(),
            captcha_token: None,
            captcha_callback: {
                let link = ctx.link().clone();
                Closure::wrap(Box::new(move |val| {
                    link.send_message(Msg::CaptchaSolved(val));
                }))
            },
            submitted: false,
        }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        console::log!("handling ", format!("{:?}", msg));
        let (state_change, view_change) = match msg {
            Msg::NoOp => (false, false),

            Msg::AddTechnology(tech) => {
                console::log!("adding technology", &tech);
                self.record.technologies.insert(tech);
                (true, true)
            }

            Msg::RemoveTechnology(tech) => {
                console::log!("removing technology ", &tech);
                self.record.technologies.remove(&tech);
                (true, true)
            }

            Msg::QueryCitizenship(query) => {
                self.citizenship_query = query;
                (false, true)
            }

            Msg::FocusCitizenship => {
                self.citizenship_focus = true;
                (false, true)
            }

            Msg::BlurCitizenship => {
                self.citizenship_focus = false;
                (false, true)
            }

            Msg::SetCitizenship(country) => {
                self.record.citizenship = country;
                (true, false)
            }

            Msg::SetName(name) => {
                self.record.name = name;
                (true, false)
            }

            Msg::SetEmail(email) => {
                self.record.email = email;
                (true, false)
            }

            Msg::SetPersonalDetails(details) => {
                self.record.personal_details = details;
                (true, false)
            }

            Msg::SetPosition(position) => {
                self.record.position = position;
                (true, false)
            }

            Msg::SetJobDetails(details) => {
                self.record.job_details = details;
                (true, false)
            }

            Msg::SetWorkBackground(background) => {
                self.record.work_background = background;
                (true, false)
            }

            Msg::CaptchaSolved(token) => {
                self.captcha_token = Some(token);
                (false, true)
            }

            Msg::Submit => {
                if self.record.is_complete() && self.captcha_token.is_some() {
                    self.submitted = true;
                    handle_submit(self, ctx.link().clone());
                    (false, true)
                } else {
                    console::warn!("submitted data, but form or captcha was not ready");
                    (false, false)
                }
            }
        };

        if state_change {
            if let Err(err) = LocalStorage::set("record", &self.record) {
                console::warn!(
                    "failed to persist record in local storage: ",
                    err.to_string()
                );
            }
        }

        view_change
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let link = ctx.link();
        let location = self.history.location();
        let route = Route::recognize(location.path()).unwrap_or(Route::NotFound);

        match route {
            Route::Home => include!("home.html"),
            Route::PrivacyPolicy => html! {
                <main>{include!("privacy-policy.md")}</main>
            },
            Route::NotFound => todo!(),
        }
    }

    fn rendered(&mut self, _: &Context<Self>, first_render: bool) {
        if first_render {
            let func =
                js_sys::Function::new_with_args("key, callback", "captchaOnload(key, callback)");
            let _ = func.call2(
                &JsValue::NULL,
                &JsValue::from_str(CAPTCHA_KEY),
                &self.captcha_callback.as_ref().unchecked_ref(),
            );
        }
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}