feat(import): re-imagined import

package.json

@@ -18,6 +18,7 @@
     "@statsfm/statsfm.js": "^2.1.8",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.7",
+    "@zip.js/zip.js": "^2.7.33",
     "apexcharts": "^3.42.0",
     "chart.js": "^3.9.1",
     "clsx": "^1.2.1",
@@ -37,14 +38,16 @@
     "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-icons": "^4.4.0",
     "react-infinite-scroller": "^1.2.6",
     "react-use": "^17.4.0",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
     "sharp": "^0.31.2",
     "tailwind-scrollbar": "^2.0.1",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",

src/components/Import/ImportItem.tsx

@@ -43,7 +43,7 @@ export const ImportItem: FC<UserImport> = ({
         <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
           <circle cx={1} cy={1} r={1} />
         </svg>
-        <p className="truncate">{count} streams</p>
+        <p className="truncate">{count.toLocaleString()} streams</p>
       </div>
     </div>
   </li>

src/components/Import/ImportList.tsx

@@ -4,17 +4,21 @@ import { useState, type FC, useEffect } from 'react';
 import { MdWarning } from 'react-icons/md';
 import { ImportItemSkeleton } from './ImportItemSkeleton';
 import { ImportItem } from './ImportItem';
+import { Button } from '../Button';
 
-export const ImportList: FC<{ refetchCounter: number }> = ({
-  refetchCounter,
-}) => {
+export const ImportList: FC<{
+  refetchCounter: Date;
+  triggerRefetch: () => void;
+}> = ({ refetchCounter, triggerRefetch }) => {
   const { user } = useAuth();
   const api = useApi();
   const [imports, setImports] = useState<UserImport[]>([]);
   const [loading, setLoading] = useState(true);
+  const [allowRefetch, setAllowRefetch] = useState(true);
 
   useEffect(() => {
     (async () => {
+      setLoading(true);
       const imports = await api.me.imports();
       setImports(
         imports
@@ -37,15 +41,29 @@ export const ImportList: FC<{ refetchCounter: number }> = ({
         <MdWarning className="text-5xl text-yellow-600" />
         <p className="mt-4 text-lg text-gray-500">
           It looks like you don&apos;t have any imports yet! Get started by
-          using the <span className="font-semibold">Import</span> button above.
+          uploading your data above!
         </p>
       </div>
     );
   }
 
   return (
     <div>
-      <h2>Imported files</h2>
+      <div className="flex items-center justify-between">
+        <h2>Your imports</h2>
+        <Button
+          onClick={() => {
+            setAllowRefetch(false);
+            triggerRefetch();
+            setTimeout(() => {
+              setAllowRefetch(true);
+            }, 30000);
+          }}
+          disabled={!allowRefetch}
+        >
+          Refresh
+        </Button>
+      </div>
       <ul role="list" className="divide-y divide-foreground pt-3">
         {loading
           ? Array(10)

src/components/Import/UploadedItem.tsx

@@ -0,0 +1,48 @@
+import { type FC } from 'react';
+import clsx from 'clsx';
+import type { UploadedImportFile } from '@/utils/imports';
+import {
+  UPLOADED_FILE_STATUS,
+  UPLOADED_FILE_STATUS_COLORS,
+  UploadedFilesStatus,
+} from '@/utils/imports';
+import { Button } from '../Button';
+
+export const UploadedItem: FC<
+  UploadedImportFile & { index: number; onRemove: (index: number) => void }
+> = (data) => (
+  <li className="flex items-center justify-between gap-x-6 py-5">
+    <div className="min-w-0">
+      <div className="flex items-start gap-x-3">
+        <p className="my-0 font-semibold leading-6 text-white">
+          {data.name.replaceAll('Streaming_History_Audio_', '')}
+        </p>
+        <div
+          className={clsx(
+            'my-0 flex-none rounded-md bg-foreground py-1 px-2 text-xs font-medium',
+            UPLOADED_FILE_STATUS_COLORS[data.status]
+          )}
+        >
+          {UPLOADED_FILE_STATUS[data.status]}
+        </div>
+      </div>
+      <div className="mt-1 flex items-center gap-x-2 text-sm leading-5 text-gray-500">
+        <p className="truncate">
+          aprox{' '}
+          {data.status === UploadedFilesStatus.Error
+            ? '0'
+            : data.data.length.toLocaleString()}{' '}
+          streams
+        </p>
+      </div>
+    </div>
+    <div className="flex flex-none gap-x-4">
+      <Button
+        onClick={() => data.onRemove(data.index)}
+        className="bg-red-500 text-white hover:bg-red-700"
+      >
+        Remove file
+      </Button>
+    </div>
+  </li>
+);