From 5d1b71b6774af93d9928419711410387af3f398b Mon Sep 17 00:00:00 2001
From: Kenzi Connor <git@knz.ai>
Date: Thu, 18 Jul 2024 17:36:33 -0700
Subject: [PATCH] some refact

---
 .rusty-hook.toml |  1 -
 src/wasm/main.rs | 91 +++++++++++++++++++-----------------------------
 2 files changed, 36 insertions(+), 56 deletions(-)

diff --git a/.rusty-hook.toml b/.rusty-hook.toml
index d9ae83b..2029064 100644
--- a/.rusty-hook.toml
+++ b/.rusty-hook.toml
@@ -1,7 +1,6 @@
 [hooks]
 pre-commit = "cargo test && cargo fmt"
 pre-push = "cargo check && cargo fmt -- --check"
-post-commit = "echo yay"
 
 [logging]
 verbose = true
diff --git a/src/wasm/main.rs b/src/wasm/main.rs
index 4b75a5a..e9ed98f 100644
--- a/src/wasm/main.rs
+++ b/src/wasm/main.rs
@@ -1,35 +1,31 @@
 #![cfg(feature = "wasm")]
-extern crate base64;
 use std::collections::HashMap;
 
 use base64::engine::general_purpose::STANDARD;
 use base64::Engine;
 use gloo::file::callbacks::FileReader;
-use gloo::file::File;
-use web_sys::{DragEvent, Event, FileList, HtmlInputElement};
-use yew::html::TargetCast;
-use yew::{html, NodeRef, Callback, Component, Context, Html};
+use web_sys::HtmlInputElement;
+use yew::prelude::*;
 
 use cega::color::palette::palette_from_abbr;
 use cega::image::Image;
 use cega::parser::ParserType;
 use cega::png;
 
-struct FileDetails {
+pub struct FileDetails {
     name: String,
     file_type: String,
     data: Vec<u8>,
 }
 
 pub enum Msg {
-    Loaded(String, String, Vec<u8>),
-    Submit,
+    Loaded(FileDetails),
+    Submit(Event),
 }
 
 pub struct App {
     readers: HashMap<String, FileReader>,
     files: Vec<FileDetails>,
-    file_browser: NodeRef,
 }
 
 impl Component for App {
@@ -38,7 +34,6 @@ impl Component for App {
 
     fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            file_browser: NodeRef::default(),
             readers: HashMap::default(),
             files: Vec::default(),
         }
@@ -46,45 +41,40 @@ impl Component for App {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::Loaded(file_name, file_type, data) => {
-                self.files.push(FileDetails {
-                    data,
-                    file_type,
-                    name: file_name.clone(),
-                });
-                self.readers.remove(&file_name);
-                true
+            Msg::Loaded(mut file) => {
+                self.readers.remove(&file.name);
+                if !file.file_type.contains("image") {
+                    let image = Image::new(&file.data, 320, ParserType::CGA);
+                    let palette = palette_from_abbr("cga0");
+                    let mut bytes: Vec<u8> = Vec::new();
+                    let _ = png::write_to(&mut bytes, image.data(), palette.clone());
+                    file.data = bytes;
+                    file.name += ".png";
+                }
+                self.files.push(file);
             }
-            Msg::Submit => {
-                let el = self.file_browser.cast::<HtmlInputElement>().unwrap();
-                if let Some(files) = el.files() {
-                    for file in js_sys::try_iter(&files)
-                        .unwrap()
-                        .unwrap()
-                        .map(|v| web_sys::File::from(v.unwrap()))
-                        .map(File::from)
-                    {
-                        let file_name = file.name();
+            Msg::Submit(e) => {
+                let input: HtmlInputElement = e.target_unchecked_into();
+                if let Some(files) = input.files() {
+                    for file in gloo::file::FileList::from(files).iter() {
+                        let link = ctx.link().clone();
+                        let name = file.name().clone();
                         let file_type = file.raw_mime_type();
-
                         let task = {
-                            let link = ctx.link().clone();
-                            let file_name = file_name.clone();
-
                             gloo::file::callbacks::read_as_bytes(&file, move |res| {
-                                link.send_message(Msg::Loaded(
-                                    file_name,
+                                link.send_message(Msg::Loaded(FileDetails {
+                                    data: res.expect("failed to read file"),
                                     file_type,
-                                    res.expect("failed to read file"),
-                                ))
+                                    name,
+                                }))
                             })
                         };
-                        self.readers.insert(file_name, task);
+                        self.readers.insert(file.name(), task);
                     }
                 }
-                true
             }
         }
+        true
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
@@ -97,9 +87,8 @@ impl Component for App {
                     id="file-upload"
                     type="file"
                     accept="image/*,.bin,.cga,.ega"
-                    multiple={true}
-                    ref={&self.file_browser}
-                    onchange={ctx.link().callback(|_| Msg::Submit)}
+                    multiple={false}
+                    onchange={ctx.link().callback(Msg::Submit)}
                 />
                 <div id="preview-area">
                     { for self.files.iter().map(Self::view_file) }
@@ -111,23 +100,15 @@ impl Component for App {
 
 impl App {
     fn view_file(file: &FileDetails) -> Html {
-        let src = if file.file_type.contains("image") {
-            format!(
-                "data:{};base64,{}",
-                file.file_type,
-                STANDARD.encode(&file.data)
-            )
-        } else {
-            let image = Image::new(&file.data, 320, ParserType::CGA);
-            let palette = palette_from_abbr("cga0");
-            let mut bytes: Vec<u8> = Vec::new();
-            let _ = png::write_to(&mut bytes, image.data(), palette.clone());
-            format!("data:image/png;base64,{}", STANDARD.encode(bytes))
-        };
+        let src = format!(
+            "data:{};base64,{}",
+            file.file_type,
+            STANDARD.encode(&file.data)
+        );
 
         html! {
             <div class="preview-tile">
-                <p class="preview-name">{ format!("{}", file.name) }</p>
+                <p class="preview-name">{ &file.name }</p>
                 <div class="preview-media">
                     <img src={src} />
                 </div>