@haus-tech/product-import-export-plugin 3.6.2 → 3.6.3

package/src/dashboard/exported-list.tsx

@@ -1,35 +1,16 @@
 import {
   Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  Input,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  toast,
 } from '@vendure/dashboard'
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DownloadIcon,
-  SearchIcon,
-  TrashIcon,
-} from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
-import { useActiveChannelKey } from './use-active-channel-key'
-import { getChannelHeader, getServerLocation } from './utils'
+import { getServerLocation, getChannelHeader } from './utils'
+import { useState, useEffect, useMemo } from 'react'
+import { DownloadIcon, ChevronLeftIcon, ChevronRightIcon, TrashIcon } from 'lucide-react'
+import { toast } from 'sonner'
 
 interface ExportedFile {
   fileName: string
@@ -37,14 +18,12 @@ interface ExportedFile {
   created: string
 }
 
-const ITEMS_PER_PAGE = 8
+const itemsPerPage = 10
 const POLL_INTERVAL_MS = 10_000
 
 export function ExportedList() {
-  const activeChannelId = useActiveChannelKey()
   const [exportedFiles, setExportedFiles] = useState<ExportedFile[]>([])
   const [error, setError] = useState<string | null>(null)
-  const [search, setSearch] = useState('')
   const [currentPage, setCurrentPage] = useState(1)
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
   const [fileToDelete, setFileToDelete] = useState<string | null>(null)
@@ -74,42 +53,27 @@ export function ExportedList() {
   }
 
   useEffect(() => {
-    if (!activeChannelId) return
-    setSearch('')
-    setCurrentPage(1)
     void getExportFiles()
-  }, [activeChannelId])
+  }, [])
 
   useEffect(() => {
-    if (!activeChannelId) return
-
     const intervalId = setInterval(() => {
       void getExportFiles()
     }, POLL_INTERVAL_MS)
 
     return () => clearInterval(intervalId)
-  }, [activeChannelId])
+  }, [])
 
-  const filteredFiles = useMemo(() => {
-    let result = exportedFiles
-    if (search) {
-      const q = search.toLowerCase()
-      result = result.filter((f) => f.fileName.toLowerCase().includes(q))
-    }
-    return result
-  }, [exportedFiles, search])
-
-  const totalPages = Math.max(1, Math.ceil(filteredFiles.length / ITEMS_PER_PAGE))
+  // Pagination calculations
   const paginatedFiles = useMemo(() => {
-    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE
-    return filteredFiles.slice(startIndex, startIndex + ITEMS_PER_PAGE)
-  }, [filteredFiles, currentPage])
+    const startIndex = (currentPage - 1) * itemsPerPage
+    const endIndex = startIndex + itemsPerPage
+    return exportedFiles.slice(startIndex, endIndex)
+  }, [exportedFiles, currentPage])
 
-  useEffect(() => {
-    if (currentPage > totalPages) setCurrentPage(1)
-  }, [totalPages, currentPage])
+  const totalPages = Math.ceil(exportedFiles.length / itemsPerPage)
 
-  const downloadFile = async (fileName: string) => {
+  const downLoadFile = async (fileName: string) => {
     const serverPath = getServerLocation()
     const res = await fetch(`${serverPath}/product-export/download/${fileName}`, {
       method: 'GET',
@@ -166,138 +130,94 @@ export function ExportedList() {
 
   const formatFileSize = (bytes: number): string => {
     if (bytes < 1024) return bytes + ' B'
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
-    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'
+    return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed">
+        <p className="text-red-500">{error}</p>
+      </div>
+    )
   }
 
   return (
-    <Card>
-      <CardHeader className="flex flex-col gap-4 space-y-0 pb-4 md:flex-row md:items-start md:justify-between md:gap-6">
-        <div className="min-w-0 space-y-1 md:pr-4">
-          <CardTitle className="mb-0">Recent exports</CardTitle>
-          <CardDescription className=" text-xs">
-            Completed CSV exports for this channel. Search by file name to filter the list.
-          </CardDescription>
-        </div>
-        <div className="relative w-full shrink-0 md:w-72 lg:w-80">
-          <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            type="search"
-            placeholder="Search by file name…"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="pl-8"
-            aria-label="Search exports by file name"
-          />
-        </div>
-      </CardHeader>
-      <CardContent>
-        {error ? (
-          <div className="text-sm text-destructive py-4">{error}</div>
-        ) : exportedFiles.length === 0 ? (
-          <div className="text-center py-10 text-sm text-muted-foreground">
-            <p>No exports yet. Run an export to see files listed here.</p>
+    <div>
+      {exportedFiles.length > 0 && (
+        <div className="space-y-2">
+          <div className="border rounded-md divide-y">
+            {paginatedFiles.map((file) => (
+              <div key={file.fileName} className="p-4 hover:bg-muted/50 transition-colors">
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                  <div className="flex-1">
+                    <p className="font-medium">{file.fileName}</p>
+                    <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 text-sm text-muted-foreground mt-1">
+                      <span>Size: {formatFileSize(file.size)}</span>
+                      <span>
+                        Created:{' '}
+                        {new Date(file.created).toLocaleString(navigator.language || undefined)}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="outline" size="sm" onClick={() => downLoadFile(file.fileName)}>
+                      <DownloadIcon className="mr-2 h-4 w-4" />
+                      Download
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleDeleteClick(file.fileName)}
+                      className="text-destructive hover:text-destructive"
+                    >
+                      <TrashIcon className="h-4 w-4" /> Delete
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
           </div>
-        ) : (
-          <>
-            <div className="rounded-md border overflow-hidden">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-[140px]">Type</TableHead>
-                    <TableHead>File</TableHead>
-                    <TableHead>Created</TableHead>
-                    <TableHead className="text-right">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {paginatedFiles.length === 0 ? (
-                    <TableRow>
-                      <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
-                        No results match your filters.
-                      </TableCell>
-                    </TableRow>
-                  ) : (
-                    paginatedFiles.map((file) => (
-                      <TableRow key={file.fileName}>
-                        <TableCell>
-                          <div className="flex items-center gap-2">
-                            <span className="bg-primary/10 text-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
-                              <DownloadIcon className="h-4 w-4" aria-hidden />
-                            </span>
-                            <span className="text-sm font-medium">Export</span>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <div className="font-medium truncate max-w-xs">{file.fileName}</div>
-                          <div className="text-xs text-muted-foreground">
-                            {formatFileSize(file.size)}
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <span className="text-sm">
-                            {new Date(file.created).toLocaleString(navigator.language || undefined)}
-                          </span>
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <div className="inline-flex gap-2">
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => downloadFile(file.fileName)}
-                            >
-                              <DownloadIcon className="mr-1 h-3.5 w-3.5" /> Download
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleDeleteClick(file.fileName)}
-                              className="text-muted-foreground hover:text-destructive"
-                            >
-                              <TrashIcon className="h-3.5 w-3.5" />
-                            </Button>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
-            </div>
 
-            {filteredFiles.length > ITEMS_PER_PAGE && (
-              <div className="flex items-center justify-between mt-4">
-                <p className="text-xs text-muted-foreground">
-                  Showing {(currentPage - 1) * ITEMS_PER_PAGE + 1}–
-                  {Math.min(currentPage * ITEMS_PER_PAGE, filteredFiles.length)} of{' '}
-                  {filteredFiles.length}
-                </p>
-                <div className="flex items-center gap-1">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
-                    disabled={currentPage === 1}
-                  >
-                    <ChevronLeftIcon className="h-4 w-4" />
-                  </Button>
-                  <span className="text-sm px-2 text-muted-foreground">
-                    {currentPage} / {totalPages}
-                  </span>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
-                    disabled={currentPage === totalPages}
-                  >
-                    <ChevronRightIcon className="h-4 w-4" />
-                  </Button>
+          {/* Pagination controls */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between py-2 border-t">
+              <div className="text-sm text-muted-foreground">
+                Showing {(currentPage - 1) * itemsPerPage + 1} to{' '}
+                {Math.min(currentPage * itemsPerPage, exportedFiles.length)} of{' '}
+                {exportedFiles.length}
+              </div>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                >
+                  <ChevronLeftIcon className="h-4 w-4" />
+                </Button>
+                <div className="text-sm text-muted-foreground px-2">
+                  {currentPage} / {totalPages}
                 </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+                  disabled={currentPage === totalPages}
+                >
+                  <ChevronRightIcon className="h-4 w-4" />
+                </Button>
               </div>
-            )}
-          </>
-        )}
-      </CardContent>
+            </div>
+          )}
+        </div>
+      )}
+
+      {exportedFiles.length === 0 && (
+        <div className="text-center py-8 text-muted-foreground text-sm">
+          <p>You have no exported files</p>
+        </div>
+      )}
 
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent>
@@ -317,7 +237,7 @@ export function ExportedList() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </Card>
+    </div>
   )
 }