Revert "🔨 Switch TemplateItem to use useOvermind (codesandbox#3070)"

Fixes codesandbox#3124

This reverts commit 45970c9.

Author: CompuIves

packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem.tsx

@@ -0,0 +1,73 @@
+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)
+);

packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/TemplateItem.tsx

@@ -0,0 +1 @@
+export { TemplateItem } from './TemplateItem';