fix: remove all unused variables and added dependecies to useEffect and useCallback (#3013)

space/components/issues/filters/applied-filters/filters-list.tsx

@@ -1,5 +1,4 @@
 // components
-import { AppliedLabelsFilters } from "./label";
 import { AppliedPriorityFilters } from "./priority";
 import { AppliedStateFilters } from "./state";
 // icons
@@ -20,7 +19,7 @@ type Props = {
 export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
 
 export const AppliedFiltersList: React.FC<Props> = (props) => {
-  const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, labels, states } = props;
+  const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, states } = props;
 
   return (
     <div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">

space/components/issues/filters/helpers/dropdown.tsx

@@ -4,8 +4,6 @@ import { Popover, Transition } from "@headlessui/react";
 import { Placement } from "@popperjs/core";
 // ui
 import { Button } from "@plane/ui";
-// icons
-import { ChevronUp } from "lucide-react";
 
 type Props = {
   children: React.ReactNode;

space/components/issues/filters/selection.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";
 // components
-import { FilterLabels, FilterPriority, FilterState } from "./";
+import { FilterPriority, FilterState } from "./";
 // types
 
 // filter helpers
@@ -19,7 +19,7 @@ type Props = {
 };
 
 export const FilterSelection: React.FC<Props> = observer((props) => {
-  const { filters, handleFilters, layoutDisplayFiltersOptions, labels, states } = props;
+  const { filters, handleFilters, layoutDisplayFiltersOptions, states } = props;
 
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
 

space/components/issues/navbar/index.tsx

@@ -105,7 +105,19 @@ const IssueNavbar = observer(() => {
         }
       }
     }
-  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings, updateFilters]);
+  }, [
+    board,
+    workspace_slug,
+    project_slug,
+    router,
+    projectStore,
+    projectStore?.deploySettings,
+    updateFilters,
+    labels,
+    states,
+    priorities,
+    peekId,
+  ]);
 
   return (
     <div className="relative flex w-full items-center gap-4 px-5">

space/lib/mobx/store-init.tsx

@@ -1,17 +1,11 @@
 import { useEffect } from "react";
-// next imports
-import { useRouter } from "next/router";
 // js cookie
 import Cookie from "js-cookie";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 const MobxStoreInit = () => {
-  const { user: userStore }: RootStore = useMobxStore();
+  const { user: userStore } = useMobxStore();
-
-  const router = useRouter();
-  const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
 
   useEffect(() => {
     const authToken = Cookie.get("accessToken") || null;

web/components/command-palette/command-pallette.tsx

@@ -151,6 +151,7 @@ export const CommandPalette: FC = observer(() => {
       projectId,
       workspaceSlug,
       isAnyModalOpen,
+      setTrackElement,
     ]
   );
 

web/components/cycles/sidebar.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { mutate } from "swr";
 import { useForm } from "react-hook-form";
 import { Disclosure, Popover, Transition } from "@headlessui/react";
 // mobx store
@@ -32,7 +31,6 @@ import {
 // types
 import { ICycle } from "types";
 // fetch-keys
-import { CYCLE_DETAILS } from "constants/fetch-keys";
 import { CYCLE_STATUS } from "constants/cycle";
 
 type Props = {
@@ -54,7 +52,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const {
     cycle: cycleDetailsStore,
-    trackEvent: { setTrackElement, postHogEventTracker },
+    trackEvent: { setTrackElement },
   } = useMobxStore();
 
   const cycleDetails = cycleDetailsStore.cycle_details[cycleId] ?? undefined;

web/components/headers/global-issues.tsx

@@ -12,7 +12,7 @@ import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plan
 // icons
 import { List, PlusIcon, Sheet } from "lucide-react";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EFilterType } from "store/issues/types";

web/components/headers/project-view-issues.tsx

@@ -27,7 +27,6 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   };
 
   const {
-    projectViewFilters: projectViewFiltersStore,
     project: { currentProjectDetails },
     projectLabel: { projectLabels },
     projectMember: { projectMembers },
@@ -38,8 +37,6 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     trackEvent: { setTrackElement },
   } = useMobxStore();
 
-  const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;
-
   const activeLayout = issueFilters?.displayFilters?.layout;
 
   const handleLayoutChange = useCallback(

web/components/issues/description-form.tsx

@@ -63,7 +63,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
       setLocalIssueDescription(issue.description_html);
       setLocalTitleValue(issue.name);
     }
-  }, [issue.id]);
+  }, [issue.id, issue.name, issue.description_html]);
 
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<IIssue>) => {
@@ -86,7 +86,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     } else if (isSubmitting === "submitting") {
       setShowAlert(true);
     }
-  }, [isSubmitting, setShowAlert]);
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
 
   // reset form values
   useEffect(() => {
@@ -147,7 +147,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
         <Controller
           name="description_html"
           control={control}
-          render={({ field: { value, onChange } }) => (
+          render={({ field: { onChange } }) => (
             <RichTextEditor
               cancelUploadImage={fileService.cancelUpload}
               uploadFile={fileService.getUploadFileFunction(workspaceSlug)}

web/components/issues/form.tsx

@@ -229,7 +229,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
       project: projectId,
       ...initialData,
     });
-  }, [setFocus, initialData, reset]);
+  }, [setFocus, initialData, projectId, reset]);
 
   // update projectId in form when projectId changes
   useEffect(() => {

web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 
@@ -6,29 +5,21 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList } from "components/issues";
-// ui
-import { Button } from "@plane/ui";
-// helpers
-import { areFiltersDifferent } from "helpers/filter.helper";
 // types
 import { IIssueFilterOptions } from "types";
 import { EFilterType } from "store/issues/types";
 
 export const GlobalViewsAppliedFiltersRoot = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
+  const { workspaceSlug } = router.query as { workspaceSlug: string; globalViewId: string };
 
   const {
-    globalViews: globalViewsStore,
-    globalViewFilters: globalViewFiltersStore,
     project: { workspaceProjects },
     workspace: { workspaceLabels },
     workspaceMember: { workspaceMembers },
     workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
 
-  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
-
   const userFilters = issueFilters?.filters;
 
   // filters whose value not null or empty array

web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 
 // components
@@ -20,28 +20,22 @@ type Props = {
 export const FilterExtraOptions: React.FC<Props> = observer((props) => {
   const { selectedExtraOptions, handleUpdate, enabledExtraOptions } = props;
 
-  const [previewEnabled, setPreviewEnabled] = useState(true);
-
   const isExtraOptionEnabled = (option: TIssueExtraOptions) => enabledExtraOptions.includes(option);
 
   return (
-    <>
+    <div>
-      {previewEnabled && (
+      {ISSUE_EXTRA_OPTIONS.map((option) => {
-        <div>
+        if (!isExtraOptionEnabled(option.key)) return null;
-          {ISSUE_EXTRA_OPTIONS.map((option) => {
-            if (!isExtraOptionEnabled(option.key)) return null;
 
-            return (
+        return (
-              <FilterOption
+          <FilterOption
-                key={option.key}
+            key={option.key}
-                isChecked={selectedExtraOptions?.[option.key] ? true : false}
+            isChecked={selectedExtraOptions?.[option.key] ? true : false}
-                onClick={() => handleUpdate(option.key, !selectedExtraOptions?.[option.key])}
+            onClick={() => handleUpdate(option.key, !selectedExtraOptions?.[option.key])}
-                title={option.title}
+            title={option.title}
-              />
+          />
-            );
+        );
-          })}
+      })}
-        </div>
+    </div>
-      )}
-    </>
   );
 });

web/components/issues/issue-layouts/kanban/default.tsx

@@ -57,6 +57,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     issueIds,
     sub_group_by,
     group_by,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     order_by,
     sub_group_id = "null",
     list,
@@ -69,6 +70,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     kanBanToggle,
     handleKanBanToggle,
     enableQuickIssueCreate,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     isDragStarted,
     quickAddCallback,
     viewId,

web/components/issues/issue-layouts/list/headers/empty-group.tsx

@@ -14,7 +14,7 @@ export interface IEmptyHeader {
 }
 
 export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
-  const { column_id, column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   return (
     <HeaderGroupByCard

web/components/issues/issue-layouts/list/headers/priority.tsx

@@ -42,7 +42,7 @@ const Icon = ({ priority }: any) => (
 );
 
 export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
-  const { column_id, column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const priority = column_value ?? null;
 

web/components/issues/issue-layouts/properties/assignee.tsx

@@ -38,7 +38,6 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
     optionsClassName,
     placement,
     multiple = false,
-    noLabelBorder = false,
   } = props;
   // store
   const {

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -5,7 +5,7 @@ import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot } from "components/issues";
+import { GlobalViewsAppliedFiltersRoot } from "components/issues";
 import { SpreadsheetView } from "components/issues/issue-layouts";
 import { AllIssueQuickActions } from "components/issues/issue-layouts/quick-action-dropdowns";
 // ui
@@ -81,7 +81,8 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
       if (action === EIssueActions.UPDATE) await issueActions[action]!(issue);
       if (action === EIssueActions.DELETE) await issueActions[action]!(issue);
     },
-    [getIssues]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
   const handleDisplayFiltersUpdate = useCallback(

web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx

@@ -63,7 +63,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
         issueActions[action]!(issue);
       }
     },
-    [issueStore]
+    [issueActions]
   );
 
   const handleDisplayFiltersUpdate = useCallback(
@@ -80,7 +80,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
         viewId
       );
     },
-    [issueFiltersStore, projectId, workspaceSlug]
+    [issueFiltersStore, projectId, workspaceSlug, viewId]
   );
 
   return (

web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx

@@ -56,7 +56,7 @@ const Inputs = (props: any) => {
 };
 
 export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) => {
-  const { formKey, groupId, subGroupId = null, prePopulatedData, quickAddCallback, viewId } = props;
+  const { formKey, prePopulatedData, quickAddCallback, viewId } = props;
 
   // router
   const router = useRouter();

web/components/issues/modal.tsx

@@ -82,7 +82,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     moduleIssues: moduleIssueStore,
     user: userStore,
     trackEvent: { postHogEventTracker },
-    workspace: { currentWorkspace }
+    workspace: { currentWorkspace },
   } = useMobxStore();
 
   const user = userStore.currentUser;
@@ -216,7 +216,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     // in the url. This has the least priority.
     if (projects && projects.length > 0 && !activeProject)
       setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
-  }, [data, projectId, projects, isOpen]);
+  }, [data, projectId, projects, isOpen, activeProject]);
 
   const addIssueToCycle = async (issue: IIssue, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
@@ -251,14 +251,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
             title: "Success!",
             message: "Issue created successfully.",
           });
-          postHogEventTracker("ISSUE_CREATED", {
+          postHogEventTracker(
-            ...res,
+            "ISSUE_CREATED",
-            state: "SUCCESS",
+            {
-          },
+              ...res,
+              state: "SUCCESS",
+            },
             {
               isGrouping: true,
               groupType: "Workspace_metrics",
-              gorupId: currentWorkspace?.id!
+              gorupId: currentWorkspace?.id!,
             }
           );
           if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
@@ -270,13 +272,15 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           title: "Error!",
           message: "Issue could not be created. Please try again.",
         });
-        postHogEventTracker("ISSUE_CREATED", {
+        postHogEventTracker(
-          state: "FAILED",
+          "ISSUE_CREATED",
-        },
+          {
+            state: "FAILED",
+          },
           {
             isGrouping: true,
             groupType: "Workspace_metrics",
-            gorupId: currentWorkspace?.id!
+            gorupId: currentWorkspace?.id!,
           }
         );
       });
@@ -330,14 +334,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           title: "Success!",
           message: "Issue updated successfully.",
         });
-        postHogEventTracker("ISSUE_UPDATED", {
+        postHogEventTracker(
-          ...res,
+          "ISSUE_UPDATED",
-          state: "SUCCESS",
+          {
-        },
+            ...res,
+            state: "SUCCESS",
+          },
           {
             isGrouping: true,
             groupType: "Workspace_metrics",
-            gorupId: currentWorkspace?.id!
+            gorupId: currentWorkspace?.id!,
           }
         );
       })
@@ -347,13 +353,15 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           title: "Error!",
           message: "Issue could not be updated. Please try again.",
         });
-        postHogEventTracker("ISSUE_UPDATED", {
+        postHogEventTracker(
-          state: "FAILED",
+          "ISSUE_UPDATED",
-        },
+          {
+            state: "FAILED",
+          },
           {
             isGrouping: true,
             groupType: "Workspace_metrics",
-            gorupId: currentWorkspace?.id!
+            gorupId: currentWorkspace?.id!,
           }
         );
       });

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -38,6 +38,7 @@ const pageService = new PageService();
 const PageDetailsPage: NextPageWithLayout = observer(() => {
   const editorRef = useRef<any>(null);
   // states
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   const [gptModalOpen, setGptModal] = useState(false);
   // store

web/pages/onboarding/index.tsx

@@ -36,7 +36,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
   const {
     user: { currentUser, updateCurrentUser, updateUserOnBoard },
     workspace: workspaceStore,
-    trackEvent: { postHogEventTracker }
+    trackEvent: { postHogEventTracker },
   } = useMobxStore();
   const router = useRouter();
 
@@ -78,19 +78,18 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
   const finishOnboarding = async () => {
     if (!user || !workspaces) return;
 
-    await updateUserOnBoard().then(() => {
+    await updateUserOnBoard()
-      postHogEventTracker(
+      .then(() => {
-        "USER_ONBOARDING_COMPLETE",
+        postHogEventTracker("USER_ONBOARDING_COMPLETE", {
-        {
           user_role: user.role,
           email: user.email,
           user_id: user.id,
-          status: "SUCCESS"
+          status: "SUCCESS",
-        }
+        });
-      )
+      })
-    }).catch((error) => {
+      .catch((error) => {
-      console.log(error);
+        console.log(error);
-    })
+      });
 
     router.replace(`/${workspaces[0].slug}`);
   };
@@ -133,7 +132,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
     };
 
     handleStepChange();
-  }, [user, invitations, step]);
+  }, [user, invitations, step, updateCurrentUser, workspaces]);
 
   return (
     <>