Slightly less flaky on reload

Author: glastonbridge

src/ProjectPageRouting.tsx

@@ -1,16 +1,32 @@
-import { ReactNode } from "react"
-import { useRouterState } from "./router-hooks"
+import { ReactNode, useEffect } from "react";
+import { useRouterState } from "./router-hooks";
 import ProjectBrowser from "./project/ProjectBrowser";
+import { useProjectStorage } from "./project-persistence/ProjectStorageProvider";
 
 interface ProjectPageRoutingProps {
-    children: ReactNode
+  children: ReactNode;
 }
-const ProjectPageRouting = ({children} : ProjectPageRoutingProps) => {
-    const [{tab}] = useRouterState();
-    if (typeof tab === "undefined") {
-        return <ProjectBrowser />
+const ProjectPageRouting = ({ children }: ProjectPageRoutingProps) => {
+  const [{ tab }, navigate] = useRouterState();
+  const { projectId, restoreMostRecentProject } = useProjectStorage();
+
+  useEffect(() => {
+    if (!projectId) {
+      const restoreState = async () => {
+        const restoredProject = await restoreMostRecentProject();
+        if (!restoredProject && typeof tab !== "undefined") {
+          history.replaceState(null, "", "/");
+          window.dispatchEvent(new PopStateEvent("popstate"));
+        }
+      };
+      void restoreState();
     }
-    return children;
-}
+  }, []);
+
+  if (typeof tab === "undefined") {
+    return <ProjectBrowser />;
+  }
+  return children;
+};
 
 export default ProjectPageRouting;

src/project-persistence/ProjectStorageProvider.tsx

@@ -26,6 +26,7 @@ interface ProjectContextValue {
   projectList: ProjectList | null;
   newStoredProject: () => Promise<NewStoredDoc>;
   restoreStoredProject: (id: string) => Promise<RestoredStoredDoc>;
+  restoreMostRecentProject: () => Promise<RestoredStoredDoc | null>;
   deleteProject: (id: string) => Promise<void>;
   ydoc: Y.Doc | null;
   awareness: Awareness | null;
@@ -44,6 +45,7 @@ export function ProjectStorageProvider({
   const [projectStore, setProjectStoreImpl] = useState<ProjectStore | null>(
     null
   );
+
   const setProjectStore = (newProjectStore: ProjectStore) => {
     if (projectStore) {
       projectStore.destroy();
@@ -69,6 +71,18 @@ export function ProjectStorageProvider({
     [projectList]
   );
 
+  const restoreMostRecentProject: () => Promise<RestoredStoredDoc | null> =
+    useCallback(async () => {
+      let localProjectList = projectList;
+      if (!localProjectList) {
+        localProjectList = await refreshProjects();
+      }
+      if (!localProjectList || localProjectList.length === 0) {
+        return null;
+      }
+      return restoreStoredProject(localProjectList[0].id);
+    }, [restoreStoredProject, projectList]);
+
   const newStoredProject: () => Promise<NewStoredDoc> =
     useCallback(async () => {
       const newProjectId = makeUID();
@@ -106,13 +120,14 @@ export function ProjectStorageProvider({
 
   const refreshProjects = async () => {
     const projectList = await withProjectDb("readonly", async (store) => {
-      const projectList = await new Promise((res, rej) => {
+      const projectList = await new Promise<ProjectList>((res, rej) => {
         const query = store.index("modifiedDate").getAll();
         query.onsuccess = () => res(query.result);
       });
       return projectList;
     });
-    setProjectList((projectList as ProjectList).reverse());
+    setProjectList(projectList.reverse());
+    return projectList;
   };
 
   useEffect(() => {
@@ -176,6 +191,7 @@ export function ProjectStorageProvider({
         getFile,
         newStoredProject,
         restoreStoredProject,
+        restoreMostRecentProject,
         deleteProject,
         setProjectName,
       }}