fix: Zen mode, localstorage, navigation on delete

vriteio · Feb 4, 2024 · 8b86ffd · 8b86ffd
1 parent d693636
commit 8b86ffd
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 100 deletions.
diff --git a/apps/backend/collaboration/src/extensions/git-sync.ts b/apps/backend/collaboration/src/extensions/git-sync.ts
@@ -80,6 +80,8 @@ class GitSync implements Extension {
     variantId: string | null,
     details: Pick<onChangePayload, "context" | "document">
   ): Promise<void> {
+    if (variantId) return;
+
     const ctx = {
       db: this.fastify.mongo.db!,
       auth: {
@@ -94,22 +96,11 @@ class GitSync implements Extension {
 
     if (!gitData || !gitProvider) return;
 
-    const baseContentPiece = await this.contentPiecesCollection.findOne({
+    const contentPiece = await this.contentPiecesCollection.findOne({
       _id: new ObjectId(contentPieceId)
     });
 
-    let contentPiece = baseContentPiece;
-
-    if (variantId) {
-      const contentPieceVariant = await this.contentPieceVariantsCollection.findOne({
-        _id: new ObjectId(variantId)
-      });
-
-      contentPiece = {
-        ...baseContentPiece,
-        ...contentPieceVariant
-      };
-    }
+    if (!contentPiece) return;
 
     const json = docToJSON(details.document);
     const outputContentProcessor = await createOutputContentProcessor(
@@ -125,8 +116,7 @@ class GitSync implements Extension {
     await this.gitDataCollection.updateOne(
       {
         "workspaceId": new ObjectId(details.context.workspaceId),
-        "records.contentPieceId": new ObjectId(contentPieceId),
-        ...(variantId && { "records.variantId": new ObjectId(variantId) })
+        "records.contentPieceId": new ObjectId(contentPieceId)
       },
       {
         $set: {
@@ -138,10 +128,7 @@ class GitSync implements Extension {
       action: "update",
       data: {
         records: gitData.records.map((record: any) => {
-          if (
-            record.contentPieceId.toString() === contentPieceId &&
-            ((!variantId && !record.variantId) || `${record.variantId}` === `${variantId}`)
-          ) {
+          if (record.contentPieceId.toString() === contentPieceId) {
             return {
               ...record,
               currentHash

diff --git a/apps/web/src/context/command-palette/index.tsx b/apps/web/src/context/command-palette/index.tsx
@@ -51,6 +51,7 @@ import { App, useClient } from "#context/client";
 import { useLocalStorage } from "#context/local-storage";
 import { breakpoints } from "#lib/utils";
 import { useHostConfig } from "#context/host-config";
+import { useContentData } from "#context/content";
 
 interface CommandCategory {
   label: string;
@@ -110,6 +111,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
   const client = useClient();
   const navigate = useNavigate();
   const { setStorage } = useLocalStorage();
+  const { activeVariantId } = useContentData();
   const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);
   const [abortControllerRef, setAbortControllerRef] = createSignal<AbortController | null>(null);
   const [searchResults, setSearchResults] = createSignal<
@@ -178,7 +180,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
 
     try {
       const results = await client.search.search.query(
-        { query: query() },
+        { query: query(), variantId: activeVariantId() || undefined },
         { signal: abortControllerRef()?.signal }
       );
 

diff --git a/apps/web/src/context/content/actions.ts b/apps/web/src/context/content/actions.ts
@@ -1,4 +1,6 @@
 import { SetStoreFunction } from "solid-js/store";
+import { useLocation, useNavigate } from "@solidjs/router";
+import { Accessor } from "solid-js";
 import { App, ContentLevel } from "#context";
 
 interface ContentActionsInput {
@@ -13,6 +15,10 @@ interface ContentActionsInput {
     Record<string, App.ExtendedContentPieceWithAdditionalData<"order" | "coverWidth"> | undefined>
   >;
   setContentLevels: SetStoreFunction<Record<string, ContentLevel | undefined>>;
+  activeContentGroupId(): string | null;
+  activeContentPieceId(): string | null;
+  setActiveContentGroupId(contentGroupId: string | null): void;
+  collapseContentLevel(contentGroupId: string): void;
 }
 interface ContentActions {
   createContentGroup(data: App.ContentGroup): void;
@@ -39,10 +45,14 @@ const createContentActions = ({
   contentGroups,
   contentPieces,
   contentLevels,
+  activeContentPieceId,
   setContentGroups,
   setContentPieces,
-  setContentLevels
+  setContentLevels,
+  collapseContentLevel
 }: ContentActionsInput): ContentActions => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const createContentGroup: ContentActions["createContentGroup"] = (data) => {
     const parentId = data.ancestors.at(-1) || "";
 
@@ -72,31 +82,34 @@ const createContentActions = ({
       });
     }
 
-    if (contentGroups[data.id]) {
-      // Remove group
-      setContentGroups(data.id, undefined);
+    collapseContentLevel(data.id);
 
-      // Remove descendants (content pieces and groups)
-      const removeDescendants = (groupId: string): void => {
+    if (contentGroups[data.id]) {
+      const deleteNestedContentGroups = (groupId: string): void => {
         const group = contentGroups[groupId];
 
         if (!group) return;
 
+        if (contentLevels[groupId]) {
+          setContentPieces(contentLevels[groupId]?.pieces || [], undefined);
+          setContentLevels(groupId, undefined);
+        }
+
         group.descendants.forEach((descendantId) => {
           const descendant = contentGroups[descendantId];
 
-          if (contentLevels[descendantId]) {
-            setContentLevels(descendantId, undefined);
-          }
-
           if (descendant) {
             setContentGroups(descendantId, undefined);
-            removeDescendants(descendantId);
+            deleteNestedContentGroups(descendantId);
           }
         });
       };
 
-      removeDescendants(data.id);
+      deleteNestedContentGroups(data.id);
+    }
+
+    if (activeContentPieceId() && !contentPieces[activeContentPieceId()!]) {
+      navigate(location.pathname.includes("editor") ? "/editor" : "/", { replace: true });
     }
   };
   const moveContentGroup: ContentActions["moveContentGroup"] = (data) => {
@@ -300,18 +313,22 @@ const createContentActions = ({
     }
   };
   const deleteContentPiece: ContentActions["deleteContentPiece"] = (data) => {
-    const currentContentPiece = contentPieces[data.id];
-    const currentParentId = currentContentPiece?.contentGroupId || "";
+    const deletedContentPiece = contentPieces[data.id];
+    const currentParentId = deletedContentPiece?.contentGroupId || "";
 
     if (contentLevels[currentParentId]) {
       setContentLevels(currentParentId, "pieces", (pieces) => {
         return pieces.filter((pieceId) => pieceId !== data.id);
       });
     }
 
-    if (currentContentPiece) {
+    if (deletedContentPiece) {
       setContentPieces(data.id, undefined);
     }
+
+    if (activeContentPieceId() === data.id) {
+      navigate(location.pathname.includes("editor") ? "/editor" : "/", { replace: true });
+    }
   };
 
   return {

diff --git a/apps/web/src/context/content/index.tsx b/apps/web/src/context/content/index.tsx
@@ -3,7 +3,7 @@ import { ContentLoader, createContentLoader } from "./loader";
 import { createContext, createResource, ParentComponent, useContext } from "solid-js";
 import { createEffect, on, onCleanup } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
-import { useParams } from "@solidjs/router";
+import { useNavigate, useParams } from "@solidjs/router";
 import { useClient, useLocalStorage, App } from "#context";
 
 interface ContentLevel {
@@ -37,6 +37,7 @@ const ContentDataContext = createContext<ContentDataContextData>();
 const ContentDataProvider: ParentComponent = (props) => {
   const client = useClient();
   const params = useParams();
+  const navigate = useNavigate();
   const { storage, setStorage } = useLocalStorage();
   const [variants, setVariants] = createStore<Record<string, App.Variant | undefined>>({});
   const [contentLevels, setContentLevels] = createStore<Record<string, ContentLevel | undefined>>(
@@ -125,7 +126,11 @@ const ContentDataProvider: ParentComponent = (props) => {
     contentLevels,
     setContentGroups,
     setContentPieces,
-    setContentLevels
+    setContentLevels,
+    activeContentPieceId,
+    activeContentGroupId,
+    setActiveContentGroupId,
+    collapseContentLevel
   });
   const contentLoader = createContentLoader({
     contentGroups,
@@ -241,6 +246,9 @@ const ContentDataProvider: ParentComponent = (props) => {
       })
       .then((contentPiece) => {
         setContentPieces(id, contentPiece);
+      })
+      .catch(() => {
+        navigate(location.pathname.includes("editor") ? "/editor" : "/", { replace: true });
       });
   });
   onCleanup(() => {

diff --git a/apps/web/src/context/local-storage.tsx b/apps/web/src/context/local-storage.tsx
@@ -21,6 +21,7 @@ interface StorageData {
   settingsSection: string;
   zenMode: boolean;
   html: string;
+  version: string;
 }
 interface LocalStorageContextData {
   storage: Accessor<Partial<StorageData>>;
@@ -30,18 +31,27 @@ interface LocalStorageContextData {
 const LocalStorageContext = createContext<LocalStorageContextData>();
 const LocalStorageProvider: ParentComponent = (props) => {
   const [storage, setStorage] = createSignal<Partial<StorageData>>({});
+  const currentVersion = "0.4";
+  const defaultData: Partial<StorageData> = {
+    toolbarView: "default",
+    sidePanelView: "default",
+    sidePanelWidth: 375,
+    version: currentVersion
+  };
 
   try {
-    const storedData = localStorage.getItem("ui");
+    const storedDataString = localStorage.getItem("ui");
 
-    if (storedData && storedData !== "{}") {
-      setStorage(JSON.parse(storedData));
+    if (storedDataString && storedDataString !== "{}") {
+      const storedData = JSON.parse(storedDataString);
+
+      if (storedData.version === currentVersion) {
+        setStorage(storedData);
+      } else {
+        setStorage(defaultData);
+      }
     } else {
-      setStorage({
-        toolbarView: "default",
-        sidePanelView: "default",
-        sidePanelWidth: 375
-      });
+      setStorage(defaultData);
     }
   } catch (error) {
     // eslint-disable-next-line no-console

diff --git a/apps/web/src/layout/secured-layout.tsx b/apps/web/src/layout/secured-layout.tsx
@@ -6,6 +6,7 @@ import { SidePanelRight } from "./side-panel-right";
 import { ParentComponent, Show, createEffect } from "solid-js";
 import { useLocation } from "@solidjs/router";
 import { mdiFullscreenExit } from "@mdi/js";
+import clsx from "clsx";
 import {
   AppearanceProvider,
   AuthenticatedUserDataProvider,
@@ -31,10 +32,15 @@ const SecuredLayout: ParentComponent = (props) => {
     <AuthenticatedUserDataProvider>
       <AppearanceProvider>
         <ExtensionsProvider>
-          <CommandPaletteProvider>
-            <ContentDataProvider>
+          <ContentDataProvider>
+            <CommandPaletteProvider>
               <div class="flex flex-col h-full w-full">
-                <div class="flex-1 flex flex-col-reverse md:flex-row h-[calc(100%-1.5rem)] border-b-2 border-gray-200 dark:border-gray-700 ">
+                <div
+                  class={clsx(
+                    "flex-1 flex flex-col-reverse md:flex-row h-[calc(100%-1.5rem)]",
+                    !storage().zenMode && "border-b-2 border-gray-200 dark:border-gray-700"
+                  )}
+                >
                   <Show
                     when={!storage().zenMode}
                     fallback={
@@ -69,18 +75,27 @@ const SecuredLayout: ParentComponent = (props) => {
                         <Show when={!storage().zenMode}>
                           <Toolbar />
                         </Show>
-                        <div class="absolute h-[calc(100%-3rem)] w-full top-12">
+                        <div
+                          class={clsx(
+                            "absolute w-full",
+                            storage().zenMode ? "top-0 h-full" : "h-[calc(100%-3rem)] top-12"
+                          )}
+                        >
                           {props.children}
                         </div>
                       </div>
-                      <SidePanelRight />
+                      <Show when={!storage().zenMode}>
+                        <SidePanelRight />
+                      </Show>
                     </div>
                   </div>
                 </div>
-                <BottomMenu />
+                <Show when={!storage().zenMode}>
+                  <BottomMenu />
+                </Show>
               </div>
-            </ContentDataProvider>
-          </CommandPaletteProvider>
+            </CommandPaletteProvider>
+          </ContentDataProvider>
         </ExtensionsProvider>
       </AppearanceProvider>
     </AuthenticatedUserDataProvider>