Skip to content

chore: extract useCurrentAppState hook to reduce cyclic dependency #36937

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
hetunandu merged 1 commit into from
Oct 17, 2024
Merged

chore: extract useCurrentAppState hook to reduce cyclic dependency #36937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/CanvasLayoutConversion/hooks/useShowSnapShotBanner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import { EditorState } from "ee/entities/IDE/constants";
import { getReadableSnapShotDetails } from "layoutSystems/autolayout/utils/AutoLayoutUtils";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "pages/Editor/IDE/hooks/useCurrentAppState";

@coderabbitai coderabbitai Bot Oct 17, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Old import paths for hooks still present in some files.

  • app/client/src/pages/Editor/IDE/EditorPane/components/PageElement.tsx: import { useGetPageFocusUrl } from "pages/Editor/IDE/hooks";
  • app/client/src/pages/Editor/IDE/MainPane/index.tsx: import { useWidgetSelectionBlockListener } from "pages/Editor/IDE/hooks";
🔗 Analysis chain

Approve import path update.

The more specific import path for useCurrentAppState aligns with the PR objective of reducing cyclic dependencies. This change should help in isolating the hook and preventing unnecessary imports.

To ensure the new import path is correct and consistent across the codebase, run the following script:

</run_scripts>

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Verify the new import path for useCurrentAppState

# Search for any remaining old import paths
echo "Checking for any remaining old import paths:"
rg --type typescript 'from "pages/Editor/IDE/hooks";'

# Verify the new import path is used consistently
echo "Verifying consistent usage of the new import path:"
rg --type typescript 'from "pages/Editor/IDE/hooks/useCurrentAppState";'

Length of output: 410

Script:

#!/bin/bash
# Verify the new import path for useCurrentAppState

# Search for any remaining old import paths in .ts and .tsx files
echo "Checking for any remaining old import paths in TypeScript files:"
rg 'from "pages/Editor/IDE/hooks";' --glob '*.ts' --glob '*.tsx'

# Verify the new import path is used consistently in .ts and .tsx files
echo "Verifying consistent usage of the new import path in TypeScript files:"
rg 'from "pages/Editor/IDE/hooks/useCurrentAppState";' --glob '*.ts' --glob '*.tsx'

Length of output: 1774

import { useSelector } from "react-redux";
import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";
import { getSnapshotUpdatedTime } from "selectors/autoLayoutSelectors";
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/IDE/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ import { useHref } from "pages/Editor/utils";
import { viewerURL } from "ee/RouteBuilder";
import HelpBar from "components/editorComponents/GlobalSearch/HelpBar";
import { EditorTitle } from "./EditorTitle";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "../hooks/useCurrentAppState";
import { EditorState } from "ee/entities/IDE/constants";
import { EditorSaveIndicator } from "pages/Editor/EditorSaveIndicator";
import type { Page } from "entities/Page";
Expand Down
3 changes: 2 additions & 1 deletion app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React from "react";
import type { AnimatedGridUnit } from "components/AnimatedGridLayout";
import { useSelector } from "react-redux";
import useWindowDimensions from "utils/hooks/useWindowDimensions";
import { useCurrentAppState, useCurrentEditorState } from "../../hooks";
import { useCurrentEditorState } from "../../hooks";
import { useCurrentAppState } from "../../hooks/useCurrentAppState";
import { getPropertyPaneWidth } from "selectors/propertyPaneSelectors";
import { previewModeSelector } from "selectors/editorSelectors";
import { getIDEViewMode } from "selectors/ideSelectors";
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/IDE/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
import { builderURL } from "ee/RouteBuilder";
import { getCurrentBasePageId } from "selectors/editorSelectors";
import history, { NavigationMethod } from "utils/history";
import { useCurrentAppState } from "./hooks";
import { useCurrentAppState } from "./hooks/useCurrentAppState";
import { getCurrentWorkspaceId } from "ee/selectors/selectedWorkspaceSelectors";
import { fetchWorkspace } from "ee/actions/workspaceActions";
import { IDESidebar, Condition } from "IDE";
Expand Down
13 changes: 0 additions & 13 deletions app/client/src/pages/Editor/IDE/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import type { EntityItem } from "ee/entities/IDE/constants";
import {
EditorEntityTab,
EditorEntityTabState,
EditorState,
} from "ee/entities/IDE/constants";
import { useLocation } from "react-router";
import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
Expand All @@ -29,18 +28,6 @@ import { closeQueryActionTab } from "actions/pluginActionActions";
import { getCurrentBasePageId } from "selectors/editorSelectors";
import { getCurrentEntityInfo } from "../utils";

export const useCurrentAppState = () => {
const [appState, setAppState] = useState(EditorState.EDITOR);
const { pathname } = useLocation();
const entityInfo = identifyEntityFromPath(pathname);

useEffect(() => {
setAppState(entityInfo.appState);
}, [entityInfo.appState]);

return appState;
};

export const useCurrentEditorState = () => {
const [selectedSegment, setSelectedSegment] = useState<EditorEntityTab>(
EditorEntityTab.UI,
Expand Down
16 changes: 16 additions & 0 deletions app/client/src/pages/Editor/IDE/hooks/useCurrentAppState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { useEffect, useState } from "react";
import { EditorState } from "ee/entities/IDE/constants";
import { useLocation } from "react-router";
import { identifyEntityFromPath } from "navigation/FocusEntity";

export const useCurrentAppState = () => {
const [appState, setAppState] = useState(EditorState.EDITOR);
const { pathname } = useLocation();
const entityInfo = identifyEntityFromPath(pathname);

useEffect(() => {
setAppState(entityInfo.appState);
}, [entityInfo.appState]);

return appState;
};
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/WidgetsEditor/WidgetEditorContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import EditorContextProvider from "components/editorComponents/EditorContextProv
import type { ReactNode } from "react";
import React from "react";
import classNames from "classnames";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "pages/Editor/IDE/hooks/useCurrentAppState";
import { useSelector } from "react-redux";
import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";
import { EditorState } from "ee/entities/IDE/constants";
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/WidgetsEditor/components/CodeModeTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
import { getWidgetSelectionBlock } from "selectors/ui";
import { retrieveCodeWidgetNavigationUsed } from "utils/storage";
import { CANVAS_VIEW_MODE_TOOLTIP, createMessage } from "ee/constants/messages";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "pages/Editor/IDE/hooks/useCurrentAppState";
import { EditorState } from "ee/entities/IDE/constants";

/**
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/WidgetsEditor/components/NavigationAdjustedPageViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ReactNode } from "react";
import React from "react";
import { EditorState } from "ee/entities/IDE/constants";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "pages/Editor/IDE/hooks/useCurrentAppState";

@coderabbitai coderabbitai Bot Oct 17, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Update Required: Inconsistent import paths for useCurrentAppState.

The following files still import useCurrentAppState from the old path "pages/Editor/IDE/hooks":

  • app/client/src/pages/Editor/IDE/MainPane/index.tsx
  • app/client/src/pages/Editor/IDE/EditorPane/components/PageElement.tsx

Please update these imports to "pages/Editor/IDE/hooks/useCurrentAppState" to ensure consistency across the codebase.

🔗 Analysis chain

LGTM: Import path update looks good.

The more specific import path for useCurrentAppState is a positive change. It potentially allows for better tree-shaking and clearer module organization.

Let's verify if this change is consistent across the codebase:

Let's adjust the search commands to correctly target TypeScript files and verify the import path consistency.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any remaining imports of useCurrentAppState from the old path

# Test: Search for old import path. Expect: No results.
rg --type typescript 'from "pages/Editor/IDE/hooks";\s*$' -g '!**/NavigationAdjustedPageViewer.tsx'

# Test: Search for new import path. Expect: Multiple results.
rg --type typescript 'from "pages/Editor/IDE/hooks/useCurrentAppState";'

Length of output: 246

Script:

#!/bin/bash
# Description: Check for any remaining imports of useCurrentAppState from the old path

# Test: Search for old import path. Expect: No results.
rg 'from "pages/Editor/IDE/hooks";\s*$' -g "*.ts" -g "*.tsx" -g '!**/NavigationAdjustedPageViewer.tsx'

# Test: Search for new import path. Expect: Multiple results.
rg 'from "pages/Editor/IDE/hooks/useCurrentAppState";' -g "*.ts" -g "*.tsx"

Length of output: 1514

import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";
import { useSelector } from "react-redux";
import { combinedPreviewModeSelector } from "selectors/editorSelectors";
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/WidgetsEditor/components/NavigationPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import classNames from "classnames";
import { useSelector } from "react-redux";
import { combinedPreviewModeSelector } from "selectors/editorSelectors";
import { Navigation } from "pages/AppViewer/Navigation";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "pages/Editor/IDE/hooks/useCurrentAppState";
import { EditorState } from "ee/entities/IDE/constants";
import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors";

Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/WidgetsEditor/components/WidgetEditorNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { forwardRef, useEffect, useRef, useState } from "react";
import NavigationPreview from "./NavigationPreview";
import { EditorState } from "ee/entities/IDE/constants";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "pages/Editor/IDE/hooks/useCurrentAppState";
import {
getAppSettingsPaneContext,
getIsAppSettingsPaneWithNavigationTabOpen,
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/utils/hooks/useHoverToFocusWidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { getAnvilSpaceDistributionStatus } from "layoutSystems/anvil/integration
import { combinedPreviewModeSelector } from "selectors/editorSelectors";
import type { AppState } from "ee/reducers";
import type React from "react";
import { useCurrentAppState } from "pages/Editor/IDE/hooks";
import { useCurrentAppState } from "pages/Editor/IDE/hooks/useCurrentAppState";
import { EditorState } from "ee/entities/IDE/constants";

export const useHoverToFocusWidget = (
Expand Down