From a1875859cb4a03a49e4cad82028e69d74b7e47c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Thu, 7 Nov 2019 03:00:54 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A8=20Switch=20TemplateItem=20to?=
 =?UTF-8?q?=20use=20useOvermind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Dashboard/Sidebar/TemplateItem.tsx  | 80 +++++++++++++++++++
 .../Sidebar/TemplateItem/TemplateItem.tsx     | 73 -----------------
 .../Dashboard/Sidebar/TemplateItem/index.tsx  |  1 -
 3 files changed, 80 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..2f01d671967
--- /dev/null
+++ b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
@@ -0,0 +1,80 @@
+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(
+    <Item
+      active={currentPath === path}
+      Icon={TemplateIcon}
+      name={teamId ? 'Team Templates' : 'My Templates'}
+      path={path}
+      style={isOver && canDrop ? { backgroundColor: 'rgba(0, 0, 0, 0.3)' } : {}}
+    />
+  );
+};
+
+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> = (
+  { dropTarget },
+  { canDrop, isOver }
+) => ({
+  canDrop: canDrop(),
+  // Call this function inside render()
+  // to let React DnD handle the drag events:
+  connectDropTarget: dropTarget(),
+  // You can ask the monitor about the current drag state:
+  isOver: 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 b91a538a33bcb6b981a00edb8ceda22d3c8c5bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Thu, 28 Nov 2019 17:26:22 +0100
Subject: [PATCH 2/2] Resolve discussions

---
 .../pages/Dashboard/Sidebar/TemplateItem.tsx  | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
index 2f01d671967..583bbcced5b 100644
--- a/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
+++ b/packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx
@@ -30,13 +30,17 @@ const TemplateItemComponent: FunctionComponent<Props> = ({
     : `/dashboard/templates`;
 
   return connectDropTarget(
-    <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>
+      <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>
   );
 };
 
@@ -57,15 +61,15 @@ const entryTarget: DropTargetSpec<ComponentProps> = {
 };
 
 const collectTarget: DropTargetCollector<CollectedProps> = (
-  { dropTarget },
-  { canDrop, isOver }
+  connect,
+  monitor
 ) => ({
-  canDrop: canDrop(),
+  canDrop: monitor.canDrop(),
   // Call this function inside render()
   // to let React DnD handle the drag events:
-  connectDropTarget: dropTarget(),
+  connectDropTarget: connect.dropTarget(),
   // You can ask the monitor about the current drag state:
-  isOver: isOver({ shallow: true }),
+  isOver: monitor.isOver({ shallow: true }),
 });
 
 type CollectedProps = {