Skip to content

Commit

Permalink
fix: better breadcrumbs management
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShubhranshuSanjeev
ShubhranshuSanjeev committed Nov 14, 2024
1 parent aca3740 commit dff29e3
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 79 deletions.
27 changes: 14 additions & 13 deletions crates/frontend/src/hoc/layout.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ use std::ops::Deref;

use crate::{
components::{side_nav::SideNav, toast::Toast},
hoc::nav_breadcrums::{BreadcrumbCtx, Breadcrumbs},
hoc::nav_breadcrums::Breadcrumbs,
providers::alert_provider::AlertQueue,
utils::{use_tenants, use_url_base},
};
Expand All @@ -21,29 +21,19 @@ impl AsRef<str> for PageHeading {
}

#[component]
pub fn Layout() -> impl IntoView {
pub fn layout() -> impl IntoView {
let params_map = use_params_map();
let tenant = Signal::derive(move || match params_map.get().get("tenant") {
Some(tenant) => tenant.clone(),
None => String::from("no-tenant"),
});
let breadcrumbs = create_rw_signal(BreadcrumbCtx {
current_path: String::new(),
params: ParamsMap::new()
});
provide_context(breadcrumbs);
provide_context(tenant);

view! {
<div class="relative p-4 flex min-h-screen bg-surface">
<SideNav />

<section class="relative w-full h-full ml-[366px] overflow-y-auto px-4">
<Header tenant />
<main class="py-8 min-h-[calc(100vh-16px-12px-12px-16px-36px)]">
<Outlet />
</main>
</section>
<Outlet />

{move || {
let alert_queue = use_context::<ReadSignal<AlertQueue>>();
Expand All @@ -58,6 +48,17 @@ pub fn Layout() -> impl IntoView {
}
}

#[component]
pub fn page(children: Children) -> impl IntoView {
let tenant = use_context::<Signal<String>>().unwrap();
view! {
<section class="relative w-full h-full ml-[366px] overflow-y-auto px-4">
<Header tenant />
<main class="py-8 min-h-[calc(100vh-16px-12px-12px-16px-36px)]">{children()}</main>
</section>
}
}

#[component]
fn header(tenant: Signal<String>) -> impl IntoView {
view! {
Expand Down
41 changes: 6 additions & 35 deletions crates/frontend/src/hoc/nav_breadcrums.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,6 @@ struct RouteMetadata {

type DynamicLabelFn = Box<Arc<dyn Fn(&ParamsMap) -> Option<String> + Send + Sync>>;

#[derive(Clone)]
pub struct BreadcrumbCtx {
pub current_path: String,
pub params: ParamsMap,
}

static BREADCRUMB_STORE: Lazy<HashMap<String, RouteMetadata>> = Lazy::new(|| {
let mut routes = HashMap::new();

Expand Down Expand Up @@ -229,39 +223,15 @@ pub fn get_breadcrumbs(
breadcrumbs
}

// Components
#[component]
pub fn with_breadcrumbs(children: Children) -> impl IntoView {
pub fn breadcrumbs() -> impl IntoView {
let params = use_params_map();
let service_prefix = use_url_base();
let breadcrumb_ctx = use_context::<RwSignal<BreadcrumbCtx>>()
.expect("BreadcrumbContext not found");
let tenant = use_context::<Signal<String>>().unwrap();

create_effect(move |_| {
let base = format!("{service_prefix}/admin/:tenant");
let breadcrumbs = create_memo(move |_| {
let base = format!("{}/admin/:tenant", use_url_base());
let current_path = use_route().original_path().replace(&base, "");
let params = params.get();
logging::log!("{current_path} {}", use_route().original_path());
logging::log!("{:?}", params.0);
breadcrumb_ctx.set(BreadcrumbCtx {
current_path,
params,
});
});

children()
}

#[component]
pub fn breadcrumbs() -> impl IntoView {
let breadcrumb_ctx =
use_context::<RwSignal<BreadcrumbCtx>>().expect("BreadcrumbStore not found");

let breadcrumbs = create_memo(move |_| {
let BreadcrumbCtx {
current_path,
params,
} = breadcrumb_ctx.get();
logging::log!("BREAD {current_path}");
logging::log!("BREAD {:?}", params.0);
get_breadcrumbs(&current_path, &params)
Expand All @@ -278,7 +248,8 @@ pub fn breadcrumbs() -> impl IntoView {
.map(|(index, (path, label, icon))| {
let is_last = index == breadcrumbs.get().len() - 1;
let show_separator = index > 0;
let path = path.trim_matches('/').to_string();
let base = format!("{}/admin/{}", use_url_base(), tenant.get());
let path = format!("{}{}", base, path);
view! {
<li class="flex items-center">
{if show_separator {
Expand Down
70 changes: 39 additions & 31 deletions crates/frontend/src/routes.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ use leptos::*;
use leptos_router::{Route, SsrMode};

use crate::{
hoc::{layout::Layout, nav_breadcrums::WithBreadcrumbs},
hoc::layout::{Layout, Page},
pages::{
config_version::ConfigVersion,
config_version_list::ConfigVersionList,
Expand Down Expand Up @@ -38,9 +38,9 @@ pub fn app_routes() -> impl IntoView {
path="/experiments"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<ExperimentList />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -50,9 +50,9 @@ pub fn app_routes() -> impl IntoView {
path="/experiments/new"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<NewExperiment />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -62,9 +62,9 @@ pub fn app_routes() -> impl IntoView {
path="/experiments/:id"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<ExperimentPage />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -74,9 +74,9 @@ pub fn app_routes() -> impl IntoView {
path="/function"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<FunctionList />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -86,9 +86,9 @@ pub fn app_routes() -> impl IntoView {
path="/function/create"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<CreateFunctionView />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -98,9 +98,9 @@ pub fn app_routes() -> impl IntoView {
path="/function/:function_name"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<FunctionPage />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -110,9 +110,9 @@ pub fn app_routes() -> impl IntoView {
path="/types"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<TypesPage />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -122,9 +122,9 @@ pub fn app_routes() -> impl IntoView {
path="/types/new"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<NewTemplateType />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -134,26 +134,34 @@ pub fn app_routes() -> impl IntoView {
path="/types/:type_name/update"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<UpdateTemplateType />
</WithBreadcrumbs>
</Page>
}
}
/>

<Route
ssr=SsrMode::Async
path="/config/version"
path="/config/versions"
view=move || {
view! { <ConfigVersionList /> }
view! {
<Page>
<ConfigVersionList />
</Page>
}
}
/>

<Route
ssr=SsrMode::Async
path="/config/version/:version"
path="/config/versions/:version"
view=move || {
view! { <ConfigVersion /> }
view! {
<Page>
<ConfigVersion />
</Page>
}
}
/>

Expand All @@ -162,9 +170,9 @@ pub fn app_routes() -> impl IntoView {
path="/dimensions"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<Dimensions />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -174,9 +182,9 @@ pub fn app_routes() -> impl IntoView {
path="/default-config"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<DefaultConfig />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -186,9 +194,9 @@ pub fn app_routes() -> impl IntoView {
path="/overrides"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<ContextOverride />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand All @@ -198,9 +206,9 @@ pub fn app_routes() -> impl IntoView {
path="/resolve"
view=move || {
view! {
<WithBreadcrumbs>
<Page>
<Home />
</WithBreadcrumbs>
</Page>
}
}
/>
Expand Down

0 comments on commit dff29e3

Please sign in to comment.