feat: add converting status in heif image upload

src/app/slices/ui.ts

@@ -1,5 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
+import { UploadFileData } from "@/hooks/useUploadFile";
+
 export type ListView = "item" | "grid";
 export interface State {
   online: boolean;
@@ -9,14 +11,9 @@ export interface State {
   // todo
   fileListView: ListView;
   uploadFiles: {
-    [key: string]: {
-      name: string;
-      url: string;
-      size: number;
-      type: string;
-    }[];
+    [key: string]: UploadFileData[];
   };
-  selectMessages: { [key: string]: number[] };
+  selectMessages: { [key: string]: number[] | null };
   draftMarkdown: { [key: string]: any };
   draftMixedText: { [key: string]: any };
   rememberedNavs: {
@@ -103,6 +100,15 @@ const uiSlice = createSlice({
             }
           }
 
+          break;
+        case "replace":
+          {
+            const { data, idx } = rest;
+            if (files) {
+              state.uploadFiles[_key][idx] = data;
+            }
+          }
+
           break;
 
         case "reset":
@@ -147,7 +153,9 @@ const uiSlice = createSlice({
           break;
         }
         case "remove": {
-          currData = currData.filter((mid) => mid != data);
+          if (currData) {
+            currData = currData.filter((mid) => mid != data);
+          }
           break;
         }
         case "reset": {

src/components/Send/UploadFileList/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Waveform } from "@uiball/loaders";
 
 import { ChatContext } from "@/types/common";
 import useUploadFile from "@/hooks/useUploadFile";
@@ -50,7 +51,7 @@ export default function UploadFileList({ context, id }: { context: ChatContext;
       )}
 
       <ul className="w-full overflow-auto flex gap-2 justify-start p-4 pt-6 bg-gray-200 dark:bg-gray-800 rounded-t-lg">
-        {stageFiles.map(({ name, url, size, type }, idx: number) => {
+        {stageFiles.map(({ name, url, size, type, converting }, idx: number) => {
           return (
             <li
               className="group relative flex flex-col bg-gray-100 dark:bg-gray-700 rounded p-2"
@@ -58,7 +59,11 @@ export default function UploadFileList({ context, id }: { context: ChatContext;
             >
               <div className="flex-center w-40 h-40">
                 {type.startsWith("image") ? (
-                  <img className="w-full h-full object-cover" src={url} alt="image" />
+                  converting ? (
+                    <Waveform size={18} lineWeight={3} speed={1} color="#aaa" />
+                  ) : (
+                    <img className="w-full h-full object-cover" src={url} alt="image" />
+                  )
                 ) : (
                   getFileIcon(type, name)
                 )}

src/hooks/useUploadFile.ts

@@ -15,6 +15,7 @@ export type UploadFileData = {
   type: string;
   size: number;
   url: string;
+  converting?: boolean;
 };
 interface IProps {
   context: ChatContext;
@@ -29,7 +30,7 @@ const convertHeic2Jpg = async (file: { name: string; type: string; size: number;
     quality: 0.8
   })) as Blob;
   const newName = file.name.replace(/\.hei\w$/i, ".jpg");
-  return { ...file, name: newName, url: URL.createObjectURL(jpgBlob) };
+  return { ...file, name: newName, converting: false, url: URL.createObjectURL(jpgBlob) };
 };
 const useUploadFile = (props?: IProps) => {
   const { context, id } = props ? props : { context: "channel", id: 0 };
@@ -153,20 +154,23 @@ const useUploadFile = (props?: IProps) => {
       toast.error("Only text is supported when replying a message");
       return;
     }
-    const hasHeif = filesData.some((f) => f.type.startsWith("image/hei"));
-    console.log("heif test", filesData, hasHeif);
-    if (hasHeif) {
-      const hFiles = filesData.filter((f) => f.type.startsWith("image/hei"));
-      Promise.all(hFiles.map((f) => convertHeic2Jpg(f))).then((res) => {
-        console.log("heif2jpg", res);
-        const nonHeifFiles = filesData.filter((f) => !f.type.startsWith("image/hei"));
-        const newFilesData = [...nonHeifFiles, ...res];
-        dispatch(updateUploadFiles({ context, id, data: newFilesData }));
+
+    const heifs: number[] = [];
+    filesData.forEach((f, idx) => {
+      if (f.type.startsWith("image/hei")) {
+        f.converting = true;
+        heifs.push(idx);
+      }
+    });
+    dispatch(updateUploadFiles({ context, id, data: filesData }));
+    if (heifs.length) {
+      heifs.forEach((idx) => {
+        convertHeic2Jpg(filesData[idx]).then((res) => {
+          console.log("heif2jpg", res);
+          dispatch(updateUploadFiles({ context, id, data: res, operation: "replace", idx }));
+        });
       });
-    } else {
-      dispatch(updateUploadFiles({ context, id, data: filesData }));
     }
-    // const data=
   };
 
   const resetStageFiles = () => {