From 0031e69db6b8b129eefcd2e8c2ea87056c529761 Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Tue, 11 May 2021 10:54:33 +0800
Subject: [PATCH] Handling progress delete event in UI

---
 bazarr/event_handler.py                  |  2 +-
 frontend/src/@socketio/index.ts          |  4 ++--
 frontend/src/@socketio/reducer.ts        |  8 ++++++++
 frontend/src/@types/socket.d.ts          | 15 ++++++++-------
 frontend/src/App/notifications/index.tsx |  2 +-
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/bazarr/event_handler.py b/bazarr/event_handler.py
index 7e32bed1a..a017db536 100644
--- a/bazarr/event_handler.py
+++ b/bazarr/event_handler.py
@@ -28,4 +28,4 @@ def show_progress(id, header, name, value, count):
 
 
 def hide_progress(id):
-    event_stream(type="progress", action="delete", payload={"id": id})
+    event_stream(type="progress", action="delete", payload=id)
diff --git a/frontend/src/@socketio/index.ts b/frontend/src/@socketio/index.ts
index 44419ef7d..48c73781c 100644
--- a/frontend/src/@socketio/index.ts
+++ b/frontend/src/@socketio/index.ts
@@ -91,8 +91,8 @@ class SocketIOClient {
 
           forIn(element, (ids, key) => {
             ids = uniq(ids);
-            const action = handler[key as SocketIO.Action];
-            if (action) {
+            const action = handler[key];
+            if (typeof action == "function") {
               action(ids);
             } else if (anyAction === undefined) {
               log("warning", "Unhandle action of SocketIO event", key, type);
diff --git a/frontend/src/@socketio/reducer.ts b/frontend/src/@socketio/reducer.ts
index a6506832f..4b39a5eb2 100644
--- a/frontend/src/@socketio/reducer.ts
+++ b/frontend/src/@socketio/reducer.ts
@@ -9,6 +9,7 @@ import {
   siteAddNotifications,
   siteAddProgress,
   siteInitializationFailed,
+  siteRemoveProgress,
   siteUpdateOffline,
   systemUpdateLanguagesAll,
   systemUpdateSettings,
@@ -72,6 +73,13 @@ export function createDefaultReducer(): SocketIO.Reducer[] {
           reduxStore.dispatch(siteAddProgress(progress));
         }
       },
+      delete: (ids) => {
+        setTimeout(() => {
+          ids?.forEach((id) => {
+            reduxStore.dispatch(siteRemoveProgress(id));
+          });
+        }, 3 * 1000);
+      },
     },
     {
       key: "series",
diff --git a/frontend/src/@types/socket.d.ts b/frontend/src/@types/socket.d.ts
index 77ca6d76b..4a00a0a31 100644
--- a/frontend/src/@types/socket.d.ts
+++ b/frontend/src/@types/socket.d.ts
@@ -1,6 +1,4 @@
 namespace SocketIO {
-  type Action = "update" | "delete";
-
   type EventType = NumEventType | NullEventType | SpecialEventType;
 
   type NumEventType =
@@ -25,18 +23,21 @@ namespace SocketIO {
 
   type SpecialEventType = "message" | "progress";
 
-  type ReducerCreator<E extends EventType, T> = ValueOf<
+  type ReducerCreator<E extends EventType, U, D = never> = ValueOf<
     {
       [P in E]: {
         key: P;
         any?: () => void;
-      } & Partial<Record<Action, ActionFn<T>>>;
+        update?: ActionFn<T>;
+        delete?: ActionFn<D extends never ? T : D>;
+      } & LooseObject;
+      // TODO: Typing
     }
   >;
 
   type Event = {
     type: EventType;
-    action: Action;
+    action: string;
     payload: any;
   };
 
@@ -46,9 +47,9 @@ namespace SocketIO {
     | ReducerCreator<NumEventType, number>
     | ReducerCreator<NullEventType, null>
     | ReducerCreator<"message", string>
-    | ReducerCreator<"progress", CustomEvent.Progress>;
+    | ReducerCreator<"progress", CustomEvent.Progress, string>;
 
-  type ActionRecord = OptionalRecord<EventType, OptionalRecord<Action, any[]>>;
+  type ActionRecord = OptionalRecord<EventType, StrictObject<any[]>>;
 
   namespace CustomEvent {
     type Progress = ReduxStore.Progress;
diff --git a/frontend/src/App/notifications/index.tsx b/frontend/src/App/notifications/index.tsx
index 48f312f07..f55fd5157 100644
--- a/frontend/src/App/notifications/index.tsx
+++ b/frontend/src/App/notifications/index.tsx
@@ -86,7 +86,7 @@ const ProgressToast: FunctionComponent<ProgressHolderProps> = ({
   const remove = useCallback(() => removeProgress(id), [removeProgress, id]);
 
   useEffect(() => {
-    const handle = setTimeout(remove, 5 * 1000);
+    const handle = setTimeout(remove, 10 * 1000);
     return () => {
       clearTimeout(handle);
     };