Created section to set default date interval for visits

src/settings/Settings.tsx

@@ -1,22 +1,29 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { Row } from 'reactstrap';
 import NoMenuLayout from '../common/NoMenuLayout';
 
-const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC) => () => (
+const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
+  <>
+    {items.map((child, index) => (
+      <Row key={index}>
+        {child.map((subChild, subIndex) => (
+          <div key={subIndex} className="col-lg-6">
+            <div className="mb-3 mb-md-4">{subChild}</div>
+          </div>
+        ))}
+      </Row>
+    ))}
+  </>
+);
+
+const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC, Visits: FC) => () => (
   <NoMenuLayout>
-    <Row>
-      <div className="col-lg-6">
-        <div className="mb-3 mb-md-4">
-          <UserInterface />
-        </div>
-        <div className="mb-3 mb-md-4">
-          <ShortUrlCreation />
-        </div>
-      </div>
-      <div className="col-lg-6">
-        <RealTimeUpdates />
-      </div>
-    </Row>
+    <SettingsSections
+      items={[
+        [ <UserInterface />, <ShortUrlCreation /> ], // eslint-disable-line react/jsx-key
+        [ <Visits />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
+      ]}
+    />
   </NoMenuLayout>
 );
 

src/settings/Visits.tsx

@@ -0,0 +1,22 @@
+import { FormGroup } from 'reactstrap';
+import { FC } from 'react';
+import { SimpleCard } from '../utils/SimpleCard';
+import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
+import { Settings, VisitsSettings } from './reducers/settings';
+
+interface VisitsProps {
+  settings: Settings;
+  setVisitsSettings: (settings: VisitsSettings) => void;
+}
+
+export const Visits: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
+  <SimpleCard title="Visits">
+    <FormGroup className="mb-0">
+      <label>Default interval to load on visits sections:</label>
+      <DateIntervalSelector
+        active={settings.visits?.defaultInterval ?? 'last30Days'}
+        onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
+      />
+    </FormGroup>
+  </SimpleCard>
+);

src/settings/reducers/settings.ts

@@ -78,3 +78,8 @@ export const setUiSettings = (settings: UiSettings): PartialSettingsAction => ({
   type: SET_SETTINGS,
   ui: settings,
 });
+
+export const setVisitsSettings = (settings: VisitsSettings): PartialSettingsAction => ({
+  type: SET_SETTINGS,
+  visits: settings,
+});

src/settings/services/provideServices.ts

@@ -5,16 +5,18 @@ import {
   setRealTimeUpdatesInterval,
   setShortUrlCreationSettings,
   setUiSettings,
+  setVisitsSettings,
   toggleRealTimeUpdates,
 } from '../reducers/settings';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 import { ShortUrlCreation } from '../ShortUrlCreation';
 import { UserInterface } from '../UserInterface';
+import { Visits } from '../Visits';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
-  bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates', 'ShortUrlCreation', 'UserInterface');
+  bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates', 'ShortUrlCreation', 'UserInterface', 'Visits');
   bottle.decorator('Settings', withoutSelectedServer);
   bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ]));
 
@@ -30,11 +32,15 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('UserInterface', () => UserInterface);
   bottle.decorator('UserInterface', connect([ 'settings' ], [ 'setUiSettings' ]));
 
+  bottle.serviceFactory('Visits', () => Visits);
+  bottle.decorator('Visits', connect([ 'settings' ], [ 'setVisitsSettings' ]));
+
   // Actions
   bottle.serviceFactory('toggleRealTimeUpdates', () => toggleRealTimeUpdates);
   bottle.serviceFactory('setRealTimeUpdatesInterval', () => setRealTimeUpdatesInterval);
   bottle.serviceFactory('setShortUrlCreationSettings', () => setShortUrlCreationSettings);
   bottle.serviceFactory('setUiSettings', () => setUiSettings);
+  bottle.serviceFactory('setVisitsSettings', () => setVisitsSettings);
 };
 
 export default provideServices;