Skip to content

Commit

Permalink
Fix add post page
Browse files Browse the repository at this point in the history
  • Loading branch information
@The-DevBlog
The-DevBlog committed Feb 19, 2024
1 parent 8bec5e5 commit 6c509ed
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 42 deletions.
1 change: 1 addition & 0 deletions devblog/devblog/client/src/components/comment_add.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions devblog/devblog/client/src/components/comment_edit.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 0 additions & 2 deletions devblog/devblog/client/src/helpers.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
}

Expand Down
1 change: 0 additions & 1 deletion devblog/devblog/client/src/pages/insights.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ pub fn insights() -> Html {
<th>{"Username"}</th>
<th>{"Email"}</th>
<th>{"Subscribed"}</th>
<th>{"Delete"}</th>
</tr>
</thead>
<tbody>
Expand Down
139 changes: 100 additions & 39 deletions devblog/devblog/client/src/pages/post_add.rs
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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();
Expand All @@ -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| {
Expand All @@ -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}>
Expand All @@ -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>

Expand All @@ -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"}
Expand All @@ -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>
Expand Down

0 comments on commit 6c509ed

Please sign in to comment.