Refactor modals to use context provider

src/app/contexts/Modal.tsx

@@ -0,0 +1,40 @@
+import type { ComponentChildren, FunctionComponent } from 'preact'
+import { createContext } from 'preact'
+import { useCallback, useContext, useState } from 'preact/hooks'
+
+interface ModalContext {
+	showModal: (component: FunctionComponent) => void
+	hideModal: () => void
+}
+
+const ModalContext = createContext<ModalContext | undefined>(undefined)
+
+export function useModal() {
+	const context = useContext(ModalContext)
+	if (context === undefined) {
+		throw new Error('Cannot use modal context')
+	}
+	return context
+}
+
+export function ModalProvider({ children }: { children: ComponentChildren }) {
+	const [modal, setModal] = useState<FunctionComponent>()
+
+	const showModal = useCallback((component: FunctionComponent) => {
+		setModal(component)
+	}, [])
+
+	const hideModal = useCallback(() => {
+		setModal(undefined)
+	}, [])
+
+	const value: ModalContext = {
+		showModal,
+		hideModal,
+	}
+
+	return <ModalContext.Provider value={value}>
+		{children}
+		{modal !== undefined && modal}
+	</ModalContext.Provider>
+}

src/app/contexts/Project.tsx

@@ -63,7 +63,7 @@ export function useProject() {
 
 export function ProjectProvider({ children }: { children: ComponentChildren }) {
 	const [projects, setProjects] = useState<ProjectMeta[]>(Store.getProjects())
-	const [openProject, setProjectName] = useState<string>()
+	const [openProject, setOpenProject] = useState<string>()
 
 	useEffect(() => {
 		const initialProject = Store.getOpenProject()
@@ -72,7 +72,7 @@ export function ProjectProvider({ children }: { children: ComponentChildren }) {
 			return
 		}
 		if (project.storage !== undefined) {
-			setProjectName(initialProject)
+			setOpenProject(initialProject)
 			return
 		}
 		// TODO: Import legacy projects
@@ -96,11 +96,12 @@ export function ProjectProvider({ children }: { children: ComponentChildren }) {
 	const deleteProject = useCallback((name: string) => {
 		if (name === DRAFT_PROJECT.name) return
 		changeProjects(projects.filter(p => p.name !== name))
+		setOpenProject(undefined)
 	}, [projects])
 
 	const changeProject = useCallback((name: string) => {
 		Store.setOpenProject(name)
-		setProjectName(name)
+		setOpenProject(name)
 	}, [])
 
 	const updateProject = useCallback((edits: Partial<ProjectMeta>) => {