add footer

Author: The-DevBlog

devblog/devblog/client/src/api.rs

@@ -1,6 +1,5 @@
 use gloo::console::log;
 use gloo_net::http::{Headers, Method, RequestBuilder, Response};
-// use serde_json::to_string_pretty;
 use wasm_bindgen::JsValue;
 
 const URL: &str = "https://localhost:44482/api/";
@@ -12,6 +11,7 @@ pub enum Api {
     GetPostsCount,
     GetPagesCount,
     GetUsers,
+    GetCurrentUser,
     SignIn,
     SignUp,
 }
@@ -53,6 +53,7 @@ impl Api {
             Api::GetPostsCount => format!("{}posts/countPosts", URL),
             Api::GetPagesCount => format!("{}posts/countPages", URL),
             Api::GetUsers => format!("{}accounts", URL),
+            Api::GetCurrentUser => format!("{}accounts/user", URL),
             Api::SignIn => format!("{}accounts/signin", URL),
             Api::SignUp => format!("{}accounts/signup", URL),
         }

devblog/devblog/client/src/components/footer.rs

@@ -0,0 +1,23 @@
+use crate::store::Store;
+use stylist::Style;
+use yew::{function_component, html, Html};
+use yewdux::prelude::*;
+
+const STYLE: &str = include_str!("styles/footer.css");
+
+#[function_component(Footer)]
+pub fn footer() -> Html {
+    let style = Style::new(STYLE).unwrap();
+    let store = use_store_value::<Store>();
+
+    html! {
+        <div class={style}>
+            <div class="footer">
+                // <DeleteAccount />
+                // {loggedIn &&
+                    <span>{"Welcome "}{store.username.clone()}</span>
+                // }
+            </div>
+        </div>
+    }
+}

devblog/devblog/client/src/components/mod.rs

@@ -1,4 +1,5 @@
 pub mod comment;
+pub mod footer;
 pub mod items;
 pub mod navbar;
 pub mod pager;

devblog/devblog/client/src/components/navbar.rs

@@ -24,6 +24,7 @@ pub fn navbar() -> Html {
                     <Link<Route> to={Route::AddPost}>{"AddPost"}</Link<Route>>
                     <Link<Route> to={Route::About}>{"About"}</Link<Route>>
                     <Link<Route> to={Route::Insights}>{"Insights"}</Link<Route>>
+                    <Link<Route> to={Route::Account}>{"Account"}</Link<Route>>
                     <Link<Route> to={Route::SignIn}>{"SignIn"}</Link<Route>>
                     <Link<Route> to={Route::SignOut}>{"SignOut"}</Link<Route>>
                     <Link<Route> to={Route::SignUp}>{"SignUp"}</Link<Route>>

devblog/devblog/client/src/components/styles/footer.css

@@ -0,0 +1,24 @@
+.footer {
+    height: 50;
+    width: 100vw;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    z-index: 10;
+    display: flex;
+}
+
+.footer button,
+.footer>span {
+    padding: 5px;
+    margin: 10px;
+}
+
+.footer button {
+    height: fit-content;
+}
+
+.footer>span {
+    margin-left: auto;
+    margin-right: 20px;
+}

devblog/devblog/client/src/helpers.rs

@@ -49,6 +49,7 @@ pub fn onsubmit(
                     let obj: Store = serde_json::from_str(&res.text().await.unwrap()).unwrap();
                     dispatch_clone.reduce_mut(move |store| {
                         store.token = obj.token;
+                        store.username = obj.username;
                     });
                     nav.push(&Route::Home);
                 }

devblog/devblog/client/src/main.rs

@@ -6,7 +6,10 @@ mod pages;
 mod router;
 mod store;
 
-use crate::router::{switch, Route};
+use crate::{
+    components::footer::Footer,
+    router::{switch, Route},
+};
 use api::*;
 use components::navbar::Navbar;
 use models::*;
@@ -29,6 +32,7 @@ pub fn app() -> Html {
             <BrowserRouter>
                 <Navbar />
                 <Switch<Route> render={switch} />
+                <Footer />
             </BrowserRouter>
         </div>
     }

devblog/devblog/client/src/pages/account.rs

@@ -1,10 +1,55 @@
+use gloo_net::http::{Headers, Method};
+use stylist::Style;
 use yew::prelude::*;
+use yewdux::use_store_value;
+
+use crate::{
+    helpers::{self, CustomCallback},
+    store::Store,
+    Api, User,
+};
+
+const STYLE: &str = include_str!("styles/account.css");
 
 #[function_component(Account)]
 pub fn account() -> Html {
+    let style = Style::new(STYLE).unwrap();
+    let user = use_state(User::default);
+    let user_cb = CustomCallback::new(&user);
+    let store = use_store_value::<Store>();
+
+    // get current user
+    use_effect_with((), |_| {
+        wasm_bindgen_futures::spawn_local(async move {
+            let hdrs = Headers::new();
+            let auth = format!("Bearer {}", store.token.clone());
+            hdrs.append("Authorization", &auth);
+
+            let res = Api::GetCurrentUser
+                .fetch(Some(hdrs), None, Method::GET)
+                .await;
+
+            helpers::emit(&user_cb, res.unwrap()).await;
+        })
+    });
+
     html! {
-        <section>
-            <h1>{"Account Page"}</h1>
+        <section class={style}>
+            <div class="account">
+                <div>
+                    <h1>{"Account Details"}</h1>
+                    <p>{"Username: "}{&user.username}</p>
+                    <p>{"Email: "}{&user.email}</p>
+                </div>
+                <div>
+                    <h1>{"Email Preferences"}</h1>
+                    <input type="checkbox"
+                        checked={user.subscribed}
+                        // onClick={handleSubscribeChange}
+                        />
+                    <span>{"Subscribed"}</span>
+                </div>
+            </div>
         </section>
     }
 }

devblog/devblog/client/src/pages/styles/account.css

@@ -0,0 +1,10 @@
+.account {
+    font-family: 'Chivo Mono', monospace;
+    font-size: 16px;
+    margin-top: 100px;
+
+}
+
+.account>div>h1 {
+    border-bottom: 1px solid grey;
+}