fix: pwa app sidebar redirection

makeplane · Aug 23, 2024 · f563d1b · f563d1b
1 parent 48e9042
commit f563d1b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/...core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/...core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -1,6 +1,9 @@
 "use client";
 import React, { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
+import { useAppTheme } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   projectId: string | null;
@@ -10,8 +13,11 @@ type Props = {
   isSidebarCollapsed: boolean;
 };
 
-export const FavoriteItemTitle: FC<Props> = (props) => {
+export const FavoriteItemTitle: FC<Props> = observer((props) => {
   const { projectId, href, title, icon, isSidebarCollapsed } = props;
+  // store hooks
+  const { toggleSidebar } = useAppTheme();
+  const { isMobile } = usePlatformOS();
 
   const linkClass = "flex items-center gap-1.5 truncate w-full";
   const collapsedClass =
@@ -22,6 +28,7 @@ export const FavoriteItemTitle: FC<Props> = (props) => {
       const projectItem = document.getElementById(`${projectId}`);
       projectItem?.scrollIntoView({ behavior: "smooth" });
     }
+    if (isMobile) toggleSidebar();
   };
 
   return (
@@ -30,4 +37,4 @@ export const FavoriteItemTitle: FC<Props> = (props) => {
       {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
     </Link>
   );
-};
+});
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -8,7 +8,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
 import {
   PenSquare,
@@ -126,7 +126,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
   const projectRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
-  // router params
+  // router
+  const router = useRouter();
   const { workspaceSlug, projectId: URLProjectId } = useParams();
   // pathname
   const pathname = usePathname();
@@ -281,6 +282,17 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     else setIsProjectListOpen(false);
   }, [URLProjectId]);
 
+  const handleItemClick = () => {
+    const isDifferentProject = URLProjectId !== project.id;
+    if (!isProjectListOpen) {
+      router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
+      if (isDifferentProject && isMobile) {
+        toggleSidebar();
+      }
+    }
+    setIsProjectListOpen((prev) => !prev);
+  };
+
   return (
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
@@ -337,7 +349,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                 <Disclosure.Button
                   as="button"
                   className="size-8 aspect-square flex-shrink-0 grid place-items-center"
-                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                  onClick={handleItemClick}
                 >
                   <div className="size-4 grid place-items-center flex-shrink-0">
                     <Logo logo={project.logo_props} size={16} />
@@ -359,7 +371,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                       className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {
                         "justify-center": isSidebarCollapsed,
                       })}
-                      onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                      onClick={handleItemClick}
                     >
                       <div className="size-4 grid place-items-center flex-shrink-0">
                         <Logo logo={project.logo_props} size={16} />