From f7e60419c9cd7a3e3c9ea1fbc9904e9d92dcd192 Mon Sep 17 00:00:00 2001 From: MananTank Date: Thu, 12 Dec 2024 18:19:17 +0000 Subject: [PATCH] [Nebula] Fix page not redirected to new chat page when deleting active chat (#5712) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes: DASH-613 --- ## PR-Codex overview This PR focuses on refactoring the usage of the `newChatPageUrlStore` by introducing a custom hook, `useNewChatPageLink`, to manage the chat page URL more effectively across different components. ### Detailed summary - Added `useNewChatPageLink` hook in `useNewChatPageLink.ts` to retrieve the chat page URL. - Updated imports of `useNewChatPageLink` in `NebulaMobileNav.tsx`, `ChatSidebarLink.tsx`, and `ChatSidebar.tsx`. - Removed duplicate `useNewChatPageLink` function from `ChatSidebar.tsx`. - Set `newChatPageUrlStore` value directly in `ChatPageContent.tsx` based on the current page type. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../app/nebula-app/(app)/components/ChatPageContent.tsx | 8 ++------ .../src/app/nebula-app/(app)/components/ChatSidebar.tsx | 8 +------- .../app/nebula-app/(app)/components/ChatSidebarLink.tsx | 4 +++- .../app/nebula-app/(app)/components/NebulaMobileNav.tsx | 3 ++- .../src/app/nebula-app/(app)/hooks/useNewChatPageLink.ts | 9 +++++++++ 5 files changed, 17 insertions(+), 15 deletions(-) create mode 100644 apps/dashboard/src/app/nebula-app/(app)/hooks/useNewChatPageLink.ts diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx index 79e34c91db3..92dc3e64aef 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx @@ -66,17 +66,13 @@ export function ChatPageContent(props: { // update page URL without reloading window.history.replaceState({}, "", `/chat/${sessionId}`); - const url = new URL(window.location.origin); - // if the current page is landing page, link to /chat // if current page is new /chat page, link to landing page if (props.type === "landing") { - url.pathname = "/chat"; + newChatPageUrlStore.setValue("/chat"); } else { - url.pathname = "/"; + newChatPageUrlStore.setValue("/"); } - - newChatPageUrlStore.setValue(url.href); } const messagesEndRef = useRef(null); diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx index 1985a5b285c..76224a4b52f 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx @@ -1,14 +1,13 @@ "use client"; import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow"; import { Button } from "@/components/ui/button"; -import { useStore } from "@/lib/reactive"; import type { Account } from "@3rdweb-sdk/react/hooks/useApi"; import { ChevronRightIcon, MessageSquareDashedIcon } from "lucide-react"; import Link from "next/link"; import type { TruncatedSessionInfo } from "../api/types"; +import { useNewChatPageLink } from "../hooks/useNewChatPageLink"; import { useSessionsWithLocalOverrides } from "../hooks/useSessionsWithLocalOverrides"; import { NebulaIcon } from "../icons/NebulaIcon"; -import { newChatPageUrlStore } from "../stores"; import { ChatSidebarLink } from "./ChatSidebarLink"; import { NebulaAccountButton } from "./NebulaAccountButton"; @@ -80,8 +79,3 @@ export function ChatSidebar(props: { ); } - -export function useNewChatPageLink() { - const newChatPage = useStore(newChatPageUrlStore); - return newChatPage || "/chat"; -} diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx index 09477ae0c87..e8c0bf73f6b 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx @@ -14,6 +14,7 @@ import { EllipsisIcon, TrashIcon } from "lucide-react"; import { usePathname } from "next/navigation"; import { toast } from "sonner"; import { deleteSession } from "../api/session"; +import { useNewChatPageLink } from "../hooks/useNewChatPageLink"; import { deletedSessionsStore } from "../stores"; // TODO - add delete chat confirmation dialog @@ -27,6 +28,7 @@ export function ChatSidebarLink(props: { const pathname = usePathname(); const linkPath = `/chat/${props.sessionId}`; const isDeletingCurrentPage = pathname === linkPath; + const newChatLink = useNewChatPageLink(); const deleteChat = useMutation({ mutationFn: () => { return deleteSession({ @@ -38,7 +40,7 @@ export function ChatSidebarLink(props: { const prev = deletedSessionsStore.getValue(); deletedSessionsStore.setValue([...prev, props.sessionId]); if (isDeletingCurrentPage) { - router.replace("/"); + router.replace(newChatLink); } }, }); diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx index 1d25150b621..fd0bd585522 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx @@ -12,7 +12,8 @@ import { MenuIcon } from "lucide-react"; import Link from "next/link"; import { useState } from "react"; import type { TruncatedSessionInfo } from "../api/types"; -import { ChatSidebar, useNewChatPageLink } from "./ChatSidebar"; +import { useNewChatPageLink } from "../hooks/useNewChatPageLink"; +import { ChatSidebar } from "./ChatSidebar"; export function MobileNav(props: { sessions: TruncatedSessionInfo[]; diff --git a/apps/dashboard/src/app/nebula-app/(app)/hooks/useNewChatPageLink.ts b/apps/dashboard/src/app/nebula-app/(app)/hooks/useNewChatPageLink.ts new file mode 100644 index 00000000000..ce95320bca8 --- /dev/null +++ b/apps/dashboard/src/app/nebula-app/(app)/hooks/useNewChatPageLink.ts @@ -0,0 +1,9 @@ +"use client"; + +import { useStore } from "@/lib/reactive"; +import { newChatPageUrlStore } from "../stores"; + +export function useNewChatPageLink() { + const newChatPage = useStore(newChatPageUrlStore); + return newChatPage || "/chat"; +}