@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/hooks/use-toast.tsx

@@ -0,0 +1,188 @@
+// Inspired by react-hot-toast library
+import * as React from 'react';
+
+import type { ToastActionElement, ToastProps } from '../components/toasts';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+  dismissOnPointerEnter?: boolean;
+};
+
+type ActionTypes = {
+  ADD_TOAST: 'ADD_TOAST';
+  UPDATE_TOAST: 'UPDATE_TOAST';
+  DISMISS_TOAST: 'DISMISS_TOAST';
+  REMOVE_TOAST: 'REMOVE_TOAST';
+};
+
+type ActionType = ActionTypes;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+export function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+export function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}

package/src/hooks/use-upload-chunked.ts

@@ -0,0 +1,173 @@
+import { REACT_APP_API_URL } from 'erxes-ui/utils';
+import { useCallback, useRef, useState } from 'react';
+
+/**
+ * Chunked upload client for large files (e.g. videos routed to Cloudflare
+ * Stream). Mirrors the backend flow in `core-api` fileRoutes:
+ *   POST /upload-chunked/init  -> { uploadId }
+ *   POST /upload-chunked/chunk -> (repeated, multipart field `chunk`)
+ *   GET  /upload-chunked/status/:uploadId -> poll until completed/failed
+ *
+ * The resolved `url` is whatever the backend uploader returns — for Cloudflare
+ * Stream this is the HLS playback URL.
+ */
+
+const CHUNK_SIZE = 5 * 1024 * 1024; // 5 MB — below the backend 20 MB chunk cap
+const STATUS_POLL_INTERVAL = 1000; // ms
+const STATUS_POLL_MAX_ATTEMPTS = 600; // ~10 min ceiling for provider processing
+
+export type ChunkedUploadResult = {
+  name: string;
+  url: string;
+  type: string;
+  size: number;
+};
+
+type ChunkStatus = {
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  progress?: number;
+  key?: string;
+  error?: string;
+};
+
+export const useUploadChunked = () => {
+  const [progress, setProgress] = useState<number>(0);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const cancelledRef = useRef<boolean>(false);
+
+  const pollStatus = useCallback(async (uploadId: string): Promise<string> => {
+    for (let attempt = 0; attempt < STATUS_POLL_MAX_ATTEMPTS; attempt++) {
+      if (cancelledRef.current) {
+        throw new Error('Upload cancelled');
+      }
+
+      const response = await fetch(
+        `${REACT_APP_API_URL}/upload-chunked/status/${uploadId}`,
+        { credentials: 'include' },
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to check upload status');
+      }
+
+      const data = (await response.json()) as ChunkStatus;
+
+      if (typeof data.progress === 'number') {
+        setProgress((prev) => Math.max(prev, data.progress ?? prev));
+      }
+
+      if (data.status === 'completed') {
+        if (!data.key) {
+          throw new Error('Upload completed but no file key was returned');
+        }
+        return data.key;
+      }
+
+      if (data.status === 'failed') {
+        throw new Error(data.error || 'Upload processing failed');
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, STATUS_POLL_INTERVAL));
+    }
+
+    throw new Error('Upload timed out while waiting for processing');
+  }, []);
+
+  const upload = useCallback(
+    async (file: File): Promise<ChunkedUploadResult | null> => {
+      setLoading(true);
+      setError(null);
+      setProgress(0);
+      cancelledRef.current = false;
+
+      try {
+        const totalChunks = Math.max(1, Math.ceil(file.size / CHUNK_SIZE));
+
+        const initResponse = await fetch(
+          `${REACT_APP_API_URL}/upload-chunked/init`,
+          {
+            method: 'post',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              fileName: file.name,
+              fileSize: file.size,
+              totalChunks,
+            }),
+          },
+        );
+
+        if (!initResponse.ok) {
+          throw new Error(
+            (await initResponse.text()) || 'Failed to start upload',
+          );
+        }
+
+        const { uploadId } = (await initResponse.json()) as {
+          uploadId?: string;
+        };
+
+        if (!uploadId) {
+          throw new Error('Upload session did not return an id');
+        }
+
+        for (let index = 0; index < totalChunks; index++) {
+          if (cancelledRef.current) {
+            throw new Error('Upload cancelled');
+          }
+
+          const start = index * CHUNK_SIZE;
+          const blob = file.slice(start, start + CHUNK_SIZE, file.type);
+
+          const formData = new FormData();
+          formData.append('chunk', blob, `${file.name}.part${index}`);
+          formData.append('uploadId', uploadId);
+          formData.append('chunkIndex', String(index));
+
+          const chunkResponse = await fetch(
+            `${REACT_APP_API_URL}/upload-chunked/chunk`,
+            {
+              method: 'post',
+              credentials: 'include',
+              body: formData,
+            },
+          );
+
+          if (!chunkResponse.ok) {
+            throw new Error(
+              (await chunkResponse.text()) || `Failed to upload chunk ${index}`,
+            );
+          }
+
+          // Chunk transfer accounts for up to 70%, matching the backend's
+          // status scale; merge/provider upload fills the remaining 70->100.
+          setProgress(Math.round(((index + 1) / totalChunks) * 70));
+        }
+
+        const key = await pollStatus(uploadId);
+        setProgress(100);
+
+        return {
+          name: file.name,
+          url: key,
+          type: file.type,
+          size: file.size,
+        };
+      } catch (e) {
+        const message = e instanceof Error ? e.message : 'Upload failed';
+        setError(message);
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [pollStatus],
+  );
+
+  const cancel = useCallback(() => {
+    cancelledRef.current = true;
+  }, []);
+
+  return { upload, cancel, progress, loading, error };
+};

package/src/hooks/use-upload-new.ts

@@ -0,0 +1,242 @@
+import { REACT_APP_API_URL } from 'erxes-ui/utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  type FileError,
+  type FileRejection,
+  useDropzone,
+} from 'react-dropzone';
+export interface FileWithPreview extends File {
+  preview?: string;
+  errors: readonly FileError[];
+}
+
+type UseErxesUploadOptions = {
+  /**
+   * Allowed MIME types for each file upload (e.g `image/png`, `text/html`, etc). Wildcards are also supported (e.g `image/*`).
+   *
+   * Defaults to allowing uploading of all MIME types.
+   */
+  allowedMimeTypes?: string[];
+  /**
+   * Maximum upload size of each file allowed in bytes. (e.g 1000 bytes = 1 KB)
+   */
+  maxFileSize?: number;
+  /**
+   * Maximum number of files allowed per upload.
+   */
+  maxFiles?: number;
+  onFilesAdded?: (
+    addedFiles: { name: string; url: string; type: string; size: number }[],
+  ) => void;
+};
+
+type UseErxesUploadReturn = ReturnType<typeof useErxesUpload>;
+
+type FileUploadResponse = {
+  name: string;
+  message: string | undefined;
+  url?: string;
+};
+
+const uploadFile = async (file: File): Promise<FileUploadResponse> => {
+  const formData = new FormData();
+  formData.append('file', file);
+  const response = await fetch(`${REACT_APP_API_URL}/upload-file?kind=main`, {
+    method: 'post',
+    body: formData,
+    credentials: 'include',
+  });
+
+  const data = await response.text();
+
+  if (!response.ok) {
+    return { name: file.name, message: data };
+  }
+  return { name: file.name, message: undefined, url: data };
+};
+
+const useErxesUpload = (options: UseErxesUploadOptions) => {
+  const {
+    allowedMimeTypes = [],
+    maxFileSize = Number.POSITIVE_INFINITY,
+    maxFiles = 1,
+    onFilesAdded,
+  } = options;
+
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [errors, setErrors] = useState<
+    { name: string; message?: string; url?: string }[]
+  >([]);
+  const [successes, setSuccesses] = useState<string[]>([]);
+
+  const isSuccess = useMemo(() => {
+    if (errors.length === 0 && successes.length === 0) {
+      return false;
+    }
+    if (errors.length === 0 && successes.length === files.length) {
+      return true;
+    }
+    return false;
+  }, [errors.length, successes.length, files.length]);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+      const validFiles = acceptedFiles
+        .filter((file) => !files.find((x) => x.name === file.name))
+        .map((file) => {
+          (file as FileWithPreview).preview = URL.createObjectURL(file);
+          (file as FileWithPreview).errors = [];
+          return file as FileWithPreview;
+        });
+
+      const invalidFiles = fileRejections.map(({ file, errors }) => {
+        (file as FileWithPreview).preview = URL.createObjectURL(file);
+        (file as FileWithPreview).errors = errors;
+        return file as FileWithPreview;
+      });
+
+      const newFiles = [...files, ...validFiles, ...invalidFiles];
+
+      setFiles(newFiles);
+    },
+    [files, setFiles],
+  );
+
+  const dropzoneProps = useDropzone({
+    onDrop,
+    noClick: true,
+    accept: allowedMimeTypes.reduce(
+      (acc, type) => ({ ...acc, [type]: [] }),
+      {},
+    ),
+    maxSize: maxFileSize,
+    maxFiles: maxFiles,
+    multiple: maxFiles !== 1,
+  });
+
+  const onUpload = useCallback(async () => {
+    setLoading(true);
+    // [Joshen] This is to support handling partial successes
+    // If any files didn't upload for any reason, hitting "Upload" again will only upload the files that had errors
+    const filesWithErrors = errors.map((x) => x.name);
+    const filesToUpload =
+      filesWithErrors.length > 0
+        ? [
+            ...files.filter((f) => filesWithErrors.includes(f.name)),
+            ...files.filter((f) => !successes.includes(f.name)),
+          ]
+        : files;
+
+    const responses = await Promise.all(filesToUpload.map(uploadFile));
+
+    const responseErrors = responses.filter((x) => x.message !== undefined);
+    // if there were errors previously, this function tried to upload the files again so we should clear/overwrite the existing errors.
+    setErrors(responseErrors);
+
+    const responseSuccesses = responses.filter(
+      (x): x is FileUploadResponse & { url: string } =>
+        x.message === undefined && typeof x.url === 'string',
+    );
+    const newSuccesses = Array.from(
+      new Set([...successes, ...responseSuccesses.map((x) => x.name)]),
+    );
+    setSuccesses(newSuccesses);
+    onFilesAdded?.([
+      ...responseSuccesses.map((x) => ({
+        name: x.name,
+        url: x.url,
+        type: filesToUpload.find((f) => f.name === x.name)?.type || '',
+        size: filesToUpload.find((f) => f.name === x.name)?.size || 0,
+      })),
+    ]);
+    setLoading(false);
+
+    setTimeout(() => {
+      setFiles(
+        files.filter((f) => !responseSuccesses.some((x) => x.name === f.name)),
+      );
+      setSuccesses([]);
+    }, 1000);
+  }, [files, errors, successes, onFilesAdded]);
+
+  useEffect(() => {
+    if (files.length === 0) {
+      setErrors([]);
+    }
+
+    // If the number of files doesn't exceed the maxFiles parameter, remove the error 'Too many files' from each file
+    if (files.length <= maxFiles) {
+      let changed = false;
+      const newFiles = files.map((file) => {
+        if (file.errors.some((e) => e.code === 'too-many-files')) {
+          file.errors = file.errors.filter((e) => e.code !== 'too-many-files');
+          changed = true;
+        }
+        return file;
+      });
+      if (changed) {
+        setFiles(newFiles);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [files.length, setFiles, maxFiles]);
+
+  return {
+    files,
+    setFiles,
+    successes,
+    isSuccess,
+    loading,
+    errors,
+    setErrors,
+    onUpload,
+    uploadFile,
+    maxFileSize: maxFileSize,
+    maxFiles: maxFiles,
+    allowedMimeTypes,
+    ...dropzoneProps,
+  };
+};
+
+export {
+  useErxesUpload,
+  type UseErxesUploadOptions,
+  type UseErxesUploadReturn,
+};
+
+export const useRemoveFile = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const removeFile = useCallback(
+    async (fileName: string, afterRemove: (status: string) => void) => {
+      setIsLoading(true);
+      const response = await fetch(
+        `${REACT_APP_API_URL}/delete-file?fileName=${fileName}`,
+        {
+          method: 'post',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+          },
+          body: `fileName=${fileName}`,
+        },
+      );
+      const data = await response.text();
+      if (!response.ok) {
+        setError(data);
+        setIsLoading(false);
+        return afterRemove(data);
+      }
+      setIsLoading(false);
+      return afterRemove('ok');
+    },
+    [],
+  );
+
+  return {
+    isLoading,
+    error,
+    removeFile,
+  };
+};