cleanup 4

2026-07-03 18:41:49 -04:00
parent 232a821dc0
commit c9c9563a1f
24 changed files with 313 additions and 387 deletions
@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, type SyntheticEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { LoadingState } from '../components';
+import { LoadingState, Table, type Column } from '../components';
 import { useGetImportDirectory, usePostImport } from '../generated/anthoLumeAPIV1';
 import type { DirectoryItem } from '../generated/model';
 import { Button } from '../components/Button';
@@ -20,8 +20,7 @@ export default function AdminImportPage() {

  const postImport = usePostImport();

-  const directoryResponse =
-    directoryData?.status === 200 ? directoryData.data : null;
+  const directoryResponse = directoryData?.status === 200 ? directoryData.data : null;
  const directories = directoryResponse?.items ?? [];
  const currentPathDisplay = directoryResponse?.current_path ?? currentPath ?? '/data';

@@ -37,7 +36,8 @@ export default function AdminImportPage() {
    }
  };

-  const handleImport = () => {
+  const handleImport = (e: SyntheticEvent) => {
+    e.preventDefault();
    if (!selectedDirectory) return;

    postImport.mutate(
@@ -65,105 +65,83 @@ export default function AdminImportPage() {

  if (selectedDirectory) {
    return (
-      <div className="overflow-x-auto">
-        <div className="inline-block min-w-full overflow-hidden rounded shadow-sm">
-          <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
-            <p className="text-lg font-semibold text-content">Selected Import Directory</p>
-            <form className="flex flex-col gap-4" onSubmit={handleImport}>
-              <div className="flex w-full justify-between gap-4">
-                <div className="flex items-center gap-4 text-content">
-                  <FolderOpenIcon size={20} />
-                  <p className="break-all text-lg font-medium">{selectedDirectory}</p>
-                </div>
-                <div className="mr-4 flex flex-col justify-around gap-2 text-content">
-                  <div className="inline-flex items-center gap-2">
-                    <input
-                      type="radio"
-                      id="direct"
-                      checked={importType === 'DIRECT'}
-                      onChange={() => setImportType('DIRECT')}
-                    />
-                    <label htmlFor="direct">Direct</label>
-                  </div>
-                  <div className="inline-flex items-center gap-2">
-                    <input
-                      type="radio"
-                      id="copy"
-                      checked={importType === 'COPY'}
-                      onChange={() => setImportType('COPY')}
-                    />
-                    <label htmlFor="copy">Copy</label>
-                  </div>
-                </div>
+      <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
+        <p className="text-lg font-semibold text-content">Selected Import Directory</p>
+        <form className="flex flex-col gap-4" onSubmit={handleImport}>
+          <div className="flex w-full justify-between gap-4">
+            <div className="flex items-center gap-4 text-content">
+              <FolderOpenIcon size={20} />
+              <p className="break-all text-lg font-medium">{selectedDirectory}</p>
+            </div>
+            <div className="mr-4 flex flex-col justify-around gap-2 text-content">
+              <div className="inline-flex items-center gap-2">
+                <input
+                  type="radio"
+                  id="direct"
+                  checked={importType === 'DIRECT'}
+                  onChange={() => setImportType('DIRECT')}
+                />
+                <label htmlFor="direct">Direct</label>
              </div>
-              <div className="flex gap-4">
-                <Button type="submit" className="px-10 py-2 text-base">
-                  Import Directory
-                </Button>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={handleCancel}
-                  className="px-10 py-2 text-base"
-                >
-                  Cancel
-                </Button>
+              <div className="inline-flex items-center gap-2">
+                <input
+                  type="radio"
+                  id="copy"
+                  checked={importType === 'COPY'}
+                  onChange={() => setImportType('COPY')}
+                />
+                <label htmlFor="copy">Copy</label>
              </div>
-            </form>
+            </div>
          </div>
-        </div>
+          <div className="flex gap-4">
+            <Button type="submit" className="px-10 py-2 text-base">
+              Import Directory
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={handleCancel}
+              className="px-10 py-2 text-base"
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
      </div>
    );
  }

+  const directoryColumns: Column<DirectoryItem>[] = [
+    {
+      id: 'select',
+      header: '',
+      className: 'w-12',
+      render: item => (
+        <button onClick={() => item.name && handleSelectDirectory(item.name)}>
+          <FolderOpenIcon size={20} />
+        </button>
+      ),
+    },
+    { id: 'name', header: currentPathDisplay, render: item => item.name ?? '' },
+  ];
+
  return (
-    <div className="overflow-x-auto">
-      <div className="inline-block min-w-full overflow-hidden rounded shadow-sm">
-        <table className="min-w-full bg-surface text-sm leading-normal text-content">
-          <thead className="text-content-muted">
-            <tr>
-              <th className="w-12 border-b border-border p-3 text-left font-normal"></th>
-              <th className="break-all border-b border-border p-3 text-left font-normal">
-                {currentPath}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {currentPath !== '/' && (
-              <tr>
-                <td className="border-b border-border p-3 text-content-muted"></td>
-                <td className="border-b border-border p-3">
-                  <button onClick={handleNavigateUp}>
-                    <p>../</p>
-                  </button>
-                </td>
-              </tr>
-            )}
-            {directories.length === 0 ? (
-              <tr>
-                <td className="p-3 text-center" colSpan={2}>
-                  No Folders
-                </td>
-              </tr>
-            ) : (
-              directories.map((item: DirectoryItem) => (
-                <tr key={item.name}>
-                  <td className="border-b border-border p-3 text-content-muted">
-                    <button onClick={() => item.name && handleSelectDirectory(item.name)}>
-                      <FolderOpenIcon size={20} />
-                    </button>
-                  </td>
-                  <td className="border-b border-border p-3">
-                    <button onClick={() => item.name && handleSelectDirectory(item.name)}>
-                      <p>{item.name ?? ''}</p>
-                    </button>
-                  </td>
-                </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
+    <div className="flex flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
+      {currentPathDisplay !== '/' && (
+        <button
+          onClick={handleNavigateUp}
+          className="self-start text-content hover:text-primary-600"
+        >
+          ../
+        </button>
+      )}
+      <Table
+        columns={directoryColumns}
+        data={directories}
+        emptyMessage="No Folders"
+        rowKey={item => item.name ?? ''}
+      />
    </div>
  );
 }