React Hooks for Rclone Transfer Service

This directory contains React hooks that wrap the unified rclone transfer service with React state management, loading states, progress tracking, and error handling.

Available Hooks

useRcloneTransfer

A React hook for managing single file and folder transfers.

Features

• Loading state management.
• Progress tracking with percentage.
• Error handling.
• Transfer cancellation.
• Automatic cleanup on unmount.

Usage

import { useRcloneTransfer } from "~/lib/rclone";

function FileTransferComponent() {
  const {
    isLoading,
    metadata,
    error,
    progressPercentage,
    status,
    startFileTransfer,
    startFolderTransfer,
    cancelCurrentTransfer,
    reset,
  } = useRcloneTransfer({
    onStart: (metadata) => {
      console.log("Transfer started:", metadata.operationId);
    },
    onProgress: (metadata) => {
      console.log(`Progress: ${metadata.progress?.percentage}%`);
    },
    onComplete: (metadata) => {
      console.log("Transfer completed successfully");
    },
    onError: (metadata, error) => {
      console.error("Transfer failed:", error);
    },
    onCancel: (metadata) => {
      console.log("Transfer cancelled");
    },
  });

  const handleFileTransfer = async () => {
    const operationId = await startFileTransfer({
      sourceService: "google",
      sourceAccountId: "default",
      sourceFileId: "1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms",
      destService: "dropbox",
      destAccountId: "default",
      destFolderId: "root",
      fileName: "my-document.pdf",
    });

    if (operationId) {
      console.log("Transfer started with ID:", operationId);
    }
  };

  const handleFolderTransfer = async () => {
    const operationId = await startFolderTransfer({
      sourceService: "google",
      sourceAccountId: "default",
      sourceFolderId: "1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms",
      destService: "dropbox",
      destAccountId: "default",
      destFolderId: "root",
      folderName: "My Documents",
      preserveStructure: true,
    });

    if (operationId) {
      console.log("Folder transfer started with ID:", operationId);
    }
  };

  return (
    <div>
      <button onClick={handleFileTransfer} disabled={isLoading}>
        Transfer File
      </button>
      <button onClick={handleFolderTransfer} disabled={isLoading}>
        Transfer Folder
      </button>

      {isLoading && (
        <div>
          <p>Transfer in progress... {progressPercentage}%</p>
          <button onClick={cancelCurrentTransfer}>Cancel</button>
        </div>
      )}

      {error && (
        <div style={{ color: "red" }}>
          Error: {error}
        </div>
      )}

      {status === "completed" && (
        <div style={{ color: "green" }}>
          Transfer completed successfully!
        </div>
      )}
    </div>
  );
}