Added form controls to set real time updates interval

src/settings/RealTimeUpdates.tsx

@@ -1,20 +1,49 @@
 import React from 'react';
-import { Card, CardBody, CardHeader } from 'reactstrap';
+import { Card, CardBody, CardHeader, FormGroup, Input } from 'reactstrap';
+import classNames from 'classnames';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { Settings } from './reducers/settings';
 
 interface RealTimeUpdatesProps {
   settings: Settings;
-  setRealTimeUpdates: (enabled: boolean) => void;
+  toggleRealTimeUpdates: (enabled: boolean) => void;
+  setRealTimeUpdatesInterval: (interval: number) => void;
 }
 
-const RealTimeUpdates = ({ settings: { realTimeUpdates }, setRealTimeUpdates }: RealTimeUpdatesProps) => (
+const intervalValue = (interval?: number) => !interval ? '' : `${interval}`;
+
+const RealTimeUpdates = (
+  { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
+) => (
   <Card>
     <CardHeader>Real-time updates</CardHeader>
     <CardBody>
-      <ToggleSwitch checked={realTimeUpdates.enabled} onChange={setRealTimeUpdates}>
-        Enable or disable real-time updates, when using Shlink v2.2.0 or newer.
-      </ToggleSwitch>
+      <FormGroup>
+        <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
+          Enable or disable real-time updates, when using Shlink v2.2.0 or newer.
+        </ToggleSwitch>
+      </FormGroup>
+      <FormGroup className="mb-0">
+        <label className={classNames({ 'text-muted': !realTimeUpdates.enabled })}>
+          Real-time updates frequency (in minutes):
+        </label>
+        <Input
+          type="number"
+          min={0}
+          placeholder={realTimeUpdates.enabled ? 'Immediate' : ''}
+          disabled={!realTimeUpdates.enabled}
+          value={intervalValue(realTimeUpdates.interval)}
+          onChange={(e) => setRealTimeUpdatesInterval(Number(e.target.value))}
+        />
+        {realTimeUpdates.enabled && (
+          <small className="form-text text-muted">
+            {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 &&
+              <span>Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minutes.</span>
+            }
+            {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
+          </small>
+        )}
+      </FormGroup>
     </CardBody>
   </Card>
 );