State Management Improvements Needed in File Upload Process

[luisawatkins]

Two critical state management issues in the file upload process need to be addressed:

1. Race Conditions in Upload Info Updates

   • uploadedInfo state is updated in three different places:
     • onUploadComplete callback
     • onPieceAdded callback
     • After upload completion
   • This can lead to inconsistent state and lost information

2. Inaccurate Progress Tracking

   • Current progress updates use hardcoded percentages (5%, 25%, 55%, 80%)
   • Does not reflect actual upload progress
   • Results in jumpy and misleading progress bar

Proposed Solution

1. For Upload Info Management:

// Use a reducer for predictable state updates
const uploadInfoReducer = (state, action) => {
  switch (action.type) {
    case 'SET_FILE_INFO':
      return { ...state, fileName: action.payload.fileName, fileSize: action.payload.fileSize };
    case 'SET_PIECE_CID':
      return { ...state, pieceCid: action.payload };
    case 'SET_TX_HASH':
      return { ...state, txHash: action.payload };
    case 'RESET':
      return null;
    default:
      return state;
  }
};

2. For Progress Tracking:

// Calculate progress based on actual upload phases
const calculateProgress = (phase, bytesUploaded, totalBytes) => {
  const weights = {
    preflight: 0.1,   // 0-10%
    upload: 0.7,      // 10-80%
    confirm: 0.2      // 80-100%
  };
  // Return weighted progress based on current phase
};

Tasks

• Implement state reducer
• Add real progress tracking
• Update UI components
• Add basic error handling
• Test state transitions