From 39fbec351057358f46ecb8fea713f4d8190ed7d9 Mon Sep 17 00:00:00 2001 From: gakshita Date: Mon, 5 Aug 2024 19:45:20 +0530 Subject: [PATCH] fix: favorite improvements --- .../workspace/sidebar/projects-list-item.tsx | 366 +++++++++--------- .../workspace/sidebar/projects-list.tsx | 11 +- web/core/store/favorite.store.ts | 3 + web/core/store/pages/project-page.store.ts | 7 +- 4 files changed, 206 insertions(+), 181 deletions(-) diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx index 38e50c55619..ea52fc29b6f 100644 --- a/web/core/components/workspace/sidebar/projects-list-item.tsx +++ b/web/core/components/workspace/sidebar/projects-list-item.tsx @@ -111,6 +111,7 @@ export const SidebarProjectsListItem: React.FC = observer((props) => { const [publishModalOpen, setPublishModal] = useState(false); const [isMenuActive, setIsMenuActive] = useState(false); const [isDragging, setIsDragging] = useState(false); + const [isProjectListOpen, setIsProjectListOpen] = useState(false); const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined); // refs const actionSectionRef = useRef(null); @@ -266,200 +267,209 @@ export const SidebarProjectsListItem: React.FC = observer((props) => { if (!project) return null; + useEffect(() => { + if (URLProjectId === project.id) setIsProjectListOpen(true); + }, [URLProjectId]); + return ( <> setPublishModal(false)} /> setLeaveProjectModal(false)} /> - - {({ open }) => ( + +
+
- -
- {!disableDrag && ( + {!disableDrag && ( + + + + )} + {isSidebarCollapsed ? ( + + setIsProjectListOpen(!isProjectListOpen)} + > +
+ +
+ + + ) : ( + <> - + + setIsProjectListOpen(!isProjectListOpen)} + > +
+ +
+

{project.name}

+ + - )} - {isSidebarCollapsed ? ( - setIsMenuActive(!isMenuActive)} + > + + + } + className={cn( + "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto", + { + "opacity-100 pointer-events-auto": isMenuActive, + } + )} + customButtonClassName="grid place-items-center" + placement="bottom-start" > - -
- -
- - - ) : ( - <> - - - + + -
- -
-

{project.name}

- - - - setIsMenuActive(!isMenuActive)} - > - - - } - className={cn( - "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto", - { - "opacity-100 pointer-events-auto": isMenuActive, - } - )} - customButtonClassName="grid place-items-center" - placement="bottom-start" - > - - - - {project.is_favorite ? "Remove from favorites" : "Add to favorites"} - - + /> + {project.is_favorite ? "Remove from favorites" : "Add to favorites"} + + - {/* publish project settings */} - {isAdmin && ( - setPublishModal(true)}> -
-
- -
-
{project.anchor ? "Publish settings" : "Publish"}
+ {/* publish project settings */} + {isAdmin && ( + setPublishModal(true)}> +
+
+
- - )} - - -
- - Draft issues -
- - - - - - Copy link - +
{project.anchor ? "Publish settings" : "Publish"}
+
- {!isViewerOrGuest && ( - - -
- - Archives -
- - - )} + )} + + +
+ + Draft issues +
+ + + + + + Copy link + + + {!isViewerOrGuest && ( - +
- - Settings + + Archives
- {/* leave project */} - {isViewerOrGuest && ( - -
- - Leave project -
- - )} - - - - - - )} -
- + )} + + +
+ + Settings +
+ + + {/* leave project */} + {isViewerOrGuest && ( + +
+ + Leave project +
+ + )} + + setIsProjectListOpen(!isProjectListOpen)} + > + + + + )} +
+ + {isProjectListOpen && ( {navigation(workspaceSlug?.toString(), project?.id).map((item) => { if ( @@ -498,10 +508,10 @@ export const SidebarProjectsListItem: React.FC = observer((props) => { ); })} - - {isLastChild && } -
- )} + )} + + {isLastChild && } +
); diff --git a/web/core/components/workspace/sidebar/projects-list.tsx b/web/core/components/workspace/sidebar/projects-list.tsx index 8c3a60dad57..568f9844396 100644 --- a/web/core/components/workspace/sidebar/projects-list.tsx +++ b/web/core/components/workspace/sidebar/projects-list.tsx @@ -4,7 +4,7 @@ import { useState, FC, useRef, useEffect } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element"; import { observer } from "mobx-react"; -import { useParams } from "next/navigation"; +import { useParams, usePathname } from "next/navigation"; import { Briefcase, ChevronRight, Plus } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; // types @@ -43,6 +43,8 @@ export const SidebarProjectsList: FC = observer(() => { const { getProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject(); // router params const { workspaceSlug } = useParams(); + const pathname = usePathname(); + // auth const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER; @@ -127,7 +129,12 @@ export const SidebarProjectsList: FC = observer(() => { setIsAllProjectsListOpen(isOpen); localStorage.setItem("isAllProjectsListOpen", isOpen.toString()); }; - + useEffect(() => { + if (pathname.includes("projects")) { + setIsAllProjectsListOpen(true); + localStorage.setItem("isAllProjectsListOpen", "true"); + } + }, [pathname]); return ( <> {workspaceSlug && ( diff --git a/web/core/store/favorite.store.ts b/web/core/store/favorite.store.ts index 50eca4b89cc..30917afcb24 100644 --- a/web/core/store/favorite.store.ts +++ b/web/core/store/favorite.store.ts @@ -399,6 +399,9 @@ export class FavoriteStore implements IFavoriteStore { */ fetchFavorite = async (workspaceSlug: string) => { try { + this.favoriteIds = []; + this.favoriteMap = {}; + this.entityMap = {}; const favorites = await this.favoriteService.getFavorites(workspaceSlug); runInAction(() => { favorites.forEach((favorite) => { diff --git a/web/core/store/pages/project-page.store.ts b/web/core/store/pages/project-page.store.ts index 26b532320e2..18487d3b3b4 100644 --- a/web/core/store/pages/project-page.store.ts +++ b/web/core/store/pages/project-page.store.ts @@ -53,6 +53,7 @@ export class ProjectPageStore implements IProjectPageStore { }; // service service: ProjectPageService; + rootStore: CoreRootStore; constructor(private store: CoreRootStore) { makeObservable(this, { @@ -70,6 +71,7 @@ export class ProjectPageStore implements IProjectPageStore { createPage: action, removePage: action, }); + this.rootStore = store; // service this.service = new ProjectPageService(); // initialize display filters of the current project @@ -257,7 +259,10 @@ export class ProjectPageStore implements IProjectPageStore { if (!workspaceSlug || !projectId || !pageId) return undefined; await this.service.remove(workspaceSlug, projectId, pageId); - runInAction(() => unset(this.data, [pageId])); + runInAction(() => { + unset(this.data, [pageId]); + this.rootStore.favorite.removeFavoriteFromStore(pageId); + }); } catch (error) { runInAction(() => { this.loader = undefined;