useAppSelector (#414)

* add and use useAppSelector

* remove log

* fix failing group management test

cmd/ui/src/App.tsx

@@ -18,14 +18,13 @@ import { Box } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect } from 'react';
 import { useQueryClient } from 'react-query';
-import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { AppNotifications } from 'bh-shared-ui';
 import Notifier from 'src/components/Notifier';
 import { initialize } from 'src/ducks/auth/authSlice';
 import { ROUTE_EXPIRED_PASSWORD, ROUTE_LOGIN, ROUTE_USER_DISABLED } from 'src/ducks/global/routes';
 import { featureFlagKeys, getFeatureFlags } from 'src/hooks/useFeatureFlags';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 import { initializeBHEClient } from 'src/utils';
 import Content from 'src/views/Content';
 import Header from 'src/components/Header';
@@ -51,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
 
 const App: React.FC = () => {
     const classes = useStyles();
-    const authState = useSelector((state: AppState) => state.auth);
+    const authState = useAppSelector((state) => state.auth);
     const queryClient = useQueryClient();
     const dispatch = useAppDispatch();
     const location = useLocation();

cmd/ui/src/components/AuthenticatedRoute/AuthenticatedRoute.tsx

@@ -14,15 +14,14 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { useSelector } from 'react-redux';
 import { Navigate, useLocation } from 'react-router-dom';
 import { authExpiredSelector } from 'src/ducks/auth/authSlice';
 import { ROUTE_EXPIRED_PASSWORD, ROUTE_LOGIN } from 'src/ducks/global/routes';
-import { AppState } from 'src/store';
+import { useAppSelector } from 'src/store';
 
 const AuthenticatedRoute: React.FC<{ children: any }> = ({ children }): React.ReactElement => {
-    const authState = useSelector((state: AppState) => state.auth);
-    const isAuthExpired = useSelector(authExpiredSelector);
+    const authState = useAppSelector((state) => state.auth);
+    const isAuthExpired = useAppSelector(authExpiredSelector);
     const location = useLocation();
 
     // If user is not authenticated, redirect to login screen

cmd/ui/src/components/GraphButtons/GraphButtons.tsx

@@ -23,10 +23,9 @@ import { random } from 'graphology-layout';
 import forceAtlas2 from 'graphology-layout-forceatlas2';
 import isEmpty from 'lodash/isEmpty';
 import { FC } from 'react';
-import { useSelector } from 'react-redux';
 import { resetCamera } from 'src/ducks/graph/utils';
 import { RankDirection, layoutDagre } from 'src/hooks/useLayoutDagre/useLayoutDagre';
-import { AppState } from 'src/store';
+import { useAppSelector } from 'src/store';
 
 interface GraphButtonsProps {
     rankDirection?: RankDirection;
@@ -43,7 +42,7 @@ const GraphButtons: FC<GraphButtonsProps> = ({ rankDirection, options, nonLayout
     if (isEmpty(options)) options = { standard: false, sequential: false };
     const { standard, sequential } = options;
 
-    const exportableGraphState = useSelector((state: AppState) => state.explore.export);
+    const exportableGraphState = useAppSelector((state) => state.explore.export);
 
     const sigma = useSigma();
     const graph = sigma.getGraph();

cmd/ui/src/components/GraphEdgeEvents.tsx

@@ -17,7 +17,6 @@
 import { useSigma } from '@react-sigma/core';
 import { setEdgeInfoOpen, setSelectedEdge } from 'bh-shared-ui';
 import { FC, useCallback } from 'react';
-import { useSelector } from 'react-redux';
 import { setEntityInfoOpen } from 'src/ducks/entityinfo/actions';
 import {
     calculateEdgeDistanceForLabel,
@@ -26,11 +25,11 @@ import {
     getEdgeSourceAndTargetDisplayData,
 } from 'src/ducks/graph/utils';
 import { bezier } from 'src/rendering/utils/bezier';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 
 const GraphEdgeEvents: FC = () => {
     const dispatch = useAppDispatch();
-    const graphState = useSelector((state: AppState) => state.explore);
+    const graphState = useAppSelector((state) => state.explore);
 
     const sigma = useSigma();
     const camera = sigma.getCamera();

cmd/ui/src/components/GraphEvents.tsx

@@ -18,11 +18,10 @@ import { useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core';
 import { setSelectedEdge } from 'bh-shared-ui';
 import { AbstractGraph, Attributes } from 'graphology-types';
 import { FC, useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { SigmaNodeEventPayload } from 'sigma/sigma';
 import { getEdgeDataFromKey, getEdgeSourceAndTargetDisplayData, resetCamera } from 'src/ducks/graph/utils';
 import { bezier } from 'src/rendering/utils/bezier';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 
 export interface GraphEventProps {
     onDoubleClickNode?: (id: string) => void;
@@ -42,8 +41,8 @@ export const GraphEvents: FC<GraphEventProps> = ({
     edgeReducer,
 }) => {
     const dispatch = useAppDispatch();
-    const selectedEdge = useSelector((state: AppState) => state.edgeinfo.selectedEdge);
-    const selectedNode = useSelector((state: AppState) => state.entityinfo.selectedNode);
+    const selectedEdge = useAppSelector((state) => state.edgeinfo.selectedEdge);
+    const selectedNode = useAppSelector((state) => state.entityinfo.selectedNode);
 
     const sigma = useSigma();
     const registerEvents = useRegisterEvents();

cmd/ui/src/components/Notifier.tsx

@@ -19,9 +19,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconButton, SvgIcon } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import React, { useCallback, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import { removeSnackbar } from 'src/ducks/global/actions';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 
 let displayed: string[] = [];
 
@@ -30,7 +29,7 @@ const Notifier: React.FC = () => {
 
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
-    const notifications = useSelector((state: AppState) => state.global.view.notifications);
+    const notifications = useAppSelector((state) => state.global.view.notifications);
 
     const storeDisplayed = (id: string) => {
         displayed = [...displayed, id];

cmd/ui/src/store.ts

@@ -18,7 +18,7 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { enableMapSet } from 'immer';
 import Cookies from 'js-cookie';
 import throttle from 'lodash/throttle';
-import { useDispatch } from 'react-redux';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import createSagaMiddleware from 'redux-saga';
 import * as reducers from 'src/ducks';
 import { edgeinfo } from 'bh-shared-ui';
@@ -94,6 +94,7 @@ store.subscribe(
 );
 
 export type AppState = ReturnType<typeof store.getState>;
+export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector
 
 export type AppDispatch = typeof store.dispatch;
 export const useAppDispatch = () => useDispatch<AppDispatch>();

cmd/ui/src/views/Content.tsx

@@ -18,14 +18,13 @@ import { Box, CircularProgress } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import React, { Suspense, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useSelector } from 'react-redux';
 import { Route, Routes } from 'react-router-dom';
 import { GenericErrorBoundaryFallback, apiClient } from 'bh-shared-ui';
 import { ListAssetGroups } from 'src/ducks/assetgroups/actionCreators';
 import { fullyAuthenticatedSelector } from 'src/ducks/auth/authSlice';
 import { fetchAssetGroups, setDomain } from 'src/ducks/global/actions';
 import * as routes from 'src/ducks/global/routes';
-import { useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 import AuthenticatedRoute from 'src/components/AuthenticatedRoute';
 
 const Login = React.lazy(() => import('src/views/Login'));
@@ -52,8 +51,8 @@ const useStyles = makeStyles({
 const Content: React.FC = () => {
     const classes = useStyles();
     const dispatch = useAppDispatch();
-    const authState = useSelector((state: any) => state.auth);
-    const isFullyAuthenticated = useSelector(fullyAuthenticatedSelector);
+    const authState = useAppSelector((state) => state.auth);
+    const isFullyAuthenticated = useAppSelector(fullyAuthenticatedSelector);
 
     useEffect(() => {
         if (isFullyAuthenticated) {

cmd/ui/src/views/ExpiredPassword.tsx

@@ -15,19 +15,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { useSelector } from 'react-redux';
+
 import { Navigate } from 'react-router-dom';
 import { authExpiredSelector, logout, updateExpiredPassword } from 'src/ducks/auth/authSlice';
 import LoginPage from 'src/components/LoginPage';
 import PasswordResetForm from 'src/components/PasswordResetForm';
 import { ROUTE_HOME } from 'src/ducks/global/routes';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 
 const PasswordReset: React.FC = () => {
     /* Hooks */
     const dispatch = useAppDispatch();
-    const authState = useSelector((state: AppState) => state.auth);
-    const authExpired = useSelector(authExpiredSelector);
+    const authState = useAppSelector((state) => state.auth);
+    const authExpired = useAppSelector(authExpiredSelector);
 
     /* Event Handlers */
     const handleSubmit = (password: string) => {

cmd/ui/src/views/Explore/ContextMenu/AssetGroupMenuItem.tsx

@@ -18,19 +18,18 @@ import { Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem } f
 import { apiClient, useNotifications } from 'bh-shared-ui';
 import { FC, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
 import { selectTierZeroAssetGroupId } from 'src/ducks/assetgroups/reducer';
 import { toggleTierZeroNode } from 'src/ducks/explore/actions';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 
 const AssetGroupMenuItem: FC<{ assetGroupId: string; assetGroupName: string }> = ({ assetGroupId, assetGroupName }) => {
     const { addNotification } = useNotifications();
     const dispatch = useAppDispatch();
 
     const [open, setOpen] = useState(false);
 
-    const selectedNode = useSelector((state: AppState) => state.entityinfo.selectedNode);
-    const tierZeroAssetGroupId = useSelector(selectTierZeroAssetGroupId);
+    const selectedNode = useAppSelector((state) => state.entityinfo.selectedNode);
+    const tierZeroAssetGroupId = useAppSelector(selectTierZeroAssetGroupId);
 
     const isMenuItemForTierZero = assetGroupId === tierZeroAssetGroupId;
 

cmd/ui/src/views/Explore/ContextMenu/ContextMenu.tsx

@@ -17,9 +17,8 @@
 import { Menu, MenuItem } from '@mui/material';
 
 import { FC } from 'react';
-import { useSelector } from 'react-redux';
 import { destinationNodeSelected, sourceNodeSelected, tabChanged } from 'src/ducks/searchbar/actions';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 import { selectOwnedAssetGroupId, selectTierZeroAssetGroupId } from 'src/ducks/assetgroups/reducer';
 import AssetGroupMenuItem from './AssetGroupMenuItem';
 import CopyMenuItem from './CopyMenuItem';
@@ -30,10 +29,10 @@ const ContextMenu: FC<{ contextMenu: { mouseX: number; mouseY: number } | null;
 }) => {
     const dispatch = useAppDispatch();
 
-    const selectedNode = useSelector((state: AppState) => state.entityinfo.selectedNode);
+    const selectedNode = useAppSelector((state) => state.entityinfo.selectedNode);
 
-    const ownedAssetGroupId = useSelector(selectOwnedAssetGroupId);
-    const tierZeroAssetGroupId = useSelector(selectTierZeroAssetGroupId);
+    const ownedAssetGroupId = useAppSelector(selectOwnedAssetGroupId);
+    const tierZeroAssetGroupId = useAppSelector(selectTierZeroAssetGroupId);
 
     const handleSetStartingNode = () => {
         if (selectedNode) {

cmd/ui/src/views/Explore/ContextMenu/CopyMenuItem.tsx

@@ -18,8 +18,7 @@ import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { MenuItem, Tooltip, TooltipProps, styled, tooltipClasses } from '@mui/material';
 import { useNotifications } from 'bh-shared-ui';
-import { useSelector } from 'react-redux';
-import { AppState } from 'src/store';
+import { useAppSelector } from 'src/store';
 
 const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
     <Tooltip {...props} classes={{ popper: className }} />
@@ -38,7 +37,7 @@ const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
 const CopyMenuItem = () => {
     const { addNotification } = useNotifications();
 
-    const selectedNode = useSelector((state: AppState) => state.entityinfo.selectedNode);
+    const selectedNode = useAppSelector((state) => state.entityinfo.selectedNode);
 
     const handleCopyDisplayName = () => {
         if (selectedNode) {

cmd/ui/src/views/Explore/EdgeInfo/EdgeInfoCollapsibleSection.tsx

@@ -19,8 +19,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
 import { EdgeInfoState, EdgeSections, edgeSectionToggle, SubHeader, useCollapsibleSectionStyles } from 'bh-shared-ui';
 import React, { PropsWithChildren } from 'react';
-import { useSelector } from 'react-redux';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 
 export const EdgeInfoCollapsibleSection: React.FC<
     PropsWithChildren<{
@@ -31,7 +30,7 @@ export const EdgeInfoCollapsibleSection: React.FC<
     const styles = useCollapsibleSectionStyles();
 
     const dispatch = useAppDispatch();
-    const edgeInfoState: EdgeInfoState = useSelector((state: AppState) => state.edgeinfo);
+    const edgeInfoState: EdgeInfoState = useAppSelector((state) => state.edgeinfo);
 
     const expanded = edgeInfoState.expandedSections[section];
 

cmd/ui/src/views/Explore/ExploreSearch/CypherSearch.tsx

@@ -31,9 +31,8 @@ import {
     useCreateSavedQuery,
 } from 'bh-shared-ui';
 import { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { cypherQueryEdited, cypherSearch } from 'src/ducks/searchbar/actions';
-import { AppState } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 import CommonSearches from './CommonSearches';
 import SaveQueryDialog from './SaveQueryDialog';
 import { addSnackbar } from 'src/ducks/global/actions';
@@ -83,9 +82,9 @@ const schema = {
 };
 
 const useCypherEditor = () => {
-    const cypherQuery = useSelector((state: AppState) => state.search.cypher.searchTerm);
+    const cypherQuery = useAppSelector((state) => state.search.cypher.searchTerm);
 
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
 
     const setCypherQuery = (query: string) => dispatch(cypherQueryEdited(query));
 
@@ -107,7 +106,7 @@ const CypherSearch = () => {
     const [showCommonQueries, setShowCommonQueries] = useState(false);
     const [showEgg, setShowEgg] = useState(false);
     const [showSaveQueryDialog, setShowSaveQueryDialog] = useState(false);
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
 
     const handleCypherSearch = () => {
         if (cypherQuery) {

cmd/ui/src/views/Explore/ExploreSearch/EdgeFilter.tsx

@@ -20,8 +20,7 @@ import { Button } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { useEffect, useRef, useState } from 'react';
 import EdgeFilteringDialog, { EdgeCheckboxType } from './EdgeFilteringDialog';
-import { useSelector } from 'react-redux';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 import { pathfindingSearch, pathFiltersSaved } from 'src/ducks/searchbar/actions';
 
 const useStyles = makeStyles((theme) => ({
@@ -44,7 +43,7 @@ const EdgeFilter = () => {
     const [isActiveFilters, setIsActiveFilters] = useState(false);
 
     const initialFilterState = useRef<EdgeCheckboxType[]>([]);
-    const pathFilters = useSelector((state: AppState) => state.search.pathFilters);
+    const pathFilters = useAppSelector((state) => state.search.pathFilters);
 
     useEffect(() => {
         // if user has applied filters, set active

cmd/ui/src/views/Explore/ExploreSearch/EdgeFilteringDialog.tsx

@@ -39,10 +39,9 @@ import {
 import { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { useSelector } from 'react-redux';
 import { pathFiltersSaved } from 'src/ducks/searchbar/actions';
 import { AllEdgeTypes, Category, Subcategory } from 'bh-shared-ui';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 
 interface EdgeFilteringDialogProps {
     isOpen: boolean;
@@ -51,7 +50,7 @@ interface EdgeFilteringDialogProps {
 }
 
 const EdgeFilteringDialog = ({ isOpen, handleCancel, handleApply }: EdgeFilteringDialogProps) => {
-    const selectedFilters: EdgeCheckboxType[] = useSelector((state: AppState) => state.search.pathFilters);
+    const selectedFilters: EdgeCheckboxType[] = useAppSelector((state) => state.search.pathFilters);
 
     const onCancel = () => {
         handleCancel();

cmd/ui/src/views/Explore/ExploreSearch/ExploreSearch.tsx

@@ -20,9 +20,8 @@ import { Box, Collapse, Paper, Tab, Tabs, Theme, useMediaQuery, useTheme } from
 import makeStyles from '@mui/styles/makeStyles';
 import { Icon } from 'bh-shared-ui';
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
 import { CYPHER_SEARCH, PATHFINDING_SEARCH, PRIMARY_SEARCH } from 'src/ducks/searchbar/types';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 import CypherSearch from './CypherSearch';
 import NodeSearch from './NodeSearch';
 import PathfindingSearch from './PathfindingSearch';
@@ -61,7 +60,7 @@ const ExploreSearch = ({ handleColumns }: ExploreSearchProps) => {
     const matches = useMediaQuery(theme.breakpoints.down('md'));
     const dispatch = useAppDispatch();
 
-    const tabKey = useSelector((state: AppState) => state.search.activeTab);
+    const tabKey = useAppSelector((state) => state.search.activeTab);
     const activeTab = tabNameMap[tabKey];
 
     const [showSearchWidget, setShowSearchWidget] = useState(true);

cmd/ui/src/views/Explore/ExploreSearch/NodeSearch.tsx

@@ -14,16 +14,15 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { useSelector } from 'react-redux';
 import ExploreSearchCombobox from '../ExploreSearchCombobox';
 import { SearchNodeType, SourceNodeEditedAction, SourceNodeSelectedAction } from 'src/ducks/searchbar/types';
-import { AppState, useAppDispatch } from 'src/store';
+import { useAppDispatch, useAppSelector } from 'src/store';
 import { sourceNodeEdited, sourceNodeSelected } from 'src/ducks/searchbar/actions';
 
 const NodeSearch = () => {
     const dispatch = useAppDispatch();
 
-    const primary = useSelector((state: AppState) => state.search.primary);
+    const primary = useAppSelector((state) => state.search.primary);
     const { searchTerm, value: selectedItem } = primary;
 
     const handleNodeEdited = (edit: string): SourceNodeEditedAction => dispatch(sourceNodeEdited(edit));