wip session lobby

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>
   );
 }
 

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;

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>
   );
 }

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';