Merge pull request #1398 from chhsiao1981/refactor-ui

 replace uiSlice to reducers.ui (use-thunk)

Author: chhsiao1981

package.json

@@ -88,7 +88,7 @@
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-force-graph-2d": "^1.25.5",
-    "@chhsiao1981/use-thunk": "^9.0.0",
+    "@chhsiao1981/use-thunk": "^9.0.2",
     "react-redux": "^9.1.2",
     "react-resizable-panels": "^2.1.4",
     "react-responsive": "^10.0.0",

pnpm-lock.yaml

@@ -1,9 +1,17 @@
+import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
 import { PageSection } from "@patternfly/react-core";
 import React from "react";
+import type * as DoUI from "../../reducers/ui";
 import { InfoSection } from "../Common";
-import WrapperConnect from "../Wrapper";
+import Wrapper from "../Wrapper";
 import ComputeCatalog from "./ComputeCatalog";
 
+type TDoUI = ThunkModuleToFunc<typeof DoUI>;
+
+type Props = {
+  useUI: UseThunk<DoUI.State, TDoUI>;
+};
+
 const TitleComponent = (
   <InfoSection
     title="Compute"
@@ -21,17 +29,16 @@ const TitleComponent = (
   />
 );
 
-const ComputePage = () => {
+export default (props: Props) => {
+  const { useUI } = props;
   React.useEffect(() => {
     document.title = "Compute Catalog";
   }, []);
   return (
-    <WrapperConnect titleComponent={TitleComponent}>
+    <Wrapper useUI={useUI} titleComponent={TitleComponent}>
       <PageSection>
         <ComputeCatalog />
       </PageSection>
-    </WrapperConnect>
+    </Wrapper>
   );
 };
-
-export default ComputePage;

src/components/ComputePage/index.tsx

@@ -10,20 +10,29 @@ import {
   GridItem,
   PageSection,
 } from "@patternfly/react-core";
-import type React from "react";
 import { useEffect } from "react";
 import BUILD_VERSION from "../../getBuildVersion";
 import { InfoSection } from "../Common";
-import WrapperConnect from "../Wrapper";
+import Wrapper from "../Wrapper";
 import FeedGraph from "./FeedGraph";
 import "./dashboard.css";
+import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
+import type * as DoUI from "../../reducers/ui";
 import {
   covidnetDataset,
   fetalBrainReconstructionDataset,
   lldDataset,
 } from "./util";
 
-const DashboardPage: React.FC = () => {
+type TDoUI = ThunkModuleToFunc<typeof DoUI>;
+
+type Props = {
+  useUI: UseThunk<DoUI.State, TDoUI>;
+};
+
+export default (props: Props) => {
+  const { useUI } = props;
+
   useEffect(() => {
     document.title = "Overview";
   }, []);
@@ -44,7 +53,7 @@ const DashboardPage: React.FC = () => {
   );
 
   return (
-    <WrapperConnect titleComponent={TitleComponent}>
+    <Wrapper titleComponent={TitleComponent} useUI={useUI}>
       <PageSection>
         <Grid hasGutter>
           <GridItem span={12}>
@@ -133,8 +142,6 @@ const DashboardPage: React.FC = () => {
           </GridItem>
         </Grid>
       </PageSection>
-    </WrapperConnect>
+    </Wrapper>
   );
 };
-
-export default DashboardPage;

src/components/Dashboard/index.tsx

@@ -1,3 +1,4 @@
+import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
 import type { Feed, FileBrowserFolder } from "@fnndsc/chrisapi";
 import { ChartDonutUtilization } from "@patternfly/react-charts";
 import {
@@ -9,9 +10,6 @@ import {
   Pagination,
   Skeleton,
   Title,
-  ToggleGroup,
-  ToggleGroupItem,
-  type ToggleGroupItemProps,
   Tooltip,
 } from "@patternfly/react-core";
 import {
@@ -27,23 +25,20 @@ import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import { debounce } from "lodash";
 import type React from "react";
-import { useContext, useEffect, useMemo, useState, useRef } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useNavigate } from "react-router";
+import type * as DoUI from "../../reducers/ui";
 import { useAppSelector } from "../../store/hooks";
-import { AddNodeProvider } from "../AddNode/context";
 import { Typography } from "../Antd";
 import { InfoSection } from "../Common";
-import CreateFeed from "../CreateFeed/CreateFeed";
-import { CreateFeedProvider } from "../CreateFeed/context";
 import { ThemeContext } from "../DarkTheme/useTheme";
 import { SearchIcon } from "../Icons";
 import { FolderContextMenu } from "../NewLibrary/components/ContextMenu";
 import Operations from "../NewLibrary/components/Operations";
 import { OperationContext } from "../NewLibrary/context";
 import useLongPress from "../NewLibrary/utils/longpress";
-import { PipelineProvider } from "../PipelinesCopy/context";
-import WrapperConnect from "../Wrapper";
+import Wrapper from "../Wrapper";
 import FeedSearch from "./FeedsSearch";
 import { useFeedListData } from "./useFeedListData";
 import {
@@ -53,6 +48,8 @@ import {
   type PluginInstanceDetails,
 } from "./utilties";
 
+type TDoUI = ThunkModuleToFunc<typeof DoUI>;
+
 const { Paragraph } = Typography;
 
 interface ColumnDefinition {
@@ -96,13 +93,14 @@ const COLUMN_DEFINITIONS: ColumnDefinition[] = [
   },
 ];
 
-interface Props {
+type Props = {
   title: string;
   isShared: boolean;
-}
+  useUI: UseThunk<DoUI.State, TDoUI>;
+};
 
-const TableSelectable = (props: Props) => {
-  const { title, isShared } = props;
+export default (props: Props) => {
+  const { title, isShared, useUI } = props;
   const theType = isShared ? "public" : "private";
 
   const navigate = useNavigate();
@@ -252,7 +250,7 @@ const TableSelectable = (props: Props) => {
   const isMobile = useMediaQuery({ maxWidth: 768 });
 
   return (
-    <WrapperConnect titleComponent={TitleComponent}>
+    <Wrapper useUI={useUI} titleComponent={TitleComponent}>
       <PageSection
         stickyOnBreakpoint={{ default: "top" }}
         style={{ paddingTop: "0.25em", paddingBottom: "0" }}
@@ -323,12 +321,10 @@ const TableSelectable = (props: Props) => {
           <EmptyStateTable />
         )}
       </PageSection>
-    </WrapperConnect>
+    </Wrapper>
   );
 };
 
-export default TableSelectable;
-
 // -------------- TableRow Props --------------
 interface TableRowProps {
   rowIndex: number;
@@ -523,7 +519,7 @@ const fetchFeedDetails = async (
   feedId: number,
   type: string,
 ): Promise<PluginInstanceDetails> => {
-  let updatedFeed: Feed | undefined = undefined;
+  let updatedFeed: Feed | undefined;
 
   try {
     if (type === "private") {

src/components/Feeds/FeedListView.tsx

@@ -23,21 +23,29 @@ import FeedGraph from "../FeedTree/FeedGraph";
 import ParentComponent from "../FeedTree/ParentComponent";
 import { AnalysisIcon } from "../Icons";
 import NodeDetails from "../NodeDetails/NodeDetails";
-import WrapperConnect from "../Wrapper";
+import Wrapper from "../Wrapper";
 import { DrawerActionButton } from "./DrawerUtils";
 import usePaginatedTreeQuery from "./usePaginatedTreeQuery";
 import "./Feeds.css"; // Import your CSS file
+import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
 import { collectionJsonToJson } from "../../api/api";
 import {
   PluginInstanceStatus,
   type PluginInstance as PluginInstanceType,
 } from "../../api/types";
+import type * as DoUI from "../../reducers/ui";
 import { Role } from "../../store/user/userSlice";
 import { useFetchFeed } from "./useFetchFeed";
 import { useSearchQueryParams } from "./usePaginate";
 import { usePollAllPluginStatuses } from "./usePolledStatuses";
 import { handleMaximize, handleMinimize } from "./utilties";
 
+type TDoUI = ThunkModuleToFunc<typeof DoUI>;
+
+type Props = {
+  useUI: UseThunk<DoUI.State, TDoUI>;
+};
+
 // Custom title component to replace Typography.Title
 const CustomTitle = ({
   // @ts-expect-error children as any
@@ -62,7 +70,8 @@ const CustomTitle = ({
   </h4>
 );
 
-const FeedView = () => {
+export default (props: Props) => {
+  const { useUI } = props;
   const [currentLayout, setCurrentLayout] = useState(false);
   const drawerState = useAppSelector((state) => state.drawers);
   const dispatch = useAppDispatch();
@@ -89,15 +98,6 @@ const FeedView = () => {
     }
   }, [theType, isLoggedIn, location, navigate]);
 
-  console.info(
-    "FeedView: feed:",
-    feed,
-    "statuses:",
-    statuses,
-    "treeQuery:",
-    treeQuery,
-  );
-
   // init
   useEffect(() => {
     document.title = "My Analyses - CHRIS UI";
@@ -207,7 +207,7 @@ const FeedView = () => {
   }
 
   return (
-    <WrapperConnect titleComponent={TitleComponent}>
+    <Wrapper useUI={useUI} titleComponent={TitleComponent}>
       {contextHolder}
       <PanelGroup autoSaveId="conditional" direction="vertical">
         {/* Top Panels: Graph and Node Details */}
@@ -288,8 +288,6 @@ const FeedView = () => {
           />
         </Panel>
       </PanelGroup>
-    </WrapperConnect>
+    </Wrapper>
   );
 };
-
-export default React.memo(FeedView);

src/components/Feeds/FeedView.tsx

@@ -1,18 +1,27 @@
-import { useCallback, useEffect, useState, useMemo } from "react";
+import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
+import type { FileBrowserFolder } from "@fnndsc/chrisapi";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import type * as DoUI from "../../reducers/ui";
 import { useAppSelector } from "../../store/hooks";
-import { EmptyStateComponent, SpinContainer, InfoSection } from "../Common";
+import { EmptyStateComponent, InfoSection, SpinContainer } from "../Common";
 import { OperationContext, OperationsProvider } from "../NewLibrary/context";
-import WrapperConnect from "../Wrapper";
+import Wrapper from "../Wrapper";
 import GnomeCentralBreadcrumb from "./GnomeCentralBreadcrumb";
 import GnomeLibraryTable from "./GnomeList";
 import GnomeLibrarySidebar from "./GnomeSidebar";
 import styles from "./gnome.module.css";
 import useFolders from "./utils/hooks/useFolders";
-import type { FileBrowserFolder } from "@fnndsc/chrisapi";
-import { useQueryClient } from "@tanstack/react-query";
 
-const GnomeLibrary = () => {
+type TDoUI = ThunkModuleToFunc<typeof DoUI>;
+
+type Props = {
+  useUI: UseThunk<DoUI.State, TDoUI>;
+};
+
+export default (props: Props) => {
+  const { useUI } = props;
   const [activeSidebarItem, setActiveSidebarItem] = useState<string>("home");
   const [pageNumber, setPageNumber] = useState(1);
   const [isFirstLoad, setIsFirstLoad] = useState(true);
@@ -129,7 +138,8 @@ const GnomeLibrary = () => {
 
   return (
     <OperationsProvider>
-      <WrapperConnect
+      <Wrapper
+        useUI={useUI}
         titleComponent={
           <InfoSection
             title="Library"
@@ -199,9 +209,7 @@ const GnomeLibrary = () => {
             </span>
           </div>
         </div>
-      </WrapperConnect>
+      </Wrapper>
     </OperationsProvider>
   );
 };
-
-export default GnomeLibrary;