🔨 Switch Dashboard/Content to use useOvermind

Author: MichaelDeBoey

packages/app/package.json

@@ -190,8 +190,8 @@
     "react-content-loader": "^4.2.2",
     "react-day-picker": "^7.2.4",
     "react-devtools-inline": "^4.4.0",
-    "react-dnd": "^9.4.0",
-    "react-dnd-html5-backend": "^9.4.0",
+    "react-dnd": "^9.5.1",
+    "react-dnd-html5-backend": "^9.5.1",
     "react-dom": "^16.9.0",
     "react-draggable": "^3.0.5",
     "react-error-overlay": "^1.0.10",
@@ -213,7 +213,7 @@
     "react-stripe-elements": "^5.0.0",
     "react-tagsinput": "^3.19.0",
     "react-use": "^9.7.2",
-    "react-virtualized": "^9.19.1",
+    "react-virtualized": "^9.21.2",
     "reakit": "^1.0.0-beta.4",
     "rebound": "^0.1.0",
     "resize-observer-polyfill": "^1.5.1",
@@ -272,6 +272,7 @@
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
     "@types/react-instantsearch": "^5.2.3",
+    "@types/react-virtualized": "^9.21.8",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-stripe-elements": "^1.3.2",
     "@types/resolve": "^0.0.8",

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, FunctionComponent } from 'react';
 import { Spring, animated, interpolate } from 'react-spring/renderprops';
 
 import {
@@ -10,22 +10,21 @@ import {
 
 type Props = {
   id: string;
-  i: number;
+  index: number;
+  isLast: boolean;
+  scale: number;
+  selectedSandboxes: string[];
   x: number;
   y: number;
-  scale: number;
-  isLast: boolean;
-  selectedSandboxes: Array<string>;
 };
-
-export const AnimatedSandboxItem: React.FC<Props> = ({
+export const AnimatedSandboxItem: FunctionComponent<Props> = ({
   id,
-  i,
-  x,
-  y,
-  scale,
+  index,
   isLast,
+  scale,
   selectedSandboxes,
+  x,
+  y,
 }) => {
   const [render, setRender] = useState(true);
   const [position, setPosition] = useState<DOMRect>(null);
@@ -39,7 +38,7 @@ export const AnimatedSandboxItem: React.FC<Props> = ({
       setPosition(sandboxBrotherItem.getBoundingClientRect() as DOMRect);
     }
 
-    if (i !== 0 && !isLast) {
+    if (index !== 0 && !isLast) {
       timeout = global.setTimeout(() => {
         setRender(false);
       }, 200);
@@ -50,7 +49,7 @@ export const AnimatedSandboxItem: React.FC<Props> = ({
         global.clearTimeout(timeout);
       }
     };
-  }, [id, i, isLast]);
+  }, [id, index, isLast]);
 
   if (!render || !position) {
     return null;
@@ -59,7 +58,7 @@ export const AnimatedSandboxItem: React.FC<Props> = ({
   return (
     <Spring
       native
-      immediate={i === 0 ? el => el !== 'scale' : false}
+      immediate={index === 0 ? el => el !== 'scale' : false}
       from={{ x: position.x, y: position.y, shadow: 2, scale: 1 }}
       to={{ scale, x, y, shadow: isLast ? 16 : 2 }}
       key={id}
@@ -70,7 +69,7 @@ export const AnimatedSandboxItem: React.FC<Props> = ({
             position: 'absolute',
             willChange: 'transform',
             boxShadow:
-              i === 0 || isLast
+              index === 0 || isLast
                 ? interpolate(
                     [newShadow],
                     s => `0 ${s}px ${s * 2}px rgba(0, 0, 0, 0.3)`
@@ -81,20 +80,22 @@ export const AnimatedSandboxItem: React.FC<Props> = ({
               (xx, yy, zz) =>
                 `translate3d(${xx}px, ${yy}px, 0px) scale3d(${zz}, ${zz}, ${zz})`
             ),
-            zIndex: i === 0 ? 20 : 10,
+            zIndex: index === 0 ? 20 : 10,
           }}
         >
           <Container>
             <SandboxImageContainer>
               <SandboxImage
                 style={{
-                  backgroundImage: `url(${`https://codesandbox.io/api/v1/sandboxes/${id}/screenshot.png`})`,
+                  backgroundImage: `url(https://codesandbox.io/api/v1/sandboxes/${id}/screenshot.png)`,
                 }}
               />
             </SandboxImageContainer>
+
             <SandboxInfo>
-              {selectedSandboxes.length}{' '}
-              {selectedSandboxes.length === 1 ? 'Sandbox' : 'Sandboxes'}
+              {`${selectedSandboxes.length} ${
+                selectedSandboxes.length === 1 ? 'Sandbox' : 'Sandboxes'
+              }`}
             </SandboxInfo>
           </Container>
         </animated.div>

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

@@ -1,11 +1,13 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  height: 210px;
-  width: 346px;
+  ${({ theme }) => css`
+    height: 210px;
+    width: 346px;
 
-  background-color: ${props => props.theme.background};
-  border-radius: 2px;
+    background-color: ${theme.background};
+    border-radius: 2px;
+  `};
 `;
 
 export const SandboxImageContainer = styled.div`

packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/AnimatedSandboxItem.tsx renamed to packages/app/src/app/pages/Dashboard/Content/SandboxGrid/DragLayer/SelectedSandboxItems/AnimatedSandboxItem.tsx

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

packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/elements.ts renamed to packages/app/src/app/pages/Dashboard/Content/SandboxGrid/DragLayer/SelectedSandboxItems/elements.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;

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

@@ -0,0 +1,60 @@
+import React, { FunctionComponent } from 'react';
+import {
+  DragLayer as DNDDragLayer,
+  DragLayerCollector,
+  DragLayerMonitor,
+} from 'react-dnd';
+
+import { Container } from './elements';
+import { SelectedSandboxItems } from './SelectedSandboxItems';
+
+type OwnProps = {};
+type Props = OwnProps & CollectedProps;
+const DragLayerComponent: FunctionComponent<Props> = ({
+  currentOffset,
+  isDragging,
+  isOverPossibleTargets,
+  item,
+  itemType,
+}) => {
+  if (!isDragging || !currentOffset) {
+    return null;
+  }
+
+  return (
+    <Container>
+      {itemType === 'SANDBOX' ? (
+        <SelectedSandboxItems
+          isOverPossibleTargets={isOverPossibleTargets}
+          x={currentOffset.x}
+          y={currentOffset.y}
+          id={item.id}
+        />
+      ) : null}
+    </Container>
+  );
+};
+
+const collect: DragLayerCollector<OwnProps, CollectedProps> = monitor => {
+  // @ts-ignore
+  const isOverPossibleTargets = monitor.getTargetIds().length > 0;
+
+  return {
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging(),
+    isOverPossibleTargets,
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+  };
+};
+
+type CollectedProps = {
+  currentOffset: ReturnType<DragLayerMonitor['getSourceClientOffset']>;
+  isDragging: ReturnType<DragLayerMonitor['isDragging']>;
+  isOverPossibleTargets: boolean;
+  item: ReturnType<DragLayerMonitor['getItem']>;
+  itemType: ReturnType<DragLayerMonitor['getItemType']>;
+};
+export const DragLayer = DNDDragLayer<OwnProps, CollectedProps>(collect)(
+  DragLayerComponent
+);