Merge pull request #341 from acelaya-forks/feature/validate-flag

Feature/validate flag

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 ### Added
 * [#309](https://github.com/shlinkio/shlink-web-client/issues/309) Added new domain selector component in create URL form which allows selecting from previously used domains or set a new one.
+* [#315](https://github.com/shlinkio/shlink-web-client/issues/315) Now you can tell if you want to validate the long URL when using Shlink >=2.4.
 
 ### Changed
 * *Nothing*

src/domains/DomainSelector.tsx

@@ -8,9 +8,9 @@ import {
   Input,
   InputGroup,
   InputGroupAddon,
-  InputProps,
   UncontrolledTooltip,
 } from 'reactstrap';
+import { InputProps } from 'reactstrap/lib/Input';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty, pipe } from 'ramda';

src/short-urls/CreateShortUrl.tsx

@@ -38,6 +38,7 @@ const initialState: ShortUrlData = {
   validUntil: undefined,
   maxVisits: undefined,
   findIfExists: false,
+  validateUrl: true,
 };
 
 type NonDateFields = 'longUrl' | 'customSlug' | 'shortCodeLength' | 'domain' | 'maxVisits';
@@ -154,16 +155,29 @@ const CreateShortUrl = (
         </div>
 
         <ForServerVersion minVersion="1.16.0">
-          <div className="mb-4 text-right">
+          <div className="mb-4 row">
-            <Checkbox
+            <div className="col-sm-6 text-center text-sm-left mb-2 mb-sm-0">
-              inline
+              <ForServerVersion minVersion="2.4.0">
-              className="mr-2"
+                <Checkbox
-              checked={shortUrlCreation.findIfExists}
+                  inline
-              onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
+                  checked={shortUrlCreation.validateUrl}
-            >
+                  onChange={(validateUrl) => setShortUrlCreation({ ...shortUrlCreation, validateUrl })}
-              Use existing URL if found
+                >
-            </Checkbox>
+                  Validate URL
-            <UseExistingIfFoundInfoIcon />
+                </Checkbox>
+              </ForServerVersion>
+            </div>
+            <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>
       </Collapse>

src/short-urls/data/index.ts

@@ -11,6 +11,7 @@ export interface ShortUrlData {
   validUntil?: m.Moment | string;
   maxVisits?: number;
   findIfExists?: boolean;
+  validateUrl?: boolean;
 }
 
 export interface ShortUrl {

src/utils/BooleanControl.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC } from 'react';
+import { ChangeEvent, FC, useRef } from 'react';
 import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 import { identity } from 'ramda';
@@ -17,7 +17,7 @@ interface BooleanControlWithTypeProps extends BooleanControlProps {
 const BooleanControl: FC<BooleanControlWithTypeProps> = (
   { checked = false, onChange = identity, className, children, type, inline = false },
 ) => {
-  const id = uuid();
+  const { current: id } = useRef(uuid());
   const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
   const typeClasses = {
     'custom-switch': type === 'switch',

test/short-urls/CreateShortUrl.test.tsx

@@ -52,6 +52,7 @@ describe('<CreateShortUrl />', () => {
       maxVisits: '20',
       findIfExists: false,
       shortCodeLength: 15,
+      validateUrl: true,
     });
   });
 });