Feat: Hydrate shell from app state
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
// Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
|
||||
|
||||
import { For, Show, type JSX } from "solid-js";
|
||||
import { railItems, type RailItem } from "../data/shell.data";
|
||||
import { useAppShellData } from "../data/app-shell.context";
|
||||
import { type RailItem } from "../data/shell.data";
|
||||
import styles from "./LeftRail.module.scss";
|
||||
|
||||
type RailEntryProps = {
|
||||
@@ -46,8 +47,9 @@ type LeftRailProps = {
|
||||
};
|
||||
|
||||
export const LeftRail = (props: LeftRailProps): JSX.Element => {
|
||||
const personalItem = railItems.find((item) => item.kind === "personal");
|
||||
const organizationItems = railItems.filter((item) => item.kind === "organization");
|
||||
const appShellData = useAppShellData();
|
||||
const personalItem = () => appShellData.railItems().find((item) => item.kind === "personal");
|
||||
const organizationItems = () => appShellData.railItems().filter((item) => item.kind === "organization");
|
||||
|
||||
return (
|
||||
<aside
|
||||
@@ -58,7 +60,7 @@ export const LeftRail = (props: LeftRailProps): JSX.Element => {
|
||||
aria-label="Server rail"
|
||||
>
|
||||
<div class={styles.topCluster}>
|
||||
<Show when={!props.collapsed && personalItem}>
|
||||
<Show when={!props.collapsed && personalItem()}>
|
||||
{(item): JSX.Element => (
|
||||
<RailEntry item={item()} label={item().label} abbreviation={item().abbreviation} personal />
|
||||
)}
|
||||
@@ -71,7 +73,7 @@ export const LeftRail = (props: LeftRailProps): JSX.Element => {
|
||||
|
||||
<Show when={!props.collapsed}>
|
||||
<div class={styles.items}>
|
||||
<For each={organizationItems}>
|
||||
<For each={organizationItems()}>
|
||||
{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user