Avatars are now show in the user list table

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "0.9.25",
+  "version": "0.9.26",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "0.9.25",
+      "version": "0.9.26",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",
@@ -27,7 +27,7 @@
         "react-router-dom": "^5.2.0",
         "react-widgets": "^5.1.1",
         "sass": "^1.35.1",
-        "ucentral-libs": "^0.8.24",
+        "ucentral-libs": "^0.8.25",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -14218,9 +14218,9 @@
       }
     },
     "node_modules/ucentral-libs": {
-      "version": "0.8.24",
+      "version": "0.8.25",
-      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.24.tgz",
+      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.25.tgz",
-      "integrity": "sha512-7xjrrUvu83L0a3lnRwysMRrdaenK/tabQhjX/hbE4rbBIqR8UYglSNU/ZgUKCivXQtpNbWXywJnQefEh7iSFiA==",
+      "integrity": "sha512-4a7MZob8ondxbdsW+ub6MNxeSCFp6AuEGZCVPSc7zu3SqNC6NxqslsAR2z9tjnsq/2p55FLJuMd0SR3uEGqwLw==",
       "engines": {
         "node": ">=10"
       },
@@ -26465,9 +26465,9 @@
       }
     },
     "ucentral-libs": {
-      "version": "0.8.24",
+      "version": "0.8.25",
-      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.24.tgz",
+      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.25.tgz",
-      "integrity": "sha512-7xjrrUvu83L0a3lnRwysMRrdaenK/tabQhjX/hbE4rbBIqR8UYglSNU/ZgUKCivXQtpNbWXywJnQefEh7iSFiA==",
+      "integrity": "sha512-4a7MZob8ondxbdsW+ub6MNxeSCFp6AuEGZCVPSc7zu3SqNC6NxqslsAR2z9tjnsq/2p55FLJuMd0SR3uEGqwLw==",
       "requires": {}
     },
     "unbox-primitive": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "0.9.25",
+  "version": "0.9.26",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
@@ -21,7 +21,7 @@
     "react-router-dom": "^5.2.0",
     "react-widgets": "^5.1.1",
     "sass": "^1.35.1",
-    "ucentral-libs": "^0.8.24",
+    "ucentral-libs": "^0.8.25",
     "uuid": "^8.3.2"
   },
   "main": "index.js",

src/layout/index.js

@@ -48,6 +48,7 @@ const TheLayout = () => {
           t={t}
           i18n={i18n}
           logout={logout}
+          logo="assets/OpenWiFi_LogoLockup_DarkGreyColour.svg"
           authToken={currentToken}
           endpoints={endpoints}
           user={user}
@@ -56,7 +57,7 @@ const TheLayout = () => {
         <div className="c-body">
           <PageContainer t={t} routes={routes} redirectTo="/devices" />
         </div>
-        <Footer t={t} version="0.9.24" />
+        <Footer t={t} version="0.9.25" />
       </div>
     </div>
   );

src/pages/UserListPage/index.js

@@ -55,6 +55,71 @@ const UserListPage = () => {
       });
   };
 
+  const getAvatarPromises = (userIds) => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+      responseType: 'arraybuffer',
+    };
+
+    const promises = userIds.map(async (id) =>
+      axiosInstance.get(`${endpoints.ucentralsec}/api/v1/avatar/${id}`, options),
+    );
+
+    return promises;
+  };
+
+  const displayUsers = async () => {
+    setLoading(true);
+
+    const startIndex = page * usersPerPage;
+    const endIndex = parseInt(startIndex, 10) + parseInt(usersPerPage, 10);
+    const idsToGet = users
+      .slice(startIndex, endIndex)
+      .map((x) => encodeURIComponent(x))
+      .join(',');
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+
+    const avatarRequests = getAvatarPromises(users.slice(startIndex, endIndex));
+
+    const avatars = await Promise.all(avatarRequests).then((results) =>
+      results.map((response) => {
+        const base64 = btoa(
+          new Uint8Array(response.data).reduce(
+            (data, byte) => data + String.fromCharCode(byte),
+            '',
+          ),
+        );
+        return `data:;base64,${base64}`;
+      }),
+    );
+
+    axiosInstance
+      .get(`${endpoints.ucentralsec}/api/v1/users?select=${idsToGet}`, {
+        headers,
+      })
+      .then((response) => {
+        const newUsers = response.data.users.map((user, index) => {
+          const newUser = {
+            ...user,
+            avatar: avatars[index],
+          };
+          return newUser;
+        });
+        setUsersToDisplay(newUsers);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
+
   const deleteUser = (userId) => {
     setDeleteLoading(true);
 
@@ -85,34 +150,6 @@ const UserListPage = () => {
       });
   };
 
-  const displayUsers = () => {
-    setLoading(true);
-
-    const startIndex = page * usersPerPage;
-    const endIndex = parseInt(startIndex, 10) + parseInt(usersPerPage, 10);
-    const idsToGet = users
-      .slice(startIndex, endIndex)
-      .map((x) => encodeURIComponent(x))
-      .join(',');
-
-    const headers = {
-      Accept: 'application/json',
-      Authorization: `Bearer ${currentToken}`,
-    };
-
-    axiosInstance
-      .get(`${endpoints.ucentralsec}/api/v1/users?select=${idsToGet}`, {
-        headers,
-      })
-      .then((response) => {
-        setUsersToDisplay(response.data.users);
-        setLoading(false);
-      })
-      .catch(() => {
-        setLoading(false);
-      });
-  };
-
   const updateUsersPerPage = (value) => {
     setItem('usersPerPage', value);
     setUsersPerPage(value);