Fix add post page

Author: The-DevBlog

devblog/devblog/client/src/components/comment_add.rs

@@ -41,6 +41,7 @@ pub fn add_comment(props: &Props) -> Html {
         Callback::from(move |e: SubmitEvent| {
             e.prevent_default();
             let hdrs = helpers::create_auth_header(&store.token);
+            hdrs.append("content-type", "application/json");
 
             let new_comment = CommentModel::new(
                 post_id,

devblog/devblog/client/src/components/comment_edit.rs

@@ -51,6 +51,7 @@ pub fn edit_comment(props: &Props) -> Html {
             let on_save = on_save.clone();
             let body = Some(helpers::to_jsvalue(content.deref().clone()));
             let hdrs = helpers::create_auth_header(&store.token);
+            hdrs.append("content-type", "application/json");
 
             wasm_bindgen_futures::spawn_local(async move {
                 let response = Api::EditComment(id)

devblog/devblog/client/src/helpers.rs

@@ -2,7 +2,6 @@ use crate::store::Store;
 use crate::{helpers, Api};
 use crate::{router::Route, User, UserField};
 use gloo::console::log;
-// use gloo::utils::format::JsValueSerdeExt;
 use gloo_net::http::{Headers, Method, Response};
 use serde::de::DeserializeOwned;
 use serde::Serialize;
@@ -108,7 +107,6 @@ pub fn create_auth_header(token: &String) -> Headers {
     let auth = format!("Bearer {}", token);
     let hdrs = Headers::new();
     hdrs.append("Authorization", &auth);
-    hdrs.append("content-type", "application/json");
     hdrs
 }
 

devblog/devblog/client/src/pages/insights.rs

@@ -42,7 +42,6 @@ pub fn insights() -> Html {
                             <th>{"Username"}</th>
                             <th>{"Email"}</th>
                             <th>{"Subscribed"}</th>
-                            <th>{"Delete"}</th>
                         </tr>
                     </thead>
                     <tbody>

devblog/devblog/client/src/pages/post_add.rs

@@ -1,10 +1,8 @@
-use std::{fs::File, ops::Deref};
-
 use crate::{helpers, store::Store, Api};
 use gloo_net::http::Method;
-// use gloo::file::File;
+use std::ops::Deref;
 use stylist::{css, Style};
-use web_sys::HtmlTextAreaElement;
+use web_sys::{FileList, FormData, HtmlInputElement, HtmlTextAreaElement};
 use yew::prelude::*;
 use yewdux::use_store_value;
 
@@ -13,19 +11,17 @@ const STYLE: &str = include_str!("styles/postAdd.css");
 #[function_component(AddPost)]
 pub fn add_post() -> Html {
     let style = Style::new(STYLE).unwrap();
+    let files: UseStateHandle<Option<FileList>> = use_state(|| None);
     let description = use_state(|| String::default());
     let char_count = use_state(|| 0);
-    // let files = use_state(|| vec![File::open("Hello.txt").unwrap()]);
     let loading = use_state(|| false);
     let devblog = use_state(|| false);
-    let devblog_status = use_state(|| 0);
-    let devblog_err = use_state(|| String::default());
+    let devblog_status = use_state(|| String::default());
     let mastodon = use_state(|| false);
-    let mastodon_status = use_state(|| 0);
-    let mastodon_err = use_state(|| String::default());
+    let mastodon_status = use_state(|| String::default());
     let discord = use_state(|| false);
-    let discord_status = use_state(|| 0);
-    let discord_err = use_state(|| String::default());
+    let discord_status = use_state(|| String::default());
+    let err = use_state(|| String::default());
     let store = use_store_value::<Store>();
 
     let char_count_clone = char_count.clone();
@@ -34,61 +30,108 @@ pub fn add_post() -> Html {
         char_count_clone.set(description_clone.len());
     });
 
+    // create post
     let onsubmit = {
         let token = store.token.clone();
+        let description = description.clone();
+        let err = err.clone();
+        let files = files.clone();
+        let loading = loading.clone();
+
         let discord = *discord.clone();
+        let discord_status = discord_status.clone();
+
         let mastodon = *mastodon.clone();
+        let mastodon_status = mastodon_status.clone();
+
         let devblog = *devblog.clone();
+        let devblog_status = devblog_status.clone();
+
         Callback::from(move |e: SubmitEvent| {
             e.prevent_default();
             loading.set(true);
+            let loading = loading.clone();
+            let err = err.clone();
+
+            let discord_status = discord_status.clone();
+            let mastodon_status = mastodon_status.clone();
+            let devblog_status = devblog_status.clone();
+
             let hdrs = helpers::create_auth_header(&token);
+            let form_data = FormData::new().unwrap();
+            let _ = form_data.append_with_str("description", &description);
+            let _ = form_data.append_with_str("postToDiscord", &discord.to_string());
+            let _ = form_data.append_with_str("postToMastodon", &mastodon.to_string());
+            let _ = form_data.append_with_str("postToDevBlog", &devblog.to_string());
+
+            // add imgs to FileList
+            if let Some(f) = files.deref() {
+                for i in 0..f.length() {
+                    if let Some(file) = f.item(i) {
+                        let _ = form_data.append_with_blob("files", &file).unwrap();
+                    }
+                }
+            }
 
             wasm_bindgen_futures::spawn_local(async move {
-                let response = Api::AddPost.fetch(Some(hdrs), None, Method::POST).await;
+                let response = Api::AddPost
+                    .fetch(Some(hdrs), Some(form_data.into()), Method::POST)
+                    .await;
 
                 if let Some(res) = response {
-                    if discord {}
-                    if mastodon {}
-                    if devblog {}
-                };
+                    let status = format!("{}: {}", res.status(), res.status_text());
+
+                    if discord {
+                        discord_status.set(status.clone());
+                    }
+                    if mastodon {
+                        mastodon_status.set(status.clone());
+                    }
+                    if devblog {
+                        devblog_status.set(status);
+                    }
+                } else {
+                    err.set("Failed to send request.".to_string());
+                }
+
+                loading.set(false);
             });
         })
     };
 
-    let upload_status = |platform: String, upload: bool, status: i32, err: String| -> Html {
+    // status of platform upload
+    let upload_status = |platform: String, upload: bool, status: String| -> Html {
         html! {
-            <h4 class={match upload {true => css!("color: green;"), false => css!("color: red;")}}>{platform}{" Upload Status: "}
+            <h4 class={match upload {true => css!("display: block;"), false => css!("display: none;")}}>{platform}{" Upload Status: "}
                 <span class={if (status).to_string().starts_with('2') {css!("color: green;")} else {css!("color: red;")}}>
-                    {status}
+                    {status}{err.deref()}
                 </span>
-                if status != 200 {
-                    <p>{err}</p>
-                }
             </h4>
         }
     };
 
-    let upload_to = |platform: String, upload: bool, callback: Callback<Event>| -> Html {
+    // checkboxes for platform upload selection
+    let upload_to = |platform: String, platform_state: UseStateHandle<bool>| -> Html {
+        let on_checkbox_change = {
+            Callback::from(move |e: Event| {
+                let checkbox = e.target_dyn_into::<HtmlInputElement>().unwrap();
+                platform_state.set(checkbox.checked());
+            })
+        };
+
         html! {
           <li>
               <label>
                   <input
                   type="checkbox"
-                  checked={upload}
-                  onchange={callback}/>
+                  onchange={on_checkbox_change}/>
                   {platform}
               </label>
           </li>
         }
     };
 
-    let update_checkbox = {
-        Callback::from(move |e| {
-            // let input = e.target_dyn_into::<HtmlElement>().unwrap();
-        })
-    };
-
+    // update the character limits
     let update_char_count = {
         let description = description.clone();
         Callback::from(move |e: InputEvent| {
@@ -97,6 +140,18 @@ pub fn add_post() -> Html {
         })
     };
 
+    // set files for upload
+    let update_imgs = {
+        let files = files.clone();
+        Callback::from(move |e: Event| {
+            let input = e.target_dyn_into::<HtmlInputElement>();
+            if let Some(f) = input {
+                let selected_files = f.files().unwrap();
+                files.set(Some(selected_files));
+            }
+        })
+    };
+
     html! {
         if store.admin {
             <section class={style}>
@@ -107,18 +162,20 @@ pub fn add_post() -> Html {
                             // PLATFORM UPLOAD OPTIONS
                             <p>{"Upload to:"}</p>
                             <ul>
-                                {upload_to("Discord".to_string(), *discord, update_checkbox.clone())}
-                                {upload_to("Mastodon".to_string(), *mastodon, update_checkbox.clone())}
-                                {upload_to("DevBlog".to_string(), *devblog, update_checkbox)}
+                                {upload_to("Discord".to_string(), discord.clone())}
+                                {upload_to("Mastodon".to_string(), mastodon.clone())}
+                                {upload_to("DevBlog".to_string(), devblog.clone())}
                             </ul>
 
-                            <span class="loader">{"Loading..."}</span>
+                            if *loading {
+                                <span class="loader">{"Loading..."}</span>
+                            }
 
                             // UPLOAD STATUSES
                             <div class="upload-status">
-                                {upload_status("Discord".to_string(), *discord.clone(), *discord_status, discord_err.deref().clone())}
-                                {upload_status("Mastodon".to_string(), *mastodon.clone(), *mastodon_status, mastodon_err.deref().clone())}
-                                {upload_status("DevBlog".to_string(), *devblog.clone(), *devblog_status, devblog_err.deref().clone())}
+                                {upload_status("Discord".to_string(), *discord.clone(), discord_status.deref().clone())}
+                                {upload_status("Mastodon".to_string(), *mastodon.clone(), mastodon_status.deref().clone())}
+                                {upload_status("DevBlog".to_string(), *devblog.clone(), devblog_status.deref().clone())}
                             </div>
                         </div>
 
@@ -127,7 +184,8 @@ pub fn add_post() -> Html {
                             <label>{"Image"}
                                 <input type="file"
                                     required=true
-                                    multiple=true/>
+                                    multiple=true
+                                    onchange={update_imgs}/>
                             </label>
 
                             <label>{"Description"}
@@ -141,6 +199,9 @@ pub fn add_post() -> Html {
                             <p>{"Preview:"}</p>
                             <div class="post-preview">
                                 <span>{"preview content:"}</span>
+                                <p>
+                                    // {parser}
+                                </p>
                             </div>
                             <button>{"Create Post"}</button>
                         </div>