From 8eec5b345579d480c0cdb8d6baac534effac6742 Mon Sep 17 00:00:00 2001
From: Sosthene <contact@3ni.tech>
Date: Wed, 11 Jun 2025 20:37:52 +0200
Subject: [PATCH] Filter my processes in processes viewer

---
 src/App.tsx                        |  2 +-
 src/components/ProcessesViewer.tsx | 98 ++++++++++++++++++------------
 2 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5742652..1a0b510 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -169,7 +169,7 @@ function App() {
             {/* Espace pour contenu supplémentaire à droite */}
             <div className="content-area">
               {/* Affichage des blocs de la blockchain */}
-              <BlockchainViewer processes={processes} />
+              <BlockchainViewer processes={processes} myProcesses={myProcesses}/>
             </div>
           </div>
 
diff --git a/src/components/ProcessesViewer.tsx b/src/components/ProcessesViewer.tsx
index 2ee4e7b..0b8c671 100644
--- a/src/components/ProcessesViewer.tsx
+++ b/src/components/ProcessesViewer.tsx
@@ -21,10 +21,16 @@ interface Processes {
 
 interface ProcessesViewerProps {
   processes: Processes | null;
+  myProcesses: string[];
 }
 
-function ProcessesViewer({ processes }: ProcessesViewerProps) {
+function ProcessesViewer({ processes, myProcesses }: ProcessesViewerProps) {
   const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
+  const [isFiltered, setIsFiltered] = useState<boolean>(false);
+
+  const handleFilterClick = () => {
+    setIsFiltered(prev => !prev);
+  };
 
   // Si pas de données, afficher un message
   if (!processes || Object.keys(processes).length === 0) {
@@ -87,21 +93,30 @@ function ProcessesViewer({ processes }: ProcessesViewerProps) {
   return (
     <div className="processes-viewer">
       <h2>Processus</h2>
+      <button onClick = {handleFilterClick}>
+        {isFiltered ? 'Show All Processes' : 'Filter Processes'}
+      </button>
       <p className="block-count">{Object.keys(processes).length} processus disponible(s)</p>
 
       <div className="block-list">
-        {Object.entries(processes).map(([blockId, block]) => {
-          const isExpanded = expandedBlocks.includes(blockId);
-          const stateCount = block.states.length;
+        {Object.entries(processes).map(([processId, process]) => {
+          if (isFiltered) {
+            // skip processes that are not in myProcesses
+            if (!myProcesses.includes(processId)) {
+              return;
+            }
+          }
+          const isExpanded = expandedBlocks.includes(processId);
+          const stateCount = process.states.length - 1; // We just ignore the last state, which is always empty
           // Le premier état est le plus récent
 
           return (
-            <div key={blockId} className="block-item">
+            <div key={processId} className="block-item">
               <div
                 className={`block-header ${isExpanded ? 'expanded' : ''}`}
-                onClick={() => toggleBlock(blockId)}
+                onClick={() => toggleBlock(processId)}
               >
-                <div className="block-id">{blockId.substring(0, 8)}...{blockId.substring(blockId.length - 4)}</div>
+                <div className="block-id">{processId.substring(0, 8)}...{processId.substring(processId.length - 4)}</div>
                 <div className="block-state-count">{stateCount} état(s)</div>
                 <div className="block-toggle">{isExpanded ? '▼' : '▶'}</div>
               </div>
@@ -109,45 +124,48 @@ function ProcessesViewer({ processes }: ProcessesViewerProps) {
               {isExpanded && (
                 <div className="block-details">
                   <div className="block-complete-id">
-                    <strong>ID complet:</strong> {blockId}
+                    <strong>ID complet:</strong> {processId}
                   </div>
 
-                  {block.states.map((state, index) => (
-                    <div key={`${blockId}-state-${index}`} className="state-item">
-                      <h4>État {index + 1}</h4>
-                      <div className="state-detail">
-                        <strong>State ID:</strong> {state.state_id}
-                      </div>
-                      <div className="state-detail">
-                        <strong>Commited dans:</strong> {state.commited_in}
-                      </div>
-
-                      <div className="state-public-data">
-                        <h5>Données publiques</h5>
-                        <div className="public-data-item">
-                          <strong>Nom:</strong> {formatName(state.public_data.memberPublicName)}
+                  {process.states.map((state, index) => {
+                    if (index === stateCount - 1) return null;
+                    return (
+                      <div key={`${processId}-state-${index}`} className="state-item">
+                        <h4>État {index + 1}</h4>
+                        <div className="state-detail">
+                          <strong>State ID:</strong> {state.state_id}
                         </div>
-                        {state.public_data.pairedAddresses && (
+                        <div className="state-detail">
+                          <strong>Commited dans:</strong> {state.commited_in}
+                        </div>
+
+                        <div className="state-public-data">
+                          <h5>Données publiques</h5>
                           <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>
+                            <strong>Nom:</strong> {formatName(state.public_data.memberPublicName)}
                           </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>
-                    </div>
-                  ))}
+                    );
+                  })}
                 </div>
               )}
             </div>