From 22330eda7ef4366b90f47b5bd16ef6f02f3448cf Mon Sep 17 00:00:00 2001
From: Jon <jon@daily.co>
Date: Mon, 14 Jun 2021 16:20:01 +0100
Subject: [PATCH] styled modal

---
 .../WaitingRoom/WaitingParticipantRow.js      | 57 +++++++++++++++++++
 .../WaitingRoom/WaitingRoomModal.js           | 41 +++++++++++--
 .../shared/components/WaitingRoom/index.js    |  1 +
 3 files changed, 93 insertions(+), 6 deletions(-)
 create mode 100644 dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js

diff --git a/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js b/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js
new file mode 100644
index 0000000..f28f6ab
--- /dev/null
+++ b/dailyjs/shared/components/WaitingRoom/WaitingParticipantRow.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useWaitingRoom } from '../../contexts/WaitingRoomProvider';
+import { Button } from '../Button';
+
+export const WaitingParticipantRow = ({ participant }) => {
+  const { grantAccess, denyAccess } = useWaitingRoom();
+
+  const handleAllowClick = () => {
+    grantAccess(participant.id);
+  };
+  const handleDenyClick = () => {
+    denyAccess(participant.id);
+  };
+
+  return (
+    <div className="waiting-room-row">
+      {participant.name}
+      <div className="actions">
+        <Button onClick={handleAllowClick} size="small" variant="success">
+          Allow
+        </Button>
+        <Button onClick={handleDenyClick} size="small" variant="error">
+          Deny
+        </Button>
+      </div>
+
+      <style jsx>{`
+        .waiting-room-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid var(--gray-light);
+          padding-bottom: var(--spacing-xxs);
+          margin-bottom: var(--spacing-xxs);
+        }
+
+        .waiting-room-row:last-child {
+          border-bottom: 0px;
+          padding-bottom: 0px;
+          margin-bottom: 0px;
+        }
+
+        .actions {
+          display: flex;
+          gap: var(--spacing-xxs);
+        }
+      `}</style>
+    </div>
+  );
+};
+
+WaitingParticipantRow.propTypes = {
+  participant: PropTypes.object,
+};
+
+export default WaitingParticipantRow;
diff --git a/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js b/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js
index 6873d9d..266898f 100644
--- a/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js
+++ b/dailyjs/shared/components/WaitingRoom/WaitingRoomModal.js
@@ -1,13 +1,42 @@
 import React from 'react';
 import Modal from '@dailyjs/shared/components/Modal';
-
+import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider';
 import PropTypes from 'prop-types';
+import { Button } from '../Button';
+import { WaitingParticipantRow } from '.';
 
-export const WaitingRoomModal = ({ onClose }) => (
-  <Modal title="Waiting room" isOpen onClose={() => onClose()} actions={[]}>
-    Hello
-  </Modal>
-);
+export const WaitingRoomModal = ({ onClose }) => {
+  const { denyAccess, grantAccess, waitingParticipants } = useWaitingRoom();
+
+  const handleAllowAllClick = (close) => {
+    grantAccess('all');
+    close();
+  };
+  const handleDenyAllClick = (close) => {
+    denyAccess('all');
+    close();
+  };
+
+  return (
+    <Modal
+      title="Waiting room"
+      isOpen
+      onClose={() => onClose()}
+      actions={[
+        <Button fullWidth onClick={handleAllowAllClick} variant="success">
+          Allow all
+        </Button>,
+        <Button fullWidth onClick={handleDenyAllClick} variant="error">
+          Deny all
+        </Button>,
+      ]}
+    >
+      {waitingParticipants.map((p) => (
+        <WaitingParticipantRow participant={p} />
+      ))}
+    </Modal>
+  );
+};
 
 WaitingRoomModal.propTypes = {
   onClose: PropTypes.func,
diff --git a/dailyjs/shared/components/WaitingRoom/index.js b/dailyjs/shared/components/WaitingRoom/index.js
index d7affb2..9deaecc 100644
--- a/dailyjs/shared/components/WaitingRoom/index.js
+++ b/dailyjs/shared/components/WaitingRoom/index.js
@@ -2,3 +2,4 @@ export { WaitingRoom as default } from './WaitingRoom';
 export { WaitingRoom } from './WaitingRoom';
 export { WaitingRoomModal } from './WaitingRoomModal';
 export { WaitingRoomNotification } from './WaitingRoomNotification';
+export { WaitingParticipantRow } from './WaitingParticipantRow';