Changing download enable/disable button into a toggle switch.

app/src/api.js

@@ -33,6 +33,11 @@ async function apiCall(url, method, body, ms = 10000) {
     try {
         // await the response or error.
         let response = await timeoutPromise(ms, promise);
+        if (200 <= response.status < 300) {
+            // Request was successful.
+            return response;
+        }
+        // Request encountered an error.
         let copy = response.clone();
         let code = (await copy.json())['code'];
         if (response.status === 403 && code === 17) {
@@ -360,17 +365,24 @@ export async function killDownload(download_id) {
 
 export async function killDownloads() {
     let response = await apiPost(`${API_URI}/download/kill`);
+    console.log('killDownloads', response);
     return response;
 }
 
 export async function startDownloads() {
     let response = await apiPost(`${API_URI}/download/enable`);
+    console.log('startDownloads', response);
     return response;
 }
 
 export async function getDownloaders() {
-    let response = await apiGet(`${API_URI}/downloaders`);
-    return await response.json();
+    try {
+        let response = await apiGet(`${API_URI}/downloaders`);
+        return await response.json();
+    } catch (e) {
+        console.log('getDownloaders', e);
+        return {};
+    }
 }
 
 const replaceFileDatetimes = (files) => {

app/src/components/Admin.js

@@ -11,35 +11,19 @@ import {
     Placeholder,
     Table
 } from "semantic-ui-react";
-import {
-    getConfig,
-    getDownloaders,
-    getDownloads,
-    killDownload,
-    killDownloads,
-    postDownload,
-    saveConfig,
-    startDownloads
-} from "../api";
+import {getConfig, getDownloads, killDownload, postDownload, saveConfig} from "../api";
 import TimezoneSelect from 'react-timezone-select';
-import {PageContainer, secondsToDate, secondsToFrequency, TabLinks, textEllipsis, WROLModeMessage} from "./Common";
+import {
+    DisableDownloadsToggle,
+    HotspotToggle,
+    PageContainer,
+    secondsToDate,
+    secondsToFrequency,
+    TabLinks,
+    textEllipsis,
+    WROLModeMessage
+} from "./Common";
 import {Route} from "react-router-dom";
-import {useHotspot} from "../hooks/customHooks";
-
-function HotspotToggle() {
-    let {on, setHotspot} = useHotspot();
-    return (
-        <>
-            <Checkbox toggle
-                      label='Toggle the WiFi Hotspot.  Only supported on Raspberry Pi.'
-                      disabled={on === null}
-                      defaultIndeterminate={on === null}
-                      checked={on === true}
-                      onChange={(e, data) => setHotspot(data.checked)}
-            />
-        </>
-    );
-}
 
 class Settings extends React.Component {
 
@@ -95,9 +79,7 @@ class Settings extends React.Component {
             <Container fluid>
                 <WROLModeMessage content='Settings are disabled because WROL Mode is enabled.'/>
 
-                <p>
-                    <HotspotToggle/>
-                </p>
+                <HotspotToggle/>
 
                 <Divider/>
                 <p>
@@ -327,17 +309,6 @@ class Downloads extends React.Component {
 
     async componentDidMount() {
         await this.fetchDownloads();
-        await this.fetchStatus();
-    }
-
-    killDownloads = async () => {
-        await killDownloads();
-        this.setState({stopOpen: false}, this.fetchStatus);
-    }
-
-    startDownloads = async () => {
-        await startDownloads();
-        this.setState({stopOpen: false}, this.fetchStatus);
     }
 
     closeStop = () => {
@@ -357,11 +328,6 @@ class Downloads extends React.Component {
         });
     }
 
-    fetchStatus = async () => {
-        let data = await getDownloaders();
-        this.setState({disabled: data['manager_disabled']});
-    }
-
     render() {
         let tablePlaceholder = (
             <Placeholder>
@@ -400,7 +366,9 @@ class Downloads extends React.Component {
             onceTable = (<Table>
                 {stoppableHeader}
                 <Table.Body>
-                    {this.state.once_downloads.map((i) => <StoppableRow {...i} fetchDownloads={this.fetchDownloads}/>)}
+                    {this.state.once_downloads.map((i) =>
+                        <StoppableRow {...i} fetchDownloads={this.fetchDownloads} key={i.id}/>
+                    )}
                 </Table.Body>
             </Table>);
         }
@@ -412,46 +380,15 @@ class Downloads extends React.Component {
             recurringTable = (<Table>
                 {nonStoppableHeader}
                 <Table.Body>
-                    {this.state.recurring_downloads.map((i) => <DownloadRow {...i}/>)}
+                    {this.state.recurring_downloads.map((i) => <DownloadRow {...i} key={i.id}/>)}
                 </Table.Body>
             </Table>);
         }
 
-        let {stopOpen} = this.state;
-        let allButton = (<>
-                <Button
-                    onClick={this.openStop}
-                    color='red'
-                >Disable Downloads</Button>
-                <Confirm
-                    open={stopOpen}
-                    content='Are you sure you want to stop all downloads?'
-                    confirmButton='Stop'
-                    onCancel={this.closeStop}
-                    onConfirm={this.killDownloads}
-                />
-            </>
-        );
-        if (this.state.disabled === true) {
-            allButton = (<>
-                <Button
-                    onClick={this.openStop}
-                    color='green'
-                >Enable Downloads</Button>
-                <Confirm
-                    open={stopOpen}
-                    content='Are you sure you want to start all downloads?'
-                    confirmButton='Start'
-                    onCancel={this.closeStop}
-                    onConfirm={this.startDownloads}
-                />
-            </>);
-        }
-
         return (
             <div>
                 <WROLModeMessage content='Downloads are disabled because WROL Mode is enabled.'/>
-                {allButton}
+                <DisableDownloadsToggle/>
                 <Header as='h1'>Downloads</Header>
                 {onceTable}
 

app/src/components/Common.js

@@ -1,10 +1,11 @@
 import React, {useEffect, useState} from "react";
-import {Card, Container, Form, Icon, Image, Input, Menu, Pagination, Responsive} from 'semantic-ui-react';
+import {Card, Checkbox, Container, Form, Icon, Image, Input, Menu, Pagination, Responsive} from 'semantic-ui-react';
 import {Link, NavLink} from "react-router-dom";
 import Button from "semantic-ui-react/dist/commonjs/elements/Button";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {getConfig} from "../api";
+import {useDownloaders, useHotspot} from "../hooks/customHooks";
 
 export const API_URI = `http://${window.location.host}/api`;
 export const VIDEOS_API = `${API_URI}/videos`;
@@ -643,3 +644,24 @@ export function CardGroupCentered(props) {
         </>
     )
 }
+
+export function HotspotToggle() {
+    let {on, setHotspot} = useHotspot();
+    return <Checkbox toggle
+                     label={on === null ?
+                         'Toggle the WiFi Hotspot.  Only supported on Raspberry Pi.' : 'Toggle WiFi Hotspot'}
+                     disabled={on === null}
+                     checked={on === true}
+                     onChange={(e, data) => setHotspot(data.checked)}
+    />;
+}
+
+export function DisableDownloadsToggle() {
+    let {on, setDownloads} = useDownloaders();
+    return <Checkbox toggle
+                     label={on ? 'Downloading Enabled' : 'Downloading Disabled'}
+                     disabled={on === null}
+                     checked={on === true}
+                     onChange={(e, data) => setDownloads(data.checked)}
+    />;
+}

app/src/hooks/customHooks.js

@@ -3,11 +3,14 @@ import {
     fetchDomains,
     filesSearch,
     getDevices,
+    getDownloaders,
     getFiles,
     getVersion,
+    killDownloads,
     searchArchives,
     searchVideos,
-    setHotspot
+    setHotspot,
+    startDownloads
 } from "../api";
 import {useHistory} from "react-router-dom";
 
@@ -205,9 +208,36 @@ export const useHotspot = () => {
 
     const localSetHotspot = async (on) => {
         setOn(null);
-        setHotspot(on);
-        fetchDevices();
+        await setHotspot(on);
+        await fetchDevices();
     }
 
     return {on, setOn, setHotspot: localSetHotspot};
 }
+
+export const useDownloaders = () => {
+    const [on, setOn] = useState(null);
+    const [downloaders, setDownloaders] = useState(null);
+
+    const fetchDownloaders = async () => {
+        let data = await getDownloaders();
+        setDownloaders(data['downloaders']);
+        setOn(!data['manager_disabled']);
+    }
+
+    useEffect(() => {
+        fetchDownloaders();
+    }, []);
+
+    const localSetDownloads = async (on) => {
+        setOn(null);
+        if (on) {
+            await startDownloads();
+        } else {
+            await killDownloads();
+        }
+        await fetchDownloaders();
+    }
+
+    return {on, setOn, downloaders, setDownloads: localSetDownloads};
+}