feat(node list): make nodes dragable

src/components/General/RightSideBar/NodesList.tsx

@@ -1,72 +1,50 @@
+import { useState } from 'react'
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { YStack } from 'tamagui'
+
 import { Text } from '@status-im/components'
-import { DragIcon, StatusIcon, ChevronRightIcon } from '@status-im/icons'
+import DraggableNode from './DragableNode'
-import { Stack, Tooltip, XStack, YStack } from 'tamagui'
+interface NodeItem {
-import Icon from '../Icon'
+  id: string
+  content: string
+}
+
+const initialNodes: NodeItem[] = [
+  { id: 'item-0', content: 'Nickname 0' },
+  { id: 'item-1', content: 'Nickname 1' },
+  { id: 'item-2', content: 'Nickname 2' },
+]
 
 const NodesList = () => {
-  return (
+  const [nodes, setNodes] = useState<NodeItem[]>(initialNodes)
-    <YStack backgroundColor={'#fff'} padding="18px" borderRadius={25}>
-      <Text size={15} color="#647084" weight="semibold">
-        Nodes
-      </Text>
-      <YStack padding="$2" space="$3">
-        {Array.from(Array(3).keys()).map(e => {
-          return (
-            <XStack
-              alignContent="center"
-              alignItems="center"
-              justifyContent="space-between"
-              width={'250px'}
-              backgroundColor={'#FAFBFC'}
-              borderRadius={15}
-            >
-              <XStack
-                space="$3"
-                alignContent="center"
-                alignItems="center"
-                padding="8px"
-              >
-                <DragIcon size={20} color="#09101C"></DragIcon>
-                <StatusIcon size={20}></StatusIcon>
-                <YStack>
-                  <Text size={15} weight="semibold">
-                    Nickname {e}
-                  </Text>
-                  <Text size={13} color="#647084">
-                    Validators
-                  </Text>
-                </YStack>
-              </XStack>
 
-              <Tooltip>
+  const moveNode = (dragIndex: number, hoverIndex: number) => {
-                <Tooltip.Trigger>
+    const dragNode = nodes[dragIndex]
-                  <Stack padding="3px">
+    const newNodes = [...nodes]
-                    <ChevronRightIcon size={20}></ChevronRightIcon>
+    newNodes.splice(dragIndex, 1)
-                  </Stack>
+    newNodes.splice(hoverIndex, 0, dragNode)
-                </Tooltip.Trigger>
+    setNodes(newNodes)
-                <Tooltip.Content>
+  }
-                  <XStack alignContent="center" alignItems="center" space="$1">
+
-                    <Icon
+  return (
-                      src="icons/tooltipIcon.png"
+    <DndProvider backend={HTML5Backend}>
-                      width={22}
+      <YStack backgroundColor="#fff" padding="18px" borderRadius={25}>
-                      height={22}
+        <Text size={15} color="#647084" weight="semibold">
-                    ></Icon>
+          Nodes
-                    <YStack space="$2">
+        </Text>
-                      <Text size={15} weight="semibold">
+        {nodes.map((node, index) => (
-                        Client Name
+          <DraggableNode
-                      </Text>
+            key={node.id}
-                      <Text size={15} weight="semibold">
+            id={node.id}
-                        Host Name
+            content={node.content}
-                      </Text>
+            index={index}
-                    </YStack>
+            moveNode={moveNode}
-                  </XStack>
+          />
-                </Tooltip.Content>
+        ))}
-              </Tooltip>
-            </XStack>
-          )
-        })}
       </YStack>
-    </YStack>
+    </DndProvider>
   )
 }
+
 export default NodesList