From a5759fa6465bd428dd5becfcab62ac0917d560c1 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Mon, 19 Jul 2021 16:48:46 -0700
Subject: [PATCH] Periodically fetch task info from TaskDetailsView

---
 ui/src/reducers/tasksReducer.ts  |  2 +-
 ui/src/views/TaskDetailsView.tsx | 30 +++++++++++++++++++++++++++---
 ui/src/views/TasksView.tsx       |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/ui/src/reducers/tasksReducer.ts b/ui/src/reducers/tasksReducer.ts
index 7ddb758..13b0d26 100644
--- a/ui/src/reducers/tasksReducer.ts
+++ b/ui/src/reducers/tasksReducer.ts
@@ -255,8 +255,8 @@ function tasksReducer(
       return {
         ...state,
         taskInfo: {
+          ...state.taskInfo,
           loading: true,
-          error: "",
         },
       }
 
diff --git a/ui/src/views/TaskDetailsView.tsx b/ui/src/views/TaskDetailsView.tsx
index 9e2d706..e8eb611 100644
--- a/ui/src/views/TaskDetailsView.tsx
+++ b/ui/src/views/TaskDetailsView.tsx
@@ -1,10 +1,25 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import { useParams } from "react-router-dom";
+import { AppState } from "../store";
+import { getTaskInfoAsync } from "../actions/tasksActions";
 import { TaskDetailsRouteParams } from "../paths";
+import { usePolling } from "../hooks";
+
+function mapStateToProps(state: AppState) {
+  return {
+    loading: state.tasks.taskInfo.loading,
+    error: state.tasks.taskInfo.error,
+    taskInfo: state.tasks.taskInfo.data,
+    pollInterval: state.settings.pollInterval,
+  };
+}
+
+const connector = connect(mapStateToProps, { getTaskInfoAsync });
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -12,11 +27,20 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-interface Props {}
+type Props = ConnectedProps<typeof connector>;
 
 function TaskDetailsView(props: Props) {
   const classes = useStyles();
   const { qname, taskId } = useParams<TaskDetailsRouteParams>();
+  const { getTaskInfoAsync, pollInterval } = props;
+
+  const fetchTaskInfo = useMemo(() => {
+    return () => {
+      getTaskInfoAsync(qname, taskId);
+    };
+  }, [qname, taskId, getTaskInfoAsync]);
+
+  usePolling(fetchTaskInfo, pollInterval);
 
   return (
     <Container maxWidth="lg" className={classes.container}>
@@ -31,4 +55,4 @@ function TaskDetailsView(props: Props) {
   );
 }
 
-export default TaskDetailsView;
+export default connector(TaskDetailsView);
diff --git a/ui/src/views/TasksView.tsx b/ui/src/views/TasksView.tsx
index 4f7a843..32e0961 100644
--- a/ui/src/views/TasksView.tsx
+++ b/ui/src/views/TasksView.tsx
@@ -51,6 +51,7 @@ function TasksView(props: ConnectedProps<typeof connector>) {
   }
   const { listQueuesAsync } = props;
 
+  // Shoudn't we polling here?
   useEffect(() => {
     listQueuesAsync();
   }, [listQueuesAsync]);