From 4cc56ef1182eda664d212c2867db29cc666286c8 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@epfl.ch>
Date: Thu, 11 Apr 2024 13:55:49 +0200
Subject: [PATCH] Add members

---
 .../VirtualLab/VirtualLabHomePage/Member.tsx      |  4 ++--
 .../VirtualLab/VirtualLabHomePage/index.tsx       | 11 +++++------
 .../VirtualLab/VirtualLabMemberIcon/index.tsx     |  5 +++--
 .../VirtualLab/VirtualLabSidebar/index.tsx        | 15 ++++++++++++++-
 .../VirtualLabProjectItem.tsx                     |  6 +++---
 src/services/virtual-lab/labs/index.ts            |  3 ++-
 src/types/virtual-lab/lab.ts                      |  3 +--
 src/types/virtual-lab/members.ts                  | 12 +++++++++---
 8 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/components/VirtualLab/VirtualLabHomePage/Member.tsx b/src/components/VirtualLab/VirtualLabHomePage/Member.tsx
index 2ab69cda8..203ec58a6 100644
--- a/src/components/VirtualLab/VirtualLabHomePage/Member.tsx
+++ b/src/components/VirtualLab/VirtualLabHomePage/Member.tsx
@@ -1,10 +1,10 @@
 import VirtualLabMemberIcon from '../VirtualLabMemberIcon';
-import { MockRole } from '@/types/virtual-lab/members';
+import { Role } from '@/types/virtual-lab/members';
 
 type Props = {
   name: string;
   lastActive: string;
-  memberRole: MockRole;
+  memberRole: Role;
 };
 
 export default function Member({ name, lastActive, memberRole }: Props) {
diff --git a/src/components/VirtualLab/VirtualLabHomePage/index.tsx b/src/components/VirtualLab/VirtualLabHomePage/index.tsx
index a5dcdae88..7e3d2b151 100644
--- a/src/components/VirtualLab/VirtualLabHomePage/index.tsx
+++ b/src/components/VirtualLab/VirtualLabHomePage/index.tsx
@@ -14,7 +14,6 @@ import WelcomeUserBanner from './WelcomeUserBanner';
 import { basePath } from '@/config';
 import { MembersGroupIcon, StatsEditIcon } from '@/components/icons';
 import Brain from '@/components/icons/Brain';
-import { mockMembers } from '@/components/VirtualLab/mockData/members';
 import { mockProjects } from '@/components/VirtualLab/mockData/projects';
 import { mockVirtualLab } from '@/components/VirtualLab/mockData/lab';
 import { virtualLabDetailAtomFamily } from '@/state/virtual-lab/lab';
@@ -159,12 +158,12 @@ export default function VirtualLabHomePage({ id }: Props) {
       <div>
         <div className="my-5 text-lg font-bold uppercase">Members</div>
         <div className="flex-no-wrap flex overflow-x-auto overflow-y-hidden">
-          {mockMembers.map((member) => (
+          {virtualLabDetail.data.users.map((user) => (
             <Member
-              key={member.key}
-              name={member.name}
-              lastActive={member.lastActive}
-              memberRole={member.role}
+              key={user.id}
+              name={`${user.first_name} ${user.last_name}`}
+              lastActive="N/A"
+              memberRole={user.role}
             />
           ))}
         </div>
diff --git a/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx b/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx
index 45e10f1bd..28990dd10 100644
--- a/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx
+++ b/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx
@@ -1,7 +1,8 @@
-import { MockRole } from '@/types/virtual-lab/members';
+import { Role } from "@/types/virtual-lab/members";
+
 
 type Props = {
-  role: MockRole;
+  role: Role;
   name: string;
 };
 
diff --git a/src/components/VirtualLab/VirtualLabSidebar/index.tsx b/src/components/VirtualLab/VirtualLabSidebar/index.tsx
index 296459e3e..270cd43fb 100644
--- a/src/components/VirtualLab/VirtualLabSidebar/index.tsx
+++ b/src/components/VirtualLab/VirtualLabSidebar/index.tsx
@@ -50,6 +50,19 @@ export default function VirtualLabSidebar({ virtualLabId }: Props) {
     return null;
   };
 
+  /**
+   * Returns the amount of virtual lab members
+   */
+  const renderUsersAmount = () => {
+    if (virtualLab.state === 'loading') {
+      return <Spin indicator={<LoadingOutlined />} />;
+    }
+    if (virtualLab.state === 'hasData') {
+      return virtualLab.data.users.length;
+    }
+    return null;
+  };
+
   const linkItems: LinkItem[] = [
     { key: 'lab', content: 'The Virtual Lab', href: 'lab' },
     {
@@ -67,7 +80,7 @@ export default function VirtualLabSidebar({ virtualLabId }: Props) {
       content: (
         <div className="flex justify-between">
           <span>Team</span>
-          <span className="font-normal text-primary-3">23 members</span>
+          <span className="font-normal text-primary-3">{renderUsersAmount()} members</span>
         </div>
       ),
       href: 'team',
diff --git a/src/components/VirtualLab/projects/VirtualLabProjectList/VirtualLabProjectItem.tsx b/src/components/VirtualLab/projects/VirtualLabProjectList/VirtualLabProjectItem.tsx
index f540291c2..34fe2e57b 100644
--- a/src/components/VirtualLab/projects/VirtualLabProjectList/VirtualLabProjectItem.tsx
+++ b/src/components/VirtualLab/projects/VirtualLabProjectList/VirtualLabProjectItem.tsx
@@ -40,13 +40,13 @@ export default function VirtualLabProjectItem({ project }: Props) {
         <VirtualLabStatistic
           icon={<EyeTargetIcon style={iconStyle} />}
           title="Explore sessions"
-          detail={350}
+          detail="N/A"
         />
-        <VirtualLabStatistic icon={<Brain style={iconStyle} />} title="Builds" detail={18} />
+        <VirtualLabStatistic icon={<Brain style={iconStyle} />} title="Builds" detail="N/A" />
         <VirtualLabStatistic
           icon={<StatsEditIcon style={iconStyle} />}
           title="Simulation experiments"
-          detail={30}
+          detail="N/A"
         />
         <VirtualLabStatistic
           icon={<UserOutlined style={iconStyle} />}
diff --git a/src/services/virtual-lab/labs/index.ts b/src/services/virtual-lab/labs/index.ts
index 3491cc9d6..45a51febd 100644
--- a/src/services/virtual-lab/labs/index.ts
+++ b/src/services/virtual-lab/labs/index.ts
@@ -5,7 +5,8 @@ import { Project } from '@/types/virtual-lab/projects';
 
 // Add the bearer token from the frontend below
 // This constant will be replaced by the actual login token as soon as login is implemented
-const accessToken = 'Bearer <TOKEN>';
+const accessToken =
+  'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJza2hnaTdjRWxFbEJzRFpnZXh1NGlvSzBNV081eGtQbWlXWENYang4eHVrIn0.eyJleHAiOjE3OTkxNDg2NjQsImlhdCI6MTcxMjgzNTA2NCwianRpIjoiNmVmYmZkY2UtZmVjOS00Y2Y2LWE0OWQtMzhhYmQyOWVkMzJjIiwiaXNzIjoiaHR0cDovL2tleWNsb2FrOjgwODAvcmVhbG1zL29icC1yZWFsbSIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiIzYmE3MWNjZi1hNjIzLTQ1YjAtYTg1My0zYTNlYTUxZWZiY2QiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJvYnBhcHAiLCJzZXNzaW9uX3N0YXRlIjoiYThhOGMxNWYtMWVkNy00ZjhmLThjYTgtYjM5ODhiNjczODRkIiwiYWNyIjoiMSIsInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJvZmZsaW5lX2FjY2VzcyIsInVtYV9hdXRob3JpemF0aW9uIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCIsInNpZCI6ImE4YThjMTVmLTFlZDctNGY4Zi04Y2E4LWIzOTg4YjY3Mzg0ZCIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJuYW1lIjoidGVzdCB0ZXN0IiwicHJlZmVycmVkX3VzZXJuYW1lIjoidGVzdCIsImdpdmVuX25hbWUiOiJ0ZXN0IiwiZmFtaWx5X25hbWUiOiJ0ZXN0IiwiZW1haWwiOiJ0ZXN0QHRlc3QuY29tIn0.WleEYbDtgD108SFsDAKFZYraLjxDxgulZnjUD4cZ4fI1_5NJoo1iYnnI14yL0UZNy7robNzQEQN-xCwhXPYnYHIOWg7cRv1DbfNRLcY9hWRgiMNjQkwxmRJ4gl9LwoZrxrzaaAjGXY96lXqxuTjZfLfGcxwPMu0uN6PcX7r9BTUrm4nX_nEdgkFLss4gHnVWSE6-quqxOd7dlhJAn3o96Qh4WG-n_e0L1DbGs9-TvQbHNHQUFn5C4h9wpL_LW2VMPbPqyuS6mqDXIINl0yBARkUdq548eKRF37d4rMuk5p8yDnBqq-Fv-hbVfDj-MGOEYIzdzwiInv6uSjht-nqqwQ';
 
 export async function getVirtualLabDetail(id: string): Promise<VirtualLabAPIResponse> {
   const response = await fetch(`${virtualLabApi.url}/virtual-labs/${id}`, {
diff --git a/src/types/virtual-lab/lab.ts b/src/types/virtual-lab/lab.ts
index 5eb8a8f8f..efd0032ae 100644
--- a/src/types/virtual-lab/lab.ts
+++ b/src/types/virtual-lab/lab.ts
@@ -8,6 +8,7 @@ export type VirtualLab = {
   reference_email: string;
   budget: number;
   plan_id: number;
+  users: VirtualLabMember[];
 };
 
 export enum VirtualLabPlanType {
@@ -17,8 +18,6 @@ export enum VirtualLabPlanType {
   advanced = 'advanced',
 }
 
-export type NewMember = Pick<VirtualLabMember, 'email' | 'role'>;
-
 export type MockBilling = {
   organization: string;
   firstname: string;
diff --git a/src/types/virtual-lab/members.ts b/src/types/virtual-lab/members.ts
index 56c5b07b7..2115ddc05 100644
--- a/src/types/virtual-lab/members.ts
+++ b/src/types/virtual-lab/members.ts
@@ -1,5 +1,7 @@
 export type MockRole = 'administrator' | 'member';
 
+export type Role = 'admin' | 'member';
+
 export type MockMember = {
   key: string;
   name: string;
@@ -7,8 +9,12 @@ export type MockMember = {
   role: MockRole;
 };
 export interface VirtualLabMember {
+  id: string;
+  username: string;
+  created_at: string;
+  first_name: string;
+  last_name: string;
+  invite_accepted: boolean;
+  role: Role;
   name: string;
-  email: string;
-  role: 'admin' | 'user';
-  lastActive?: number;
 }