From 240d9a35702050c1256dee98e0ecf3dd744bf253 Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Wed, 21 Aug 2024 15:08:02 +0530
Subject: [PATCH] [WEB-2232] fix: scope dropdown changes (#886)

* fix: scope dropdown changes

* fix: fixed persistent state

* fix: dependency array
---
 .../projects/dropdowns/scope-dropdown.tsx     |  3 +++
 web/ee/components/projects/root.tsx           | 17 ++++++++++++--
 .../filters/filters.ts                        | 23 ++++++++++---------
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/web/ee/components/projects/dropdowns/scope-dropdown.tsx b/web/ee/components/projects/dropdowns/scope-dropdown.tsx
index 9237d06cb0..064e60e99d 100644
--- a/web/ee/components/projects/dropdowns/scope-dropdown.tsx
+++ b/web/ee/components/projects/dropdowns/scope-dropdown.tsx
@@ -2,6 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
 import { ChevronDown } from "lucide-react";
 import { cn } from "@plane/editor";
 import { CustomMenu } from "@plane/ui";
@@ -21,6 +22,7 @@ export const ProjectScopeDropdown: FC<TProjectScopeDropdown> = observer((props)
   const { workspaceSlug, className } = props;
   // hooks
   const { scopeProjectsCount, filters, updateScope, updateLayout } = useProjectFilter();
+  const router = useRouter();
 
   // derived values
   const selectedScope = filters?.scope || EProjectScope.ALL_PROJECTS;
@@ -53,6 +55,7 @@ export const ProjectScopeDropdown: FC<TProjectScopeDropdown> = observer((props)
         key={scope.key}
         className="flex items-center gap-2 truncate"
         onClick={() => {
+          router.push(`?show-all-projects=${scope.key === EProjectScope.ALL_PROJECTS}`);
           updateScope(workspaceSlug, scope.key);
           if (
             scope.key === EProjectScope.ALL_PROJECTS &&
diff --git a/web/ee/components/projects/root.tsx b/web/ee/components/projects/root.tsx
index 12ea6905c0..250c161fd9 100644
--- a/web/ee/components/projects/root.tsx
+++ b/web/ee/components/projects/root.tsx
@@ -3,9 +3,11 @@
 import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
 // plane web components
+import { usePathname, useSearchParams } from "next/navigation";
 import { ProjectLayoutRoot } from "@/plane-web/components/projects";
 // plane web hooks
 import { useProjectFilter } from "@/plane-web/hooks/store";
+import { EProjectScope } from "@/plane-web/types/workspace-project-filters";
 
 type TWorkspaceProjectsRoot = {
   workspaceSlug: string;
@@ -16,10 +18,21 @@ export const WorkspaceProjectsRoot: FC<TWorkspaceProjectsRoot> = observer((props
   const { workspaceSlug } = props;
   // hooks
   const { initWorkspaceFilters } = useProjectFilter();
+  const searchParams = useSearchParams();
+  const showAllProjects = searchParams.get("show-all-projects");
+  const pathname = usePathname();
 
   useEffect(() => {
-    if (workspaceSlug) initWorkspaceFilters(workspaceSlug);
-  }, [workspaceSlug, initWorkspaceFilters]);
+    if (workspaceSlug)
+      initWorkspaceFilters(
+        workspaceSlug,
+        typeof showAllProjects === "string"
+          ? showAllProjects === "true"
+            ? EProjectScope.ALL_PROJECTS
+            : EProjectScope.MY_PROJECTS
+          : undefined
+      );
+  }, [workspaceSlug, initWorkspaceFilters, pathname, showAllProjects]);
 
   return <ProjectLayoutRoot />;
 });
diff --git a/web/ee/store/workspace-project-states/filters/filters.ts b/web/ee/store/workspace-project-states/filters/filters.ts
index 5a09813a4e..b2095b6c61 100644
--- a/web/ee/store/workspace-project-states/filters/filters.ts
+++ b/web/ee/store/workspace-project-states/filters/filters.ts
@@ -39,7 +39,7 @@ export interface IProjectFilterStore extends IProjectFilterHelper {
   ) => TProjectsLayoutStructure[T] | undefined;
   // helpers actions
   // actions
-  initWorkspaceFilters: (workspaceSlug: string) => void;
+  initWorkspaceFilters: (workspaceSlug: string, scope?: EProjectScope) => void;
   updateScope: (workspaceSlug: string, scope: TProjectScope) => void;
   updateLayout: (workspaceSlug: string, layout: TProjectLayouts) => void;
   updateAttributes: <T extends keyof TProjectAttributes>(
@@ -203,18 +203,19 @@ export class ProjectFilterStore extends ProjectFilterHelper implements IProjectF
    * @param { string } workspaceSlug
    * @returns { void }
    */
-  initWorkspaceFilters = (workspaceSlug: string): void => {
-    if (Object.keys(this.scopeMap).includes(workspaceSlug)) return;
+  initWorkspaceFilters = (workspaceSlug: string, scope?: EProjectScope): void => {
     const savedFilters = this.handleProjectLocalFilters.get(workspaceSlug);
 
-    if (!this.scopeMap[workspaceSlug]) {
-      this.updateScope(
-        workspaceSlug,
-        savedFilters.scope ||
-          (this.scopeProjectsCount[EProjectScope.MY_PROJECTS] > 0
-            ? EProjectScope.MY_PROJECTS
-            : EProjectScope.ALL_PROJECTS)
-      );
+    this.updateScope(
+      workspaceSlug,
+      scope ||
+        (this.scopeProjectsCount[EProjectScope.MY_PROJECTS] > 0
+          ? EProjectScope.MY_PROJECTS
+          : EProjectScope.ALL_PROJECTS)
+    );
+
+    if (!this.layoutMap[workspaceSlug]) {
+      this.updateLayout(workspaceSlug, savedFilters.layout || EProjectLayouts.GALLERY);
     }
     if (!this.layoutMap[workspaceSlug]) {
       this.updateLayout(workspaceSlug, savedFilters.layout || EProjectLayouts.GALLERY);