added reload group tasks

src/App.js

@@ -4,10 +4,12 @@ import "./App.css";
 import PageContent from "./Components/PageContent";
 import SideMenu from "./Components/SideMenu";
 import Login from "./Pages/Login";
-import { Layout } from "antd";
+import { Layout, notification } from "antd";
 import { UseUserSession, WebSocketProvider } from "./utils";
 
 export default function App() {
+  const [notificationApi, notificationContextHolder] =
+    notification.useNotification();
   const { userSession, setUserSession } = UseUserSession();
 
   if (!userSession) {
@@ -23,9 +25,11 @@ export default function App() {
 
   return (
     <Layout style={{ minHeight: "100vh" }}>
+      {notificationContextHolder}
       <WebSocketProvider
         userSession={userSession}
         setUserSession={setUserSession}
+        notificationApi={notificationApi}
       >
         <SideMenu setUserSession={setUserSession}></SideMenu>
         <PageContent></PageContent>

src/Pages/GroupTasks/GroupTasksTableList.js

@@ -1,7 +1,14 @@
 import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { Badge, Button, Divider, Popconfirm, Space, Table } from "antd";
 import { Link } from "react-router-dom";
-import { Constants, FormatDatetime, GetDuration } from "../../utils";
+import {
+  Constants,
+  FormatDatetime,
+  GetDuration,
+  SentMessagesCommands,
+  WebSocketContext,
+} from "../../utils";
+import { useContext } from "react";
 
 const columns = [
   {
@@ -58,6 +65,8 @@ export default function GroupTaskTableList({
   showGroupTypeSelectionModal,
   groupTasks,
 }) {
+  const webSocketContext = useContext(WebSocketContext);
+
   const getStatusBadge = (status) => {
     switch (status) {
       case Constants.GROUP_TASKS_STATUS.FINISHED:
@@ -98,6 +107,12 @@ export default function GroupTaskTableList({
     return items;
   };
 
+  const handleOnConfirm = (category) => {
+    webSocketContext.SendSocketMessage(SentMessagesCommands.ReloadGroupTasks, {
+      category: category,
+    });
+  };
+
   return (
     <>
       <Divider orientation="left">{categoryGroup.category}</Divider>
@@ -118,8 +133,9 @@ export default function GroupTaskTableList({
 
         <Popconfirm
           placement="left"
-          title="Are you sure you want to reload the group?"
+          title="Are you sure you want to reload the group configs?"
           okText="Yes"
+          onConfirm={() => handleOnConfirm(categoryGroup.category)}
         >
           <Button icon={<ReloadOutlined />}>Reload</Button>
         </Popconfirm>

src/utils.js

@@ -78,6 +78,8 @@ const ReceivedMessagesCommands = {
   NewGroupTaskStep: 4,
   UpdateGroupTaskStep: 5,
   UpdateGroupTask: 6,
+  ReloadingGroupTasks: 7,
+  GroupTasksReloaded: 8,
 };
 
 // commands sent to the backend server
@@ -85,9 +87,15 @@ export const SentMessagesCommands = {
   StartGroupTasks: 1,
   TaskFailedTryAgainRunTaskStep: 2,
   TaskContinueTaskStep: 3,
+  ReloadGroupTasks: 4,
 };
 
-export function WebSocketProvider({ children, userSession, setUserSession }) {
+export function WebSocketProvider({
+  children,
+  userSession,
+  setUserSession,
+  notificationApi,
+}) {
   const [isReady, setIsReady] = useState(false);
   const [connectionBadgeStatus, setConnectionBadgeStatus] = useState(
     webSocketContextPreview.ConnectionBadgeStatus
@@ -165,8 +173,31 @@ export function WebSocketProvider({ children, userSession, setUserSession }) {
             return newArr;
           });
           break;
-        default:
+        case ReceivedMessagesCommands.ReloadingGroupTasks:
-          console.log("unknown command", cmd);
+          notificationApi["warning"]({
+            message: `Group ${body} is reloading`,
+            duration: 2,
+          });
+          break;
+        case ReceivedMessagesCommands.GroupTasksReloaded:
+          setCategoryGroups((arr) => {
+            const newArr = [...arr];
+
+            newArr[
+              arr.findIndex((arr1) => arr1.category === body.Category)
+            ].groups = body.UpdatedGroups;
+
+            return newArr;
+          });
+
+          notificationApi["info"]({
+            message: `Group ${body.Category} reloaded`,
+            duration: 2,
+          });
+          break;
+
+        case ReceivedMessagesCommands.default:
+          console.error("unknown command", cmd);
           break;
       }
     };