From dadb9151608b5b214e8057107460de77f8ffc586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Wed, 4 Dec 2019 16:24:18 +0100
Subject: [PATCH 1/2] =?UTF-8?q?Revert=20"Revert=20"=F0=9F=94=A8=20Switch?=
 =?UTF-8?q?=20TemplateItem=20to=20use=20useOvermind=20(#3070)""?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 37223eac
---
 .../pages/Dashboard/Sidebar/TemplateItem.tsx  | 84 +++++++++++++++++++
 .../Sidebar/TemplateItem/TemplateItem.tsx     | 73 ----------------
 .../Dashboard/Sidebar/TemplateItem/index.tsx  |  1 -
 3 files changed, 84 insertions(+), 74 deletions(-)
 create mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
 delete mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/TemplateItem.tsx
 delete mode 100644 packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx

diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
new file mode 100644
index 00000000000..583bbcced5b
--- /dev/null
+++ b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
@@ -0,0 +1,84 @@
+import React, { FunctionComponent } from 'react';
+import {
+  DropTarget,
+  DropTargetCollector,
+  DropTargetConnector,
+  DropTargetMonitor,
+  DropTargetSpec,
+} from 'react-dnd';
+
+import { MAKE_TEMPLATE_DROP_KEY } from '../Content/SandboxCard';
+
+import { Item } from './Item';
+
+import TemplateIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/template.svg';
+
+type ComponentProps = {
+  currentPath: string;
+  teamId?: string;
+};
+type Props = ComponentProps & CollectedProps;
+const TemplateItemComponent: FunctionComponent<Props> = ({
+  canDrop,
+  connectDropTarget,
+  currentPath,
+  isOver,
+  teamId,
+}) => {
+  const path = teamId
+    ? `/dashboard/teams/${teamId}/templates`
+    : `/dashboard/templates`;
+
+  return connectDropTarget(
+    <div>
+      <Item
+        active={currentPath === path}
+        Icon={TemplateIcon}
+        name={teamId ? 'Team Templates' : 'My Templates'}
+        path={path}
+        style={
+          isOver && canDrop ? { backgroundColor: 'rgba(0, 0, 0, 0.3)' } : {}
+        }
+      />
+    </div>
+  );
+};
+
+const entryTarget: DropTargetSpec<ComponentProps> = {
+  canDrop: (_props, { getItem }) => getItem() !== null,
+  drop: ({ teamId }, { isOver }) => {
+    // Check if only child is selected:
+    if (!isOver({ shallow: true })) {
+      return {};
+    }
+
+    // Used in SandboxCard
+    return {
+      [MAKE_TEMPLATE_DROP_KEY]: true,
+      teamId,
+    };
+  },
+};
+
+const collectTarget: DropTargetCollector<CollectedProps> = (
+  connect,
+  monitor
+) => ({
+  canDrop: monitor.canDrop(),
+  // Call this function inside render()
+  // to let React DnD handle the drag events:
+  connectDropTarget: connect.dropTarget(),
+  // You can ask the monitor about the current drag state:
+  isOver: monitor.isOver({ shallow: true }),
+});
+
+type CollectedProps = {
+  canDrop: ReturnType<DropTargetMonitor['canDrop']>;
+  connectDropTarget: ReturnType<DropTargetConnector['dropTarget']>;
+  isOver: ReturnType<DropTargetMonitor['isOver']>;
+};
+export const TemplateItem = DropTarget<ComponentProps, CollectedProps>(
+  ['SANDBOX'],
+  entryTarget,
+  collectTarget
+)(TemplateItemComponent);
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/TemplateItem.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/TemplateItem.tsx
deleted file mode 100644
index d8d09ff8abe..00000000000
--- a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/TemplateItem.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { DropTarget } from 'react-dnd';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-// @ts-ignore
-import TemplateIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/template.svg';
-import { Item } from '../Item';
-import { MAKE_TEMPLATE_DROP_KEY } from '../../Content/SandboxCard';
-
-interface ITemplateItemProps {
-  currentPath: string;
-  teamId?: string;
-  canDrop?: boolean;
-  isOver?: boolean;
-  connectDropTarget?: any;
-}
-
-const TemplateItemComponent: React.FC<
-  ITemplateItemProps & RouteComponentProps
-> = ({ currentPath, isOver, canDrop, connectDropTarget, teamId }) => {
-  const url = teamId
-    ? `/dashboard/teams/${teamId}/templates`
-    : `/dashboard/templates`;
-
-  return connectDropTarget(
-    <div>
-      <Item
-        active={currentPath === url}
-        path={url}
-        Icon={TemplateIcon}
-        name={teamId ? 'Team Templates' : 'My Templates'}
-        style={
-          isOver && canDrop ? { backgroundColor: 'rgba(0, 0, 0, 0.3)' } : {}
-        }
-      />
-    </div>
-  );
-};
-
-export const entryTarget = {
-  drop: (props, monitor) => {
-    if (monitor == null) return {};
-
-    // Check if only child is selected:
-    if (!monitor.isOver({ shallow: true })) return {};
-
-    // Used in SandboxCard
-    return { [MAKE_TEMPLATE_DROP_KEY]: true, teamId: props.teamId };
-  },
-
-  canDrop: (props, monitor) => {
-    if (monitor == null) return false;
-    const source = monitor.getItem();
-    if (source == null) return false;
-
-    return !props.removedAt;
-  },
-};
-
-export function collectTarget(connectMonitor, monitor) {
-  return {
-    // Call this function inside render()
-    // to let React DnD handle the drag events:
-    connectDropTarget: connectMonitor.dropTarget(),
-    // You can ask the monitor about the current drag state:
-    isOver: monitor.isOver({ shallow: true }),
-    canDrop: monitor.canDrop(),
-    itemType: monitor.getItemType(),
-  };
-}
-
-export const TemplateItem = DropTarget(['SANDBOX'], entryTarget, collectTarget)(
-  withRouter(TemplateItemComponent)
-);
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx
deleted file mode 100644
index d9efde5c6ae..00000000000
--- a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { TemplateItem } from './TemplateItem';

From b271a13c05f8851dbf6396d1378625d685e927b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Wed, 4 Dec 2019 16:26:28 +0100
Subject: [PATCH 2/2] Fix entryTarget

---
 .../app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
index 583bbcced5b..8b2da26a6b6 100644
--- a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
+++ b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
@@ -45,10 +45,10 @@ const TemplateItemComponent: FunctionComponent<Props> = ({
 };
 
 const entryTarget: DropTargetSpec<ComponentProps> = {
-  canDrop: (_props, { getItem }) => getItem() !== null,
-  drop: ({ teamId }, { isOver }) => {
+  canDrop: (_props, monitor) => monitor.getItem() !== null,
+  drop: ({ teamId }, monitor) => {
     // Check if only child is selected:
-    if (!isOver({ shallow: true })) {
+    if (!monitor.isOver({ shallow: true })) {
       return {};
     }