todo: MediaUpload action

src/actions/CommonActions.js

@@ -0,0 +1,7 @@
+import { fetchJSON } from '@/utils/request';
+import { API_HOST } from '@/config';
+
+export const getAliOSSToken = async () => {
+  const { errcode, result: data } = await fetchJSON(`${API_HOST}/ali-oss-token`);
+  return errcode !== 0 ? {} : data;
+};

src/stores/ConversationStore.js

@@ -3,6 +3,7 @@ import { RealTimeAPI } from '@/lib/realTimeAPI';
 import { olog, isEmpty } from '@/utils/utils';
 import { receivedMsgTypeMapped, handleNotification } from '@/lib/msgUtils';
 import { fetchConversationsList, fetchTemplates, fetchMessages } from '@/actions/ConversationActions';
+import { getAliOSSToken } from '@/actions/CommonActions';
 import { devtools } from 'zustand/middleware';
 import { WS_URL } from '@/config';
 
@@ -26,6 +27,8 @@ const initialConversationState = {
   // activeConversations: {}, // 激活的对话的消息列表: { [conversationId]: <messageItem>[] }
 
   // referenceMsg: {},
+
+  aliOSSToken: {},
 };
 
 const templatesSlice = (set) => ({
@@ -282,10 +285,11 @@ export const useConversationStore = create(
     // state actions
     addError: (error) => set((state) => ({ errors: [...state.errors, error] })),
     setInitial: (v) => set({ initialState: v }),
+    setAliOSSToken: (v) => set({ aliOSSToken: v }),
 
     // side effects
     fetchInitialData: async (userId) => {
-      const { addToConversationList, setTemplates, setInitial, receivedMessageList } = get();
+      const { addToConversationList, setTemplates, setInitial, receivedMessageList, setAliOSSToken } = get();
 
       const conversationsList = await fetchConversationsList({ opisn: userId });
       addToConversationList(conversationsList);
@@ -295,6 +299,9 @@ export const useConversationStore = create(
 
       setInitial(true);
 
+      const AliOSSToken = await getAliOSSToken();
+      setAliOSSToken(AliOSSToken);
+
       for (const chatItem of conversationsList) {
         const msgData = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number });
         receivedMessageList(chatItem.sn, msgData);

src/views/AuthApp.jsx

@@ -70,7 +70,7 @@ function AuthApp() {
     let interval;
     if (totalNotify > 0) {
       interval = setInterval(() => {
-        document.title = isTitleVisible ? `✉🔔🔥【${totalNotify}条新消息】` : '聊天式销售平台';
+        document.title = isTitleVisible ? `🔔🔥💬【${totalNotify}条新消息】` : '聊天式销售平台';
         setIsTitleVisible(!isTitleVisible);
       }, 500);
     } else {

src/views/Conversations/Components/Input/MediaUpload.jsx

@@ -42,10 +42,11 @@ const mockGetOSSData = () => ({
   signature: 'ZGFob25nc2hhbw==',
 });
 
-const ImageUpload = ({ disabled, invokeSendMessage }) => {
+const ImageUpload = ({ disabled }) => {
   const currentConversation = useConversationStore(state => state.currentConversation);
   const setComplexMsg = useConversationStore(state => state.setComplexMsg);
   const complexMsg = useConversationStore(state => state.complexMsg);
+  const aliOSSToken = useConversationStore(state => state.aliOSSToken);
 
   const [uploading, setUploading] = useState(false);
   const [OSSData, setOSSData] = useState();
@@ -60,7 +61,6 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
       id: uuid(),
     };
     setComplexMsg(msgObj);
-    // invokeSendMessage(msgObj);
   };
   const beforeUpload = async (file) => {
     console.log('beforeUpload', file);
@@ -78,7 +78,7 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
       const name = file.name;
       // ret = type === 'photo';
       // const filename = Date.now() + suffix;
-      // file.url = OSSData.dir + filename;
+      // file.url = aliOSSToken.dir + filename;
       handleSendImage({ previewSrc, dataUri, type, suffix, name});
     };
     // 把文件对象作为一个 dataURL 读入
@@ -86,8 +86,8 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
     return file;
     // return ret ? file : false;
 
-    // if (!OSSData) return false;
-    // const expire = Number(OSSData.expire) * 1000;
+    // if (!aliOSSToken) return false;
+    // const expire = Number(aliOSSToken.expire) * 1000;
     // if (expire < Date.now()) {
     //   // await init();
     //   const result = await mockGetOSSData();
@@ -95,13 +95,19 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
     // }
     // const suffix = file.name.slice(file.name.lastIndexOf('.'));
     // const filename = Date.now() + suffix;
-    // file.url = OSSData.dir + filename;
+    // file.url = aliOSSToken.dir + filename;
     // return file;
   };
+  const getExtraData = (file) => ({
+    key: file.url,
+    OSSAccessKeyId: aliOSSToken?.accessId,
+    policy: aliOSSToken?.policy,
+    Signature: aliOSSToken?.signature,
+  });
   const uploadProps = {
     name: 'file',
-    action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
-    // action: OSSData?.host,
+    action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', // test:
+    // action: aliOSSToken?.host,
     headers: {
       authorization: 'authorization-text',
     },

src/views/Conversations/Components/InputComposer.jsx

@@ -22,7 +22,7 @@ import { v4 as uuid } from 'uuid';
 import { sentMsgTypeMapped } from '@/lib/msgUtils';
 import InputTemplate from './Input/Template';
 import InputEmoji from './Input/Emoji';
-import InputImageUpload from './Input/ImageUpload';
+import InputMediaUpload from './Input/MediaUpload';
 import dayjs from 'dayjs';
 
 const InputComposer = () => {
@@ -138,7 +138,7 @@ const InputComposer = () => {
         <Flex gap={4} className='*:text-primary *:rounded-none'>
           <InputTemplate key='templates' disabled={!talkabled || textabled} invokeSendMessage={invokeSendMessage} />
           <InputEmoji key='emoji' disabled={!textabled} inputEmoji={addEmoji} />
-          {/* <InputImageUpload key={'addNewPic'} disabled={!textabled} invokeSendMessage={invokeSendMessage} /> */}
+          <InputMediaUpload key={'addNewMedia'} disabled={!textabled} />
           {/* <Button type='text' className='' icon={<YoutubeOutlined />} size={'middle'} />
           <Button type='text' className='' icon={<AudioOutlined />} size={'middle'} />
           <Button type='text' className='' icon={<FolderAddOutlined />} size={'middle'} />