From 01b99d875be61c1fe9475ce216ec43d9b761f965 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 21 Apr 2023 17:33:20 -0500
Subject: [PATCH] Remove UploadArea component

---
 .../features/ui/components/upload-area.tsx    | 71 -------------------
 .../features/ui/util/async-components.ts      |  4 --
 2 files changed, 75 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/upload-area.tsx

diff --git a/app/soapbox/features/ui/components/upload-area.tsx b/app/soapbox/features/ui/components/upload-area.tsx
deleted file mode 100644
index 8eba75ed5..000000000
--- a/app/soapbox/features/ui/components/upload-area.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { spring } from 'react-motion';
-
-import { Icon, Stack, Text } from 'soapbox/components/ui';
-
-import Motion from '../util/optional-motion';
-
-interface IUploadArea {
-  /** Whether the upload area is active. */
-  active: boolean
-  /** Callback when the upload area is closed. */
-  onClose: () => void
-}
-
-/** Component to display when a file is dragged over the UI. */
-const UploadArea: React.FC<IUploadArea> = ({ active, onClose }) => {
-  const handleKeyUp = (e: KeyboardEvent) => {
-    if (active) {
-      switch (e.key) {
-        case 'Escape':
-          e.preventDefault();
-          e.stopPropagation();
-          onClose();
-          break;
-      }
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keyup', handleKeyUp, false);
-
-    return () => window.removeEventListener('keyup', handleKeyUp);
-  }, []);
-
-  return (
-    <Motion
-      defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }}
-      style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}
-    >
-      {({ backgroundOpacity, backgroundScale }) => (
-        <div
-          className={clsx({
-            'flex items-center justify-center bg-gray-700/90 h-full w-full absolute left-0 top-0 z-1000 pointer-events-none': true,
-            'visible': active,
-            'invisible': !active,
-          })}
-          style={{ opacity: backgroundOpacity }}
-        >
-          <div className='relative flex h-40 w-80 p-2'>
-            <div className='absolute inset-0' style={{ transform: `scale(${backgroundScale})` }} />
-
-            <Stack space={3} justifyContent='center' alignItems='center'>
-              <Icon
-                src={require('@tabler/icons/cloud-upload.svg')}
-                className='h-12 w-12 text-white/90'
-              />
-
-              <Text size='xl' theme='white'>
-                <FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' />
-              </Text>
-            </Stack>
-          </div>
-        </div>
-      )}
-    </Motion>
-  );
-};
-
-export default UploadArea;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index e8187db46..0b50f0194 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -374,10 +374,6 @@ export function SidebarMenu() {
   return import(/* webpackChunkName: "features/ui" */'../../../components/sidebar-menu');
 }
 
-export function UploadArea() {
-  return import(/* webpackChunkName: "features/compose" */'../components/upload-area');
-}
-
 export function ModalContainer() {
   return import(/* webpackChunkName: "features/ui" */'../containers/modal-container');
 }