Feat: Hydrate shell from app state
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
// Path: Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
|
||||
|
||||
import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js";
|
||||
import { For, createEffect, createSignal, onCleanup, onMount, type JSX } from "solid-js";
|
||||
import { ChevronDown, Folder } from "../../../lib/icons";
|
||||
import { activeProject, projectItems } from "../data/shell.data";
|
||||
import { useAppShellData } from "../data/app-shell.context";
|
||||
import styles from "./ProjectSelector.module.scss";
|
||||
|
||||
type ProjectSelectorProps = {
|
||||
@@ -12,13 +12,16 @@ type ProjectSelectorProps = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const defaultProject = projectItems.find((item) => item.id === activeProject.id) ?? projectItems[0];
|
||||
|
||||
export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
|
||||
const [selectedProject, setSelectedProject] = createSignal({ id: defaultProject.id, name: defaultProject.name });
|
||||
const appShellData = useAppShellData();
|
||||
const [selectedProject, setSelectedProject] = createSignal(appShellData.activeProject());
|
||||
const [drawerTop, setDrawerTop] = createSignal<number>(0);
|
||||
let triggerRef: HTMLButtonElement | undefined;
|
||||
|
||||
createEffect(() => {
|
||||
setSelectedProject(appShellData.activeProject());
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!triggerRef) {
|
||||
return;
|
||||
@@ -57,7 +60,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
|
||||
};
|
||||
|
||||
const selectProject = (projectId: string): void => {
|
||||
const nextProject = projectItems.find((item): boolean => item.id === projectId);
|
||||
const nextProject = appShellData.projectItems().find((item): boolean => item.id === projectId);
|
||||
|
||||
if (!nextProject) {
|
||||
return;
|
||||
@@ -132,7 +135,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
|
||||
>
|
||||
<div class={styles.drawerBody}>
|
||||
<ul class={styles.projectList} role="list">
|
||||
<For each={projectItems}>
|
||||
<For each={appShellData.projectItems()}>
|
||||
{(item): JSX.Element => {
|
||||
const isSelected = (): boolean => selectedProject().id === item.id;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user