fix: Navigation after content piece deletion

vriteio · Jul 4, 2024 · cfca3d9 · cfca3d9
1 parent 4988d70
commit cfca3d9
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 30 deletions.
diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
@@ -76,11 +76,14 @@ const App: Component = () => {
           <Route path="/workspaces" component={WorkspacesView} />
         </Route>
         <Route path={["/", "**"]} component={SecuredWrapper}>
-          <Route path={["/", "/:contentPieceId"]} component={DashboardView} />
-          <Route path="/editor/:contentPieceId" component={ContentPieceEditorView} />
-          <Route path="/snippet/:snippetId" component={SnippetEditorView} />
-          <Route path="/version/:contentPieceId/:versionId" component={VersionEditorView} />
-          <Route path="/diff/:diffAgainst/:contentPieceId/:versionId" component={DiffEditorView} />
+          <Route path="/editor/:contentPieceId?" component={ContentPieceEditorView} />
+          <Route path={["/:contentPieceId?"]} component={DashboardView} />
+          <Route path="/snippet/:snippetId?" component={SnippetEditorView} />
+          <Route path="/version/:contentPieceId?/:versionId?" component={VersionEditorView} />
+          <Route
+            path="/diff/:diffAgainst/:contentPieceId?/:versionId?"
+            component={DiffEditorView}
+          />
           <Show when={hostConfig.githubApp}>
             <Route path="/conflict" component={ConflictView} />
           </Show>

diff --git a/apps/web/src/context/content/index.tsx b/apps/web/src/context/content/index.tsx
@@ -2,6 +2,7 @@ import { ContentActions, createContentActions } from "./actions";
 import { ContentLoader, createContentLoader } from "./loader";
 import {
   createContext,
+  createMemo,
   createResource,
   InitializedResource,
   ParentComponent,
@@ -62,12 +63,11 @@ const ContentDataProvider: ParentComponent = (props) => {
   const activeContentGroupId = (): string | null => {
     return storage().activeContentGroupId || null;
   };
+  const contentPieceParam = createMemo(() => {
+    return params.contentPieceId || "";
+  });
   const [activeContentPieceId] = createResource(
-    () => {
-      if (location.pathname.startsWith("/snippet")) return "";
-
-      return params.contentPieceId;
-    },
+    contentPieceParam,
     async (contentPieceParam) => {
       if (!contentPieceParam.trim()) return null;
 
@@ -110,7 +110,7 @@ const ContentDataProvider: ParentComponent = (props) => {
 
       return null;
     },
-    { initialValue: params.contentPieceId || null }
+    { initialValue: contentPieceParam() || null }
   );
   const setActiveVariantId = (variantId: string | null): void => {
     setStorage((storage) => ({
@@ -260,23 +260,34 @@ const ContentDataProvider: ParentComponent = (props) => {
       );
     }
   });
-  createEffect(() => {
+  createEffect((cancelPreviousRequest) => {
+    if (typeof cancelPreviousRequest === "function") {
+      cancelPreviousRequest();
+    }
+
     const id = activeContentPieceId();
     const variantId = activeVariantId();
 
     if (!id || activeContentPieceId.loading || contentPieces[id]) return;
 
+    const controller = new AbortController();
+
     client.contentPieces.get
-      .query({
-        id,
-        variant: variantId || undefined
-      })
+      .query(
+        {
+          id,
+          variant: variantId || undefined
+        },
+        { signal: controller.signal }
+      )
       .then((contentPiece) => {
         setContentPieces(id, contentPiece);
       })
       .catch(() => {
         navigate(location.pathname.includes("editor") ? "/editor" : "/", { replace: true });
       });
+
+    return () => controller.abort();
   });
   onCleanup(() => {
     contentGroupsSubscription.unsubscribe();

diff --git a/apps/web/src/layout/sidebar-menu.tsx b/apps/web/src/layout/sidebar-menu.tsx
@@ -66,7 +66,7 @@ const useMenuItems = (): Accessor<Array<MenuItem | null>> => {
   const location = useLocation();
   const md = createMediaQuery("(min-width: 768px)");
   const setSidePanelView = (view: string, toggle = true): void => {
-    if (view === storage().sidePanelView && toggle) {
+    if (view === storage().sidePanelView && (storage().sidePanelWidth || 0) > 0 && toggle) {
       setStorage((storage) => ({
         ...storage,
         sidePanelWidth: storage.sidePanelWidth || 0,
@@ -140,7 +140,9 @@ const useMenuItems = (): Accessor<Array<MenuItem | null>> => {
         icon: mdiFile,
         label: "Content piece",
         inMenu: true,
-        active: () => storage().sidePanelView === "contentPiece",
+        active: () => {
+          return storage().sidePanelView === "contentPiece" && (storage()?.sidePanelWidth || 0) > 0;
+        },
         onClick: () => {
           setSidePanelView("contentPiece");
         }
@@ -166,7 +168,7 @@ const useMenuItems = (): Accessor<Array<MenuItem | null>> => {
         icon: mdiGit,
         label: "Source control",
         inMenu: true,
-        active: () => storage().sidePanelView === "git",
+        active: () => storage().sidePanelView === "git" && (storage()?.sidePanelWidth || 0) > 0,
         onClick: () => {
           setSidePanelView("git");
         }
@@ -175,7 +177,9 @@ const useMenuItems = (): Accessor<Array<MenuItem | null>> => {
         icon: mdiCog,
         label: "Settings",
         inMenu: true,
-        active: () => storage().sidePanelView === "settings",
+        active: () => {
+          return storage().sidePanelView === "settings" && (storage()?.sidePanelWidth || 0) > 0;
+        },
         onClick: () => {
           setSidePanelView("settings");
         }
@@ -184,7 +188,9 @@ const useMenuItems = (): Accessor<Array<MenuItem | null>> => {
         icon: mdiPuzzle,
         label: "Extensions",
         inMenu: true,
-        active: () => storage().sidePanelView === "extensions",
+        active: () => {
+          return storage().sidePanelView === "extensions" && (storage()?.sidePanelWidth || 0) > 0;
+        },
         onClick: () => {
           setSidePanelView("extensions");
         }
@@ -193,7 +199,7 @@ const useMenuItems = (): Accessor<Array<MenuItem | null>> => {
         icon: mdiHelpCircle,
         label: "Help",
         inMenu: true,
-        active: () => storage().sidePanelView === "default",
+        active: () => storage().sidePanelView === "default" && (storage()?.sidePanelWidth || 0) > 0,
         onClick: () => {
           setSidePanelView("default");
         }

diff --git a/apps/web/src/views/content-piece/index.tsx b/apps/web/src/views/content-piece/index.tsx
@@ -107,6 +107,14 @@ const ContentPieceView: Component = () => {
       }
     )
   );
+  createEffect(() => {
+    if (!activeContentPieceId.loading && !activeContentPiece()) {
+      setStorage((storage) => ({
+        ...storage,
+        sidePanelView: ""
+      }));
+    }
+  });
 
   return (
     <Show

diff --git a/apps/web/src/views/explorer/content-group-row.tsx b/apps/web/src/views/explorer/content-group-row.tsx
@@ -35,16 +35,10 @@ interface ContentGroupRowProps {
   onDragEnd?(event: SortableLib.SortableEvent): void;
 }
 
-const useIsDashboardRoute = (): Accessor<boolean> => {
-  const isDashboardRouteWithContentPiece = useMatch(() => "/:contentPieceId");
-  const isDirectDashboardRoute = useMatch(() => "/");
-
-  return () => Boolean(isDashboardRouteWithContentPiece() || isDirectDashboardRoute());
-};
 const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
   const { loading, renaming, setLoading, setRenaming } = useExplorerData();
   const client = useClient();
-  const isDashboardRoute = useIsDashboardRoute();
+  const isDashboardRoute = useMatch(() => "/:contentPieceId?");
   const { notify } = useNotifications();
   const { confirmDelete } = useConfirmationModal();
   const { activeContentGroupId, expandedContentLevels, contentActions } = useContentData();
@@ -188,7 +182,7 @@ const ContentGroupRow: Component<ContentGroupRowProps> = (props) => {
     return menuOptions;
   });
   const active = (): boolean => {
-    return activeContentGroupId() === props.contentGroup.id && isDashboardRoute();
+    return activeContentGroupId() === props.contentGroup.id && Boolean(isDashboardRoute());
   };
   const highlighted = (): boolean => highlight() === props.contentGroup.id && !reordering();