Skip to content

[WEB-2444] improvement: performance improvement for useOutsideClickDetector and usePeekOverviewOutsideClickDetector. #5595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SatishGandham merged 2 commits into from
Sep 12, 2024
Merged

[WEB-2444] improvement: performance improvement for useOutsideClickDetector and usePeekOverviewOutsideClickDetector. #5595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06c39e7
[WEB-2444] improvement: performace improvement for `useOutsideClickDe…
prateekshourya29 Sep 12, 2024
2f53a28
chore: remove plane helpers yarn.lock
prateekshourya29 Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions admin/core/components/admin-sidebar/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@

import { FC, useEffect, useRef } from "react";
import { observer } from "mobx-react";
// hooks
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// components
import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
// hooks
import { useTheme } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
// components

export interface IInstanceSidebar {}

Expand Down
21 changes: 0 additions & 21 deletions admin/core/hooks/use-outside-click-detector.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion admin/next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
1 change: 1 addition & 0 deletions admin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@plane/types": "*",
"@plane/ui": "*",
"@plane/constants": "*",
"@plane/helpers": "*",
"@tailwindcss/typography": "^0.5.9",
"@types/lodash": "^4.17.0",
"autoprefixer": "10.4.14",
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"packages/tsconfig",
"packages/ui",
"packages/types",
"packages/constants"
"packages/constants",
"packages/helpers"
],
"scripts": {
"build": "turbo run build",
Expand Down
1 change: 1 addition & 0 deletions packages/helpers/hooks/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./use-outside-click-detector";
29 changes: 29 additions & 0 deletions packages/helpers/hooks/use-outside-click-detector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { useEffect } from "react";

export const useOutsideClickDetector = (
ref: React.RefObject<HTMLElement>,
callback: () => void,
useCapture = false
) => {
const handleClick = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
// check for the closest element with attribute name data-prevent-outside-click
const preventOutsideClickElement = (
event.target as HTMLElement | undefined
)?.closest("[data-prevent-outside-click]");
// if the closest element with attribute name data-prevent-outside-click is found, return
if (preventOutsideClickElement) {
return;
}
// else call the callback
callback();
}
};

useEffect(() => {
document.addEventListener("mousedown", handleClick, useCapture);
return () => {
document.removeEventListener("mousedown", handleClick, useCapture);
};
});
};
1 change: 1 addition & 0 deletions packages/helpers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./hooks";
15 changes: 15 additions & 0 deletions packages/helpers/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "@plane/helpers",
"version": "0.22.0",
"description": "Helper functions shared across multiple apps internally",
"main": "index.ts",
"private": true,
"devDependencies": {
"@types/node": "^22.5.4",
"@types/react": "^18.3.5",
"typescript": "^5.6.2"
},
"dependencies": {
"react": "^18.3.1"
}
}
Comment on lines +1 to +15
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

Old implementation of useOutsideClickDetector still exists.
The useOutsideClickDetector hook is being correctly imported from the @plane/helpers package across the codebase. However, the old implementation of the hook still exists in the following file and should be removed:

  • packages/helpers/hooks/use-outside-click-detector.tsx
Analysis chain

Verify the usage of the @plane/helpers package.

To ensure that the new @plane/helpers package is being utilized correctly, please verify that:

  1. The package is imported and used in the intended locations across the codebase.
  2. The imports for the useOutsideClickDetector hook have been updated to use the new package.
  3. The old implementations of the hook have been removed.

Run the following script to verify the package usage:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the `@plane/helpers` package.

# Test 1: Search for imports of the package. Expect: Imports in the intended locations.
rg --type typescript $'@plane/helpers'

# Test 2: Search for imports of the `useOutsideClickDetector` hook. Expect: Imports from the new package.
rg --type typescript $'useOutsideClickDetector'

# Test 3: Search for old implementations of the hook. Expect: No occurrences.
rg --type typescript $'const useOutsideClickDetector'

Length of output: 244

Script:

#!/bin/bash
# Description: Verify the usage of the `@plane/helpers` package.

# Test 1: Search for imports of the package. Expect: Imports in the intended locations.
rg '@plane/helpers'

# Test 2: Search for imports of the `useOutsideClickDetector` hook. Expect: Imports from the new package.
rg 'useOutsideClickDetector'

# Test 3: Search for old implementations of the hook. Expect: No occurrences.
rg 'const useOutsideClickDetector'

Length of output: 12689

1 change: 1 addition & 0 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@blueprintjs/popover2": "^1.13.3",
"@headlessui/react": "^1.7.3",
"@popperjs/core": "^2.11.8",
"@plane/helpers": "*",
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

Remove unused dependency @plane/helpers.

The @plane/helpers dependency added to the packages/ui/package.json file does not appear to be used in the codebase, as no import statements were found. It is advisable to remove this dependency to prevent unnecessary increases in package size and complexity.

  • File: packages/ui/package.json
  • Line: 29
Analysis chain

Verify the usage and version specification of the new dependency.

I noticed that a new dependency @plane/helpers has been added to the package with a version specification of "*". While this addition could potentially enhance the functionality of the package, it's important to consider the following:

  1. Ensure that the new dependency is actually being used within the package and that it aligns with the package's functionality and requirements. Unused dependencies can unnecessarily increase the package size and complexity.

  2. Consider specifying a more precise version range for the dependency to avoid potential inconsistencies or breaking changes that may occur with future updates. Using a wildcard version specification ("*") can introduce instability and make it harder to reproduce builds.

To verify the usage of the new dependency, you can run the following script:

Please let me know if you have any questions or if you would like me to assist with updating the dependency specification.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash

# Description: 
# - Verify if the new dependency `@plane/helpers` is being used within the package.
# - Check if the version specification can be updated to a more precise range.

# Test 1: Search for imports from `@plane/helpers` in the package source files.
# Expect: At least one import statement from `@plane/helpers`.
echo "Searching for imports from @plane/helpers..."
rg --type typescript --type javascript --glob '!dist' --glob '!node_modules' -e 'from\s+["'\'']@plane/helpers'

# Test 2: Check the latest available version of `@plane/helpers`.
# Expect: A specific version number.
echo "Checking the latest available version of @plane/helpers..."
npm view @plane/helpers version

# Test 3: Check if the package has any dependencies that also depend on `@plane/helpers`.
# Expect: No conflicting dependency versions.
echo "Checking for potential version conflicts in the dependency tree..."
npm ls @plane/helpers

Length of output: 718

Script:

#!/bin/bash

# Description: 
# - Verify if the new dependency `@plane/helpers` is being used within the package.

# Test: Search for imports from `@plane/helpers` in the package source files.
# Expect: At least one import statement from `@plane/helpers`.
echo "Searching for imports from @plane/helpers using ast-grep..."
ast-grep --lang javascript --pattern 'import $_ from "@plane/helpers"' || ast-grep --lang typescript --pattern 'import $_ from "@plane/helpers"'

Length of output: 201

"clsx": "^2.0.0",
"emoji-picker-react": "^4.5.16",
"lodash": "^4.17.21",
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/dropdown/multi-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import sortBy from "lodash/sortBy";
import { Combobox } from "@headlessui/react";
// popper-js
import { usePopper } from "react-popper";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// components
import { DropdownButton } from "./common";
import { DropdownOptions } from "./common/options";
// hooks
import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// helper
import { cn } from "../../helpers";
// types
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/dropdown/single-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import sortBy from "lodash/sortBy";
import { Combobox } from "@headlessui/react";
// popper-js
import { usePopper } from "react-popper";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// components
import { DropdownButton } from "./common";
import { DropdownOptions } from "./common/options";
// hooks
import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// helper
import { cn } from "../../helpers";
// types
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/dropdowns/context-menu/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// components
import { ContextMenuItem } from "./item";
// helpers
import { cn } from "../../../helpers";
// hooks
import useOutsideClickDetector from "../../hooks/use-outside-click-detector";
import { usePlatformOS } from "../../hooks/use-platform-os";

export type TContextMenuItem = {
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/dropdowns/custom-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import ReactDOM from "react-dom";
import { Menu } from "@headlessui/react";
import { usePopper } from "react-popper";
import { ChevronDown, MoreHorizontal } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// hooks
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// helpers
import { cn } from "../../helpers";
// types
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/dropdowns/custom-search-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search } from "lucide-react";
import { createPortal } from "react-dom";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// hooks
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// helpers
import { cn } from "../../helpers";
// types
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/dropdowns/custom-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import React, { useRef, useState } from "react";
import { usePopper } from "react-popper";
import { Listbox } from "@headlessui/react";
import { Check, ChevronDown } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// hooks
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// helpers
import { cn } from "../../helpers";
// types
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/emoji/emoji-icon-picker-new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React, { useRef, useState } from "react";
import { usePopper } from "react-popper";
import { Popover, Tab } from "@headlessui/react";
import EmojiPicker from "emoji-picker-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// helpers
import { cn } from "../../helpers";
// hooks
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
import { LucideIconsList } from "./lucide-icons-list";
// helpers
import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/emoji/emoji-icon-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import React, { useRef, useState } from "react";
import { usePopper } from "react-popper";
import EmojiPicker from "emoji-picker-react";
import { Popover, Tab } from "@headlessui/react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// components
import { IconsList } from "./icons-list";
// helpers
import { cn } from "../../helpers";
// hooks
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";

export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
Expand Down
42 changes: 0 additions & 42 deletions packages/ui/src/hooks/use-outside-click-detector.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions space/core/hooks/use-outside-click.tsx
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion web/app/[workspaceSlug]/(projects)/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { FC, useEffect, useRef } from "react";
import { observer } from "mobx-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// components
import {
SidebarDropdown,
Expand All @@ -14,7 +16,6 @@ import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/f
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useUserPermissions } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
// plane web components
import useSize from "@/hooks/use-window-size";
import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
Expand Down
3 changes: 2 additions & 1 deletion web/app/profile/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
// icons
import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// ui
import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
// components
Expand All @@ -16,7 +18,6 @@ import { PROFILE_ACTION_LINKS } from "@/constants/profile";
import { cn } from "@/helpers/common.helper";
// hooks
import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import { usePlatformOS } from "@/hooks/use-platform-os";

const WORKSPACE_ACTION_LINKS = [
Expand Down
3 changes: 2 additions & 1 deletion web/ce/components/issues/quick-add/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { FC, useEffect, useRef } from "react";
import { observer } from "mobx-react";
import { UseFormRegister, UseFormSetFocus } from "react-hook-form";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// types
import { TIssue } from "@plane/types";
// components
Expand All @@ -17,7 +19,6 @@ import { EIssueLayoutTypes } from "@/constants/issue";
// hooks
import { useProject } from "@/hooks/store";
import useKeypress from "@/hooks/use-keypress";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";

export type TQuickAddIssueFormRoot = {
isOpen: boolean;
Expand Down
3 changes: 2 additions & 1 deletion web/core/components/core/image-picker-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import { Control, Controller } from "react-hook-form";
import useSWR from "swr";
// headless ui
import { Tab, Popover } from "@headlessui/react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// ui
import { Button, Input, Loader } from "@plane/ui";
// constants
import { MAX_FILE_SIZE } from "@/constants/common";
// hooks
import { useWorkspace, useInstance } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
// services
import { FileService } from "@/services/file.service";

Expand Down
3 changes: 2 additions & 1 deletion web/core/components/cycles/archived-cycles/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ListFilter, Search, X } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// types
import type { TCycleFilters } from "@plane/types";
// components
Expand All @@ -14,7 +16,6 @@ import { cn } from "@/helpers/common.helper";
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useCycleFilter } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";

export const ArchivedCyclesHeader: FC = observer(() => {
// router
Expand Down
3 changes: 2 additions & 1 deletion web/core/components/cycles/cycles-view-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
// icons
import { ListFilter, Search, X } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/helpers";
// types
import { TCycleFilters } from "@plane/types";
// components
Expand All @@ -12,7 +14,6 @@ import { cn } from "@/helpers/common.helper";
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useCycleFilter } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";

type Props = {
projectId: string;
Expand Down
Loading