add members list to UI

client/src/App.jsx

@@ -43,6 +43,7 @@ function App() {
   const [totalReputation, setTotalReputation] = useState();
   const [posts, dispatchPost] = useList();
   const [validationPools, dispatchValidationPool] = useList();
+  const [members, dispatchMember] = useList();
 
   const [showAddPost, setShowAddPost] = useState(false);
   const [showViewPost, setShowViewPost] = useState(false);
@@ -133,6 +134,24 @@ function App() {
     await Promise.all(promises);
   }, [DAORef, dispatchValidationPool, fetchValidationPool]);
 
+  const fetchMember = useCallback(async (memberIndex) => {
+    const id = await DAORef.current.methods.members(memberIndex).call();
+    const member = { id };
+    member.reputation = await DAORef.current.methods.balanceOf(id).call();
+    dispatchMember({ type: 'updateById', item: member });
+    return member;
+  }, [DAORef, dispatchMember]);
+
+  const fetchMembers = useCallback(async () => {
+    const count = await DAORef.current.methods.memberCount().call();
+    const promises = [];
+    dispatchMember({ type: 'refresh' });
+    for (let i = 0; i < count; i += 1) {
+      promises.push(fetchMember(i));
+    }
+    await Promise.all(promises);
+  }, [DAORef, dispatchMember, fetchMember]);
+
   /* -------------------------------------------------------------------------------- */
   /* --------------------------- END FETCHERS --------------------------------------- */
   /* -------------------------------------------------------------------------------- */
@@ -151,6 +170,7 @@ function App() {
     onboardingRef.current = OnboardingContract;
 
     fetchReputation();
+    fetchMembers();
     fetchPosts();
     fetchValidationPools();
 
@@ -204,7 +224,7 @@ function App() {
     };
   }, [provider, account, chainId, balance, dispatchValidationPool, dispatchPost, reputation,
     DAORef, workRef, onboardingRef,
-    fetchPost, fetchPosts, fetchReputation, fetchValidationPool, fetchValidationPools,
+    fetchPost, fetchPosts, fetchReputation, fetchValidationPool, fetchValidationPools, fetchMembers,
   ]);
 
   /* -------------------------------------------------------------------------------- */
@@ -351,6 +371,29 @@ function App() {
           </Container>
           <Tabs>
             <Tab eventKey="admin" title="Admin">
+              <h2>Members</h2>
+              <div>
+                {`Members count: ${members.length}`}
+              </div>
+              <div>
+                <table className="table">
+                  <thead>
+                    <tr>
+                      <th>ID</th>
+                      <th>Reputation</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {members.filter((x) => !!x).map((member) => (
+                      <tr key={member.id}>
+                        <td>{member.id}</td>
+                        <td>{member.reputation.toString()}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {' '}
               <h2>Posts</h2>
               <div>
                 <Button onClick={handleShowAddPost}>Add Post</Button>

client/src/utils/List.js

@@ -7,6 +7,15 @@ const updateList = (list, action) => {
       newList[Number(action.item.id)] = action.item;
       return newList;
     }
+    case 'updateById': {
+      const newList = [...list];
+      let itemIndex = newList.findIndex((item) => item.id === action.item.id);
+      if (itemIndex < 0) {
+        itemIndex = newList.length;
+      }
+      newList[itemIndex] = action.item;
+      return newList;
+    }
     case 'refresh':
     default:
       return [];