From f563d1b0254132f7b98c03e2eca69317adb94bda Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Fri, 23 Aug 2024 14:46:12 +0530 Subject: [PATCH 1/2] fix: pwa app sidebar redirection --- .../common/favorite-item-title.tsx | 11 ++++++++-- .../workspace/sidebar/projects-list-item.tsx | 20 +++++++++++++++---- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx index 5b25b858a49..dfa939ce352 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx +++ b/web/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) => { +export const FavoriteItemTitle: FC = 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) => { const projectItem = document.getElementById(`${projectId}`); projectItem?.scrollIntoView({ behavior: "smooth" }); } + if (isMobile) toggleSidebar(); }; return ( @@ -30,4 +37,4 @@ export const FavoriteItemTitle: FC = (props) => { {!isSidebarCollapsed && {title}} ); -}; +}); diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx index 5feada1a8f4..441d4eeff6f 100644 --- 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 = observer((props) => { const actionSectionRef = useRef(null); const projectRef = useRef(null); const dragHandleRef = useRef(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 = 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 ( <> setPublishModal(false)} /> @@ -337,7 +349,7 @@ export const SidebarProjectsListItem: React.FC = observer((props) => { setIsProjectListOpen(!isProjectListOpen)} + onClick={handleItemClick} >
@@ -359,7 +371,7 @@ export const SidebarProjectsListItem: React.FC = 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} >
From a816dffc4be81437aa599597bf652401bb57bbcc Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 26 Aug 2024 13:23:47 +0530 Subject: [PATCH 2/2] chore: pwa app sidebar improvement --- .../workspace/sidebar/projects-list-item.tsx | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx index 441d4eeff6f..edfbca401e4 100644 --- a/web/core/components/workspace/sidebar/projects-list-item.tsx +++ b/web/core/components/workspace/sidebar/projects-list-item.tsx @@ -35,6 +35,7 @@ import { DropIndicator, DragHandle, Intake, + ControlLink, } from "@plane/ui"; // components import { Logo } from "@/components/common"; @@ -283,13 +284,7 @@ export const SidebarProjectsListItem: React.FC = observer((props) => { }, [URLProjectId]); const handleItemClick = () => { - const isDifferentProject = URLProjectId !== project.id; - if (!isProjectListOpen) { - router.push(`/${workspaceSlug}/projects/${project.id}/issues`); - if (isDifferentProject && isMobile) { - toggleSidebar(); - } - } + if (!isProjectListOpen && !isMobile) router.push(`/${workspaceSlug}/projects/${project.id}/issues`); setIsProjectListOpen((prev) => !prev); }; @@ -297,7 +292,7 @@ export const SidebarProjectsListItem: React.FC = observer((props) => { <> setPublishModal(false)} /> setLeaveProjectModal(false)} /> - +
= observer((props) => { )} {isSidebarCollapsed ? ( - - +
- + ) : ( <> = observer((props) => { disabled={!isSidebarCollapsed} isMobile={isMobile} > - +

{project.name}

 - +