diff --git a/src/app/components/generator/ProjectPanel.tsx b/src/app/components/generator/ProjectPanel.tsx index e817c95b..f86e2d16 100644 --- a/src/app/components/generator/ProjectPanel.tsx +++ b/src/app/components/generator/ProjectPanel.tsx @@ -69,7 +69,7 @@ export function ProjectPanel() { label: locale('project.rename_file'), onAction: (uri: string) => { const res = service?.dissectUri(uri) - if (res?.ok) { + if (res) { // This is pretty hacky, improve this in the future when spyglass has a "constructUri" function const oldSuffix = `${res.pack}/${res.namespace}/${res.path}/${res.identifier}${res.ext}` if (!uri.endsWith(oldSuffix)) { diff --git a/src/app/contexts/Project.tsx b/src/app/contexts/Project.tsx index 04c352e4..42daa9a5 100644 --- a/src/app/contexts/Project.tsx +++ b/src/app/contexts/Project.tsx @@ -1,8 +1,9 @@ import { Identifier } from 'deepslate' import type { ComponentChildren } from 'preact' import { createContext } from 'preact' -import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks' +import { useCallback, useContext, useState } from 'preact/hooks' import config from '../Config.js' +import { useAsync } from '../hooks/useAsync.js' import type { VersionId } from '../services/index.js' import { DEFAULT_VERSION } from '../services/index.js' import { DRAFTS_URI, PROJECTS_URI, SpyglassClient } from '../services/Spyglass.js' @@ -67,17 +68,20 @@ export function useProject() { export function ProjectProvider({ children }: { children: ComponentChildren }) { const [projects, setProjects] = useState(Store.getProjects()) - const [openProject, setOpenProject] = useState() + const [openProject, setOpenProject] = useState(Store.getOpenProject()) - const tryOpenProject = useCallback(async (projectName: string) => { - const project = projects.find(p => p.name === projectName) + const { value: project} = useAsync(async () => { + const project = projects.find(p => p.name === openProject) if (!project) { - return + if (openProject !== undefined && openProject !== DRAFT_PROJECT.name) { + console.warn(`Cannot find project ${openProject} to open`) + } + return DRAFT_PROJECT } if (project.storage === undefined) { try { const projectRoot = `${PROJECTS_URI}${hexId()}/` - console.log(`Upgrading project ${projectName} to IndexedDB at ${projectRoot}`) + console.log(`Upgrading project ${openProject} to IndexedDB at ${projectRoot}`) await SpyglassClient.FS.mkdir(projectRoot) if (project.files) { await Promise.all(project.files.map(async file => { @@ -102,19 +106,11 @@ export function ProjectProvider({ children }: { children: ComponentChildren }) { } changeProjects(projects.map(p => p === project ? { ...p, storage: { type: 'indexeddb', rootUri: projectRoot } } : p)) } catch (e) { - console.error(`Something went wrong upgrading project ${projectName}: ${message(e)}`) - return + console.error(`Something went wrong upgrading project ${openProject}: ${message(e)}`) + return DRAFT_PROJECT } } - setOpenProject(projectName) - }, [projects]) - - useEffect(() => { - tryOpenProject(Store.getOpenProject()) - }, []) - - const project = useMemo(() => { - return projects.find(p => p.name === openProject) ?? DRAFT_PROJECT + return project }, [projects, openProject]) const [projectUri, setProjectUri] = useState() @@ -137,12 +133,12 @@ export function ProjectProvider({ children }: { children: ComponentChildren }) { await Promise.all(entries.map(async e => SpyglassClient.FS.unlink(e.name))) } changeProjects(projects.filter(p => p.name !== name)) - setOpenProject(undefined) + setOpenProject(DRAFT_PROJECT.name) }, [projects]) const changeProject = useCallback((name: string) => { Store.setOpenProject(name) - tryOpenProject(name) + setOpenProject(name) }, []) const updateProject = useCallback((edits: Partial) => { @@ -151,7 +147,7 @@ export function ProjectProvider({ children }: { children: ComponentChildren }) { const value: ProjectContext = { projects, - project, + project: project ?? DRAFT_PROJECT, projectUri, setProjectUri, createProject,