Merge pull request #1402 from chhsiao1981/refactor-feed

replace feedSlice to reducers.feed

Author: chhsiao1981

src/api/common.ts

@@ -1,15 +1,15 @@
-import axios, { type AxiosProgressEvent } from "axios";
-import ChrisAPIClient from "./chrisapiclient";
 import type {
+  ComputeResource,
+  Feed,
   Pipeline,
   PipelineList,
-  PluginPiping,
-  Feed,
-  Plugin,
   PipelinePipingDefaultParameterList,
-  ComputeResource,
+  Plugin,
+  PluginPiping,
 } from "@fnndsc/chrisapi";
+import axios, { type AxiosProgressEvent } from "axios";
 import { quote } from "shlex";
+import ChrisAPIClient from "./chrisapiclient";
 
 export function elipses(str: string, len: number) {
   if (str.length <= len) return str;
@@ -312,7 +312,7 @@ export function catchError(errorRequest: any) {
     const data = errorRequest.response.data;
     // Iterate through each key in the data object
     for (const key in data) {
-      if (Object.prototype.hasOwnProperty.call(data, key)) {
+      if (Object.hasOwn(data, key)) {
         const value = data[key];
         // Check if the value is an array with at least one message
         if (Array.isArray(value) && value.length > 0) {

src/components/ComputePage/index.tsx

@@ -2,6 +2,7 @@ import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
 import { PageSection } from "@patternfly/react-core";
 import { useEffect } from "react";
 import type * as DoDrawer from "../../reducers/drawer";
+import type * as DoFeed from "../../reducers/feed";
 import type * as DoUI from "../../reducers/ui";
 import type * as DoUser from "../../reducers/user";
 import Wrapper from "../Wrapper";
@@ -11,15 +12,17 @@ import Title from "./Title";
 type TDoUI = ThunkModuleToFunc<typeof DoUI>;
 type TDoUser = ThunkModuleToFunc<typeof DoUser>;
 type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
+type TDoFeed = ThunkModuleToFunc<typeof DoFeed>;
 
 type Props = {
   useUI: UseThunk<DoUI.State, TDoUI>;
   useUser: UseThunk<DoUser.State, TDoUser>;
   useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
+  useFeed: UseThunk<DoFeed.State, TDoFeed>;
 };
 
 export default (props: Props) => {
-  const { useUI, useUser, useDrawer } = props;
+  const { useUI, useUser, useDrawer, useFeed } = props;
 
   useEffect(() => {
     document.title = "Compute Catalog";
@@ -30,6 +33,7 @@ export default (props: Props) => {
       useUI={useUI}
       useUser={useUser}
       useDrawer={useDrawer}
+      useFeed={useFeed}
       title={Title}
     >
       <PageSection>

src/components/Dashboard/index.tsx

@@ -21,6 +21,7 @@ import {
 } from "@chhsiao1981/use-thunk";
 import { useNavigate } from "react-router";
 import type * as DoDrawer from "../../reducers/drawer";
+import type * as DoFeed from "../../reducers/feed";
 import type * as DoUI from "../../reducers/ui";
 import * as DoUser from "../../reducers/user";
 import Title from "./Title";
@@ -33,15 +34,17 @@ import {
 type TDoUI = ThunkModuleToFunc<typeof DoUI>;
 type TDoUser = ThunkModuleToFunc<typeof DoUser>;
 type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
+type TDoFeed = ThunkModuleToFunc<typeof DoFeed>;
 
 type Props = {
   useUI: UseThunk<DoUI.State, TDoUI>;
   useUser: UseThunk<DoUser.State, TDoUser>;
   useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
+  useFeed: UseThunk<DoFeed.State, TDoFeed>;
 };
 
 export default (props: Props) => {
-  const { useUI, useUser, useDrawer } = props;
+  const { useUI, useUser, useDrawer, useFeed } = props;
   const [classStateUser, _] = useUser;
   const user = getState(classStateUser) || DoUser.defaultState;
   const { isLoggedIn } = user;
@@ -63,6 +66,7 @@ export default (props: Props) => {
       useUI={useUI}
       useUser={useUser}
       useDrawer={useDrawer}
+      useFeed={useFeed}
     >
       <PageSection>
         <Grid hasGutter>

src/components/FeedDetails/FeedNote.tsx

@@ -1,22 +1,35 @@
+import {
+  getState,
+  type ThunkModuleToFunc,
+  type UseThunk,
+} from "@chhsiao1981/use-thunk";
 import { Button, Form, FormGroup, TextArea } from "@patternfly/react-core";
-import React, { useEffect } from "react";
+import { type ChangeEvent, useEffect, useState } from "react";
 import { fetchNote } from "../../api/common";
-import { useAppSelector } from "../../store/hooks";
+import * as DoFeed from "../../reducers/feed";
 
-const FeedNote = () => {
-  const [value, setValue] = React.useState("");
+type TDoFeed = ThunkModuleToFunc<typeof DoFeed>;
 
-  const feed = useAppSelector((state) => state.feed.currentFeed.data);
+type Props = {
+  useFeed: UseThunk<DoFeed.State, TDoFeed>;
+};
+export default (props: Props) => {
+  const { useFeed } = props;
+  const [classStateFeed, _] = useFeed;
+  const feedState = getState(classStateFeed) || DoFeed.defaultState;
+  const { data: feed } = feedState;
+
+  const [value, setValue] = useState("");
 
   useEffect(() => {
     fetchNote(feed).then((note) => {
       setValue(note?.data.content);
     });
   }, [feed]);
 
-  const [typing, setTyping] = React.useState(false);
+  const [typing, setTyping] = useState(false);
   const handleChange = (
-    _event: React.ChangeEvent<HTMLTextAreaElement>,
+    _event: ChangeEvent<HTMLTextAreaElement>,
     value: string,
   ) => {
     setValue(value);
@@ -78,5 +91,3 @@ const FeedNote = () => {
     </>
   );
 };
-
-export default FeedNote;

src/components/FeedDetails/index.tsx

@@ -1,7 +1,6 @@
 import { Flex, FlexItem } from "@patternfly/react-core";
 import { useEffect, useState } from "react";
 import { fetchNote } from "../../api/common";
-import { useAppSelector } from "../../store/hooks";
 import { Badge } from "../Antd";
 import { ButtonWithTooltip } from "../Feeds/DrawerUtils";
 import {
@@ -22,20 +21,26 @@ import {
   type UseThunk,
 } from "@chhsiao1981/use-thunk";
 import * as DoDrawer from "../../reducers/drawer";
+import * as DoFeed from "../../reducers/feed";
 
 type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
+type TDoFeed = ThunkModuleToFunc<typeof DoFeed>;
 
 type Props = {
   useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
+  useFeed: UseThunk<DoFeed.State, TDoFeed>;
 };
 
 export default (props: Props) => {
-  const { useDrawer } = props;
+  const { useDrawer, useFeed } = props;
   const [classStateDrawer, doDrawer] = useDrawer;
   const drawerState = getState(classStateDrawer) || DoDrawer.defaultState;
   const drawerID = getRootID(classStateDrawer);
 
-  const currentFeed = useAppSelector((state) => state.feed.currentFeed.data);
+  const [classStateFeed, _] = useFeed;
+  const feedState = getState(classStateFeed) || DoFeed.defaultState;
+
+  const { data: currentFeed } = feedState;
 
   const node = drawerState.node.currentlyActive === "node";
   const note = drawerState.node.currentlyActive === "note";

src/components/FeedOutputBrowser/FeedOutputBrowser.tsx

@@ -4,6 +4,7 @@ import "./FeedOutputBrowser.css";
 import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
 import type * as DoDrawer from "../../reducers/drawer";
 import type * as DoExplorer from "../../reducers/explorer";
+import type * as DoFeed from "../../reducers/feed";
 import type * as DoUser from "../../reducers/user";
 import { EmptyStateLoader } from "./EmptyStateLoader";
 import FetchFilesLoader from "./FetchFilesLoader";
@@ -13,6 +14,7 @@ import { useFeedBrowser } from "./useFeedBrowser";
 type TDoUser = ThunkModuleToFunc<typeof DoUser>;
 type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
 type TDoExplorer = ThunkModuleToFunc<typeof DoExplorer>;
+type TDoFeed = ThunkModuleToFunc<typeof DoFeed>;
 
 type Props = {
   handlePluginSelect: (node: PluginInstance) => void;
@@ -21,10 +23,11 @@ type Props = {
   useUser: UseThunk<DoUser.State, TDoUser>;
   useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
   useExplorer: UseThunk<DoExplorer.State, TDoExplorer>;
+  useFeed: UseThunk<DoFeed.State, TDoFeed>;
 };
 
 export default (props: Props) => {
-  const { useUser, useDrawer, useExplorer, statuses } = props;
+  const { useUser, useDrawer, useExplorer, useFeed, statuses } = props;
   const {
     selected,
     pluginFilesPayload,
@@ -65,6 +68,7 @@ export default (props: Props) => {
         useUser={useUser}
         useDrawer={useDrawer}
         useExplorer={useExplorer}
+        useFeed={useFeed}
       />
       {!isHideError && <Alert type="error" description={error?.message} />}
       <EmptyStateLoader title="" isHide={isHideEmptyStateLoader} />

src/components/FeedOutputBrowser/FileBrowser.tsx

@@ -23,8 +23,9 @@ import { type CSSProperties, useEffect, useMemo, useRef } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import * as DoDrawer from "../../reducers/drawer";
 import * as DoExplorer from "../../reducers/explorer";
+import * as DoFeed from "../../reducers/feed";
 import * as DoUser from "../../reducers/user";
-import useDownload, { useAppSelector } from "../../store/hooks";
+import useDownload from "../../store/hooks";
 import { notification } from "../Antd";
 import { ClipboardCopyContainer } from "../Common";
 import { DrawerActionButton } from "../Feeds/DrawerUtils";
@@ -49,6 +50,7 @@ import type { FilesPayload } from "./types";
 type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
 type TDoUser = ThunkModuleToFunc<typeof DoUser>;
 type TDoExplorer = ThunkModuleToFunc<typeof DoExplorer>;
+type TDoFeed = ThunkModuleToFunc<typeof DoFeed>;
 
 const previewAnimation = [{ opacity: "0.0" }, { opacity: "1.0" }];
 
@@ -77,6 +79,7 @@ type Props = {
   useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
   useUser: UseThunk<DoUser.State, TDoUser>;
   useExplorer: UseThunk<DoExplorer.State, TDoExplorer>;
+  useFeed: UseThunk<DoFeed.State, TDoFeed>;
 };
 
 export default (props: Props) => {
@@ -94,6 +97,7 @@ export default (props: Props) => {
     useDrawer,
     useUser,
     useExplorer,
+    useFeed,
   } = props;
 
   const [classStateUser, _] = useUser;
@@ -109,7 +113,10 @@ export default (props: Props) => {
   const explorer = getState(classStateExplorer) || DoExplorer.defaultState;
   const { selectedFile } = explorer;
 
-  const feed = useAppSelector((state) => state.feed.currentFeed.data);
+  const [classStateFeed, _2] = useFeed;
+  const feedState = getState(classStateFeed) || DoFeed.defaultState;
+  const { data: feed } = feedState;
+
   const handleDownloadMutation = useDownload(feed);
   const [api, contextHolder] = notification.useNotification();
   const { isSuccess, isError, error: downloadError } = handleDownloadMutation;

src/components/FeedOutputBrowser/types.ts

@@ -4,7 +4,6 @@ import type {
   FileBrowserFolderLinkFile,
   FileBrowserFolderList,
 } from "@fnndsc/chrisapi";
-import type { DataNode } from "../../store/explorer/types";
 
 export interface FilesPayload {
   filesMap?: FileBrowserFolderFile[];
@@ -25,13 +24,6 @@ export interface FilesPayload {
   };
 }
 
-export interface FileBrowserState {
-  directory: DataNode;
-  breadcrumbs: DataNode[];
-  currentFile: DataNode[];
-  previewingFile?: DataNode; // file selected for preview
-}
-
 export interface Label {
   [key: string]: boolean;
 }

src/components/FeedTree/FeedTree.css

@@ -70,16 +70,11 @@
 }
 
 .grabbable {
-  cursor: move;
   cursor: grab;
-  cursor: -moz-grab;
-  cursor: -webkit-grab;
 }
 
 .grabbable:active {
   cursor: grabbing;
-  cursor: -moz-grabbing;
-  cursor: -webkit-grabbing;
 }
 
 .link {

src/components/Feeds/FeedListView.tsx

@@ -33,6 +33,7 @@ import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useNavigate } from "react-router";
 import type * as DoDrawer from "../../reducers/drawer";
+import type * as DoFeed from "../../reducers/feed";
 import type * as DoUI from "../../reducers/ui";
 import * as DoUser from "../../reducers/user";
 import { useAppSelector } from "../../store/hooks";
@@ -57,6 +58,7 @@ import {
 type TDoUI = ThunkModuleToFunc<typeof DoUI>;
 type TDoUser = ThunkModuleToFunc<typeof DoUser>;
 type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
+type TDoFeed = ThunkModuleToFunc<typeof DoFeed>;
 
 const { Paragraph } = Typography;
 
@@ -107,10 +109,11 @@ type Props = {
   useUI: UseThunk<DoUI.State, TDoUI>;
   useUser: UseThunk<DoUser.State, TDoUser>;
   useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
+  useFeed: UseThunk<DoFeed.State, TDoFeed>;
 };
 
 export default (props: Props) => {
-  const { title, isShared, useUI, useUser, useDrawer } = props;
+  const { title, isShared, useUI, useUser, useDrawer, useFeed } = props;
   const [classStateUser, _] = useUser;
   const user = getState(classStateUser) || DoUser.defaultState;
   const { isLoggedIn, username, isInit, isStaff } = user;
@@ -277,6 +280,7 @@ export default (props: Props) => {
       useUI={useUI}
       useUser={useUser}
       useDrawer={useDrawer}
+      useFeed={useFeed}
       title={TitleComponent}
     >
       <PageSection