Added new reducer for visits overview, and added it to overview page

src/short-urls/CreateShortUrl.tsx

@@ -1,15 +1,12 @@
-import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, pipe, replace, trim } from 'ramda';
 import { FC, useState } from 'react';
-import { Collapse, FormGroup, Input } from 'reactstrap';
+import { Button, FormGroup, Input } from 'reactstrap';
 import { InputType } from 'reactstrap/lib/Input';
 import * as m from 'moment';
 import DateInput, { DateInputProps } from '../utils/DateInput';
 import Checkbox from '../utils/Checkbox';
 import { versionMatch, Versions } from '../utils/helpers/version';
 import { handleEventPreventingDefault, hasValue } from '../utils/utils';
-import { useToggle } from '../utils/helpers/hooks';
 import { isReachableServer, SelectedServer } from '../servers/data';
 import { formatIsoDate } from '../utils/helpers/date';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
@@ -18,6 +15,7 @@ import { ShortUrlData } from './data';
 import { ShortUrlCreation } from './reducers/shortUrlCreation';
 import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 import { CreateShortUrlResultProps } from './helpers/CreateShortUrlResult';
+import './CreateShortUrl.scss';
 
 const normalizeTag = pipe(trim, replace(/ /g, '-'));
 
@@ -51,7 +49,6 @@ const CreateShortUrl = (
   DomainSelector: FC<DomainSelectorProps>,
 ) => ({ createShortUrl, shortUrlCreationResult, resetCreateShortUrl, selectedServer }: CreateShortUrlProps) => {
   const [ shortUrlCreation, setShortUrlCreation ] = useState(initialState);
-  const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle();
 
   const changeTags = (tags: string[]) => setShortUrlCreation({ ...shortUrlCreation, tags: tags.map(normalizeTag) });
   const reset = () => setShortUrlCreation(initialState);
@@ -106,94 +103,89 @@ const CreateShortUrl = (
         />
       </div>
 
-      <Collapse isOpen={moreOptionsVisible}>
-        <div className="form-group">
-          <TagsSelector tags={shortUrlCreation.tags ?? []} onChange={changeTags} />
-        </div>
+      <div className="form-group">
+        <TagsSelector tags={shortUrlCreation.tags ?? []} onChange={changeTags} />
+      </div>
 
-        <div className="row">
-          <div className="col-sm-4">
-            {renderOptionalInput('customSlug', 'Custom slug', 'text', {
-              disabled: hasValue(shortUrlCreation.shortCodeLength),
-            })}
-          </div>
-          <div className="col-sm-4">
-            {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
-              min: 4,
-              disabled: disableShortCodeLength || hasValue(shortUrlCreation.customSlug),
-              ...disableShortCodeLength && {
-                title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
-              },
-            })}
-          </div>
-          <div className="col-sm-4">
-            {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text', {
-              disabled: disableDomain,
-              ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
-            })}
-            {showDomainSelector && (
-              <FormGroup>
-                <DomainSelector
-                  value={shortUrlCreation.domain}
-                  onChange={(domain?: string) => setShortUrlCreation({ ...shortUrlCreation, domain })}
-                />
-              </FormGroup>
-            )}
-          </div>
+      <div className="row">
+        <div className="col-sm-4">
+          {renderOptionalInput('customSlug', 'Custom slug', 'text', {
+            disabled: hasValue(shortUrlCreation.shortCodeLength),
+          })}
         </div>
-
-        <div className="row">
-          <div className="col-sm-4">
-            {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-          </div>
-          <div className="col-sm-4">
-            {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlCreation.validUntil as m.Moment | undefined })}
-          </div>
-          <div className="col-sm-4">
-            {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlCreation.validSince as m.Moment | undefined })}
-          </div>
+        <div className="col-sm-4">
+          {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
+            min: 4,
+            disabled: disableShortCodeLength || hasValue(shortUrlCreation.customSlug),
+            ...disableShortCodeLength && {
+              title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
+            },
+          })}
         </div>
+        <div className="col-sm-4">
+          {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text', {
+            disabled: disableDomain,
+            ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
+          })}
+          {showDomainSelector && (
+            <FormGroup>
+              <DomainSelector
+                value={shortUrlCreation.domain}
+                onChange={(domain?: string) => setShortUrlCreation({ ...shortUrlCreation, domain })}
+              />
+            </FormGroup>
+          )}
+        </div>
+      </div>
 
-        <ForServerVersion minVersion="1.16.0">
-          <div className="mb-4 row">
-            <div className="col-sm-6 text-center text-sm-left mb-2 mb-sm-0">
-              <ForServerVersion minVersion="2.4.0">
-                <Checkbox
-                  inline
-                  checked={shortUrlCreation.validateUrl}
-                  onChange={(validateUrl) => setShortUrlCreation({ ...shortUrlCreation, validateUrl })}
-                >
-                  Validate URL
-                </Checkbox>
-              </ForServerVersion>
-            </div>
-            <div className="col-sm-6 text-center text-sm-right">
+      <div className="row">
+        <div className="col-sm-4">
+          {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
+        </div>
+        <div className="col-sm-4">
+          {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlCreation.validUntil as m.Moment | undefined })}
+        </div>
+        <div className="col-sm-4">
+          {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlCreation.validSince as m.Moment | undefined })}
+        </div>
+      </div>
+
+      <ForServerVersion minVersion="1.16.0">
+        <div className="mb-4 row">
+          <div className="col-sm-6 text-center text-sm-left mb-2 mb-sm-0">
+            <ForServerVersion minVersion="2.4.0">
               <Checkbox
                 inline
-                className="mr-2"
-                checked={shortUrlCreation.findIfExists}
-                onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
+                checked={shortUrlCreation.validateUrl}
+                onChange={(validateUrl) => setShortUrlCreation({ ...shortUrlCreation, validateUrl })}
               >
-                Use existing URL if found
+                Validate URL
               </Checkbox>
-              <UseExistingIfFoundInfoIcon />
-            </div>
+            </ForServerVersion>
           </div>
-        </ForServerVersion>
-      </Collapse>
+          <div className="col-sm-6 text-center text-sm-right">
+            <Checkbox
+              inline
+              className="mr-2"
+              checked={shortUrlCreation.findIfExists}
+              onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
+            >
+              Use existing URL if found
+            </Checkbox>
+            <UseExistingIfFoundInfoIcon />
+          </div>
+        </div>
+      </ForServerVersion>
 
-      <div>
-        <button type="button" className="btn btn-outline-secondary" onClick={toggleMoreOptionsVisible}>
-          <FontAwesomeIcon icon={moreOptionsVisible ? upIcon : downIcon} />
-          &nbsp;
-          {moreOptionsVisible ? 'Less' : 'More'} options
-        </button>
-        <button
-          className="btn btn-outline-primary float-right"
+      <div className="text-right">
+        <Button
+          outline
+          color="primary"
           disabled={shortUrlCreationResult.saving || isEmpty(shortUrlCreation.longUrl)}
+          className="create-short-url__save-btn"
         >
           {shortUrlCreationResult.saving ? 'Creating...' : 'Create'}
-        </button>
+        </Button>
       </div>
 
       <CreateShortUrlResult {...shortUrlCreationResult} resetCreateShortUrl={resetCreateShortUrl} />