mentorenwahl/frontend/src/components/navbar.rs
Dominic Grimm 8055a5e4db
Some checks failed
continuous-integration/drone/push Build is failing
Update
2023-01-17 06:56:19 +01:00

146 lines
5.1 KiB
Rust

use graphql_client::reqwest::post_graphql;
use std::rc::Rc;
use yew::prelude::*;
use yew_router::prelude::*;
use yewdux::prelude::*;
use crate::cookies;
use crate::graphql;
use crate::routes;
use crate::stores;
pub enum Msg {
UpdateLoggedIn(Rc<stores::LoggedIn>),
LogoutClicked,
Logout,
BurgerClicked,
}
#[derive(Properties, PartialEq)]
pub struct NavbarProps {
pub token: Option<String>,
}
pub struct Navbar {
logged_in: Rc<stores::LoggedIn>,
logged_in_dispatch: Dispatch<stores::LoggedIn>,
burger_active: bool,
}
impl Component for Navbar {
type Message = Msg;
type Properties = NavbarProps;
fn create(ctx: &Context<Self>) -> Self {
let dispatch = Dispatch::subscribe(ctx.link().callback(Msg::UpdateLoggedIn));
Self {
logged_in: dispatch.get(),
logged_in_dispatch: dispatch,
burger_active: false,
}
}
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::UpdateLoggedIn(x) => {
let tmp = self.logged_in.0;
self.logged_in = x;
tmp != self.logged_in.0
}
Msg::LogoutClicked => {
let client = graphql::client(ctx.props().token.as_ref()).unwrap();
ctx.link().send_future(async move {
post_graphql::<graphql::mutations::logout::Logout, _>(
&client,
graphql::URL.as_str(),
graphql::mutations::logout::logout::Variables,
)
.await
.unwrap();
Msg::Logout
});
false
}
Msg::Logout => {
cookies::logout_clear();
self.logged_in_dispatch.reduce_mut(|x| x.0 = false);
ctx.link().navigator().unwrap().push(&routes::Route::Login);
false
}
Msg::BurgerClicked => {
self.burger_active = !self.burger_active;
true
}
}
}
fn view(&self, ctx: &Context<Self>) -> Html {
html! {
<header>
<nav class={classes!("navbar", "is-success")}
role="navigation"
aria-label="main navigation"
>
<div class={classes!("navbar-brand")}>
<Link<routes::Route> to={routes::Route::Index} classes={classes!("navbar-item")}>
<strong>{ "Mentorenwahl" }</strong>
</Link<routes::Route>>
<a role="button"
onclick={ctx.link().callback(|_| Msg::BurgerClicked)}
class={classes!("navbar-burger")}
aria-label="menu"
aria-expandable="false"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</div>
<div class={classes!(
"navbar-menu",
"is-white",
if self.burger_active { Some("is-active") } else { None }
)}
>
<div class={classes!("navbar-start")}>
<Link<routes::Route> to={routes::Route::Home} classes={classes!("navbar-item")}>
{ "Home" }
</Link<routes::Route>>
<Link<routes::Route> to={routes::Route::Settings} classes={classes!("navbar-item")}>
{ "Settings" }
</Link<routes::Route>>
</div>
<div class={classes!("navbar-end")}>
<Link<routes::Route> to={routes::Route::Info} classes={classes!("navbar-item")}>
{ "Info" }
</Link<routes::Route>>
<div class={classes!("navbar-item")}>
<div class={classes!("buttons")}>
if self.logged_in.0 {
<a onclick={ctx.link().callback(|_| Msg::LogoutClicked)} class={classes!("button")}>
{ "Logout" }
</a>
} else {
<Link<routes::Route> to={routes::Route::Login} classes={classes!("button")}>
{ "Login" }
</Link<routes::Route>>
}
</div>
</div>
</div>
</div>
</nav>
</header>
}
}
}