From 87f56f8ba4bee1a0f8045092a6750905e7f92bd3 Mon Sep 17 00:00:00 2001
From: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
Date: Thu, 2 May 2024 14:07:47 +0530
Subject: [PATCH] fix: module conflicts

---
 .../modules/module-list-item-action.tsx       |  6 +--
 web/components/modules/module-view-header.tsx | 37 ++++++++++++++++---
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/web/components/modules/module-list-item-action.tsx b/web/components/modules/module-list-item-action.tsx
index b34dc7555..a93c7a457 100644
--- a/web/components/modules/module-list-item-action.tsx
+++ b/web/components/modules/module-list-item-action.tsx
@@ -11,7 +11,7 @@ import { Avatar, AvatarGroup, Tooltip, setPromiseToast } from "@plane/ui";
 import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
-import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
+import { E_MODULES, MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
 import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
@@ -60,7 +60,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
       () => {
         captureEvent(MODULE_FAVORITED, {
           module_id: moduleId,
-          element: "Grid layout",
+          element: E_MODULES,
           state: "SUCCESS",
         });
       }
@@ -91,7 +91,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
     ).then(() => {
       captureEvent(MODULE_UNFAVORITED, {
         module_id: moduleId,
-        element: "Grid layout",
+        element: E_MODULES,
         state: "SUCCESS",
       });
     });
diff --git a/web/components/modules/module-view-header.tsx b/web/components/modules/module-view-header.tsx
index 9367aad33..aa800a236 100644
--- a/web/components/modules/module-view-header.tsx
+++ b/web/components/modules/module-view-header.tsx
@@ -11,9 +11,15 @@ import { Tooltip } from "@plane/ui";
 import { FiltersDropdown } from "@/components/issues";
 import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns";
 // constants
+import {
+  MODULES_FILTER_APPLIED,
+  MODULES_FILTER_REMOVED,
+  MODULES_LAYOUT_CHANGED,
+  MODULES_SORT_UPDATED,
+} from "@/constants/event-tracker";
 import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
 // hooks
-import { useMember, useModuleFilter } from "@/hooks/store";
+import { useEventTracker, useMember, useModuleFilter } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -27,6 +33,7 @@ export const ModuleViewHeader: FC = observer(() => {
 
   // hooks
   const { isMobile } = usePlatformOS();
+  const { captureEvent } = useEventTracker();
 
   // store hooks
   const {
@@ -48,7 +55,7 @@ export const ModuleViewHeader: FC = observer(() => {
   const handleFilters = useCallback(
     (key: keyof TModuleFilters, value: string | string[]) => {
       if (!projectId) return;
-      const newValues = filters?.[key] ?? [];
+      const newValues = Array.from(filters?.[key] ?? []);
 
       if (Array.isArray(value))
         value.forEach((val) => {
@@ -59,10 +66,14 @@ export const ModuleViewHeader: FC = observer(() => {
         if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
       }
-
+      captureEvent((filters?.[key] ?? []).length > newValues.length ? MODULES_FILTER_REMOVED : MODULES_FILTER_APPLIED, {
+        filter_type: key,
+        filter_property: value,
+        current_filters: filters,
+      });
       updateFilters(projectId.toString(), { [key]: newValues });
     },
-    [filters, projectId, updateFilters]
+    [filters, projectId, updateFilters, captureEvent]
   );
 
   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -128,11 +139,19 @@ export const ModuleViewHeader: FC = observer(() => {
 
       <ModuleOrderByDropdown
         value={displayFilters?.order_by}
-        onChange={(val) => {
+        onChange={(property, val) => {
           if (!projectId || val === displayFilters?.order_by) return;
           updateDisplayFilters(projectId.toString(), {
             order_by: val,
           });
+          captureEvent(MODULES_SORT_UPDATED, {
+            changed_property: property,
+            change_details: val.replaceAll("-", ""),
+            current_sort: {
+              order_by: displayFilters?.order_by?.replaceAll("-", ""),
+              sort_by: displayFilters?.order_by?.startsWith("-") ? "desc" : "asc",
+            },
+          });
         }}
       />
       <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
@@ -142,6 +161,11 @@ export const ModuleViewHeader: FC = observer(() => {
           handleDisplayFiltersUpdate={(val) => {
             if (!projectId) return;
             updateDisplayFilters(projectId.toString(), val);
+            captureEvent(!val.favorites ? MODULES_FILTER_REMOVED : MODULES_FILTER_APPLIED, {
+              filter_type: "favorites",
+              filter_property: val.favorites,
+              current_filters: filters,
+            });
           }}
           handleFiltersUpdate={handleFilters}
           memberIds={workspaceMemberIds ?? undefined}
@@ -161,6 +185,9 @@ export const ModuleViewHeader: FC = observer(() => {
               onClick={() => {
                 if (!projectId) return;
                 updateDisplayFilters(projectId.toString(), { layout: layout.key });
+                captureEvent(MODULES_LAYOUT_CHANGED, {
+                  layout: layout.key,
+                });
               }}
             >
               <layout.icon