feat(import): allow deletion and better refresh

statsfm · Jan 29, 2024 · 24af718 · 24af718
1 parent 7b802bc
commit 24af718
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 52 deletions.
diff --git a/src/components/Import/ImportItem.tsx b/src/components/Import/ImportItem.tsx
@@ -7,44 +7,52 @@ import {
   getMonthName,
   getOrdinal,
 } from '@/utils/imports';
+import { Button } from '../Button';
 
-export const ImportItem: FC<UserImport> = ({
-  name,
-  status,
-  count,
-  createdAt,
-}) => (
-  <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">
-          {name ?? 'No name present'}
-        </p>
-        <div
-          className={clsx(
-            'my-0 flex-none rounded-md bg-foreground py-1 px-2 text-xs font-medium',
-            IMPORT_STATUS_COLORS[
-              status.toString() as keyof typeof IMPORT_STATUS_COLORS
-            ]
-          )}
-        >
-          {IMPORT_STATUS[status.toString() as keyof typeof IMPORT_STATUS]}
+export const ImportItem: FC<
+  UserImport & { deleteItem: (id: number) => Promise<void> }
+> = ({ name, status, count, createdAt, id, deleteItem }) => {
+  return (
+    <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">
+            {name ?? 'No name present'}
+          </p>
+          <div
+            className={clsx(
+              'my-0 flex-none rounded-md bg-foreground py-1 px-2 text-xs font-medium',
+              IMPORT_STATUS_COLORS[
+                status.toString() as keyof typeof IMPORT_STATUS_COLORS
+              ]
+            )}
+          >
+            {IMPORT_STATUS[status.toString() as keyof typeof IMPORT_STATUS]}
+          </div>
+        </div>
+        <div className="mt-1 flex items-center gap-x-2 text-sm leading-5 text-gray-500">
+          <p className="whitespace-nowrap">
+            Imported on the {createdAt.getDate()}
+            {getOrdinal(createdAt.getDate())} of{' '}
+            {getMonthName(createdAt.getMonth())} {createdAt.getFullYear()} at{' '}
+            {createdAt.toLocaleTimeString(navigator.language, {
+              timeStyle: 'short',
+            })}
+          </p>
+          <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.toLocaleString()} streams</p>
         </div>
       </div>
-      <div className="mt-1 flex items-center gap-x-2 text-sm leading-5 text-gray-500">
-        <p className="whitespace-nowrap">
-          Imported on the {createdAt.getDate()}
-          {getOrdinal(createdAt.getDate())} of{' '}
-          {getMonthName(createdAt.getMonth())} {createdAt.getFullYear()} at{' '}
-          {createdAt.toLocaleTimeString(navigator.language, {
-            timeStyle: 'short',
-          })}
-        </p>
-        <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.toLocaleString()} streams</p>
+      <div className="flex flex-none gap-x-4">
+        <Button
+          onClick={() => deleteItem(id)}
+          className="bg-red-500 text-white hover:bg-red-700"
+        >
+          Delete
+        </Button>
       </div>
-    </div>
-  </li>
-);
+    </li>
+  );
+};
diff --git a/src/components/Import/ImportList.tsx b/src/components/Import/ImportList.tsx
@@ -14,7 +14,10 @@ export const ImportList: FC<{
   const api = useApi();
   const [imports, setImports] = useState<UserImport[]>([]);
   const [loading, setLoading] = useState(true);
-  const [allowRefetch, setAllowRefetch] = useState(true);
+  const [allowRefetch, setAllowRefetch] = useState(false);
+  const [allowRefetchTimeout, setAllowRefetchTimeout] = useState<
+    NodeJS.Timeout | undefined
+  >();
 
   useEffect(() => {
     (async () => {
@@ -29,6 +32,11 @@ export const ImportList: FC<{
           }))
           .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
       );
+      if (
+        imports.map((i) => i.status).some((s) => [0, 1].includes(s)) &&
+        !allowRefetchTimeout
+      )
+        setAllowRefetch(true);
       setLoading(false);
     })();
   }, [refetchCounter]);
@@ -51,26 +59,48 @@ export const ImportList: FC<{
     <div>
       <div className="flex items-center justify-between">
         <h2>Your imports</h2>
-        <Button
-          onClick={() => {
-            setAllowRefetch(false);
-            triggerRefetch();
-            setTimeout(() => {
-              setAllowRefetch(true);
-            }, 30000);
-          }}
-          disabled={!allowRefetch}
-        >
-          Refresh
-        </Button>
+        {allowRefetch && (
+          <Button
+            onClick={() => {
+              setAllowRefetch(false);
+              triggerRefetch();
+              setAllowRefetchTimeout(
+                setTimeout(() => {
+                  setAllowRefetch(true);
+                }, 30000)
+              );
+            }}
+          >
+            Refresh
+          </Button>
+        )}
       </div>
-      <ul role="list" className="divide-y divide-foreground pt-3">
+      <ul role="list" className="mt-3 divide-y divide-foreground">
         {loading
           ? Array(10)
               .fill(null)
               .map((_n, i) => <ImportItemSkeleton key={i} />)
           : imports.map((importItem) => (
-              <ImportItem {...importItem} key={importItem.hash} />
+              <ImportItem
+                {...importItem}
+                key={importItem.hash}
+                deleteItem={async (id) => {
+                  const importItem = imports.find((i) => i.id === id)!;
+                  setImports(imports.filter((i) => i.id !== id));
+                  await api.me.removeImport(id).catch(() => {
+                    // Add import back in the right place
+                    setImports(
+                      imports
+                        .filter((i) => i.id !== id)
+                        .concat(importItem)
+                        .sort(
+                          (a, b) =>
+                            b.createdAt.getTime() - a.createdAt.getTime()
+                        )
+                    );
+                  });
+                }}
+              />
             ))}
       </ul>
     </div>