StratoFusion

Loading application...

StratoFusion

// In BatchFileTransferDialog.tsx
const [isSubmitting, setIsSubmitting] = useState(false);

const handleSubmit = async () => {
  if (isSubmitting) return;
  setIsSubmitting(true);
  try {
    await someOperation();
  } finally {
    setIsSubmitting(false);
  }
};

// Problem: Manual state management repeated 6 times
// Problem: No automatic cleanup on unmount
// Problem: Race conditions with useEffect

// In src/hooks/useSubmissionGuard.ts
export function useSubmissionGuard(options = {}) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const isMountedRef = useRef(true);

  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  const withSubmissionGuard = useCallback(
    async (fn) => {
      if (isSubmitting) return null;
      setIsSubmitting(true);
      try {
        const result = await fn();
        return result;
      } finally {
        if (isMountedRef.current) {
          setIsSubmitting(false);
        }
      }
    },
    [isSubmitting]
  );

  return { isSubmitting, withSubmissionGuard };
}

// In BatchFileTransferDialog.tsx
const { isSubmitting, withSubmissionGuard } = useSubmissionGuard();

const handleSubmit = async () => {
  await withSubmissionGuard(async () => {
    await someOperation();
  });
};

const handleTransferBatch = async () => {
  // 570 lines of mixed logic
  if (operationType === "backup") {
    // Backup logic inline
  }
  // Transfer logic inline
};

const handleBackupOperation = async () => {
  // 116 lines of backup-specific logic
  // Clear separation of concerns
};

const handleTransferBatch = async () => {
  if (operationType === "backup") {
    return handleBackupOperation();
  }
  return handleTransferBatchInternal();
};

const handleTransferBatchInternal = async () => {
  // Transfer logic only
};

// In handleBackupOperation (116 lines)
const handleBackupOperation = async () => {
  // Validation logic
  if (!selectedFiles || selectedFiles.length === 0) {
    setError("No files selected");
    return;
  }

  // Scheduled backup logic
  if (schedule !== "none") {
    const jobId = await createBackupJob({...});
    toast({ title: "Backup scheduled" });
  }

  // Run-now backup logic
  else {
    const timestampedFolder = await createTimestampedFolder({...});
    setDestinationFolderId(timestampedFolder.folderId);
  }
};

// In src/hooks/useBackupOperation.ts
export function useBackupOperation(options) {
  const validateBackupParams = (selectedFiles, destinationAccountId) => {
    // Validation logic
  };

  const createScheduledBackup = async (params) => {
    // Scheduled backup logic
  };

  const createRunNowBackup = async (params) => {
    // Run-now backup logic
  };

  return {
    validateBackupParams,
    createScheduledBackup,
    createRunNowBackup,
    isProcessing,
    error,
    clearError
  };
}

// In BatchFileTransferDialog.tsx (58 lines)
const {
  validateBackupParams,
  createScheduledBackup,
  createRunNowBackup
} = useBackupOperation({
  onScheduledBackupSuccess: (jobId) => {
    toast({ title: "Backup scheduled" });
  },
  onRunNowBackupReady: (folderId, jobId) => {
    setDestinationFolderId(folderId);
  },
  onError: (error) => setError(error)
});

const handleBackupOperation = async () => {
  const validation = validateBackupParams(selectedFiles, destinationAccountId);
  if (!validation.isValid) return;

  if (schedule !== "none") {
    await createScheduledBackup({...});
  } else {
    await createRunNowBackup({...});
  }
};

export async function findDuplicateScheduledBackup(input) {
  const allJobs = await db.select().from(backupJobs);

  for (const job of allJobs) {
    const payload = JSON.parse(job.payload);

    // O(nÂ²) comparison
    for (const source of input.sources) {
      for (const existingSource of payload.sources) {
        if (source.id === existingSource.id) {
          // Match found
        }
      }
    }
  }
}

export async function findDuplicateScheduledBackup(input) {
  // Filter candidates by schedule type first
  const candidateJobs = await db
    .select()
    .from(backupJobs)
    .where(
      and(
        eq(backupJobs.userId, input.userId),
        eq(backupJobs.status, "scheduled"),
        eq(backupJobs.schedule, input.schedule)
      )
    );

  // Use backupJobItems table for source matching
  for (const job of candidateJobs) {
    const jobItems = await db
      .select()
      .from(backupJobItems)
      .where(eq(backupJobItems.jobId, job.id));

    // Use Set for O(1) lookups
    const existingSourceKeys = new Set(
      jobItems.map(item => `${item.sourceService}:${item.sourceAccountId}:${item.sourceId}`)
    );

    const newSourceKeys = new Set(
      input.sources.map(s => `${s.service}:${s.accountId}:${s.id}`)
    );

    // O(n) comparison
    const allMatch =
      existingSourceKeys.size === newSourceKeys.size &&
      [...newSourceKeys].every(key => existingSourceKeys.has(key));

    if (allMatch) return job;
  }

  return null;
}

// Validation logic scattered across components
if (!selectedFiles || selectedFiles.length === 0) {
  setError("No files selected");
  return;
}

if (!destinationAccountId) {
  setError("No destination selected");
  return;
}

const parsedAccount = parseDestinationAccountId(destinationAccountId);
if (!parsedAccount) {
  setError("Invalid destination");
  return;
}

// In src/lib/validation/transfer-validation.ts
export function validateTransferRequirements(selectedFiles, destinationAccountId) {
  if (!selectedFiles || selectedFiles.length === 0) {
    return { isValid: false, error: "No files or folders selected for transfer" };
  }

  if (!destinationAccountId) {
    return { isValid: false, error: "Destination account not specified" };
  }

  const parsedAccount = parseDestinationAccountId(destinationAccountId);
  if (!parsedAccount) {
    return {
      isValid: false,
      error: "Invalid destination account ID format. Expected format: 'service-accountId'"
    };
  }

  return {
    isValid: true,
    parsedDestination: {
      service: parsedAccount.service,
      accountId: parsedAccount.accountId
    }
  };
}

// In components
const validation = validateTransferRequirements(selectedFiles, destinationAccountId);
if (!validation.isValid) {
  setError(validation.error);
  return;
}

// In multiple files
async function someOperation() {
  const tokens = await getPersistedTokens(userId, service, accountId);
  if (!tokens) {
    throw new Error('No tokens found');
  }
  // Use tokens...
}

// Centralized in src/lib/rclone/services/token-retrieval.ts
export async function getTokensForService(
  userId: string,
  service: ServiceType,
  accountId: string
): Promise<ServiceTokens> {
  try {
    const tokens = await getPersistedTokens(userId, service, accountId);

    if (!tokens) {
      throw new TokenRetrievalError(
        `No tokens found for ${service}:${accountId}`,
        'TOKEN_NOT_FOUND'
      );
    }

    // Validate token expiry
    if (isTokenExpired(tokens)) {
      return await refreshToken(userId, service, accountId, tokens);
    }

    return tokens;
  } catch (error) {
    logger.error('Token retrieval failed', { userId, service, accountId, error });
    throw error;
  }
}

Replace direct token calls:

// Old
const tokens = await getPersistedTokens(userId, service, accountId);

// New
const tokens = await getTokensForService(userId, service, accountId);

Update error handling:

// Old
if (!tokens) throw new Error('No tokens');

// New
// Error handling is built-in, just catch TokenRetrievalError
try {
  const tokens = await getTokensForService(...);
} catch (error) {
  if (error instanceof TokenRetrievalError) {
    // Handle token error
  }
}

Update imports:

import { getTokensForService } from '~/lib/rclone/services/token-retrieval';

export function useDialogStateNotification(
  isOpen: boolean,
  onDialogStateChange?: (isOpen: boolean) => void
) {
  useEffect(() => {
    onDialogStateChange?.(isOpen);
  }, [isOpen, onDialogStateChange]);
}

export function useFormDirtyState<T extends Record<string, unknown>>(
  currentValues: T | null,
  initialValues: T | null
) {
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  useEffect(() => {
    if (!initialValues || !currentValues) {
      setHasUnsavedChanges(false);
      return;
    }
    const keys = Object.keys(initialValues) as Array<keyof T>;
    const hasChanges = keys.some(
      (key) => currentValues[key] !== initialValues[key]
    );
    setHasUnsavedChanges(hasChanges);
  }, [currentValues, initialValues]);

  const resetDirtyState = () => setHasUnsavedChanges(false);
  return { hasUnsavedChanges, resetDirtyState };
}

// Before
function processFiles(files: File[]) {
  // Validation logic (20 lines)
  // Transformation logic (20 lines)
  // Formatting logic (20 lines)
}

// After
function processFiles(files: File[]) {
  const validated = validateFiles(files);
  const transformed = transformFiles(validated);
  return formatFiles(transformed);
}

// Before
function FileList() {
  return (
    <div>
      {/* 100 lines of file item JSX */}
    </div>
  );
}

// After
function FileList() {
  return (
    <div>
      {files.map(file => <FileItem key={file.id} file={file} />)}
    </div>
  );
}

// Before
function Component1() {
  const [data, setData] = useState();
  useEffect(() => { /* fetch logic */ }, []);
  // ...
}

function Component2() {
  const [data, setData] = useState();
  useEffect(() => { /* same fetch logic */ }, []);
  // ...
}

// After
function useData() {
  const [data, setData] = useState();
  useEffect(() => { /* fetch logic */ }, []);
  return { data, setData };
}

function Component1() {
  const { data } = useData();
}

function Component2() {
  const { data } = useData();
}

// Before
function getServiceIcon(service: ServiceType) {
  if (service === 'google') return <GoogleIcon />;
  if (service === 'onedrive') return <OneDriveIcon />;
  if (service === 'dropbox') return <DropboxIcon />;
}

// After
const SERVICE_ICONS: Record<ServiceType, React.ComponentType> = {
  google: GoogleIcon,
  onedrive: OneDriveIcon,
  dropbox: DropboxIcon,
};

function getServiceIcon(service: ServiceType) {
  const Icon = SERVICE_ICONS[service];
  return <Icon />;
}