Move scan and search action to background

frontend/src/Movies/Detail/index.tsx

@@ -11,7 +11,9 @@ import React, { FunctionComponent, useState } from "react";
 import { Alert, Container, Row } from "react-bootstrap";
 import { Helmet } from "react-helmet";
 import { Redirect, RouteComponentProps, withRouter } from "react-router-dom";
+import { dispatchTask } from "../../@modules/task";
 import { useIsAnyTaskRunningWithId } from "../../@modules/task/hooks";
+import { createTask } from "../../@modules/task/utilites";
 import { useMovieBy, useProfileBy } from "../../@redux/hooks";
 import { MoviesApi, ProvidersApi } from "../../apis";
 import {
@@ -83,27 +85,39 @@ const MovieDetailView: FunctionComponent<Props> = ({ match }) => {
       </Helmet>
       <ContentHeader>
         <ContentHeader.Group pos="start">
-          <ContentHeader.AsyncButton
+          <ContentHeader.Button
             icon={faSync}
             disabled={hasTask}
-            promise={() =>
-              MoviesApi.action({ action: "scan-disk", radarrid: item.radarrId })
-            }
+            onClick={() => {
+              const task = createTask(
+                item.title,
+                id,
+                MoviesApi.action.bind(MoviesApi),
+                { action: "scan-disk", radarrid: id }
+              );
+              dispatchTask("Scaning Disk...", [task], "Scaning...");
+            }}
           >
             Scan Disk
-          </ContentHeader.AsyncButton>
-          <ContentHeader.AsyncButton
+          </ContentHeader.Button>
+          <ContentHeader.Button
             icon={faSearch}
             disabled={item.profileId === null || hasTask}
-            promise={() =>
-              MoviesApi.action({
-                action: "search-missing",
-                radarrid: item.radarrId,
-              })
-            }
+            onClick={() => {
+              const task = createTask(
+                item.title,
+                id,
+                MoviesApi.action.bind(MoviesApi),
+                {
+                  action: "search-missing",
+                  radarrid: id,
+                }
+              );
+              dispatchTask("Searching subtitles...", [task], "Searching...");
+            }}
           >
             Search
-          </ContentHeader.AsyncButton>
+          </ContentHeader.Button>
           <ContentHeader.Button
             icon={faUser}
             disabled={item.profileId === null || hasTask}

frontend/src/Series/Episodes/index.tsx

@@ -11,7 +11,9 @@ import React, { FunctionComponent, useMemo, useState } from "react";
 import { Alert, Container, Row } from "react-bootstrap";
 import { Helmet } from "react-helmet";
 import { Redirect, RouteComponentProps, withRouter } from "react-router-dom";
+import { dispatchTask } from "../../@modules/task";
 import { useIsAnyTaskRunningWithId } from "../../@modules/task/hooks";
+import { createTask } from "../../@modules/task/utilites";
 import { useEpisodesBy, useProfileBy, useSerieBy } from "../../@redux/hooks";
 import { SeriesApi } from "../../apis";
 import {
@@ -86,20 +88,38 @@ const SeriesEpisodesView: FunctionComponent<Props> = (props) => {
       </Helmet>
       <ContentHeader>
         <ContentHeader.Group pos="start">
-          <ContentHeader.AsyncButton
+          <ContentHeader.Button
             icon={faSync}
             disabled={!available || hasTask}
-            promise={() =>
-              SeriesApi.action({ action: "scan-disk", seriesid: id })
-            }
+            onClick={() => {
+              const task = createTask(
+                serie.title,
+                id,
+                SeriesApi.action.bind(SeriesApi),
+                {
+                  action: "scan-disk",
+                  seriesid: id,
+                }
+              );
+              dispatchTask("Scaning disk...", [task], "Scaning...");
+            }}
           >
             Scan Disk
-          </ContentHeader.AsyncButton>
-          <ContentHeader.AsyncButton
+          </ContentHeader.Button>
+          <ContentHeader.Button
             icon={faSearch}
-            promise={() =>
-              SeriesApi.action({ action: "search-missing", seriesid: id })
-            }
+            onClick={() => {
+              const task = createTask(
+                serie.title,
+                id,
+                SeriesApi.action.bind(SeriesApi),
+                {
+                  action: "search-missing",
+                  seriesid: id,
+                }
+              );
+              dispatchTask("Searching subtitles...", [task], "Searching...");
+            }}
             disabled={
               serie.episodeFileCount === 0 ||
               serie.profileId === null ||
@@ -108,7 +128,7 @@ const SeriesEpisodesView: FunctionComponent<Props> = (props) => {
             }
           >
             Search
-          </ContentHeader.AsyncButton>
+          </ContentHeader.Button>
         </ContentHeader.Group>
         <ContentHeader.Group pos="end">
           <ContentHeader.Button

frontend/src/Wanted/generic/index.tsx

@@ -4,6 +4,9 @@ import React from "react";
 import { Container, Row } from "react-bootstrap";
 import { Helmet } from "react-helmet";
 import { Column } from "react-table";
+import { dispatchTask } from "../../@modules/task";
+import { useIsGroupTaskRunning } from "../../@modules/task/hooks";
+import { createTask } from "../../@modules/task/utilites";
 import { AsyncPageTable, ContentHeader } from "../../components";
 
 interface Props<T extends Wanted.Base> {
@@ -14,6 +17,8 @@ interface Props<T extends Wanted.Base> {
   searchAll: () => Promise<void>;
 }
 
+const TaskGroupName = "Searching wanted subtitles...";
+
 function GenericWantedView<T extends Wanted.Base>({
   type,
   columns,
@@ -25,19 +30,24 @@ function GenericWantedView<T extends Wanted.Base>({
 
   const dataCount = Object.keys(state.content.entities).length;
 
+  const hasTask = useIsGroupTaskRunning(TaskGroupName);
+
   return (
     <Container fluid>
       <Helmet>
         <title>Wanted {typeName} - Bazarr</title>
       </Helmet>
       <ContentHeader>
-        <ContentHeader.AsyncButton
-          disabled={dataCount === 0}
-          promise={searchAll}
+        <ContentHeader.Button
+          disabled={dataCount === 0 || hasTask}
+          onClick={() => {
+            const task = createTask(type, undefined, searchAll);
+            dispatchTask(TaskGroupName, [task], "Searching...");
+          }}
           icon={faSearch}
         >
           Search All
-        </ContentHeader.AsyncButton>
+        </ContentHeader.Button>
       </ContentHeader>
       <Row>
         <AsyncPageTable