From 4fed7cbb1aa2507dc1ff5e24dba352aa8d3578f7 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Wed, 6 Dec 2023 04:23:17 +0530
Subject: [PATCH] wip session lobby

---
 jam-ui/src/components/sessions/JKLobbyChat.js | 24 +++++++++++--------
 jam-ui/src/components/sessions/JKLobbyUser.js | 23 ++++++++++++++++++
 .../components/sessions/JKLobbyUserList.js    | 22 +++++++++++++----
 .../src/components/sessions/JKSessionUser.js  |  2 +-
 4 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 jam-ui/src/components/sessions/JKLobbyUser.js

diff --git a/jam-ui/src/components/sessions/JKLobbyChat.js b/jam-ui/src/components/sessions/JKLobbyChat.js
index 7f46da3c3..f2fd29e04 100644
--- a/jam-ui/src/components/sessions/JKLobbyChat.js
+++ b/jam-ui/src/components/sessions/JKLobbyChat.js
@@ -3,16 +3,20 @@ import { Card, CardBody, CardFooter, CardHeader, CardText, CardTitle, Button } f
 
 function JKLobbyChat() {
   return (
-    <Card
-      className="my-2"
-    >
-      <CardHeader>Header</CardHeader>
-      <CardBody>
-        <CardTitle tag="h5">Special Title Treatment</CardTitle>
-        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
-        <Button>Go somewhere</Button>
-      </CardBody>
-    </Card>
+    // <Card
+    //   className="my-2"
+    // >
+    //   <CardHeader>Header</CardHeader>
+    //   <CardBody>
+    //     <CardTitle tag="h5">Special Title Treatment</CardTitle>
+    //     <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+    //     <Button>Go somewhere</Button>
+    //   </CardBody>
+    // </Card>
+    <div>
+      <div className='bg-200 text-900' style={{ padding: '0.75rem'}}>Header</div>
+      <div className='border pt-1 pl-3 p-2'>Body</div>
+    </div>
   );
 }
 
diff --git a/jam-ui/src/components/sessions/JKLobbyUser.js b/jam-ui/src/components/sessions/JKLobbyUser.js
new file mode 100644
index 000000000..afcc61ea4
--- /dev/null
+++ b/jam-ui/src/components/sessions/JKLobbyUser.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Row } from 'reactstrap';
+import JKProfileAvatar from '../profiles/JKProfileAvatar';
+
+function JKLobbyUser() {
+  return (
+    <Row className="d-flex flex-row justify-content-between">
+      <input type="checkbox" className="align-middle" />
+      <div className="avatar avatar-sm">
+        <a href="/#" onClick={toggleMoreDetails}>
+          <JKProfileAvatar src={user.photo_url} />
+        </a>
+      </div>
+      <div className="ml-2 ms-2" style={{ width: '70%' }}>
+        <a href="/#" onClick={toggleMoreDetails}>
+          {user.name}
+        </a>
+      </div>
+    </Row>
+  );
+}
+
+export default JKLobbyUser;
diff --git a/jam-ui/src/components/sessions/JKLobbyUserList.js b/jam-ui/src/components/sessions/JKLobbyUserList.js
index f8e5d9823..8fe18b2d5 100644
--- a/jam-ui/src/components/sessions/JKLobbyUserList.js
+++ b/jam-ui/src/components/sessions/JKLobbyUserList.js
@@ -1,18 +1,32 @@
 import React from 'react';
 import { Table } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
+import JKLobbyUser from './JKLobbyUser';
 
 function JKLobbyUserList() {
   const { t } = useTranslation();
   return (
-    <Table striped bordered className="fs--1" data-testid="sessionsListTable">
+    <Table striped bordered className="fs--1" data-testid="sessionsLobbyUsersTable">
       <thead className="bg-200 text-900">
         <tr>
-          <th width="35%" scope="col">{t('lobby.header.musician', { ns: 'sessions' })}</th>
-          <th scope="col" className="text-center">{t('actions', { ns: 'common' })}</th>
+          <th width="35%" scope="col">
+            {t('lobby.header.musician', { ns: 'sessions' })}
+          </th>
+          <th scope="col" className="text-center">
+            {t('actions', { ns: 'common' })}
+          </th>
         </tr>
       </thead>
-      <tbody className="list" />
+      <tbody className="list">
+        <tr>
+          <td className="align-middle">
+            <JKLobbyUser />
+          </td>
+          <td className="align-middle text-center">
+            Actions
+          </td>
+        </tr>
+      </tbody>
     </Table>
   );
 }
diff --git a/jam-ui/src/components/sessions/JKSessionUser.js b/jam-ui/src/components/sessions/JKSessionUser.js
index fff23d771..596fc5422 100644
--- a/jam-ui/src/components/sessions/JKSessionUser.js
+++ b/jam-ui/src/components/sessions/JKSessionUser.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchPerson } from '../../store/features/sessionsSlice';
 import { useResponsive } from '@farfetch/react-context-responsive';