Add example solidjs-with-modal-manager#26
Add example solidjs-with-modal-manager#26noveogroup-amorgunov wants to merge 3 commits intofeature-sliced:masterfrom
Conversation
|
Hello, thanks for that! This is an interesting one from the architectural perspective. Ideally, layers at the bottom (in this case, Shared) should know nothing about layers at the top. In your example, you have DI, but the Shared layer still knows that there is a // pages/editor/ui/usePanel.ts
import { create } from "zustand";
import { devtools } from "zustand/middleware";
type PanelName = "sections" | "smartfields" | "search";
interface OpenedPanel {
name: PanelName;
anchor?: string;
}
interface PanelStore {
openedPanels: OpenedPanel[];
openPanel: (name: PanelName, anchor?: string) => void;
closePanel: (name: PanelName) => void;
}
const usePanelStore = create<PanelStore>()(
/* implementation snipped for brevity */
);
export function usePanel(name: PanelName) {
const { openedPanels, openPanel, closePanel } = usePanelStore();
const thisPanel = openedPanels.find((panel) => panel.name === name);
return {
isOpen: !!thisPanel,
anchor: thisPanel?.anchor,
open: (anchor?: string) => openPanel(name, anchor),
close: () => closePanel(name),
toggle: () => (thisPanel ? closePanel(name) : openPanel(name)),
};
}This hook is generic enough that most of its implementation can be placed in shared as a "store factory", but the actual modal names are only known by the page itself. What do you think about this? Also I'd prefer if the slice I think the "Connection error. Try again later" message is confusing. I thought something was wrong with my setup and was about to comment about it, and then I realized that that is how it's supposed to be. Curious to hear your thoughts |
Hello, I made a new example of how to work with the modal manager. More information in the README.md . See live demo in https://stackblitz.com/github/noveogroup-amorgunov/feature-sliced--examples/tree/feature/add-example-solidjs-with-modal-manager/examples/solidjs-with-modal-manager?file=README.md