From abedd0729169aa75c9911e1702f6f4388cf266e0 Mon Sep 17 00:00:00 2001
From: Kimberlee Johnson <hello@kimberlee.dev>
Date: Wed, 5 Jan 2022 16:10:44 -0800
Subject: [PATCH] Adding memo for multipleWaiting and fixing styling

---
 .../shared/components/HairCheck/HairCheck.js  | 21 ++++++++++---------
 custom/shared/contexts/WaitingRoomProvider.js |  7 +++++--
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/custom/shared/components/HairCheck/HairCheck.js b/custom/shared/components/HairCheck/HairCheck.js
index fbb65aa..c57c960 100644
--- a/custom/shared/components/HairCheck/HairCheck.js
+++ b/custom/shared/components/HairCheck/HairCheck.js
@@ -140,6 +140,17 @@ export const HairCheck = () => {
         ) : (
           <span>Waiting for host to grant access</span>
         )}
+        <style jsx>{`
+          .waiting {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          }
+
+          .waiting span {
+            margin-left: var(--spacing-xxs);
+          }
+        `}</style>
       </div>
     );
   }, [denied]);
@@ -329,16 +340,6 @@ export const HairCheck = () => {
             grid-column-gap: var(--spacing-xs);
           }
 
-          .waiting {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          .waiting span {
-            margin-left: var(--spacing-xxs);
-          }
-
           .logo {
             position: absolute;
             top: var(--spacing-sm);
diff --git a/custom/shared/contexts/WaitingRoomProvider.js b/custom/shared/contexts/WaitingRoomProvider.js
index b99ab51..f6498de 100644
--- a/custom/shared/contexts/WaitingRoomProvider.js
+++ b/custom/shared/contexts/WaitingRoomProvider.js
@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import PropTypes from 'prop-types';
@@ -13,7 +14,6 @@ const WaitingRoomContext = createContext(null);
 export const WaitingRoomProvider = ({ children }) => {
   const { callObject } = useCallState();
   const [waitingParticipants, setWaitingParticipants] = useState([]);
-  const [multipleWaiting, setMultipleWaiting] = useState();
   const [showModal, setShowModal] = useState(false);
 
   const handleWaitingParticipantEvent = useCallback(() => {
@@ -32,9 +32,12 @@ export const WaitingRoomProvider = ({ children }) => {
         };
       })
     );
-    setMultipleWaiting(waiting.length > 1);
   }, [callObject]);
 
+  const multipleWaiting = useMemo(() => waitingParticipants.length > 1, [
+    waitingParticipants,
+  ]);
+
   useEffect(() => {
     if (waitingParticipants.length === 0) {
       setShowModal(false);