Factor out parts of the frontend into separate components
This commit is contained in:
parent
a25e143b55
commit
3078591e2c
GPG Key ID:
CA239FC6934E6F3A
173
Cargo.lock
generated
173
Cargo.lock
generated
@ -96,12 +96,6 @@ dependencies = [
|
||||
"windows-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "anyhow"
|
||||
version = "1.0.89"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "86fdf8605db99b54d3cd748a44c6d04df638eb5dafb219b135d0149bd0db01f6"
|
||||
|
||||
[[package]]
|
||||
name = "anymap2"
|
||||
version = "0.13.0"
|
||||
@ -178,17 +172,6 @@ dependencies = [
|
||||
"tracing",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "axum-client-ip"
|
||||
version = "0.6.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9eefda7e2b27e1bda4d6fa8a06b50803b8793769045918bc37ad062d48a6efac"
|
||||
dependencies = [
|
||||
"axum",
|
||||
"forwarded-header-value",
|
||||
"serde",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "axum-core"
|
||||
version = "0.4.5"
|
||||
@ -230,16 +213,6 @@ dependencies = [
|
||||
"urlencoding",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "axum_static"
|
||||
version = "1.7.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3d134d2aeabd596bc82e44748f999c9b0e535a7b756cb36c62df0de6d2445d6e"
|
||||
dependencies = [
|
||||
"axum",
|
||||
"tower-http 0.5.2",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "backtrace"
|
||||
version = "0.3.74"
|
||||
@ -536,12 +509,6 @@ dependencies = [
|
||||
"subtle",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "either"
|
||||
version = "1.13.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "60b1af1c220855b6ceac025d3f6ecdd2b7c4894bfe9cd9bda4fbb4bc7c0d4cf0"
|
||||
|
||||
[[package]]
|
||||
name = "equivalent"
|
||||
version = "1.0.1"
|
||||
@ -573,16 +540,6 @@ dependencies = [
|
||||
"percent-encoding",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "forwarded-header-value"
|
||||
version = "0.1.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8835f84f38484cc86f110a805655697908257fb9a7af005234060891557198e9"
|
||||
dependencies = [
|
||||
"nonempty",
|
||||
"thiserror",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "frontend"
|
||||
version = "0.1.0"
|
||||
@ -592,17 +549,13 @@ dependencies = [
|
||||
"common",
|
||||
"console_error_panic_hook",
|
||||
"gloo 0.11.0",
|
||||
"gloo-console 0.3.0",
|
||||
"gloo-net 0.6.0",
|
||||
"gloo-timers 0.3.0",
|
||||
"itertools",
|
||||
"log",
|
||||
"wasm-bindgen",
|
||||
"wasm-logger",
|
||||
"web-sys",
|
||||
"yew",
|
||||
"yew-hooks",
|
||||
"yew-router",
|
||||
"yew-websocket",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
@ -904,26 +857,6 @@ dependencies = [
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-net"
|
||||
version = "0.2.6"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9902a044653b26b99f7e3693a42f171312d9be8b26b5697bd1e43ad1f8a35e10"
|
||||
dependencies = [
|
||||
"futures-channel",
|
||||
"futures-core",
|
||||
"futures-sink",
|
||||
"gloo-utils 0.1.7",
|
||||
"js-sys",
|
||||
"pin-project",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"thiserror",
|
||||
"wasm-bindgen",
|
||||
"wasm-bindgen-futures",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-net"
|
||||
version = "0.3.1"
|
||||
@ -987,27 +920,6 @@ dependencies = [
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-net"
|
||||
version = "0.6.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c06f627b1a58ca3d42b45d6104bf1e1a03799df472df00988b6ba21accc10580"
|
||||
dependencies = [
|
||||
"futures-channel",
|
||||
"futures-core",
|
||||
"futures-sink",
|
||||
"gloo-utils 0.2.0",
|
||||
"http 1.1.0",
|
||||
"js-sys",
|
||||
"pin-project",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"thiserror",
|
||||
"wasm-bindgen",
|
||||
"wasm-bindgen-futures",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-render"
|
||||
version = "0.1.1"
|
||||
@ -1377,15 +1289,6 @@ version = "1.70.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "7943c866cc5cd64cbc25b2e01621d07fa8eb2a1a23160ee81ce38704e97b8ecf"
|
||||
|
||||
[[package]]
|
||||
name = "itertools"
|
||||
version = "0.13.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "413ee7dfc52ee1a4949ceeb7dbc8a33f2d6c088194d9f922fb8318faf1f01186"
|
||||
dependencies = [
|
||||
"either",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "itoa"
|
||||
version = "1.0.11"
|
||||
@ -1488,12 +1391,6 @@ dependencies = [
|
||||
"windows-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "nonempty"
|
||||
version = "0.7.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e9e591e719385e6ebaeb5ce5d3887f7d5676fceca6411d1925ccc95745f3d6f7"
|
||||
|
||||
[[package]]
|
||||
name = "nu-ansi-term"
|
||||
version = "0.46.0"
|
||||
@ -1871,11 +1768,8 @@ dependencies = [
|
||||
name = "server"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"async-trait",
|
||||
"axum",
|
||||
"axum-client-ip",
|
||||
"axum-login",
|
||||
"axum_static",
|
||||
"ciborium",
|
||||
"clap",
|
||||
"common",
|
||||
@ -1885,7 +1779,7 @@ dependencies = [
|
||||
"time",
|
||||
"tokio",
|
||||
"tower",
|
||||
"tower-http 0.6.1",
|
||||
"tower-http",
|
||||
"tower-sessions",
|
||||
"tracing",
|
||||
"tracing-subscriber",
|
||||
@ -2183,31 +2077,6 @@ dependencies = [
|
||||
"tower-service",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tower-http"
|
||||
version = "0.5.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1e9cd434a998747dd2c4276bc96ee2e0c7a2eadf3cae88e52be55a05fa9053f5"
|
||||
dependencies = [
|
||||
"bitflags",
|
||||
"bytes",
|
||||
"futures-util",
|
||||
"http 1.1.0",
|
||||
"http-body",
|
||||
"http-body-util",
|
||||
"http-range-header",
|
||||
"httpdate",
|
||||
"mime",
|
||||
"mime_guess",
|
||||
"percent-encoding",
|
||||
"pin-project-lite",
|
||||
"tokio",
|
||||
"tokio-util",
|
||||
"tower-layer",
|
||||
"tower-service",
|
||||
"tracing",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tower-http"
|
||||
version = "0.6.1"
|
||||
@ -2670,6 +2539,22 @@ dependencies = [
|
||||
"yew-macro",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew-hooks"
|
||||
version = "0.3.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "cbe7d30ef9d9afb9be38b1b310c42d59963c6d1c950f0e0435b78b346b4b24bf"
|
||||
dependencies = [
|
||||
"gloo 0.11.0",
|
||||
"js-sys",
|
||||
"log",
|
||||
"serde",
|
||||
"wasm-bindgen",
|
||||
"wasm-bindgen-futures",
|
||||
"web-sys",
|
||||
"yew",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew-macro"
|
||||
version = "0.21.0"
|
||||
@ -2715,28 +2600,6 @@ dependencies = [
|
||||
"syn 2.0.79",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew-websocket"
|
||||
version = "1.21.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "6d75b4aa6d3a7644d649b80413f6095281c3897aeda85b5519ed12fd3de5b013"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"futures",
|
||||
"gloo 0.8.1",
|
||||
"gloo-console 0.2.3",
|
||||
"gloo-net 0.2.6",
|
||||
"js-sys",
|
||||
"serde",
|
||||
"serde_derive",
|
||||
"serde_json",
|
||||
"thiserror",
|
||||
"wasm-bindgen",
|
||||
"wasm-bindgen-futures",
|
||||
"web-sys",
|
||||
"yew",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "zerocopy"
|
||||
version = "0.7.35"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
use chrono::prelude::*;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
#[derive(Serialize, Deserialize, Clone, Debug)]
|
||||
#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Eq)]
|
||||
pub struct ChatMessage {
|
||||
pub message: String,
|
||||
pub time: DateTime<Local>,
|
||||
|
||||
@ -9,14 +9,10 @@ ciborium = "0.2.2"
|
||||
common = { version = "0.1.0", path = "../common" }
|
||||
console_error_panic_hook = "0.1.7"
|
||||
gloo = "0.11.0"
|
||||
gloo-console = "0.3.0"
|
||||
gloo-net = "0.6.0"
|
||||
gloo-timers = "0.3.0"
|
||||
itertools = "0.13.0"
|
||||
log = "0.4.22"
|
||||
wasm-bindgen = "0.2.93"
|
||||
wasm-logger = "0.2.0"
|
||||
web-sys = { version = "0.3.70", features = ["Navigator", "WebSocket", "EventListener"] }
|
||||
yew = { version = "0.21.0", features = ["csr"] }
|
||||
yew-hooks = "0.3.2"
|
||||
yew-router = "0.18.0"
|
||||
yew-websocket = "1.21.0"
|
||||
|
||||
11
frontend/src/components/alert.rs
Normal file
11
frontend/src/components/alert.rs
Normal file
@ -0,0 +1,11 @@
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct Props {
|
||||
pub message: String,
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
pub fn Alert(props: &Props) -> Html {
|
||||
html! { <div class="alert alert-warning" role="alert">{ &props.message }</div> }
|
||||
}
|
||||
19
frontend/src/components/message.rs
Normal file
19
frontend/src/components/message.rs
Normal file
@ -0,0 +1,19 @@
|
||||
use common::ChatMessage;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct Props {
|
||||
pub message: ChatMessage,
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
pub fn Message(props: &Props) -> Html {
|
||||
html! {
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="ms-1 me-2">{ props.message.message.clone() }</div>
|
||||
<div class="me-2 text-nowrap">
|
||||
{ props.message.time.format("%I:%M:%S %p").to_string() }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
8
frontend/src/components/mod.rs
Normal file
8
frontend/src/components/mod.rs
Normal file
@ -0,0 +1,8 @@
|
||||
mod alert;
|
||||
pub use alert::Alert;
|
||||
|
||||
mod message;
|
||||
pub use message::Message;
|
||||
|
||||
mod nav;
|
||||
pub use nav::Nav;
|
||||
31
frontend/src/components/nav.rs
Normal file
31
frontend/src/components/nav.rs
Normal file
@ -0,0 +1,31 @@
|
||||
use yew::prelude::*;
|
||||
|
||||
#[function_component]
|
||||
pub fn Nav() -> Html {
|
||||
html! {
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">{ "Chat" }</a>
|
||||
<div class="nav-item dropdown navbar-nav">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{ "PJHT" }
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">{ "Options" }</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">{ "Logout" }</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
use std::{sync::Arc, time::Duration};
|
||||
pub mod components;
|
||||
use components::{Alert, Message, Nav};
|
||||
|
||||
use std::time::Duration;
|
||||
|
||||
use chrono::Local;
|
||||
use common::ChatMessage;
|
||||
use gloo::{events::EventListener, net::http::Request};
|
||||
use gloo_console::log;
|
||||
use gloo_timers::future::sleep;
|
||||
use gloo::{events::EventListener, net::http::Request, console::log, timers::future::sleep};
|
||||
use wasm_bindgen::JsCast;
|
||||
use web_sys::{js_sys::Uint8Array, CloseEvent, Event, MessageEvent, WebSocket};
|
||||
use yew::{platform::spawn_local, prelude::*};
|
||||
@ -188,14 +189,10 @@ impl Component for Home {
|
||||
<Nav />
|
||||
<div class="container-fluid d-flex flex-column flex-grow-1 mt-3">
|
||||
if self.ws_state != WsState::Open {
|
||||
<div class="alert alert-warning" role="alert">
|
||||
{ "Connection to backend lost, trying to reconnect" }
|
||||
</div>
|
||||
<Alert message="Connection to backend lost, trying to reconnect"/>
|
||||
}
|
||||
if !self.authenticated {
|
||||
<div class="alert alert-warning" role="alert">
|
||||
{ "Authenticating to backend" }
|
||||
</div>
|
||||
<Alert message="Authenticating to backend"/>
|
||||
}
|
||||
<div
|
||||
ref={self.message_container_ref.clone()}
|
||||
@ -203,10 +200,8 @@ impl Component for Home {
|
||||
style="flex-basis: 0"
|
||||
>
|
||||
{ self.messages.iter().rev().map(|msg| html!{
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="ms-1 me-2">{msg.message.clone()}</div>
|
||||
<div class="me-2 text-nowrap">{msg.time.format("%I:%M:%S %p").to_string()}</div>
|
||||
</div>}
|
||||
<Message message={msg.clone()}/>
|
||||
}
|
||||
).collect::<Vec<_>>() }
|
||||
</div>
|
||||
<div class="bottom-0 mb-3 mt-3">
|
||||
@ -304,37 +299,7 @@ impl Component for Home {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
fn Nav() -> Html {
|
||||
html! {
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">{ "Chat" }</a>
|
||||
<div class="nav-item dropdown navbar-nav">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{ "PJHT" }
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">{ "Options" }</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">{ "Logout" }</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#[function_component]
|
||||
fn App() -> Html {
|
||||
html! {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user