feat: Add type inference for redux's useSelector hook (#18257)

Add type inference for redux's useSelector hook

- Used module augmentation of TS to override the default root state interface
- Replaced custom hook with redux's useSelector
- It brings consistency as at a lot of places in the codebase we're using only the redux's useSelector

app/client/src/components/editorComponents/ActionRightPane/SuggestedWidgets.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import { generateReactKey } from "utils/generators";
 import { Collapsible } from ".";
@@ -14,7 +14,6 @@ import {
 } from "@appsmith/constants/messages";
 import { SuggestedWidget } from "api/ActionAPI";
 
-import { useSelector } from "store";
 import { getDataTree } from "selectors/dataTreeSelectors";
 import { getWidgets } from "sagas/selectors";
 import { getNextWidgetName } from "sagas/WidgetOperationUtils";

app/client/src/components/editorComponents/Debugger/index.tsx

@@ -1,7 +1,6 @@
 import { Icon, IconSize } from "design-system";
 import React from "react";
-import { useDispatch } from "react-redux";
-import { useSelector } from "store";
+import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import DebuggerTabs from "./DebuggerTabs";
 import { AppState } from "@appsmith/reducers";

app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHooks.tsx

@@ -11,7 +11,7 @@ import {
   getJSCollections,
   getPlugins,
 } from "selectors/entitiesSelector";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import { EventLocation } from "utils/AnalyticsUtil";
 import history from "utils/history";
 import {

app/client/src/components/editorComponents/GlobalSearch/SnippetsDescription.tsx

@@ -21,7 +21,7 @@ import {
   setGlobalSearchFilterContext,
   unsetEvaluatedArgument,
 } from "actions/globalSearchActions";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import { AppState } from "@appsmith/reducers";
 import ReadOnlyEditor from "../ReadOnlyEditor";
 import copy from "copy-to-clipboard";

app/client/src/components/propertyControls/ColorPickerComponentV2.tsx

@@ -15,7 +15,7 @@ import {
 import { ReactComponent as ColorPickerIcon } from "assets/icons/control/color-picker.svg";
 import { debounce, get } from "lodash";
 import { Colors } from "constants/Colors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import { getSelectedAppThemeProperties } from "selectors/appThemingSelectors";
 import {
   colorsPropertyName,

app/client/src/config.d.ts

@@ -0,0 +1,8 @@
+import "react-redux";
+import { AppState } from "@appsmith/reducers";
+
+declare module "react-redux" {
+  // We want the DefaultRootState interface to be the AppState interface
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultRootState extends AppState {}
+}

app/client/src/pages/Applications/ForkApplicationModal.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { useSelector } from "store";
+import { useDispatch, useSelector } from "react-redux";
 import { getUserApplicationsWorkspaces } from "selectors/applicationSelectors";
 import {
   isPermitted,

app/client/src/pages/Applications/ImportApplicationModal.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import styled, { useTheme } from "styled-components";
-import { useSelector } from "store";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {
   importApplication,
   setWorkspaceIdForImport,

app/client/src/pages/Applications/ImportApplicationModalOld.tsx

@@ -10,8 +10,7 @@ import {
   Variant,
 } from "design-system";
 import { StyledDialog } from "./ForkModalStyles";
-import { useSelector } from "store";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { importApplication } from "actions/applicationActions";
 import { IMPORT_APPLICATION_MODAL_TITLE } from "@appsmith/constants/messages";
 import { getIsImportingApplication } from "selectors/applicationSelectors";

app/client/src/pages/Editor/Canvas.tsx

@@ -1,7 +1,7 @@
 import log from "loglevel";
 import * as Sentry from "@sentry/react";
 import styled from "styled-components";
-import store, { useSelector } from "store";
+import store from "store";
 import { CanvasWidgetStructure } from "widgets/constants";
 import WidgetFactory from "utils/WidgetFactory";
 import React, { memo, useCallback, useEffect } from "react";
@@ -12,7 +12,7 @@ import CanvasMultiPointerArena, {
 import { throttle } from "lodash";
 import { RenderModes } from "constants/WidgetConstants";
 import { isMultiplayerEnabledForUser as isMultiplayerEnabledForUserSelector } from "selectors/appCollabSelectors";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { initPageLevelSocketConnection } from "actions/websocketActions";
 import { collabShareUserPointerEvent } from "actions/appCollabActions";
 import { getIsPageLevelSocketConnected } from "selectors/websocketSelectors";

app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, memo, useMemo } from "react";
+import { useSelector } from "react-redux";
 import Entity, { EntityClassNames } from "../Entity";
 import ActionEntityContextMenu from "./ActionEntityContextMenu";
 import history from "utils/history";
@@ -6,7 +7,6 @@ import { saveActionName } from "actions/pluginActionActions";
 import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
-import { useSelector } from "store";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import { getAction, getPlugins } from "selectors/entitiesSelector";
 import { Action, PluginType } from "entities/Action";

app/client/src/pages/Editor/Explorer/Datasources.tsx

@@ -5,7 +5,7 @@ import {
 } from "./hooks";
 import { Datasource } from "entities/Datasource";
 import ExplorerDatasourceEntity from "./Datasources/DatasourceEntity";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import {
   getCurrentApplicationId,
   getCurrentPageId,

app/client/src/pages/Editor/FirstTimeUserOnboarding/Checklist.tsx

@@ -2,8 +2,7 @@ import React from "react";
 import { Icon } from "@blueprintjs/core";
 import { Button, Category, Text, TextType } from "design-system";
 import styled from "styled-components";
-import { useDispatch } from "react-redux";
-import { useSelector } from "store";
+import { useDispatch, useSelector } from "react-redux";
 import {
   getCanvasWidgets,
   getDatasources,

app/client/src/pages/Editor/FirstTimeUserOnboarding/Tasks.tsx

@@ -22,7 +22,7 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { INTEGRATION_TABS } from "constants/routes";
 import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
 import React from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import {
   getCurrentApplicationId,
@@ -34,7 +34,6 @@ import {
   getPageActions,
 } from "selectors/entitiesSelector";
 import { getFirstTimeUserOnboardingModal } from "selectors/onboardingSelectors";
-import { useSelector } from "store";
 import styled from "styled-components";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import history from "utils/history";

app/client/src/pages/Editor/GuidedTour/Boxed.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { ReactNode } from "react";
+import { useSelector } from "react-redux";
 import {
   forceShowContentSelector,
   getCurrentStep,
   inGuidedTour,
 } from "selectors/onboardingSelectors";
-import { useSelector } from "store";
 
 type BoxedProps = {
   alternative?: JSX.Element;

app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx

@@ -1,3 +1,4 @@
+import { useSelector } from "react-redux";
 import {
   enableGuidedTour,
   toggleShowDeviationDialog,
@@ -16,7 +17,6 @@ import {
   showDeviatingDialogSelector,
   showEndTourDialogSelector,
 } from "selectors/onboardingSelectors";
-import { useSelector } from "store";
 import styled from "styled-components";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 

app/client/src/pages/Editor/MainContainerLayoutControl.tsx

@@ -1,12 +1,11 @@
 import classNames from "classnames";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import React, { useMemo, useCallback } from "react";
 
 import {
   getCurrentApplicationId,
   getCurrentApplicationLayout,
 } from "selectors/editorSelectors";
-import { useSelector } from "store";
 import { Colors } from "constants/Colors";
 import {
   AppLayoutConfig,

app/client/src/pages/Editor/gitSync/components/DeployPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import styled from "styled-components";
 import { ReactComponent as CloudyIcon } from "assets/icons/ads/cloudy-line.svg";
 import { ReactComponent as RightArrow } from "assets/icons/ads/arrow-right-line.svg";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import {
   getCurrentPageId,
   getApplicationLastDeployedAt,

app/client/src/pages/Editor/gitSync/components/GitConnectError.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
+import { useSelector } from "react-redux";
 import styled from "constants/DefaultTheme";
-import { useSelector } from "store";
 import {
   getConnectingErrorDocUrl,
   getGitConnectError,

app/client/src/pages/Settings/FormGroup/Button.test.tsx

@@ -18,19 +18,12 @@ const setting: Setting = {
   isDisabled: buttonIsDisabled,
 };
 const dispatch = jest.fn();
+const settings = {};
 jest.mock("react-redux", () => {
   const originalModule = jest.requireActual("react-redux");
   return {
     ...originalModule,
     useDispatch: () => dispatch,
-  };
-});
-
-const settings = {};
-jest.mock("store", () => {
-  const store = jest.requireActual("store").default;
-  return {
-    ...store,
     useSelector: () => settings,
   };
 });

app/client/src/pages/Settings/FormGroup/Button.tsx

@@ -1,9 +1,8 @@
 import { SETTINGS_FORM_NAME } from "@appsmith/constants/forms";
 import React from "react";
 import { Button, Category } from "design-system";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { getFormValues } from "redux-form";
-import { useSelector } from "store";
 import styled from "styled-components";
 import { FormGroup, SettingComponentProps } from "./Common";
 

app/client/src/pages/Settings/FormGroup/Text.tsx

@@ -1,7 +1,7 @@
 import { Text, TextType } from "design-system";
 import React from "react";
 import { getSettings } from "selectors/settingsSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
 import { FormGroup, SettingComponentProps } from "./Common";
 

app/client/src/pages/Settings/FormGroup/group.tsx

@@ -11,7 +11,7 @@ import Text from "./Text";
 import Button from "./Button";
 import { getFormValues } from "redux-form";
 import { SETTINGS_FORM_NAME } from "@appsmith/constants/forms";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import {
   createMessage,
   REDIRECT_URL_TOOLTIP,

app/client/src/pages/Settings/RestartBanner.tsx

@@ -11,7 +11,7 @@ import {
   getIsRestartFailed,
   getRestartingState,
 } from "selectors/settingsSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
 import {
   createMessage,

app/client/src/pages/common/CanvasArenas/hooks/useBlocksToBeDraggedOnCanvas.ts

@@ -4,7 +4,6 @@ import {
   GridDefaults,
   MAIN_CONTAINER_WIDGET_ID,
 } from "constants/WidgetConstants";
-import { useSelector } from "store";
 import { AppState } from "@appsmith/reducers";
 import { getSelectedWidgets } from "selectors/ui";
 import { getOccupiedSpacesWhileMoving } from "selectors/editorSelectors";
@@ -20,7 +19,7 @@ import { DropTargetContext } from "components/editorComponents/DropTargetCompone
 import { isEmpty } from "lodash";
 import equal from "fast-deep-equal/es6";
 import { CanvasDraggingArenaProps } from "pages/common/CanvasArenas/CanvasDraggingArena";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { EditorContext } from "components/editorComponents/EditorContextProvider";
 import { useWidgetSelection } from "utils/hooks/useWidgetSelection";

app/client/src/pages/common/SharedUserList.tsx

@@ -2,7 +2,7 @@ import { Popover, PopoverInteractionKind, Position } from "@blueprintjs/core";
 import UserApi from "@appsmith/api/UserApi";
 import React, { useMemo } from "react";
 import { getCurrentUser } from "selectors/usersSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
 import ProfileImage from "./ProfileImage";
 import { ScrollIndicator } from "design-system";

app/client/src/pages/setup/SignupSuccess.tsx

@@ -13,9 +13,8 @@ import { requiresAuth } from "pages/UserAuth/requiresAuthHOC";
 import React from "react";
 import { useCallback } from "react";
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { getCurrentUser } from "selectors/usersSelectors";
-import { useSelector } from "store";
 import { getIsSafeRedirectURL } from "utils/helpers";
 import history from "utils/history";
 import PerformanceTracker, {

app/client/src/store.ts

@@ -1,9 +1,5 @@
 import { reduxBatch } from "@manaflair/redux-batch";
 import { createStore, applyMiddleware, compose } from "redux";
-import {
-  useSelector as useReduxSelector,
-  TypedUseSelectorHook,
-} from "react-redux";
 import appReducer, { AppState } from "@appsmith/reducers";
 import createSagaMiddleware from "redux-saga";
 import { rootSaga } from "@appsmith/sagas";
@@ -50,5 +46,3 @@ export const testStore = (initialState: Partial<AppState>) =>
   );
 
 sagaMiddleware.run(rootSaga);
-
-export const useSelector: TypedUseSelectorHook<AppState> = useReduxSelector;

app/client/src/utils/hooks/useAllowEditorDragToSelect.ts

@@ -1,9 +1,9 @@
 import { AppState } from "@appsmith/reducers";
 import {
-  previewModeSelector,
   snipingModeSelector,
+  previewModeSelector,
 } from "selectors/editorSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 
 export const useAllowEditorDragToSelect = () => {
   // This state tells us whether a `ResizableComponent` is resizing

app/client/src/utils/hooks/useCanvasMinHeightUpdateHook.ts

@@ -5,7 +5,7 @@ import { AppState } from "@appsmith/reducers";
 import { APP_MODE } from "entities/App";
 import { getWidget } from "sagas/selectors";
 import { getAppMode } from "selectors/applicationSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import { updateWidgetMetaPropAndEval } from "actions/metaActions";
 import WidgetFactory from "utils/WidgetFactory";
 

app/client/src/utils/hooks/useClickToSelectWidget.tsx

@@ -1,5 +1,5 @@
 import { getIsPropertyPaneVisible } from "selectors/propertyPaneSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import { AppState } from "@appsmith/reducers";
 import { useWidgetSelection } from "./useWidgetSelection";
 import React, { ReactNode, useCallback } from "react";

app/client/src/utils/hooks/usePositionedContainerZIndex.ts

@@ -4,7 +4,7 @@ import { Layers } from "constants/Layers";
 import { useMemo } from "react";
 import { AppState } from "@appsmith/reducers";
 import { isWidgetSelected } from "selectors/widgetSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 
 export const usePositionedContainerZIndex = (
   props: PositionedContainerProps,

app/client/src/widgets/CameraWidget/component/index.tsx

@@ -26,7 +26,7 @@ import {
 } from "components/constants";
 import { SupportedLayouts } from "reducers/entityReducers/pageListReducer";
 import { getCurrentApplicationLayout } from "selectors/editorSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import { Colors } from "constants/Colors";
 import {
   getBrowserInfo,

app/client/src/widgets/CodeScannerWidget/component/index.tsx

@@ -10,7 +10,7 @@ import { Button, Icon, Menu, MenuItem, Position } from "@blueprintjs/core";
 import { SupportedLayouts } from "reducers/entityReducers/pageListReducer";
 import { ReactComponent as CameraOfflineIcon } from "assets/icons/widget/camera/camera-offline.svg";
 import { getCurrentApplicationLayout } from "selectors/editorSelectors";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import log from "loglevel";
 import { Popover2 } from "@blueprintjs/popover2";
 import Interweave from "interweave";
@@ -78,7 +78,7 @@ const CodeScannerGlobalStyles = createGlobalStyle<{
       right: -36px;
     }
   }
-  
+
   @keyframes scan {
     from {top: 0%}
     to {top: calc(100% - 4px);}

app/client/src/widgets/IframeWidget/component/index.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { hexToRgba } from "widgets/WidgetUtils";
 
 import { ComponentProps } from "widgets/BaseComponent";
-import { useSelector } from "store";
+import { useSelector } from "react-redux";
 import { getWidgetPropsForPropertyPane } from "selectors/propertyPaneSelectors";
 import { getAppMode } from "selectors/applicationSelectors";
 import { APP_MODE } from "entities/App";