Feature/color reorder

package.json

@@ -26,6 +26,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-sortable-hoc": "^2.0.0",
     "react-use": "^15.3.4",
     "redux": "^4.0.5",
     "styled-components": "^5.2.1",

src/components/main-app/sidebar-wrapper/colors-input.js

@@ -1,4 +1,10 @@
 import React, { useState, Fragment } from 'react';
+import {
+  SortableContainer,
+  SortableElement,
+  arrayMove,
+} from 'react-sortable-hoc';
+// TODO: remove array-move library
 import { StringParam, useQueryParam } from 'use-query-params';
 import { URL_COLORS, URL_UPDATE_PUSH } from 'config';
 import { ReactComponent as CloseSVG } from 'assets/svg/close.svg';
@@ -9,6 +15,7 @@ const popover = {
   position: 'absolute',
   zIndex: '3',
 };
+
 const cover = {
   position: 'fixed',
   top: '0px',
@@ -25,6 +32,9 @@ const deleteColor = (key, colorsArray, onChangeColor) => {
   }
 };
 
+const SortableItem = SortableElement(({ children }) => children);
+const SortableList = SortableContainer(({ children }) => children);
+
 export default function ColorsInput() {
   const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
   const [itemColorStatus, setItemColorStatus] = useState(null);
@@ -44,6 +54,11 @@ export default function ColorsInput() {
     onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
   };
 
+  const sortColor = ({ oldIndex, newIndex }) => {
+    let tempColorsArray = arrayMove(colorsArray, oldIndex, newIndex);
+    onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
+  };
+
   return (
     <>
       <div className="color-row">
@@ -56,31 +71,39 @@ export default function ColorsInput() {
           {' '}
         </a>
       </div>
-      <div className="color-input">
-        {colorsArray.map((color, key) => (
-          <Fragment key={color + key}>
-            <div
-              className="color-input-item"
-              style={
-                itemColorStatus && itemColorStatus.key === key
-                  ? { background: color, borderColor: 'black' }
-                  : { background: color }
-              }
-            >
-              <div
-                className="color-input-item-close"
-                onClick={e => deleteColor(key, colorsArray, onChangeColor)}
-              >
-                <CloseSVG />
-              </div>
-              <div
-                className="color-input-item-overlay"
-                onClick={e => setItemColorStatus({ color, key })}
-              ></div>
-            </div>
-          </Fragment>
-        ))}
-      </div>
+
+      <SortableList axis="xy" distance={1} onSortEnd={sortColor}>
+        <div className="color-input">
+          {colorsArray.map((color, key) => (
+            <SortableItem key={`color-${key}`} index={key}>
+              <Fragment>
+                <div
+                  className="color-input-item draggable"
+                  style={{
+                    background: color,
+                    borderColor:
+                      itemColorStatus && itemColorStatus.key === key
+                        ? 'black'
+                        : 'white',
+                  }}
+                >
+                  <div
+                    className="color-input-item-close"
+                    onClick={e => deleteColor(key, colorsArray, onChangeColor)}
+                  >
+                    <CloseSVG />
+                  </div>
+                  <div
+                    className="color-input-item-overlay"
+                    onClick={e => setItemColorStatus({ color, key })}
+                  ></div>
+                </div>
+              </Fragment>
+            </SortableItem>
+          ))}
+        </div>
+      </SortableList>
+
       {itemColorStatus ? (
         <div style={popover}>
           <div