From 07aa010d1010a8edf8d1dc9a41616a186dfa81d0 Mon Sep 17 00:00:00 2001 From: Austin Date: Wed, 4 Jan 2023 19:01:06 +0000 Subject: [PATCH] Initial implementation of avatar component --- app/src/components/app.rs | 18 +++--- app/src/components/avatar.rs | 117 +++++++++++++++++++++++++++++++++++ app/src/components/mod.rs | 1 + 3 files changed, 127 insertions(+), 9 deletions(-) create mode 100644 app/src/components/avatar.rs diff --git a/app/src/components/app.rs b/app/src/components/app.rs index 7f35c43..dc085e5 100644 --- a/app/src/components/app.rs +++ b/app/src/components/app.rs @@ -1,5 +1,6 @@ use crate::{ components::{ + avatar::Avatar, change_password::ChangePasswordForm, create_group::CreateGroupForm, create_user::CreateUserForm, @@ -87,6 +88,7 @@ impl Component for App { self.route_dispatcher .send(RouteRequest::ReplaceRoute(Route::from(AppRoute::Login))); } + ConsoleService::log("update app"); true } @@ -247,15 +249,13 @@ impl App { id="dropdownUser" data-bs-toggle="dropdown" aria-expanded="false"> - - - - + { + if let Some((user_id, _)) = &self.user_info { + html! { + + } + } else { html!{} } + } { if let Some((user_id, _)) = &self.user_info { html! { diff --git a/app/src/components/avatar.rs b/app/src/components/avatar.rs new file mode 100644 index 0000000..9abd39b --- /dev/null +++ b/app/src/components/avatar.rs @@ -0,0 +1,117 @@ +use crate::infra::common_component::{CommonComponent, CommonComponentParts}; +use anyhow::{bail, Result}; +use graphql_client::GraphQLQuery; +use yew::prelude::*; + +#[derive(GraphQLQuery)] +#[graphql( + schema_path = "../schema.graphql", + query_path = "queries/get_user_details.graphql", + response_derives = "Debug, Hash, PartialEq, Eq, Clone", + custom_scalars_module = "crate::infra::graphql" +)] +pub struct GetUserDetails; + +pub type User = get_user_details::GetUserDetailsUser; +pub type Group = get_user_details::GetUserDetailsUserGroups; + +pub struct Avatar { + common: CommonComponentParts, + /// The user info. If none, the error is in `error`. If `error` is None, then we haven't + /// received the server response yet. + avatar: Option, +} + +/// State machine describing the possible transitions of the component state. +/// It starts out by fetching the user's details from the backend when loading. +pub enum Msg { + /// Received the user details response, either the user data or an error. + UserDetailsResponse(Result), + Update +} + +#[derive(yew::Properties, Clone, PartialEq, Eq)] +pub struct Props { + pub username: String, + pub width: i32, + pub height: i32, +} + +impl CommonComponent for Avatar { + fn handle_msg(&mut self, msg: ::Message) -> Result { + match msg { + Msg::UserDetailsResponse(response) => match response { + Ok(user) => self.avatar = user.user.avatar, + Err(e) => { + self.avatar = None; + bail!("Error getting user details: {}", e); + } + }, + Msg::Update => self.get_user_details(), + } + Ok(true) + } + + fn mut_common(&mut self) -> &mut CommonComponentParts { + &mut self.common + } +} + +impl Avatar { + fn get_user_details(&mut self) { + if self.common.username.len() > 0 { + self.common.call_graphql::( + get_user_details::Variables { + id: self.common.username.clone(), + }, + Msg::UserDetailsResponse, + "Error trying to fetch user details", + ) + } + } +} + +impl Component for Avatar { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + let mut avatar = Self { + common: CommonComponentParts::::create(props, link), + avatar: None, + }; + avatar.get_user_details(); + avatar + } + + fn update(&mut self, msg: Self::Message) -> ShouldRender { + CommonComponentParts::::update(self, msg) + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + self.common.change(props) + } + + fn view(&self) -> Html { + match &self.avatar { + Some(avatar) => html! { + Avatar + }, + None => html! { + + + + + }, + } + } +} diff --git a/app/src/components/mod.rs b/app/src/components/mod.rs index f78dcf9..9dbe562 100644 --- a/app/src/components/mod.rs +++ b/app/src/components/mod.rs @@ -1,6 +1,7 @@ pub mod add_group_member; pub mod add_user_to_group; pub mod app; +pub mod avatar; pub mod change_password; pub mod create_group; pub mod create_user;