[DOCS] - 調整 mobileUpload Sequence Diagram

[TzuHanLiang]

Summary

因為poxa原生不支援雙向溝通所以需要重新調整 mobileUpload Sequence Diagram

Tasks

• [x] mobileUpload Sequence Diagram
• [x] 跟 Luphia 及 Jacky 確認

Dependencies

API Documentation

Other Dependencies

No response

Additional Notes

原先的流程圖：#3096

[TzuHanLiang]

sequenceDiagram
title Optimized Workflow for Encrypted Photo Uploads and Chat Room Updates

participant Mobile Frontend
participant PC Frontend
participant Backend
participant Pusher

%% 1. Create Chat Room
PC Frontend ->> Backend: POST /room (Create chat room with token)
activate Backend
Backend -->> PC Frontend: Return roomData: IRoom | IRoom[] | null
note over Backend, PC Frontend: Why IRoom[]? When multiple rooms exist under specific criteria.
deactivate Backend

%% 2. Display QR Code and Subscribe to Pusher
PC Frontend ->> PC Frontend: Display QR Code [certificate_qrcode_modal.tsx]
PC Frontend ->> Pusher: Subscribe to PRIVATE_CHANNEL.ROOM-${roomData.id}
activate Pusher
PC Frontend ->> Pusher: Bind to ROOM_EVENT.NEW_FILE

%% 3. Mobile Frontend Scans QR Code
Mobile Frontend ->> Mobile Frontend: Scan QR code and retrieve chat room token
Mobile Frontend ->> Mobile Frontend: Open upload UI [mobile_upload.tsx]

%% 4. Select and Encrypt Files
Mobile Frontend ->> Mobile Frontend: Select photos (IFileUIBetaWithFile[])
loop Encrypt and Upload Each Photo
    Mobile Frontend ->> Mobile Frontend: Encrypt file (encryptFile)
    Mobile Frontend ->> Backend: POST /room/:room_id/file (Upload encrypted photo data)
    activate Backend
    Backend ->> Pusher: Trigger ROOM_EVENT.NEW_FILE
    activate Pusher
    Pusher ->> PC Frontend: ROOM_EVENT.NEW_FILE
    PC Frontend ->> PC Frontend: Update UI [FloatingUploadPopup.tsx] with new file status
    deactivate Pusher
    deactivate Backend
end

%% 5. Retrieve Photo Metadata (PC Frontend)
PC Frontend ->> Backend: GET /room/:room_id (Retrieve photo metadata)
activate Backend
Backend -->> PC Frontend: Return IRoom | IRoom[] | null
deactivate Backend
PC Frontend ->> PC Frontend: Update UI with photo metadata and status

%% 6. Delete Chat Room and Related Files
PC Frontend ->> Backend: DELETE /room/:room_id (Clean up chat room and files)
activate Backend
Backend -->> PC Frontend: Confirm room and file deletion
deactivate Backend

[TzuHanLiang]

took 1hrs 需要跟 luphia 進一步確認，是不是要一次上傳全部的 file，而不是用 loop 的形式，以及確認 APIName.ROOM_ADD 及 APIName.ROOM_GET_BY_ID 的回傳格式為什麼是 IRoom | IRoom[] | null 什麼時候會需要 IRoom[] remain 1hrs

[TzuHanLiang]

更新後的 Sequence Diagram

sequenceDiagram
title Optimized Workflow for Encrypted Photo Uploads and Chat Room Updates

participant Mobile Frontend
participant PC Frontend
participant Backend
participant Pusher

%% 1. Create Chat Room
PC Frontend ->> Backend: POST /room (Create chat room with token)
activate Backend
Backend -->> PC Frontend: Return roomData: IRoom | IRoom[] | null
note over Backend, PC Frontend: Why IRoom[]? When multiple rooms exist under specific criteria.
deactivate Backend

%% 2. Display QR Code and Subscribe to Pusher
PC Frontend ->> PC Frontend: Display QR Code [certificate_qrcode_modal.tsx]
PC Frontend ->> Pusher: Subscribe to PRIVATE_CHANNEL.ROOM-${roomData.id}
activate Pusher
PC Frontend ->> Pusher: Bind to ROOM_EVENT.NEW_FILE

%% 3. Mobile Frontend Scans QR Code
Mobile Frontend ->> Mobile Frontend: Scan QR code and retrieve chat room token
Mobile Frontend ->> Mobile Frontend: Open upload UI [mobile_upload.tsx]

%% 4. Select and Encrypt Files
Mobile Frontend ->> Mobile Frontend: Select photos (IFileUIBetaWithFile[])
loop Encrypt and Upload Each Photo
    Mobile Frontend ->> Mobile Frontend: Encrypt file (encryptFile)
    Mobile Frontend ->> Backend: POST /room/:room_id/file (Upload encrypted photo data)
    activate Backend
    Backend ->> Pusher: Trigger ROOM_EVENT.NEW_FILE
    activate Pusher
    Pusher ->> PC Frontend: ROOM_EVENT.NEW_FILE
[FloatingUploadPopup.tsx] with new file status
    deactivate Pusher
    deactivate Backend
%% 5. Retrieve Photo Metadata (PC Frontend)
activate Backend
PC Frontend ->> Backend: GET /room/:room_id (Retrieve photo metadata)
Backend -->> PC Frontend: Return IRoom | IRoom[] | null
deactivate Backend
PC Frontend ->> PC Frontend: Update UI with photo metadata and status
end

%% 6. Delete Chat Room and Related Files
PC Frontend ->> Backend: DELETE /room/:room_id (Clean up chat room and files)
activate Backend
Backend -->> PC Frontend: Confirm room and file deletion
deactivate Backend

[TzuHanLiang]

took 1hrs done