Convert Image Upload Hook

/* -------------- hooks/useImageUploadManager.ts ----------------- *//* eslint-disable consistent-return */'use client';
import { useCallback, useEffect, useRef, useState } from 'react';import { callUploadAsset } from '@/api/api';import { useAuthStore } from '@/store/AuthStore';
/* ---------------------------------------------------------------- *  Types / helpers * ---------------------------------------------------------------- */export enum UploadStatus {  PENDING    = 'pending',  UPLOADING  = 'uploading',  COMPLETED  = 'completed',  FAILED     = 'failed',}
export interface ImageUpload {  status      : UploadStatus;  base64      : string;  fileName    : string;  previewUrl  : string;        // local blob url – handy for <img src='...' />  uploadedUri?: string;        // final CDN / S3 url after success  error?      : unknown;}
/** Simple unique id generator – fine for local purposes */const genId = () => `${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
/** Convert a File to base64 */const fileToBase64 = (file: File) =>  new Promise<string>((resolve, reject) => {    const reader = new FileReader();    reader.onerror = () => reject(new Error('Could not read file'));    reader.onload  = () => resolve(reader.result as string);    reader.readAsDataURL(file);  });
/* ---------------------------------------------------------------- *  Hook * ---------------------------------------------------------------- */const useImageUploadManager = (concurrentUploads = 3) => {  /* Global auth data (only needed if your API needs an access token) */  const accessToken = useAuthStore((s) => s.session?.access_token);
  /* Main image map –  id  -> ImageUpload */  const [imageMap, setImageMap] = useState<Record<string, ImageUpload>>({});  const imageMapRef             = useRef(imageMap);  useEffect(() => { imageMapRef.current = imageMap; }, [imageMap]);
  /* Queue / concurrency bookkeeping */  const uploadQueue  = useRef<string[]>([]);  const activeUploads = useRef<Set<string>>(new Set());  const processing    = useRef(false);
  /* ------------------------------------------------------------   *  Internal – actually upload a single image   * ------------------------------------------------------------ */  const uploadImage = async (base64: string, fileName: string) => {    try {      const res = await callUploadAsset(accessToken, base64, fileName, 's3');      if (res?.url) {        return { success: true as const, uploadedUri: res.url };      }      return { success: false as const, error: 'Bad response format' };    } catch (err) {      return { success: false as const, error: err };    }  };
  /* ------------------------------------------------------------   *  Queue processor – keeps starting new uploads   * ------------------------------------------------------------ */  const processQueue = useCallback(async () => {    if (processing.current) return;        // already spinning    processing.current = true;
    while (      activeUploads.current.size < concurrentUploads &&      uploadQueue.current.length    ) {      const id = uploadQueue.current.shift()!;         // dequeue
      // skip if already done/ongoing      const img = imageMapRef.current[id];      if (!img || img.status === UploadStatus.COMPLETED) continue;      if (activeUploads.current.has(id)) continue;
      /* Mark as uploading */      activeUploads.current.add(id);      setImageMap((prev) => ({        ...prev,        [id]: { ...prev[id], status: UploadStatus.UPLOADING },      }));
      /* Perform the upload */      uploadImage(img.base64, img.fileName).then((result) => {        activeUploads.current.delete(id);
        setImageMap((prev) => ({          ...prev,          [id]: {            ...prev[id],            status      : result.success ? UploadStatus.COMPLETED : UploadStatus.FAILED,            uploadedUri : result.success ? result.uploadedUri : undefined,            error       : result.success ? undefined : result.error,          },        }));
        /* kick the loop again (in case new items got queued) */        processQueue();      });    }
    processing.current = false;  }, [concurrentUploads, accessToken]);
  /* ------------------------------------------------------------   *  Public API   * ------------------------------------------------------------ */
  /* 1) Add files coming from <input type="file" multiple /> etc. */  const addFiles = useCallback(    async (files: FileList | File[]) => {      const fileArr  = Array.from(files);      if (!fileArr.length) return;
      const newEntries: Record<string, ImageUpload> = {};      const newIds: string[] = [];
      /* Convert to base64 in parallel */      await Promise.all(        fileArr.map(async (file) => {          const id        = genId();          const base64Str = await fileToBase64(file);          const blobUrl   = URL.createObjectURL(file);
          newIds.push(id);          newEntries[id] = {            status     : UploadStatus.PENDING,            base64     : base64Str,            fileName   : file.name,            previewUrl : blobUrl,          };        }),      );
      if (!newIds.length) return;
      /* Commit to state + queue */      setImageMap((prev) => ({ ...prev, ...newEntries }));      uploadQueue.current.push(...newIds);      processQueue();    },    [processQueue],  );
  /* 2) Remove an image (allowed only when finished / failed) */  const removeImage = useCallback((id: string) => {    const target = imageMapRef.current[id];    if (!target) return;    if (target.status === UploadStatus.PENDING || target.status === UploadStatus.UPLOADING) return;
    URL.revokeObjectURL(target.previewUrl);   // cleanup memory    setImageMap((prev) => {      const next = { ...prev };      delete next[id];      return next;    });  }, []);
  /* 3) Convenience getters -------------------------------------------------- */  const getImagesByStatus = useCallback(    (status: UploadStatus) =>      Object.entries(imageMap)        .filter(([, v]) => v.status === status)        .map(([id, v]) => ({ id, ...v })),    [imageMap],  );
  return {    /* state */    imageMap,
    /* actions */    addFiles,    removeImage,
    /* helpers */    pendingUploads   : uploadQueue.current.length + activeUploads.current.size,    getPendingImages : () => getImagesByStatus(UploadStatus.PENDING),    getUploadingImages : () => getImagesByStatus(UploadStatus.UPLOADING),    getCompletedImages : () => getImagesByStatus(UploadStatus.COMPLETED),    getFailedImages    : () => getImagesByStatus(UploadStatus.FAILED),  };};
export default useImageUploadManager;