Added form controls to set real time updates interval

This commit is contained in:
Alejandro Celaya 2020-09-09 19:16:04 +02:00
parent 5d6d802d64
commit 9b45513684
5 changed files with 66 additions and 14 deletions

View file

@ -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>
);

View file

@ -1,10 +1,13 @@
import { Action } from 'redux';
import { mergeDeepRight } from 'ramda';
import { buildReducer } from '../../utils/helpers/redux';
import { RecursivePartial } from '../../utils/utils';
export const SET_REAL_TIME_UPDATES = 'shlink/realTimeUpdates/SET_REAL_TIME_UPDATES';
interface RealTimeUpdates {
enabled: boolean;
interval?: number;
}
export interface Settings {
@ -19,11 +22,18 @@ const initialState: Settings = {
type SettingsAction = Action & Settings;
type PartialSettingsAction = Action & RecursivePartial<Settings>;
export default buildReducer<Settings, SettingsAction>({
[SET_REAL_TIME_UPDATES]: (state, { realTimeUpdates }) => ({ ...state, realTimeUpdates }),
[SET_REAL_TIME_UPDATES]: (state, { realTimeUpdates }) => mergeDeepRight(state, { realTimeUpdates }),
}, initialState);
export const setRealTimeUpdates = (enabled: boolean): SettingsAction => ({
export const toggleRealTimeUpdates = (enabled: boolean): PartialSettingsAction => ({
type: SET_REAL_TIME_UPDATES,
realTimeUpdates: { enabled },
});
export const setRealTimeUpdatesInterval = (interval: number): PartialSettingsAction => ({
type: SET_REAL_TIME_UPDATES,
realTimeUpdates: { interval },
});

View file

@ -1,7 +1,7 @@
import Bottle from 'bottlejs';
import RealTimeUpdates from '../RealTimeUpdates';
import Settings from '../Settings';
import { setRealTimeUpdates } from '../reducers/settings';
import { setRealTimeUpdatesInterval, toggleRealTimeUpdates } from '../reducers/settings';
import { ConnectDecorator } from '../../container/types';
import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
@ -13,10 +13,11 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
// Services
bottle.serviceFactory('RealTimeUpdates', () => RealTimeUpdates);
bottle.decorator('RealTimeUpdates', connect([ 'settings' ], [ 'setRealTimeUpdates' ]));
bottle.decorator('RealTimeUpdates', connect([ 'settings' ], [ 'setRealTimeUpdatesInterval' ]));
// Actions
bottle.serviceFactory('setRealTimeUpdates', () => setRealTimeUpdates);
bottle.serviceFactory('toggleRealTimeUpdates', () => toggleRealTimeUpdates);
bottle.serviceFactory('setRealTimeUpdatesInterval', () => setRealTimeUpdatesInterval);
};
export default provideServices;

View file

@ -39,3 +39,7 @@ export type Nullable<T> = {
type Optional<T> = T | null | undefined;
export type OptionalString = Optional<string>;
export type RecursivePartial<T> = {
[P in keyof T]?: RecursivePartial<T[P]>;
};

View file

@ -1,4 +1,4 @@
import reducer, { SET_REAL_TIME_UPDATES, setRealTimeUpdates } from '../../../src/settings/reducers/settings';
import reducer, { SET_REAL_TIME_UPDATES, toggleRealTimeUpdates, setRealTimeUpdatesInterval } from '../../../src/settings/reducers/settings';
describe('settingsReducer', () => {
const realTimeUpdates = { enabled: true };
@ -9,11 +9,19 @@ describe('settingsReducer', () => {
});
});
describe('setRealTimeUpdates', () => {
describe('toggleRealTimeUpdates', () => {
it.each([[ true ], [ false ]])('updates settings with provided value and then loads updates again', (enabled) => {
const result = setRealTimeUpdates(enabled);
const result = toggleRealTimeUpdates(enabled);
expect(result).toEqual({ type: SET_REAL_TIME_UPDATES, realTimeUpdates: { enabled } });
});
});
describe('setRealTimeUpdatesInterval', () => {
it.each([[ 0 ], [ 1 ], [ 2 ], [ 10 ]])('updates settings with provided value and then loads updates again', (interval) => {
const result = setRealTimeUpdatesInterval(interval);
expect(result).toEqual({ type: SET_REAL_TIME_UPDATES, realTimeUpdates: { interval } });
});
});
});