Refactor usage of useDispatch and useSelector

src/components/AddNode/AddNode.tsx

@@ -7,9 +7,8 @@ import {
 } from "@patternfly/react-core";
 import type React from "react";
 import { useCallback, useContext } from "react";
-import { useDispatch } from "react-redux";
 import { catchError } from "../../api/common";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { getNodeOperations } from "../../store/plugin/pluginSlice";
 import { addNode } from "../../store/pluginInstance/pluginInstanceSlice";
 import type { ApplicationState } from "../../store/root/applicationState";
@@ -18,19 +17,18 @@ import { getRequiredObject } from "../CreateFeed/createFeedHelper";
 import BasicConfiguration from "./BasicConfiguration";
 import GuidedConfig from "./GuidedConfig";
 import "./add-node.css";
-import type { AppDispatch } from "../../store/configureStore";
 import { AddNodeContext } from "./context";
 import { Types } from "./types";
 
 const AddNode: React.FC = () => {
-  const dispatch = useDispatch<AppDispatch>();
-  const { childNode } = useTypedSelector(
+  const dispatch = useAppDispatch();
+  const { childNode } = useAppSelector(
     (state: ApplicationState) => state.plugin.nodeOperations,
   );
-  const { pluginInstances, selectedPlugin } = useTypedSelector(
+  const { pluginInstances, selectedPlugin } = useAppSelector(
     (state) => state.instance,
   );
-  const params = useTypedSelector((state) => state.plugin.parameters);
+  const params = useAppSelector((state) => state.plugin.parameters);
   const { state, dispatch: nodeDispatch } = useContext(AddNodeContext);
   const {
     pluginMeta,

src/components/AddNode/ComputeEnvironment.tsx

@@ -5,13 +5,13 @@ import {
   SelectOption,
 } from "@patternfly/react-core";
 import React, { useContext, useCallback, useState, useEffect } from "react";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppSelector } from "../../store/hooks";
 import { Alert } from "../Antd";
 import { AddNodeContext } from "./context";
 import { Types } from "./types";
 
 const ComputeEnvironment: React.FC = () => {
-  const { computeEnv: computeEnvs, resourceError } = useTypedSelector(
+  const { computeEnv: computeEnvs, resourceError } = useAppSelector(
     (state) => state.plugin,
   );
   const { state, dispatch } = useContext(AddNodeContext);

src/components/AddNode/GuidedConfig.tsx

@@ -29,16 +29,14 @@ import {
 import { useMutation } from "@tanstack/react-query";
 import { isEmpty } from "lodash";
 import React, { useContext, useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
 import { v4 } from "uuid";
 import {
   catchError,
   customQuote,
   fetchResource,
   needsQuoting,
 } from "../../api/common";
-import type { AppDispatch } from "../../store/configureStore";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppSelector, useAppDispatch } from "../../store/hooks";
 import { fetchParamsAndComputeEnv } from "../../store/plugin/pluginSlice";
 import { Alert } from "../Antd";
 import { ClipboardCopyFixed, ErrorAlert } from "../Common";
@@ -68,9 +66,9 @@ const advancedConfigList = [
 const memory_limit = ["Mi", "Gi"];
 
 const GuidedConfig = () => {
-  const dispatch = useDispatch<AppDispatch>();
+  const dispatch = useAppDispatch();
   const { state, dispatch: nodeDispatch } = useContext(AddNodeContext);
-  const { parameters: params, resourceError } = useTypedSelector(
+  const { parameters: params, resourceError } = useAppSelector(
     (state) => state.plugin,
   );
   const { pluginMeta, dropdownInput, requiredInput, componentList, errors } =
@@ -313,7 +311,7 @@ const CardComponent = ({ children }: { children: React.ReactElement }) => {
 
 const CheckboxComponent = () => {
   // This component automatically constructs the Form and the Editor Value from a previous run of a plugin instance
-  const { parameters: params, resourceError } = useTypedSelector(
+  const { parameters: params, resourceError } = useAppSelector(
     (state) => state.plugin,
   );
   const { state, dispatch } = useContext(AddNodeContext);
@@ -485,7 +483,7 @@ const ItalicsComponent = ({
 };
 
 const DropdownBasic = ({ plugins }: { plugins?: Plugin[] }) => {
-  const dispatch = useDispatch<AppDispatch>();
+  const dispatch = useAppDispatch();
   const [isopen, setIsOpen] = React.useState(false);
   const { state, dispatch: nodeDispatch } = useContext(AddNodeContext);
   const { selectedPluginFromMeta } = state;

src/components/AddPipeline/AddPipeline.tsx

@@ -2,10 +2,9 @@ import type { PluginInstance } from "@fnndsc/chrisapi";
 import { Button, Modal, ModalVariant } from "@patternfly/react-core";
 import { useMutation } from "@tanstack/react-query";
 import React, { Fragment, useContext } from "react";
-import { useDispatch } from "react-redux";
 import ChrisAPIClient from "../../api/chrisapiclient";
 import { fetchResource } from "../../api/common";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { getNodeOperations } from "../../store/plugin/pluginSlice";
 import {
   getSelectedPlugin,
@@ -20,12 +19,12 @@ import { PipelineContext, Types } from "../PipelinesCopy/context";
 const AddPipeline = () => {
   const { state, dispatch } = useContext(PipelineContext);
   const { pipelineToAdd, selectedPipeline, computeInfo, titleInfo } = state;
-  const reactDispatch = useDispatch();
-  const { childPipeline } = useTypedSelector(
+  const reactDispatch = useAppDispatch();
+  const { childPipeline } = useAppSelector(
     (state) => state.plugin.nodeOperations,
   );
 
-  const { pluginInstances, selectedPlugin } = useTypedSelector(
+  const { pluginInstances, selectedPlugin } = useAppSelector(
     (state) => state.instance,
   );
 

src/components/CreateFeed/ChooseConfig.tsx

@@ -20,7 +20,7 @@ import {
 } from "@patternfly/react-core";
 import { Alert, Steps, notification } from "../Antd";
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppSelector } from "../../store/hooks";
 import GuidedConfig from "../AddNode/GuidedConfig";
 import { AddNodeContext } from "../AddNode/context";
 import {
@@ -50,7 +50,7 @@ const ChooseConfig = ({
   const { goToNextStep: onNext, goToPrevStep: onBack } = useWizardContext();
   const [isRightDrawerExpand, setRightDrawerExpand] = useState<boolean>(false);
   const [currentStep, setCurrentStep] = useState(0);
-  const params = useTypedSelector((state) => state.plugin.parameters);
+  const params = useAppSelector((state) => state.plugin.parameters);
   const [selectedCard, setSelectedCard] = useState("");
   const [showDragAndDrop, setShowDragAndDrop] = useState(false);
 

src/components/CreateFeed/CreateFeed.tsx

@@ -12,7 +12,7 @@ import * as React from "react";
 import { useContext } from "react";
 import { catchError } from "../../api/common";
 import { MainRouterContext } from "../../routes";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppSelector } from "../../store/hooks";
 import { AddNodeContext } from "../AddNode/context";
 import { notification } from "../Antd";
 import { CodeBranchIcon } from "../Icons";
@@ -28,7 +28,7 @@ import { createFeed, createFeedInstanceWithFS } from "./createFeedHelper";
 import { Types } from "./types/feed";
 
 export default function CreateFeed() {
-  const isLoggedIn = useTypedSelector((state) => state.user.isLoggedIn);
+  const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
   const [feedProcessing, setFeedProcessing] = React.useState(false);
   const queryClient = useQueryClient();
   const router = useContext(MainRouterContext);
@@ -39,7 +39,7 @@ export default function CreateFeed() {
   const { state: pipelineState, dispatch: pipelineDispatch } =
     useContext(PipelineContext);
 
-  const user = useTypedSelector((state) => state.user);
+  const user = useAppSelector((state) => state.user);
   const { pluginMeta, selectedPluginFromMeta, dropdownInput, requiredInput } =
     addNodeState;
   const { wizardOpen, data, selectedConfig } = state;

src/components/DatasetRedirect/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { DatasetSearchResult, getDatasets } from "./getDatasets.ts";
 import NotFound from "../NotFound";
 import { Link } from "react-router-dom";
-import { useTypedSelector } from "../../store/hooks.ts";
+import { useAppSelector } from "../../store/hooks.ts";
 
 /**
  * A page which redirects to a dataset viewer.
@@ -20,7 +20,7 @@ import { useTypedSelector } from "../../store/hooks.ts";
  */
 const DatasetRedirect = () => {
   const params = useParams();
-  const isLoggedIn = useTypedSelector(({ user }) => user.isLoggedIn);
+  const isLoggedIn = useAppSelector(({ user }) => user.isLoggedIn);
   const [result, setResult] = React.useState<DatasetSearchResult | null>(null);
   // biome-ignore lint/suspicious/noExplicitAny: catch error is untyped
   const [error, setError] = React.useState<any>();

src/components/DeleteNode/index.tsx

@@ -2,9 +2,8 @@ import type { PluginInstance } from "@fnndsc/chrisapi";
 import { Button, Modal, ModalVariant } from "@patternfly/react-core";
 import { useMutation } from "@tanstack/react-query";
 import { Fragment, useEffect } from "react";
-import { useDispatch } from "react-redux";
 import { fetchResource } from "../../api/common";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { getNodeOperations } from "../../store/plugin/pluginSlice";
 import {
   setPluginInstancesAndSelectedPlugin,
@@ -15,12 +14,12 @@ import { Alert } from "../Antd";
 import { SpinContainer } from "../Common";
 
 const DeleteNode = () => {
-  const dispatch = useDispatch();
-  const { deleteNode: isModalOpen } = useTypedSelector(
+  const dispatch = useAppDispatch();
+  const { deleteNode: isModalOpen } = useAppSelector(
     (state) => state.plugin.nodeOperations,
   );
-  const { selectedPlugin } = useTypedSelector((state) => state.instance);
-  const currentFeed = useTypedSelector((state) => state.feed.currentFeed.data);
+  const { selectedPlugin } = useAppSelector((state) => state.instance);
+  const currentFeed = useAppSelector((state) => state.feed.currentFeed.data);
 
   const handleDelete = async () => {
     if (selectedPlugin) {

src/components/FeedDetails/FeedNote.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from "react";
 import { TextArea, FormGroup, Form, Button } from "@patternfly/react-core";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppSelector } from "../../store/hooks";
 import { fetchNote } from "../../api/common";
 
 const FeedNote = () => {
   const [value, setValue] = React.useState("");
 
-  const feed = useTypedSelector((state) => state.feed.currentFeed.data);
+  const feed = useAppSelector((state) => state.feed.currentFeed.data);
 
   useEffect(() => {
     fetchNote(feed).then((note) => {

src/components/FeedDetails/index.tsx

@@ -1,11 +1,10 @@
 import { Flex, FlexItem } from "@patternfly/react-core";
 import type React from "react";
 import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
 import { fetchNote } from "../../api/common";
 import type { IDrawerState } from "../../store/drawer/drawerSlice";
 import { setDrawerCurrentlyActive } from "../../store/drawer/drawerSlice";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { Badge } from "../Antd";
 import { ButtonWithTooltip } from "../Feeds/DrawerUtils";
 import { handleToggle } from "../Feeds/utilties";
@@ -21,9 +20,9 @@ import {
 import "./feed-details.css";
 
 const FeedDetails = () => {
-  const currentFeed = useTypedSelector((state) => state.feed.currentFeed.data);
-  const dispatch = useDispatch();
-  const drawerState = useTypedSelector((state) => state.drawers);
+  const currentFeed = useAppSelector((state) => state.feed.currentFeed.data);
+  const dispatch = useAppDispatch();
+  const drawerState = useAppSelector((state) => state.drawers);
 
   const node = drawerState.node.currentlyActive === "node";
   const note = drawerState.node.currentlyActive === "note";

src/components/FeedOutputBrowser/FileBrowser.tsx

@@ -17,13 +17,12 @@ import {
 } from "@patternfly/react-core";
 import { Table, Tbody, Th, Thead, Tr } from "@patternfly/react-table";
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
 import { setFilePreviewPanel } from "../../store/drawer/drawerSlice";
 import {
   clearSelectedFile,
   setSelectedFile,
 } from "../../store/explorer/explorerSlice";
-import useDownload, { useTypedSelector } from "../../store/hooks";
+import useDownload, { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { notification } from "../Antd";
 import { ClipboardCopyContainer } from "../Common";
 import { DrawerActionButton } from "../Feeds/DrawerUtils";
@@ -59,8 +58,8 @@ const columnNames = {
 };
 
 const FileBrowser = (props: FileBrowserProps) => {
-  const dispatch = useDispatch();
-  const feed = useTypedSelector((state) => state.feed.currentFeed.data);
+  const dispatch = useAppDispatch();
+  const feed = useAppSelector((state) => state.feed.currentFeed.data);
   const handleDownloadMutation = useDownload(feed);
   const [api, contextHolder] = notification.useNotification();
   const { isSuccess, isError, error: downloadError } = handleDownloadMutation;
@@ -75,9 +74,9 @@ const FileBrowser = (props: FileBrowserProps) => {
     isLoading,
   } = props;
 
-  const selectedFile = useTypedSelector((state) => state.explorer.selectedFile);
-  const drawerState = useTypedSelector((state) => state.drawers);
-  const username = useTypedSelector((state) => state.user.username);
+  const selectedFile = useAppSelector((state) => state.explorer.selectedFile);
+  const drawerState = useAppSelector((state) => state.drawers);
+  const username = useAppSelector((state) => state.user.username);
   const { subFoldersMap, linkFilesMap, filesMap } = pluginFilesPayload;
   const breadcrumb = additionalKey.split("/");
   const currentPath = `home/${username}/feeds/feed_${feed?.data.id}/${selected?.data.plugin_name}_${selected?.data.id}/data`;

src/components/FeedOutputBrowser/useFeedBrowser.tsx

@@ -1,6 +1,6 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppSelector } from "../../store/hooks";
 import { fetchFolders } from "../NewLibrary";
 
 const status = ["finishedSuccessfully", "finishedWithError", "cancelled"];
@@ -14,19 +14,19 @@ const getInitialDownloadState = () => ({
 });
 
 export const useFeedBrowser = () => {
-  const drawerState = useTypedSelector((state) => state.drawers);
+  const drawerState = useAppSelector((state) => state.drawers);
   const [download, setDownload] = useState(getInitialDownloadState);
   const [currentPath, setCurrentPath] = useState("");
   const [pageNumber, setPageNumber] = useState(1);
 
-  const pluginInstances = useTypedSelector(
+  const pluginInstances = useAppSelector(
     (state) => state.instance.pluginInstances,
   );
 
-  const selected = useTypedSelector((state) => state.instance.selectedPlugin);
+  const selected = useAppSelector((state) => state.instance.selectedPlugin);
   const { data: plugins } = pluginInstances;
 
-  const statusTitle = useTypedSelector((state) => {
+  const statusTitle = useAppSelector((state) => {
     if (selected) {
       const id = selected.data.id;
       if (id && state.resource.pluginInstanceStatus[id]) {

src/components/FeedTree/DropdownMenu.tsx

@@ -1,6 +1,5 @@
 import type React from "react";
-import { useDispatch } from "react-redux";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { getNodeOperations } from "../../store/plugin/pluginSlice";
 import { Dropdown, type MenuProps } from "../Antd";
 import { AddIcon, DeleteIcon, PatternflyArchiveIcon } from "../Icons";
@@ -12,8 +11,8 @@ const DropdownMenu = ({
   children: React.ReactElement;
   handleZip: () => void;
 }) => {
-  const dispatch = useDispatch();
-  const { selectedPlugin } = useTypedSelector((state) => {
+  const dispatch = useAppDispatch();
+  const { selectedPlugin } = useAppSelector((state) => {
     return state.instance;
   });
   const cancelled =

src/components/FeedTree/FeedGraph.tsx

@@ -9,7 +9,7 @@ import ForceGraph2D, {
 import { connect, useDispatch } from "react-redux";
 import { TreeModel } from "../../api/model";
 import { setFeedLayout } from "../../store/feed/feedSlice";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppSelector } from "../../store/hooks";
 import type { PluginInstancePayload } from "../../store/pluginInstance/types";
 import type { ApplicationState } from "../../store/root/applicationState";
 import { type FeedTreeScaleType, NodeScaleDropdown } from "./Controls";
@@ -23,8 +23,8 @@ interface IFeedProps {
 }
 
 const FeedGraph = (props: IFeedProps) => {
-  const dispatch = useDispatch();
-  const currentLayout = useTypedSelector((state) => state.feed.currentLayout);
+  const dispatch = useAppDispatch();
+  const currentLayout = useAppSelector((state) => state.feed.currentLayout);
   const { pluginInstances, selectedPlugin, onNodeClick } = props;
   const { data: instances } = pluginInstances;
   const graphRef = React.useRef<HTMLDivElement | null>(null);

src/components/FeedTree/FeedTree.tsx

@@ -9,14 +9,13 @@ import { type Selection, select } from "d3-selection";
 import { type ZoomBehavior, zoom as d3Zoom, zoomIdentity } from "d3-zoom";
 import { isEqual } from "lodash";
 import React, { useContext, useRef } from "react";
-import { useDispatch } from "react-redux";
 import {
   setFeedLayout,
   setSearchFilter,
   setTranslate,
 } from "../../store/feed/feedSlice";
 import type { FeedTreeProp } from "../../store/feed/types";
-import { useTypedSelector } from "../../store/hooks";
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { ThemeContext } from "../DarkTheme/useTheme";
 import { RotateLeft, RotateRight } from "../Icons";
 import { type FeedTreeScaleType, NodeScaleDropdown } from "./Controls";
@@ -77,10 +76,10 @@ const graphClassName = "feed-tree__graph";
 
 const FeedTree = (props: OwnProps) => {
   const { isDarkTheme } = useContext(ThemeContext);
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const divRef = useRef<HTMLDivElement>(null);
-  const { feedTreeProp, currentLayout, searchFilter } = useTypedSelector(
+  const { feedTreeProp, currentLayout, searchFilter } = useAppSelector(
     (state) => state.feed,
   );
   const [feedTree, setFeedTree] = React.useState<{