Display private data for each process

src/App.tsx

@@ -14,7 +14,7 @@ import FolderModal from './components/FolderModal';
 import { ProfilePrivateFields, setDefaultProfileRoles, type ProfileCreated, type ProfileData } from './sdk/models/ProfileData'
 import { FolderPrivateFields, setDefaultFolderRoles, type FolderCreated, type FolderData } from './sdk/models/FolderData'
 
-const iframeUrl = 'https://dev3.4nkweb.com'
+export const iframeUrl = 'https://dev3.4nkweb.com'
 
 function App() {
   const [receivedMessages, setReceivedMessages] = useState<{ timestamp: string; data: any }[]>([])

src/components/ProcessesViewer.css

@@ -172,3 +172,9 @@
   margin-bottom: 0.25rem;
   font-size: 0.8rem;
 }
+
+.process-actions {
+  margin-top: 20px;
+  padding: 10px;
+  text-align: center;
+}

src/components/ProcessesViewer.tsx

@@ -1,14 +1,14 @@
 import { useState, memo } from 'react';
 import './ProcessesViewer.css';
+import { isFileBlob, type FileBlob } from '../sdk/models/Data';
+import MessageBus from '../sdk/MessageBus';
+import { iframeUrl } from '../App';
 
 interface BlockState {
   commited_in: string;
   state_id: string;
   pcd_commitment: Record<string, string>;
-  public_data: {
+  public_data: Record<string, any>;
-    memberPublicName?: string | number[];
-    pairedAddresses?: string[] | number[];
-  };
   // Autres propriétés disponibles si nécessaires
 }
 
@@ -28,6 +28,7 @@ interface ProcessesViewerProps {
 function ProcessesViewer({ processes, myProcesses }: ProcessesViewerProps) {
   const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
   const [isFiltered, setIsFiltered] = useState<boolean>(false);
+  const [privateData, setPrivateData] = useState<Record<string, Record<string, any>>>({});
 
   const handleFilterClick = () => {
     setIsFiltered(prev => !prev);
@@ -51,24 +52,49 @@ function ProcessesViewer({ processes, myProcesses }: ProcessesViewerProps) {
     );
   };
 
-  const formatAddress = (address: string | number[] | undefined): string => {
+  const fetchPrivateData = async (processId: string, stateId: string) => {
-    if (!address) return "Adresse non disponible";
+    if (!expandedBlocks.includes(processId) || !myProcesses.includes(processId)) {
-
+      return;
-    if (Array.isArray(address)) {
-      // Si c'est un tableau de nombres, on le convertit en chaîne de caractères
-      try {
-        // Convertir les codes ASCII en caractères
-        const chars = address.map(code => String.fromCharCode(Number(code)));
-        return chars.join('');
-      } catch (e) {
-        return "Adresse encodée (format non supporté)";
-      }
-    } else if (typeof address === 'string') {
-      // Si c'est déjà une chaîne, on la retourne telle quelle
-      return address;
     }
+    try {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      await messageBus.isReady();
 
-    return "Format d'adresse inconnu";
+      const data = await messageBus.getData(processId, stateId);
+      console.log(data);
+
+      setPrivateData(prev => ({
+        ...prev,
+        [stateId]: data
+      }));
+      console.log(privateData);
+    } catch (error) {
+      console.error('Error fetching private data:', error);
+    }
+  };
+
+  const handleDownload = (name: string | undefined, fileBlob: FileBlob) => {
+    const blob = new Blob([fileBlob.data], { type: fileBlob.type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name || 'download';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const formatValue = (key: string, value: string | number[] | FileBlob) => {
+    if (isFileBlob(value)) {
+      return (
+        <div>
+          <span>{key}</span>
+          <button onClick={() => handleDownload(key, value)}>Download</button>
+        </div>
+      );
+    }
+    return JSON.stringify(value || ''); // TODO handle most common cases
   };
 
   const formatName = (name: string | number[] | undefined): string => {
@@ -154,29 +180,46 @@ function ProcessesViewer({ processes, myProcesses }: ProcessesViewerProps) {
                           </ul>
                         </div>
 
+                        <div className="state-private-data">
+                          <h5>Données privées</h5>
+                          <div className="private-data-item">
+                            {!myProcesses.includes(processId) ? (
+                              <div className="no-data-message">
+                                Vous n'avez pas accès aux données privées de ce processus
+                              </div>
+                            ) : !privateData[state.state_id] ? (
+                              (() => {
+                                fetchPrivateData(processId, state.state_id);
+                                return <div>Chargement...</div>;
+                              })()
+                            ) : Object.keys(privateData[state.state_id]).length > 0 ? (
+                              Object.entries(privateData[state.state_id]).map(([key, value]) => (
+                                <div key={key}>
+                                  <strong>{key}:</strong> {formatValue(key, value)}
+                                </div>
+                              ))
+                            ) : (
+                              <div className="no-data-message">
+                                Aucune donnée privée disponible
+                              </div>
+                            )}
+                          </div>
+                        </div>
                         <div className="state-public-data">
                           <h5>Données publiques</h5>
                           <div className="public-data-item">
-                            <strong>Nom:</strong> {formatName(state.public_data.memberPublicName)}
+                            {Object.keys(state.public_data).length > 0 ? (
+                              Object.entries(state.public_data).map(([key, value]) => (
+                                <div key={key}>
+                                  <strong>{key}:</strong> {formatValue(key, value)}
+                                </div>
+                              ))
+                            ) : (
+                              <div className="no-data-message">
+                                Aucune donnée publique disponible
+                              </div>
+                            )}
                           </div>
-                          {state.public_data.pairedAddresses && (
-                            <div className="public-data-item">
-                              <strong>Adresses associées:</strong>
-                              <ul className="address-list">
-                                {Array.isArray(state.public_data.pairedAddresses) ?
-                                  (typeof state.public_data.pairedAddresses[0] === 'string' ? (
-                                    (state.public_data.pairedAddresses as string[]).map((addr, i) => (
-                                      <li key={i}>{addr}</li>
-                                    ))
-                                  ) : (
-                                    <li>{formatAddress(state.public_data.pairedAddresses as number[])}</li>
-                                  )) : (
-                                    <li>{String(state.public_data.pairedAddresses || '')}</li>
-                                  )
-                                }
-                              </ul>
-                            </div>
-                          )}
                         </div>
                       </div>
                     );

src/sdk/MessageBus.ts

@@ -264,8 +264,8 @@ export default class MessageBus {
     });
   }
 
-  public getData(processId: string, stateId: string): Promise<any> {
+  public getData(processId: string, stateId: string): Promise<Record<string, any>> {
-    return new Promise<any>((resolve: (data: any) => void, reject: (error: string) => void) => {
+    return new Promise<Record<string, any>>((resolve: (data: Record<string, any>) => void, reject: (error: string) => void) => {
       this.checkToken().then(() => {
         const userStore = UserStore.getInstance();
         const accessToken = userStore.getAccessToken()!;
@@ -273,7 +273,7 @@ export default class MessageBus {
         const correlationId = uuidv4();
         this.initMessageListener(correlationId);
 
-        const unsubscribe = EventBus.getInstance().on('DATA_RETRIEVED', (responseId: string, data: any) => {
+        const unsubscribe = EventBus.getInstance().on('DATA_RETRIEVED', (responseId: string, data: Record<string, any>) => {
           if (responseId !== correlationId) {
             return;
           }
@@ -295,7 +295,7 @@ export default class MessageBus {
           type: 'RETRIEVE_DATA',
           processId,
           stateId,
-          token: accessToken
+          accessToken
         });
       }).catch(console.error);
     });
@@ -596,28 +596,6 @@ export default class MessageBus {
         EventBus.getInstance().emit('GET_MY_PROCESSES', correlationId, message.myProcesses);
         break;
 
-      case 'PROFILE_CREATED': // CREATE_PROFILE
-        if (this.errors[correlationId]) {
-          const error = this.errors[correlationId];
-          delete this.errors[correlationId];
-          EventBus.getInstance().emit('ERROR_PROFILE_CREATED', correlationId, error);
-          return;
-        }
-        EventBus.getInstance().emit('MESSAGE_RECEIVED', message);
-        EventBus.getInstance().emit('PROFILE_CREATED', correlationId, message.profileCreated);
-        break;
-
-      case 'FOLDER_CREATED': // CREATE_FOLDER
-        if (this.errors[correlationId]) {
-          const error = this.errors[correlationId];
-          delete this.errors[correlationId];
-          EventBus.getInstance().emit('ERROR_FOLDER_CREATED', correlationId, error);
-          return;
-        }
-        EventBus.getInstance().emit('MESSAGE_RECEIVED', message);
-        EventBus.getInstance().emit('FOLDER_CREATED', message.folderCreated);
-        break;
-
       case 'DATA_RETRIEVED': // RETRIEVE_DATA
         if (this.errors[correlationId]) {
           const error = this.errors[correlationId];