[WEB-2943] chore: issue reaction and code refactor (#6350)

* chore: issue reaction component updated

* chore: project store updated

web/core/components/issues/issue-detail/reactions/issue.tsx

@@ -20,10 +20,11 @@ export type TIssueReaction = {
   issueId: string;
   currentUser: IUser;
   disabled?: boolean;
+  className?: string;
 };
 
 export const IssueReaction: FC<TIssueReaction> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, currentUser, disabled = false } = props;
+  const { workspaceSlug, projectId, issueId, currentUser, disabled = false, className = "" } = props;
   // hooks
   const {
     reaction: { getReactionsByIssueId, reactionsByUser, getReactionById },
@@ -92,7 +93,7 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
   };
 
   return (
-    <div className="relative mt-4 flex items-center gap-1.5">
+    <div className={cn("relative mt-4 flex items-center gap-1.5", className)}>
       {!disabled && (
         <ReactionSelector size="md" position="top" value={userReactions} onSelect={issueReactionOperations.react} />
       )}

web/core/store/project/project.store.ts

@@ -11,6 +11,8 @@ import { ProjectService, ProjectStateService, ProjectArchiveService } from "@/se
 // store
 import { CoreRootStore } from "../root.store";
 
+type ProjectOverviewCollapsible = "links" | "attachments";
+
 export interface IProjectStore {
   // observables
   isUpdatingProject: boolean;
@@ -18,9 +20,6 @@ export interface IProjectStore {
   projectMap: {
     [projectId: string]: TProject; // projectId: project Info
   };
-  projectEpicPropertiesMap: {
-    [projectId: string]: any;
-  };
   // computed
   filteredProjectIds: string[] | undefined;
   workspaceProjectIds: string[] | undefined;
@@ -32,9 +31,15 @@ export interface IProjectStore {
   // actions
   getProjectById: (projectId: string | undefined | null) => TProject | undefined;
   getProjectIdentifierById: (projectId: string | undefined | null) => string;
-  getProjectEpicPropertiesById: (projectId: string | undefined | null) => any;
+  // collapsible
+  openCollapsibleSection: ProjectOverviewCollapsible[];
+  lastCollapsibleAction: ProjectOverviewCollapsible | null;
+
+  setOpenCollapsibleSection: (section: ProjectOverviewCollapsible[]) => void;
+  setLastCollapsibleAction: (section: ProjectOverviewCollapsible) => void;
+  toggleOpenCollapsibleSection: (section: ProjectOverviewCollapsible) => void;
+
   // fetch actions
-  fetchProjectEpicProperties: (workspaceSlug: string, projectId: string) => Promise<any>;
   fetchProjects: (workspaceSlug: string) => Promise<TProject[]>;
   fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<TProject>;
   // favorites actions
@@ -58,9 +63,9 @@ export class ProjectStore implements IProjectStore {
   projectMap: {
     [projectId: string]: TProject; // projectId: project Info
   } = {};
-  projectEpicPropertiesMap: {
+  openCollapsibleSection: ProjectOverviewCollapsible[] = [];
-    [projectId: string]: any;
+  lastCollapsibleAction: ProjectOverviewCollapsible | null = null;
-  } = {};
+
   // root store
   rootStore: CoreRootStore;
   // service
@@ -76,6 +81,8 @@ export class ProjectStore implements IProjectStore {
       isUpdatingProject: observable,
       loader: observable.ref,
       projectMap: observable,
+      openCollapsibleSection: observable.ref,
+      lastCollapsibleAction: observable.ref,
       // computed
       filteredProjectIds: computed,
       workspaceProjectIds: computed,
@@ -85,7 +92,6 @@ export class ProjectStore implements IProjectStore {
       joinedProjectIds: computed,
       favoriteProjectIds: computed,
       // fetch actions
-      fetchProjectEpicProperties: action,
       fetchProjects: action,
       fetchProjectDetails: action,
       // favorites actions
@@ -96,6 +102,10 @@ export class ProjectStore implements IProjectStore {
       // CRUD actions
       createProject: action,
       updateProject: action,
+      // collapsible actions
+      setOpenCollapsibleSection: action,
+      setLastCollapsibleAction: action,
+      toggleOpenCollapsibleSection: action,
     });
     // root store
     this.rootStore = _rootStore;
@@ -214,23 +224,22 @@ export class ProjectStore implements IProjectStore {
     return projectIds;
   }
 
-  fetchProjectEpicProperties = async (workspaceSlug: string, projectId: string) => {
+  setOpenCollapsibleSection = (section: ProjectOverviewCollapsible[]) => {
-    try {
+    this.openCollapsibleSection = section;
-      const response = await this.projectService.fetchProjectEpicProperties(workspaceSlug, projectId);
+    if (this.lastCollapsibleAction) this.lastCollapsibleAction = null;
-      runInAction(() => {
-        set(this.projectEpicPropertiesMap, [projectId], response);
-      });
-      return response;
-    } catch (error) {
-      console.log("Failed to fetch epic properties from project store");
-      throw error;
-    }
   };
 
-  getProjectEpicPropertiesById = computedFn((projectId: string | undefined | null) => {
+  setLastCollapsibleAction = (section: ProjectOverviewCollapsible) => {
-    const projectEpicProperties = this.projectEpicPropertiesMap[projectId ?? ""];
+    this.openCollapsibleSection = [section];
-    return projectEpicProperties;
+  };
-  });
+
+  toggleOpenCollapsibleSection = (section: ProjectOverviewCollapsible) => {
+    if (this.openCollapsibleSection && this.openCollapsibleSection.includes(section)) {
+      this.openCollapsibleSection = this.openCollapsibleSection.filter((s) => s !== section);
+    } else {
+      this.openCollapsibleSection = [...this.openCollapsibleSection, section];
+    }
+  };
 
   /**
    * get Workspace projects using workspace slug