wip session lobby

jam-ui/src/components/dashboard/JKDashboardMain.js

@@ -30,6 +30,7 @@ import JKUnsubscribe from '../page/JKUnsubscribe';
 
 import JKMusicSessions from '../page/JKMusicSessions';
 import JKNewMusicSession from '../page/JKNewMusicSession';
+import JKMusicSessionsLobby from '../page/JKMusicSessionsLobby';
 
 //import loadable from '@loadable/component';
 //const DashboardRoutes = loadable(() => import('../../layouts/JKDashboardRoutes'));
@@ -181,6 +182,7 @@ function JKDashboardMain() {
           <Route path="/unsubscribe" exact component={JKUnsubscribe} />
           <PrivateRoute path="/friends" component={JKPeopleFilter} />
           <PrivateRoute path="/sessions/new" component={JKNewMusicSession} />
+          <PrivateRoute path="/sessions/lobby" component={JKMusicSessionsLobby} />
           <PrivateRoute path="/sessions" component={JKMusicSessions} />
           <PrivateRoute path="/notifications" component={JKNotifications} />
           {/*Redirect*/}

jam-ui/src/components/page/JKMusicSessionsLobby.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Col, Row, Card, CardBody } from 'reactstrap';
+import FalconCardHeader from '../common/FalconCardHeader';
+import { useTranslation } from 'react-i18next';
+import { useResponsive } from '@farfetch/react-context-responsive';
+import JKLobbyUserList from '../sessions/JKLobbyUserList';
+import JKLobbyChat from '../sessions/JKLobbyChat';
+
+function JKMusicSessionsLobby() {
+  const { t } = useTranslation();
+  const { greaterThan } = useResponsive();
+
+  return (
+    
+    <div>
+      <>
+        <Card>
+          <FalconCardHeader title={t('lobby.page_title', { ns: 'sessions' })} titleClass="font-weight-bold" />
+          <CardBody className="pt-0">
+            {greaterThan.sm ? (
+            
+                <Row className="justify-content-between">
+                  <Col>
+                    <div className="table-responsive-xl px-2">
+                      <JKLobbyUserList />
+                    </div>
+                  </Col>
+                  <Col>
+                    <JKLobbyChat />
+                  </Col>
+                </Row>
+             
+            ) : (
+              <Row className="swiper-container d-block d-md-none" data-testid="sessionsSwiper">
+               
+              </Row>
+            )}
+          </CardBody>
+        </Card>
+      </>
+    </div>
+  );
+}
+
+export default JKMusicSessionsLobby;

jam-ui/src/components/sessions/JKLobbyChat.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Card, CardBody, CardFooter, CardHeader, CardText, CardTitle, Button } from 'reactstrap';
+
+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>
+  );
+}
+
+export default JKLobbyChat;

jam-ui/src/components/sessions/JKLobbyUserList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+
+function JKLobbyUserList() {
+  const { t } = useTranslation();
+  return (
+    <Table striped bordered className="fs--1" data-testid="sessionsListTable">
+      <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>
+        </tr>
+      </thead>
+      <tbody className="list" />
+    </Table>
+  );
+}
+
+export default JKLobbyUserList;

jam-ui/src/i18n/locales/en/sessions.json

@@ -38,5 +38,12 @@
       "invited": "YOU WERE INVITED TO THIS SESSION",
       "has_friend": "YOU HAVE A FRIEND IN THIS SESSION"
     }
+  },
+  "lobby": {
+    "page_title": "Lobby",
+    "header": {
+      "musician": "Musician",
+      "actions": "Actions"
+    }
   }
 }

jam-ui/src/routes.js

@@ -26,6 +26,7 @@ export const musicSessionRoutes = {
   children: [
     { to: '/sessions/new', name: 'Create Session' },
     { to: '/sessions', name: 'Browse Sessions' },
+    { to: '/sessions/lobby', name: 'Lobby' },
     { to: '/sessions/history', name: 'Session History' },
   ]
 }