Merge pull request #301 from acelaya-forks/feature/rules-dnd

Feature/rules dnd

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* [#293](https://github.com/shlinkio/shlink-web-component/issues/293) Allow redirect rules to be ordered via drag'n'drop, when using a desktop device.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.6.0] - 2024-03-17
 ### Added
 * [#271](https://github.com/shlinkio/shlink-web-component/issues/271) Add support for redirect rules when consuming Shlink 4.0.0.

package-lock.json

@@ -59,6 +59,7 @@
     }
   },
   "dependencies": {
+    "@formkit/drag-and-drop": "^0.0.36",
     "@json2csv/plainjs": "^7.0.6",
     "@shlinkio/data-manipulation": "^1.0.3",
     "bottlejs": "^2.0.1",

package.json

@@ -1,9 +1,10 @@
+import { useDragAndDrop } from '@formkit/drag-and-drop/react';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Message, Result, SimpleCard, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { ShlinkRedirectRuleData } from '@shlinkio/shlink-js-sdk/api-contract';
 import type { FC, FormEvent } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { Button, Card } from 'reactstrap';
 import { ShlinkApiError } from '../common/ShlinkApiError';
@@ -41,24 +42,26 @@ export const ShortUrlRedirectRules: FC<ShortUrlRedirectRulesProps> = ({
   const identifier = useShortUrlIdentifier();
   const { shortUrls } = shortUrlsDetails;
   const shortUrl = identifier && shortUrls?.get(identifier);
-  const [rules, setRules] = useState<ShlinkRedirectRuleData[]>();
-  const hasRules = rules && rules.length > 0;
+  const [rulesContainerRef, rules, setRules] = useDragAndDrop<HTMLDivElement, ShlinkRedirectRuleData>([], {
+    dragHandle: '.drag-n-drop-handler',
+    dropZoneClass: 'opacity-25',
+  });
 
   const { saving, saved, errorData } = shortUrlRedirectRulesSaving;
 
   const [isModalOpen, toggleModal] = useToggle();
 
-  const pushRule = useCallback((rule: ShlinkRedirectRuleData) => setRules((prev = []) => [...prev, rule]), []);
+  const pushRule = useCallback((rule: ShlinkRedirectRuleData) => setRules((prev = []) => [...prev, rule]), [setRules]);
   const removeRule = useCallback((index: number) => setRules((prev = []) => {
     const copy = [...prev];
     copy.splice(index, 1);
     return copy;
-  }), []);
+  }), [setRules]);
   const updateRule = useCallback((index: number, rule: ShlinkRedirectRuleData) => setRules((prev = []) => {
     const copy = [...prev];
     copy[index] = rule;
     return copy;
-  }), []);
+  }), [setRules]);
 
   const moveRuleToNewPosition = useCallback((oldIndex: number, newIndex: number) => setRules((prev = []) => {
     if (!prev[newIndex]) {
@@ -71,7 +74,7 @@ export const ShortUrlRedirectRules: FC<ShortUrlRedirectRulesProps> = ({
     copy[oldIndex] = temp;
 
     return copy;
-  }), []);
+  }), [setRules]);
   const moveRuleUp = useCallback((index: number) => moveRuleToNewPosition(index, index - 1), [moveRuleToNewPosition]);
   const moveRuleDown = useCallback((index: number) => moveRuleToNewPosition(index, index + 1), [moveRuleToNewPosition]);
 
@@ -95,7 +98,7 @@ export const ShortUrlRedirectRules: FC<ShortUrlRedirectRulesProps> = ({
     if (shortUrlRedirectRules.redirectRules) {
       setRules(shortUrlRedirectRules.redirectRules);
     }
-  }, [shortUrlRedirectRules.redirectRules]);
+  }, [setRules, shortUrlRedirectRules.redirectRules]);
 
   return (
     <div className="d-flex flex-column gap-3">
@@ -124,11 +127,11 @@ export const ShortUrlRedirectRules: FC<ShortUrlRedirectRulesProps> = ({
       </div>
       <form onSubmit={onSubmit}>
         {shortUrlRedirectRules.loading && <Message loading />}
-        {!hasRules && !shortUrlRedirectRules.loading && (
+        {rules.length === 0 && !shortUrlRedirectRules.loading && (
           <SimpleCard className="text-center"><i>This short URL has no dynamic redirect rules</i></SimpleCard>
         )}
-        <div className="d-flex flex-column gap-2">
-          {rules?.map((rule, index) => (
+        <div className="d-flex flex-column gap-2" ref={rulesContainerRef}>
+          {rules.map((rule, index) => (
             <RedirectRuleCard
               key={`${rule.longUrl}_${index}`}
               redirectRule={rule}

src/redirect-rules/ShortUrlRedirectRules.tsx

@@ -1,4 +1,4 @@
-import { faArrowDown, faArrowUp, faPencilAlt, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp, faGripVertical, faPencilAlt, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SimpleCard, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { ShlinkRedirectRuleData } from '@shlinkio/shlink-js-sdk/api-contract';
@@ -25,6 +25,9 @@ export const RedirectRuleCard: FC<RedirectRuleCardProps> = (
   return (
     <SimpleCard>
       <div className="d-flex align-content-center gap-3">
+        <div className="d-flex flex-column my-auto drag-n-drop-handler d-none d-md-block" style={{ cursor: 'grab' }}>
+          <FontAwesomeIcon icon={faGripVertical} />
+        </div>
         <div className="d-flex flex-column my-auto">
           <Button
             outline