feat: fix upload display & prev uploads on page hit (#26)

* feat: upload progress provides details on complete

* feat: display previously uploaded content

* chore: some cleanup

* fix: showing list always, show drag-n-drop always

* fix: ipni check displays error properly

* chore: fix lint

* chore: update package-lock.json

* chore: add debug logging for shared-pieces issue

* fix: upload shows above previously uploaded files

* fix: latest style updates

* fix: upload form always visible

* fix: loading screen for prior pieces

* chore: fix lint

Author: SgtPooki

package-lock.json

@@ -1,15 +1,68 @@
-import { useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
+import { FilecoinPinContext } from '../../context/filecoin-pin-provider.tsx'
+import { useDatasetPieces } from '../../hooks/use-dataset-pieces.ts'
 import { useFilecoinUpload } from '../../hooks/use-filecoin-upload.ts'
+import { formatFileSize } from '../../utils/format-file-size.ts'
+import { Heading } from '../ui/heading.tsx'
+import { LoadingState } from '../ui/loading-state.tsx'
+import { PageTitle } from '../ui/page-title.tsx'
 import DragNDrop from '../upload/drag-n-drop.tsx'
+import type { UploadProgress as UploadProgressType } from '../upload/upload-progress.tsx'
 import UploadProgress from '../upload/upload-progress.tsx'
 import './content.css'
-import { PageTitle } from '../ui/page-title.tsx'
-import { Heading } from '../ui/heading.tsx'
+
+// Completed state for displaying upload history
+const COMPLETED_PROGRESS: UploadProgressType[] = [
+  { step: 'creating-car', status: 'completed', progress: 100 },
+  { step: 'checking-readiness', status: 'completed', progress: 100 },
+  { step: 'uploading-car', status: 'completed', progress: 100 },
+  { step: 'announcing-cids', status: 'completed', progress: 100 },
+  { step: 'finalizing-transaction', status: 'completed', progress: 100 },
+]
 
 export default function Content() {
   const [uploadedFile, setUploadedFile] = useState<{ file: File; cid: string } | null>(null)
   const [isExpanded, setIsExpanded] = useState(true)
+  const [expandedHistoryItems, setExpandedHistoryItems] = useState<Set<string>>(new Set())
+  const [dragDropKey, setDragDropKey] = useState(0) // Key to force DragNDrop remount
   const { uploadState, uploadFile, resetUpload } = useFilecoinUpload()
+  const { pieces: uploadHistory, refreshPieces, isLoading: isLoadingPieces } = useDatasetPieces()
+  const context = useContext(FilecoinPinContext)
+  if (!context) {
+    throw new Error('Content must be used within FilecoinPinProvider')
+  }
+
+  const { providerInfo, wallet, synapse } = context
+
+  // Determine if we're still initializing (wallet, synapse, provider)
+  // Note: We don't block on isLoadingPieces - users can upload while history loads
+  const isInitializing = wallet.status === 'loading' || wallet.status === 'idle'
+
+  // Get loading message based on current state
+  const getLoadingMessage = () => {
+    if (wallet.status === 'loading' || wallet.status === 'idle') {
+      return 'Connecting to Filecoin network...'
+    }
+    if (!synapse) {
+      return 'Initializing storage service...'
+    }
+    if (!providerInfo) {
+      return 'Selecting storage provider...'
+    }
+    return 'Preparing upload interface...'
+  }
+
+  // If wallet failed to load, show error instead of spinner
+  if (wallet.status === 'error') {
+    return (
+      <div className="content">
+        <PageTitle />
+        <div className="error-message">
+          <p>Failed to connect to Filecoin network: {wallet.error}</p>
+        </div>
+      </div>
+    )
+  }
 
   const handleUpload = (file: File) => {
     // Set uploadedFile immediately to switch to progress view
@@ -27,61 +80,98 @@ export default function Content() {
       })
   }
 
-  const formatFileSize = (bytes: number): string => {
-    if (bytes === 0) return '0 Bytes'
-    const k = 1024
-    const sizes = ['Bytes', 'KB', 'MB', 'GB']
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
-  }
+  // Refresh pieces list when upload completes
+  useEffect(() => {
+    const isUploadComplete = !uploadState.isUploading && uploadState.progress.every((p) => p.status === 'completed')
+    if (isUploadComplete && uploadState.currentCid) {
+      console.debug('[Content] Upload completed, refreshing pieces list')
+      // Add a small delay to ensure the piece is indexed
+      setTimeout(() => {
+        refreshPieces()
+        // Clear the uploadedFile after adding to history so the upload form shows again
+        setUploadedFile(null)
+        resetUpload()
+        // Increment key to force DragNDrop to remount and clear its state
+        setDragDropKey((prev) => prev + 1)
+      }, 2000)
+    }
+  }, [uploadState.isUploading, uploadState.progress, uploadState.currentCid, refreshPieces, resetUpload])
+
+  // Auto-clear upload state on error
+  useEffect(() => {
+    if (uploadState.error) {
+      // Keep showing the error for a bit, then auto-clear after 5 seconds
+      const timer = setTimeout(() => {
+        setUploadedFile(null)
+        resetUpload()
+        // Increment key to force DragNDrop to remount and clear its state
+        setDragDropKey((prev) => prev + 1)
+      }, 5000)
+      return () => clearTimeout(timer)
+    }
+  }, [uploadState.error, resetUpload])
 
   return (
     <div className="space-y-10">
       <PageTitle />
 
-      {uploadedFile ? (
+      {/* Show drag-n-drop - disabled when actively uploading */}
+      <div className="space-y-6">
+        <Heading tag="h2">Upload a file</Heading>
+        <DragNDrop isUploading={uploadState.isUploading} key={dragDropKey} onUpload={handleUpload} />
+      </div>
+
+      {/* Show active upload progress */}
+      {uploadedFile && (
         <div className="space-y-6">
-          <Heading tag="h2">Uploaded files</Heading>
+          <Heading tag="h2">Current upload</Heading>
           <UploadProgress
+            cid={uploadState.currentCid}
             fileName={uploadedFile.file.name}
             fileSize={formatFileSize(uploadedFile.file.size)}
             isExpanded={isExpanded}
+            network={wallet.status === 'ready' ? wallet.data.network : undefined}
             onToggleExpanded={() => setIsExpanded(!isExpanded)}
+            pieceCid={uploadState.pieceCid}
             progress={uploadState.progress}
+            providerName={providerInfo?.name || (providerInfo?.id ? String(providerInfo.id) : undefined)}
+            transactionHash={uploadState.transactionHash}
           />
-          {uploadState.error && (
-            <div className="error-message">
-              <p>Upload failed: {uploadState.error}</p>
-              <button
-                onClick={() => {
-                  setUploadedFile(null)
-                  resetUpload()
-                }}
-                type="button"
-              >
-                Try Again
-              </button>
-            </div>
-          )}
-          {!uploadState.isUploading && uploadState.progress.every((p) => p.status === 'completed') && (
-            <div className="success-message">
-              <p>✅ File successfully uploaded! CID: {uploadedFile.cid}</p>
-              <button
-                onClick={() => {
-                  setUploadedFile(null)
-                  resetUpload()
-                }}
-                type="button"
-              >
-                Upload Another File
-              </button>
-            </div>
-          )}
         </div>
-      ) : (
+      )}
+
+      {(isLoadingPieces || isInitializing) && uploadHistory.length === 0 && (
+        <LoadingState message={getLoadingMessage()} />
+      )}
+      {/* Always show upload history when available */}
+      {uploadHistory.length > 0 && (
         <div className="space-y-6">
-          <Heading tag="h2">Upload a file</Heading>
-          <DragNDrop isUploading={uploadState.isUploading} onUpload={handleUpload} />
+          <Heading tag="h2">Uploaded files</Heading>
+          {uploadHistory.map((upload) => (
+            <UploadProgress
+              cid={upload.cid}
+              fileName={upload.fileName}
+              fileSize={upload.fileSize}
+              isExpanded={expandedHistoryItems.has(upload.id)}
+              key={upload.id}
+              network={upload.network}
+              onToggleExpanded={() => {
+                setExpandedHistoryItems((prev) => {
+                  const next = new Set(prev)
+                  if (next.has(upload.id)) {
+                    next.delete(upload.id)
+                  } else {
+                    next.add(upload.id)
+                  }
+                  return next
+                })
+              }}
+              pieceCid={upload.pieceCid}
+              progress={COMPLETED_PROGRESS}
+              providerName={upload.providerName}
+              transactionHash={upload.transactionHash}
+            />
+          ))}
         </div>
       )}
     </div>

src/components/layout/content.tsx

@@ -1,5 +1,5 @@
-import { CircleCheck, LoaderCircle } from 'lucide-react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { CircleCheck, LoaderCircle } from 'lucide-react'
 import { cn } from '../../utils/cn.ts'
 import type { UploadProgress } from '../upload/upload-progress.tsx'
 

src/components/ui/badge-status.tsx

@@ -8,7 +8,7 @@ type CardWrapperProps = {
 type CardHeaderProps = {
   title: string
   status: UploadProgress['status']
-  estimatedTime?: number
+  estimatedTime?: string
 }
 
 type CardContentProps = {
@@ -23,7 +23,7 @@ function CardHeader({ title, status, estimatedTime }: CardHeaderProps) {
   return (
     <div className="flex items-center justify-between">
       <h3 className="font-medium">{title}</h3>
-      {status === 'in-progress' && estimatedTime && <span className="text-sm text-zinc-400">{estimatedTime}%</span>}
+      {status === 'in-progress' && estimatedTime && <span className="text-sm text-zinc-400">{estimatedTime}</span>}
       {status !== 'in-progress' && <BadgeStatus status={status} />}
     </div>
   )

src/components/ui/card.tsx

@@ -0,0 +1,17 @@
+import { Spinner } from './spinner.tsx'
+
+interface LoadingStateProps {
+  message: string
+  className?: string
+}
+
+export function LoadingState({ message, className = '' }: LoadingStateProps) {
+  return (
+    <div
+      className={`flex flex-col items-center gap-4 p-8 bg-zinc-900 border border-zinc-700 rounded-lg mb-6 ${className}`}
+    >
+      <Spinner size="lg" />
+      <p className="m-0 text-zinc-400 text-sm">{message}</p>
+    </div>
+  )
+}

src/components/ui/loading-state.tsx

@@ -0,0 +1,31 @@
+interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeMap = {
+  sm: '1rem',
+  md: '1.5rem',
+  lg: '2rem',
+}
+
+export function Spinner({ size = 'md', className = '' }: SpinnerProps) {
+  const spinnerSize = sizeMap[size]
+
+  return (
+    <output
+      aria-label="Loading"
+      aria-live="polite"
+      className={`spinner ${className}`}
+      style={{
+        display: 'inline-block',
+        width: spinnerSize,
+        height: spinnerSize,
+        border: '2px solid transparent',
+        borderTop: '2px solid currentColor',
+        borderRadius: '50%',
+        animation: 'button-spin 1s linear infinite',
+      }}
+    />
+  )
+}

src/components/ui/spinner.tsx

@@ -1,8 +1,8 @@
 import { Root } from '@radix-ui/react-form'
-import { useContext, useState, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
+import { FilecoinPinContext } from '../../context/filecoin-pin-provider.tsx'
 import { FilePicker } from '../file-picker/index.tsx'
 import { ButtonBase as Button } from '../ui/button/button-base.tsx'
-import { FilecoinPinContext } from '../../context/filecoin-pin-provider.tsx'
 
 interface DragNDropProps {
   onFileSelected?: (file: File) => void