Refactor src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/index to Typescript and useOvermind

Author: br1anchen

packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/index.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { useOvermind } from 'app/overmind';
+
+import AnimatedSandboxItem from './AnimatedSandboxItem';
+
+interface ISelectedSandboxItemsProps {
+  x: number;
+  y: number;
+  isOverPossibleTargets: boolean;
+  id: string;
+}
+
+export const SelectedSandboxItems: React.FC<ISelectedSandboxItemsProps> = ({
+  x,
+  y,
+  isOverPossibleTargets,
+  id,
+}) => {
+  const {
+    state: {
+      dashboard: { selectedSandboxes },
+    },
+  } = useOvermind();
+
+  const selectedIds = useMemo(
+    () => [id, ...selectedSandboxes.filter(b => b !== id)],
+    [id, selectedSandboxes]
+  );
+
+  const scale = isOverPossibleTargets ? 0.4 : 0.8;
+
+  return (
+    <>
+      {selectedIds.map((sid, i) => (
+        <AnimatedSandboxItem
+          key={sid}
+          id={sid}
+          i={i}
+          isLast={i === selectedIds.length - 1}
+          x={x}
+          y={y}
+          scale={scale}
+          selectedSandboxes={selectedIds}
+        />
+      ))}
+    </>
+  );
+};

packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { DragLayer as DNDDragLayer } from 'react-dnd';
 
-import SelectedSandboxItems from './SelectedSandboxItems';
+import { SelectedSandboxItems } from './SelectedSandboxItems';
 
 const layerStyles = {
   position: 'fixed',
@@ -22,13 +22,11 @@ function getItemCoords(props) {
   return {
     x,
     y,
-    left: props.item.left,
-    top: props.item.top,
   };
 }
 
 class CustomDragLayer extends React.Component {
-  renderItem(type, item, isOverPossibleTargets, { x, y, left, top }) {
+  renderItem(type, item, isOverPossibleTargets, { x, y }) {
     if (type !== 'SANDBOX') {
       return null;
     }
@@ -37,8 +35,6 @@ class CustomDragLayer extends React.Component {
         isOverPossibleTargets={isOverPossibleTargets}
         x={x}
         y={y}
-        left={left}
-        top={top}
         id={item.id}
       />
     );