feat: re-ordering tags (#9823)

* fix: Re-ordering tags with Drag-and-Drop * Added on Hover cursor change * Added setTags for events
EddieHubCommunity · Dec 1, 2023 · 8e3abe6 · 8e3abe6
1 parent 7e2b9ff
commit 8e3abe6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
@@ -1,12 +1,14 @@
 import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
 import Input from "../form/Input";
+import { ReactSortable } from "react-sortablejs";
 import Notification from "@components/Notification";
 
 export default function TagsInput({
   tags,
   onTagAdd,
   onTagRemove,
   inputRef,
+  setTags,
   showNotification,
   setShowNotification,
 }) {
@@ -49,7 +51,7 @@ export default function TagsInput({
   const tagItems = tags.map((tag, i) => (
     <li
       key={i}
-      className="flex items-center gap-x-1 text-sm p-1 font-mono border rounded-md line-clamp-1"
+      className="flex items-center gap-x-1 text-sm p-1 font-mono border rounded-md line-clamp-1 hover:cursor-move"
     >
       <span>{tag}</span>
       <button
@@ -78,7 +80,11 @@ export default function TagsInput({
         additionalMessage={showNotification.additionalMessage}
       />
       <label htmlFor="tags">Tags</label>
-      <ul
+      <ReactSortable
+        tag="ul"
+        list={tags}
+        setList={setTags}
+        swap
         role="list"
         className="flex flex-wrap items-center gap-x-4 gap-y-2 border-primary-medium-low mt-3 border-2 transition-all duration-250 ease-linear rounded px-6 py-2 mb-2 w-full dark:bg-primary-high focus-within:border-tertiary-medium hover:border-tertiary-medium"
       >
@@ -94,7 +100,7 @@ export default function TagsInput({
             onKeyDown={handleKeyDown}
           />
         </li>
-      </ul>
+      </ReactSortable>
     </>
   );
 }
diff --git a/pages/account/manage/event/[[...data]].js b/pages/account/manage/event/[[...data]].js
@@ -340,6 +340,7 @@ export default function ManageEvent({ BASE_URL, event }) {
                       onTagAdd={handleTagAdd}
                       onTagRemove={handleTagRemove}
                       tags={tags}
+                      setTags={setTags}
                       inputRef={tagInputRef}
                       showNotification={showNotification}
                       setShowNotification={setShowNotification}

diff --git a/pages/account/manage/profile.js b/pages/account/manage/profile.js
@@ -252,6 +252,7 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
                         onTagRemove={handleTagRemove}
                         tags={tags}
                         inputRef={tagInputRef}
+                        setTags={setTags}
                         showNotification={showNotification}
                         setShowNotification={setShowNotification}
                       />