feat: server member count

src/app/services/server.js

@@ -14,6 +14,9 @@ export const serverApi = createApi({
         return data;
       },
     }),
+    getMetrics: builder.query({
+      query: () => ({ url: `/admin/system/metrics` }),
+    }),
     getFirebaseConfig: builder.query({
       query: () => ({ url: `admin/fcm/config` }),
     }),
@@ -72,6 +75,7 @@ export const {
   useGetAgoraConfigQuery,
   useUpdateAgoraConfigMutation,
   useGetServerQuery,
+  useLazyGetMetricsQuery,
   useLazyGetServerQuery,
   useUpdateServerMutation,
   useUpdateLogoMutation,

src/routes/home/ServerDropList.js

@@ -16,33 +16,46 @@ const StyledWrapper = styled.div`
   .server {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     .logo {
-      width: 24px;
+      width: 28px;
-      height: 24px;
+      height: 28px;
       border-radius: 50%;
     }
+    .info {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
       .title {
+        font-weight: bold;
         white-space: nowrap;
+        font-size: 14px;
+        line-height: 100%;
+        color: #374151;
+        text-transform: capitalize;
+      }
+      .count {
         font-weight: normal;
-      font-style: normal;
-      font-weight: 600;
         font-size: 12px;
-      line-height: 18px;
+        line-height: 100%;
-      color: #1c1c1e;
+        color: #78787c;
+      }
     }
   }
 `;
-export default function ServerDropList({ data, expand = true }) {
+export default function ServerDropList({ data, memberCount, expand = true }) {
   if (!data) return null;
   return (
     <StyledWrapper className={expand ? "expand" : ""}>
       <div className="server">
         <img className="logo" src={data.logo} alt="logo" />
         {expand && (
+          <div className="info">
             <h2 className="title animate__animated animate__fadeIn">
               {data.name}
             </h2>
+            <span className="count">{memberCount} members</span>
+          </div>
         )}
       </div>
     </StyledWrapper>

src/routes/home/index.js

@@ -41,7 +41,11 @@ export default function HomePage() {
       {ready ? (
         <StyledWrapper>
           <div className={`col left ${menuExpand ? "expand" : ""}`}>
-            <ServerDropList data={data?.server} expand={menuExpand} />
+            <ServerDropList
+              data={data?.server}
+              memberCount={data?.metrics?.user_count}
+              expand={menuExpand}
+            />
             <nav className="nav">
               <NavLink className="link" to={"/chat"}>
                 <img src={ChatIcon} alt="chat icon" />{" "}

src/routes/home/usePreload.js

@@ -7,7 +7,10 @@ import { clearAuthData, setUserData } from "../../app/slices/auth.data";
 import { setContacts } from "../../app/slices/contacts";
 
 // import { useGetChannelsQuery } from "../../app/services/channel";
-import { useLazyGetServerQuery } from "../../app/services/server";
+import {
+  useLazyGetServerQuery,
+  useLazyGetMetricsQuery,
+} from "../../app/services/server";
 import { KEY_UID } from "../../app/config";
 // pollingInterval: 0,
 // const querySetting = {
@@ -36,6 +39,15 @@ export default function usePreload() {
       data: server,
     },
   ] = useLazyGetServerQuery();
+  const [
+    getMetrics,
+    {
+      isLoading: metricsLoading,
+      isSuccess: metricsSuccess,
+      isError: metricsError,
+      data: metrics,
+    },
+  ] = useLazyGetMetricsQuery();
   useEffect(() => {
     initCache();
     rehydrate();
@@ -43,6 +55,7 @@ export default function usePreload() {
   useEffect(() => {
     getContacts();
     getServer();
+    getMetrics();
   }, []);
 
   useEffect(() => {
@@ -64,12 +77,18 @@ export default function usePreload() {
     }
   }, [contacts]);
   return {
-    loading: contactsLoading || serverLoading || !checked || !cacheFirst,
+    loading:
-    error: contactsError && serverError,
+      contactsLoading ||
-    success: contactsSuccess && serverSuccess,
+      serverLoading ||
+      metricsLoading ||
+      !checked ||
+      !cacheFirst,
+    error: contactsError && serverError && metricsError,
+    success: contactsSuccess && serverSuccess && metricsSuccess,
     data: {
       contacts,
       server,
+      metrics,
     },
   };
 }