Merge pull request #76 from filecoin-project/bp/publishing-badge

[UXIT-3480] Refactor upload progress logic and add “Publishing” badge state

Author: barbaraperic

src/components/layout/content.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import { Alert } from '@/components/ui/alert.tsx'
-import type { Progress } from '@/types/upload-progress.ts'
 import { useUploadHistory } from '../../context/upload-history-context.tsx'
 import { useFilecoinPinContext } from '../../hooks/use-filecoin-pin-context.ts'
 import { useUploadExpansion } from '../../hooks/use-upload-expansion.ts'
 import { useUploadOrchestration } from '../../hooks/use-upload-orchestration.ts'
 import { useUploadUI } from '../../hooks/use-upload-ui.ts'
+import type { StepState } from '../../types/upload/step.ts'
 import { formatFileSize } from '../../utils/format-file-size.ts'
 import { Heading } from '../ui/heading.tsx'
 import { LoadingState } from '../ui/loading-state.tsx'
@@ -15,7 +15,7 @@ import { UploadError } from '../upload/upload-error.tsx'
 import { UploadStatus } from '../upload/upload-status.tsx'
 
 // Completed state for displaying upload history
-const COMPLETED_PROGRESS: Progress[] = [
+const COMPLETED_PROGRESS: StepState[] = [
   { step: 'creating-car', status: 'completed', progress: 100 },
   { step: 'checking-readiness', status: 'completed', progress: 100 },
   { step: 'uploading-car', status: 'completed', progress: 100 },
@@ -99,7 +99,7 @@ export default function Content() {
             isExpanded={activeUploadExpanded}
             onToggleExpanded={() => setActiveUploadExpanded(!activeUploadExpanded)}
             pieceCid={activeUpload.pieceCid ?? ''}
-            progresses={activeUpload.progress}
+            stepStates={activeUpload.stepStates}
             transactionHash={activeUpload.transactionHash ?? ''}
           />
         </div>
@@ -124,7 +124,7 @@ export default function Content() {
               key={upload.id}
               onToggleExpanded={() => toggleExpansion(upload.id)}
               pieceCid={upload.pieceCid}
-              progresses={COMPLETED_PROGRESS}
+              stepStates={COMPLETED_PROGRESS}
               transactionHash={upload.transactionHash}
             />
           ))}

src/components/ui/badge-status.tsx

@@ -1,9 +1,9 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 import { CircleCheck, LoaderCircle } from 'lucide-react'
-import type { Progress } from '../../types/upload-progress.ts'
+import type { StepState } from '../../types/upload/step.ts'
 import { cn } from '../../utils/cn.ts'
 
-export type Status = Progress['status'] | 'pinned'
+export type Status = StepState['status'] | 'pinned' | 'published'
 
 type BadgeStatusProps = VariantProps<typeof badgeVariants> & {
   status: Status
@@ -15,6 +15,7 @@ const badgeVariants = cva('inline-flex items-center gap-1 pl-1.5 pr-2 py-0.5 rou
       'in-progress': 'bg-badge-in-progress text-badge-in-progress-text border border-badge-in-progress-border',
       completed: 'bg-brand-950 text-brand-700 border border-brand-900',
       pinned: 'bg-brand-950 text-brand-700 border border-brand-900',
+      published: 'bg-yellow-600/30 border border-yellow-400/20 text-yellow-200',
       error: null,
       pending: 'bg-zinc-800 border border-zinc-700 text-zinc-300',
     },
@@ -28,6 +29,7 @@ const statusIcons: Record<Status, React.ReactNode> = {
   'in-progress': <LoaderCircle className="animate-spin" size={12} />,
   completed: <CircleCheck size={12} />,
   pinned: <CircleCheck size={12} />,
+  published: null,
   error: null,
   pending: null,
 }
@@ -36,6 +38,7 @@ const statusLabels: Record<Status, string | null> = {
   'in-progress': 'In progress',
   completed: 'Complete',
   pinned: 'Pinned',
+  published: 'Published',
   error: null,
   pending: 'Pending',
 }

src/components/ui/card.tsx

@@ -1,4 +1,4 @@
-import type { Progress } from '../../types/upload-progress.ts'
+import type { StepState } from '../../types/upload/step.ts'
 import { BadgeStatus } from './badge-status.tsx'
 import { Heading } from './heading.tsx'
 import { Spinner } from './spinner.tsx'
@@ -9,7 +9,7 @@ type CardWrapperProps = {
 
 type CardHeaderProps = {
   title: string
-  status: Progress['status']
+  status: StepState['status']
   estimatedTime?: string
   withSpinner?: boolean
 }

src/components/upload/car-upload-and-ipni-card.tsx

@@ -1,8 +1,8 @@
 import { getIpfsGatewayDownloadLink, getIpfsGatewayRenderLink } from '@/utils/links.ts'
-import { COMBINED_STEPS } from '../../constants/upload-status.tsx'
 import { INPI_ERROR_MESSAGE } from '../../hooks/use-filecoin-upload.ts'
+import { useStepStates } from '../../hooks/use-step-states.ts'
 import { useUploadProgress } from '../../hooks/use-upload-progress.ts'
-import type { Progress } from '../../types/upload-progress.ts'
+import type { StepState } from '../../types/upload/step.ts'
 import { Alert } from '../ui/alert.tsx'
 import { Card } from '../ui/card.tsx'
 import { DownloadButton } from '../ui/download-button.tsx'
@@ -11,7 +11,7 @@ import { ProgressCard } from './progress-card.tsx'
 import { ProgressCardCombined } from './progress-card-combined.tsx'
 
 interface CarUploadAndIpniCardProps {
-  progresses: Progress[]
+  stepStates: StepState[]
   cid?: string
   fileName: string
 }
@@ -22,50 +22,45 @@ interface CarUploadAndIpniCardProps {
  * It will shrink to a single card if the uploading-car and announcing-cids steps are completed.
  * Otherwise, it will display the progress of the uploading-car and announcing-cids steps.
  */
-export const CarUploadAndIpniCard = ({ progresses, cid, fileName }: CarUploadAndIpniCardProps) => {
+export const CarUploadAndIpniCard = ({ stepStates, cid, fileName }: CarUploadAndIpniCardProps) => {
   // Use the upload progress hook to calculate all progress-related values
-  const { getCombinedFirstStageProgress, getCombinedFirstStageStatus, hasIpniFailure } = useUploadProgress(
-    progresses,
-    cid
-  )
-  const uploadingStep = progresses.find((p) => p.step === 'uploading-car')
-  const announcingStep = progresses.find((p) => p.step === 'announcing-cids')
+  const { uploadOutcome } = useUploadProgress({
+    stepStates,
+    cid,
+  })
+
+  const { hasIpniAnnounceFailure } = uploadOutcome
+
+  const { announcingCidsStep, uploadingCarStep } = useStepStates(stepStates)
 
   const shouldShowCidCard =
-    uploadingStep?.status === 'completed' &&
-    (announcingStep?.status === 'completed' || announcingStep?.status === 'error') &&
+    uploadingCarStep?.status === 'completed' &&
+    (announcingCidsStep?.status === 'completed' || announcingCidsStep?.status === 'error') &&
     cid
 
   if (shouldShowCidCard) {
     return (
       <Card.Wrapper>
-        {hasIpniFailure && <Alert message={INPI_ERROR_MESSAGE} variant="warning" />}
+        {hasIpniAnnounceFailure && <Alert message={INPI_ERROR_MESSAGE} variant="warning" />}
         <Card.InfoRow
           subtitle={
             <TextWithCopyToClipboard
               text={cid}
-              {...(!hasIpniFailure && { href: getIpfsGatewayRenderLink(cid, fileName) })}
+              {...(!hasIpniAnnounceFailure && { href: getIpfsGatewayRenderLink(cid, fileName) })}
             />
           }
           title="IPFS Root CID"
         >
-          {!hasIpniFailure && <DownloadButton href={getIpfsGatewayDownloadLink(cid, fileName)} />}
+          {!hasIpniAnnounceFailure && <DownloadButton href={getIpfsGatewayDownloadLink(cid, fileName)} />}
         </Card.InfoRow>
       </Card.Wrapper>
     )
   }
 
-  // Filter progresses to only include the combined steps for ProgressCardCombined
-  const combinedProgresses = progresses.filter((p) => COMBINED_STEPS.includes(p.step))
-
   return (
     <>
-      <ProgressCardCombined
-        getCombinedFirstStageProgress={getCombinedFirstStageProgress}
-        getCombinedFirstStageStatus={getCombinedFirstStageStatus}
-        progresses={combinedProgresses}
-      />
-      {announcingStep && <ProgressCard progress={announcingStep} />}
+      <ProgressCardCombined stepStates={stepStates} />
+      {announcingCidsStep && <ProgressCard stepState={announcingCidsStep} />}
     </>
   )
 }

src/components/upload/progress-card-combined.tsx

@@ -1,34 +1,28 @@
-import type { Progress } from '../../types/upload-progress.ts'
-import { getEstimatedTime, getStepLabel } from '../../utils/upload-status.ts'
+import { useFirstStageState } from '@/hooks/use-first-stage-state.ts'
+import { useStepStates } from '@/hooks/use-step-states.ts'
+import type { StepState } from '../../types/upload/step.ts'
+import { getStepEstimatedTime, getStepLabel } from '../../utils/upload/step-utils.ts'
 import { Card } from '../ui/card.tsx'
 import { ProgressBar } from '../ui/progress-bar.tsx'
 
 interface ProgressCardCombinedProps {
-  progresses: Array<Progress>
-  getCombinedFirstStageStatus: () => Progress['status']
-  getCombinedFirstStageProgress: () => number
+  stepStates: Array<StepState>
 }
 
-function ProgressCardCombined({
-  progresses,
-  getCombinedFirstStageStatus,
-  getCombinedFirstStageProgress,
-}: ProgressCardCombinedProps) {
-  const hasCreatingCarStep = progresses.find((progress) => progress.step === 'creating-car')
+function ProgressCardCombined({ stepStates }: ProgressCardCombinedProps) {
+  const { creatingCarStep } = useStepStates(stepStates)
+  const { progress, status } = useFirstStageState(stepStates)
 
-  const firstStagestatus = getCombinedFirstStageStatus()
-  const firstStageProgress = getCombinedFirstStageProgress()
-
-  if (!hasCreatingCarStep) return null
+  if (!creatingCarStep) return null
 
   return (
     <Card.Wrapper>
       <Card.Header
-        estimatedTime={getEstimatedTime('creating-car')}
-        status={firstStagestatus}
+        estimatedTime={getStepEstimatedTime('creating-car')}
+        status={status}
         title={getStepLabel('creating-car')}
       />
-      {firstStagestatus === 'in-progress' && <ProgressBar progress={firstStageProgress} />}
+      {status === 'in-progress' && <ProgressBar progress={progress} />}
     </Card.Wrapper>
   )
 }

src/components/upload/progress-card.tsx

@@ -1,29 +1,29 @@
-import type { Progress } from '@/types/upload-progress.ts'
-import { getEstimatedTime, getStepLabel } from '../../utils/upload-status.ts'
+import type { StepState } from '../../types/upload/step.ts'
+import { getStepEstimatedTime, getStepLabel } from '../../utils/upload/step-utils.ts'
 import { Alert } from '../ui/alert.tsx'
 import { Card } from '../ui/card.tsx'
 import { TextWithCopyToClipboard } from '../ui/text-with-copy-to-clipboard.tsx'
 
 interface ProgressCardProps {
-  progress: Progress
+  stepState: StepState
   transactionHash?: string
 }
 
-function ProgressCard({ progress, transactionHash }: ProgressCardProps) {
+function ProgressCard({ stepState, transactionHash }: ProgressCardProps) {
   return (
     <Card.Wrapper>
       <Card.Header
-        estimatedTime={getEstimatedTime(progress.step)}
-        status={progress.status}
-        title={getStepLabel(progress.step)}
+        estimatedTime={getStepEstimatedTime(stepState.step)}
+        status={stepState.status}
+        title={getStepLabel(stepState.step)}
         withSpinner
       />
 
-      {progress.error && (
-        <Alert message={progress.error} variant={progress.step === 'announcing-cids' ? 'warning' : 'error'} />
+      {stepState.error && (
+        <Alert message={stepState.error} variant={stepState.step === 'announcing-cids' ? 'warning' : 'error'} />
       )}
 
-      {progress.step === 'finalizing-transaction' && transactionHash && (
+      {stepState.step === 'finalizing-transaction' && transactionHash && (
         <Card.Content>
           <TextWithCopyToClipboard
             href={`https://filecoin-testnet.blockscout.com/tx/${transactionHash}`}

src/components/upload/upload-progress.tsx

@@ -1,20 +1,20 @@
-import type { Progress } from '../../types/upload-progress.ts'
+import type { StepState } from '../../types/upload/step.ts'
 import { CarUploadAndIpniCard } from './car-upload-and-ipni-card.tsx'
 import { ProgressCard } from './progress-card.tsx'
 import type { UploadStatusProps } from './upload-status.tsx'
 
 interface UploadProgressProps {
-  progresses: Array<Progress>
+  stepStates: Array<StepState>
   transactionHash?: UploadStatusProps['transactionHash']
   cid?: string
   fileName: string
 }
-function UploadProgress({ progresses, transactionHash, cid, fileName }: UploadProgressProps) {
-  const finalizingStep = progresses.find((p) => p.step === 'finalizing-transaction')
+function UploadProgress({ stepStates, transactionHash, cid, fileName }: UploadProgressProps) {
+  const finalizingStep = stepStates.find((stepState) => stepState.step === 'finalizing-transaction')
   return (
     <>
-      <CarUploadAndIpniCard cid={cid} fileName={fileName} progresses={progresses} />
-      {finalizingStep && <ProgressCard progress={finalizingStep} transactionHash={transactionHash} />}
+      <CarUploadAndIpniCard cid={cid} fileName={fileName} stepStates={stepStates} />
+      {finalizingStep && <ProgressCard stepState={finalizingStep} transactionHash={transactionHash} />}
     </>
   )
 }

src/components/upload/upload-status.tsx

@@ -1,6 +1,6 @@
 import type { DatasetPiece } from '../../hooks/use-dataset-pieces.ts'
 import { useUploadProgress } from '../../hooks/use-upload-progress.ts'
-import type { Progress } from '../../types/upload-progress.ts'
+import type { StepState } from '../../types/upload/step.ts'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion.tsx'
 import { FileInfo } from '../ui/file-info.tsx'
 import { UploadCompleted } from './upload-completed.tsx'
@@ -9,7 +9,7 @@ import { UploadProgress } from './upload-progress.tsx'
 export interface UploadStatusProps {
   fileName: DatasetPiece['fileName']
   fileSize: DatasetPiece['fileSize']
-  progresses: Array<Progress>
+  stepStates: Array<StepState>
   isExpanded?: boolean
   onToggleExpanded?: () => void
   cid?: DatasetPiece['cid']
@@ -22,7 +22,7 @@ export interface UploadStatusProps {
 function UploadStatus({
   fileName,
   fileSize,
-  progresses,
+  stepStates,
   isExpanded = true,
   onToggleExpanded,
   cid,
@@ -31,7 +31,9 @@ function UploadStatus({
   transactionHash,
 }: UploadStatusProps) {
   // Use the upload progress hook to calculate all progress-related values
-  const { isCompleted, badgeStatus } = useUploadProgress(progresses, cid)
+  const { uploadOutcome, uploadBadgeStatus } = useUploadProgress({ stepStates, cid })
+
+  const { isUploadSuccessful } = uploadOutcome
 
   return (
     <Accordion
@@ -42,15 +44,15 @@ function UploadStatus({
       value={isExpanded ? 'file-card' : ''}
     >
       <AccordionItem value="file-card">
-        <FileInfo badgeStatus={badgeStatus} fileName={fileName} fileSize={fileSize}>
+        <FileInfo badgeStatus={uploadBadgeStatus} fileName={fileName} fileSize={fileSize}>
           <AccordionTrigger />
         </FileInfo>
 
         <AccordionContent className="space-y-6 mt-6">
-          {isCompleted && cid ? (
+          {isUploadSuccessful && cid ? (
             <UploadCompleted cid={cid} datasetId={datasetId} fileName={fileName} pieceCid={pieceCid} />
           ) : (
-            <UploadProgress cid={cid} fileName={fileName} progresses={progresses} transactionHash={transactionHash} />
+            <UploadProgress cid={cid} fileName={fileName} stepStates={stepStates} transactionHash={transactionHash} />
           )}
         </AccordionContent>
       </AccordionItem>