From 8f7e356e54d6150c07ad8456dfdf9eb18f3589ea Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 6 Dec 2020 13:07:44 +0100
Subject: [PATCH 1/4] Added support to enable/disable validating the URL while
 it is created

---
 src/short-urls/CreateShortUrl.tsx       | 34 +++++++++++++++++--------
 src/short-urls/data/index.ts            |  1 +
 src/utils/BooleanControl.tsx            |  4 +--
 test/short-urls/CreateShortUrl.test.tsx |  1 +
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx
index da07dffa..c42f4674 100644
--- a/src/short-urls/CreateShortUrl.tsx
+++ b/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">
-            <Checkbox
-              inline
-              className="mr-2"
-              checked={shortUrlCreation.findIfExists}
-              onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
-            >
-              Use existing URL if found
-            </Checkbox>
-            <UseExistingIfFoundInfoIcon />
+          <div className="mb-4 row">
+            <div className="col-6">
+              <ForServerVersion minVersion="2.4.0">
+                <Checkbox
+                  inline
+                  checked={shortUrlCreation.validateUrl}
+                  onChange={(validateUrl) => setShortUrlCreation({ ...shortUrlCreation, validateUrl })}
+                >
+                  Validate URL
+                </Checkbox>
+              </ForServerVersion>
+            </div>
+            <div className="col-6 text-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>
diff --git a/src/short-urls/data/index.ts b/src/short-urls/data/index.ts
index ba7d7c6e..237c6b6a 100644
--- a/src/short-urls/data/index.ts
+++ b/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 {
diff --git a/src/utils/BooleanControl.tsx b/src/utils/BooleanControl.tsx
index 72f7056e..0b642dd0 100644
--- a/src/utils/BooleanControl.tsx
+++ b/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',
diff --git a/test/short-urls/CreateShortUrl.test.tsx b/test/short-urls/CreateShortUrl.test.tsx
index 4aeb72bb..797b2169 100644
--- a/test/short-urls/CreateShortUrl.test.tsx
+++ b/test/short-urls/CreateShortUrl.test.tsx
@@ -52,6 +52,7 @@ describe('<CreateShortUrl />', () => {
       maxVisits: '20',
       findIfExists: false,
       shortCodeLength: 15,
+      validateUrl: true,
     });
   });
 });

From 1415f196bb5a37e767e534a95fba9dba834c9475 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 6 Dec 2020 13:09:06 +0100
Subject: [PATCH 2/4] Updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ce3226f..a2f46e32 100644
--- a/CHANGELOG.md
+++ b/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*

From b9fc90653760a5dcbd6057d3fcdc7f4369740f5a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 6 Dec 2020 13:14:43 +0100
Subject: [PATCH 3/4] Fixed alignment and margins for checkboxes in create form

---
 src/short-urls/CreateShortUrl.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx
index c42f4674..442ddd87 100644
--- a/src/short-urls/CreateShortUrl.tsx
+++ b/src/short-urls/CreateShortUrl.tsx
@@ -156,7 +156,7 @@ const CreateShortUrl = (
 
         <ForServerVersion minVersion="1.16.0">
           <div className="mb-4 row">
-            <div className="col-6">
+            <div className="col-sm-6 text-center text-sm-left mb-2 mb-sm-0">
               <ForServerVersion minVersion="2.4.0">
                 <Checkbox
                   inline
@@ -167,7 +167,7 @@ const CreateShortUrl = (
                 </Checkbox>
               </ForServerVersion>
             </div>
-            <div className="col-6 text-right">
+            <div className="col-sm-6 text-center text-sm-right">
               <Checkbox
                 inline
                 className="mr-2"

From bd6e455cd6b3d193159552c82340693f00ddea28 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 6 Dec 2020 13:20:16 +0100
Subject: [PATCH 4/4] Fixed import

---
 src/domains/DomainSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/domains/DomainSelector.tsx b/src/domains/DomainSelector.tsx
index ec53331e..510b39f9 100644
--- a/src/domains/DomainSelector.tsx
+++ b/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';