Created new Result component to display operation result messages consistently

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -4,10 +4,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isNil } from 'ramda';
 import { useEffect } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Card, CardBody, Tooltip } from 'reactstrap';
+import { Tooltip } from 'reactstrap';
 import { ShortUrlCreation } from '../reducers/shortUrlCreation';
 import { StateFlagTimeout } from '../../utils/helpers/hooks';
 import './CreateShortUrlResult.scss';
+import { Result } from '../../utils/Result';
 
 export interface CreateShortUrlResultProps extends ShortUrlCreation {
   resetCreateShortUrl: () => void;
@@ -25,9 +26,10 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
 
   if (error) {
     return (
-      <Card body color="danger" inverse className="bg-danger mt-3">
+      <Result type="error" className="mt-3">
+        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
         An error occurred while creating the URL :(
-      </Card>
+      </Result>
     );
   }
 
@@ -38,26 +40,24 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
   const { shortUrl } = result;
 
   return (
-    <Card inverse className="bg-main mt-3">
-      <CardBody>
-        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
-        <b>Great!</b> The short URL is <b>{shortUrl}</b>
+    <Result type="success" className="mt-3">
+      {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
+      <b>Great!</b> The short URL is <b>{shortUrl}</b>
 
-        <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
-          <button
-            className="btn btn-light btn-sm create-short-url-result__copy-btn"
-            id="copyBtn"
-            type="button"
-          >
-            <FontAwesomeIcon icon={copyIcon} /> Copy
-          </button>
-        </CopyToClipboard>
+      <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
+        <button
+          className="btn btn-light btn-sm create-short-url-result__copy-btn"
+          id="copyBtn"
+          type="button"
+        >
+          <FontAwesomeIcon icon={copyIcon} /> Copy
+        </button>
+      </CopyToClipboard>
 
-        <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
-          Copied!
-        </Tooltip>
-      </CardBody>
-    </Card>
+      <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
+        Copied!
+      </Tooltip>
+    </Result>
   );
 };
 

src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -4,6 +4,7 @@ import { identity, pipe } from 'ramda';
 import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
 import { ShortUrlModalProps } from '../data';
 import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
+import { Result } from '../../utils/Result';
 
 const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
 
@@ -42,25 +43,26 @@ const DeleteShortUrlModal = (
         <ModalBody>
           <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
           <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
+          <p>Write <b>{shortUrl.shortCode}</b> to confirm deletion.</p>
 
           <input
             type="text"
             className="form-control"
-            placeholder="Insert the short code of the URL"
+            placeholder={`Insert the short code (${shortUrl.shortCode})`}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
           />
 
           {hasThresholdError && (
-            <div className="p-2 mt-2 bg-warning text-center">
+            <Result type="warning" textCentered small className="mt-2">
               {errorData?.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`}
               {!errorData?.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'}
-            </div>
+            </Result>
           )}
           {hasErrorOtherThanThreshold && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
+            <Result type="error" textCentered small className="mt-2">
               Something went wrong while deleting the URL :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/short-urls/helpers/EditMetaModal.tsx

@@ -10,6 +10,7 @@ import DateInput from '../../utils/DateInput';
 import { formatIsoDate } from '../../utils/helpers/date';
 import { ShortUrl, ShortUrlMeta, ShortUrlModalProps } from '../data';
 import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils';
+import { Result } from '../../utils/Result';
 
 interface EditMetaModalConnectProps extends ShortUrlModalProps {
   shortUrlMeta: ShortUrlMetaEdition;
@@ -78,9 +79,9 @@ const EditMetaModal = (
             />
           </FormGroup>
           {error && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
+            <Result type="error" small textCentered className="mt-2">
               Something went wrong while saving the metadata :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/short-urls/helpers/EditShortUrlModal.tsx

@@ -4,6 +4,7 @@ import { ExternalLink } from 'react-external-link';
 import { ShortUrlEdition } from '../reducers/shortUrlEdition';
 import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils';
 import { ShortUrlModalProps } from '../data';
+import { Result } from '../../utils/Result';
 
 interface EditShortUrlModalProps extends ShortUrlModalProps {
   shortUrlEdition: ShortUrlEdition;
@@ -34,9 +35,9 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
             />
           </FormGroup>
           {error && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
+            <Result type="error" small textCentered className="mt-2">
               Something went wrong while saving the long URL :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/short-urls/helpers/EditTagsModal.tsx

@@ -5,6 +5,7 @@ import { ShortUrlTags } from '../reducers/shortUrlTags';
 import { ShortUrlModalProps } from '../data';
 import { OptionalString } from '../../utils/utils';
 import { TagsSelectorProps } from '../../tags/helpers/TagsSelector';
+import { Result } from '../../utils/Result';
 
 interface EditTagsModalProps extends ShortUrlModalProps {
   shortUrlTags: ShortUrlTags;
@@ -32,9 +33,9 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
       <ModalBody>
         <TagsSelector tags={selectedTags} onChange={setSelectedTags} />
         {shortUrlTags.error && (
-          <div className="p-2 mt-2 bg-danger text-white text-center">
+          <Result type="error" small textCentered className="mt-2">
             Something went wrong while saving the tags :(
-          </div>
+          </Result>
         )}
       </ModalBody>
       <ModalFooter>