From f18c2d2d62ad35f55c002a91662cdb8f83b37ff7 Mon Sep 17 00:00:00 2001
From: J Taylor <jon@momentic.co>
Date: Tue, 22 Jun 2021 14:27:53 +0100
Subject: [PATCH] added toggle aside method

---
 .../shared/components/Aside/PeopleAside.js    |  2 +-
 dailyjs/shared/components/Tray/BasicTray.js   |  8 ++------
 dailyjs/shared/contexts/UIStateProvider.js    |  7 ++++++-
 .../components/ChatAside/ChatAside.js         | 19 ++++++++++++++++++
 .../text-chat/components/ChatAside/index.js   |  1 +
 dailyjs/text-chat/components/Tray/Tray.js     | 20 ++++++++++++-------
 dailyjs/text-chat/pages/_app.js               |  3 ++-
 7 files changed, 44 insertions(+), 16 deletions(-)
 create mode 100644 dailyjs/text-chat/components/ChatAside/ChatAside.js
 create mode 100644 dailyjs/text-chat/components/ChatAside/index.js

diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/dailyjs/shared/components/Aside/PeopleAside.js
index 7c6d172..88ee50f 100644
--- a/dailyjs/shared/components/Aside/PeopleAside.js
+++ b/dailyjs/shared/components/Aside/PeopleAside.js
@@ -98,7 +98,7 @@ export const PeopleAside = () => {
   const { showAside, setShowAside } = useUIState();
   const { allParticipants, isOwner } = useParticipants();
 
-  if (!showAside && showAside !== PEOPLE_ASIDE) {
+  if (!showAside || showAside !== PEOPLE_ASIDE) {
     return null;
   }
 
diff --git a/dailyjs/shared/components/Tray/BasicTray.js b/dailyjs/shared/components/Tray/BasicTray.js
index 05193fd..45326ae 100644
--- a/dailyjs/shared/components/Tray/BasicTray.js
+++ b/dailyjs/shared/components/Tray/BasicTray.js
@@ -14,8 +14,7 @@ import { Tray, TrayButton } from './Tray';
 
 export const BasicTray = () => {
   const { callObject, leave } = useCallState();
-  const { customTrayComponent, setShowDeviceModal, setShowAside } =
-    useUIState();
+  const { customTrayComponent, setShowDeviceModal, toggleAside } = useUIState();
   const { isCamMuted, isMicMuted } = useMediaDevices();
 
   const toggleCamera = (newState) => {
@@ -48,10 +47,7 @@ export const BasicTray = () => {
         <IconSettings />
       </TrayButton>
 
-      <TrayButton
-        label="People"
-        onClick={() => setShowAside((p) => (p ? null : PEOPLE_ASIDE))}
-      >
+      <TrayButton label="People" onClick={() => toggleAside(PEOPLE_ASIDE)}>
         <IconPeople />
       </TrayButton>
 
diff --git a/dailyjs/shared/contexts/UIStateProvider.js b/dailyjs/shared/contexts/UIStateProvider.js
index be6676e..a9458cb 100644
--- a/dailyjs/shared/contexts/UIStateProvider.js
+++ b/dailyjs/shared/contexts/UIStateProvider.js
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { useCallback, createContext, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 
 export const UIStateContext = createContext();
@@ -7,6 +7,10 @@ export const UIStateProvider = ({ asides, customTrayComponent, children }) => {
   const [showDeviceModal, setShowDeviceModal] = useState(false);
   const [showAside, setShowAside] = useState();
 
+  const toggleAside = useCallback((newAside) => {
+    setShowAside((p) => (p === newAside ? null : newAside));
+  }, []);
+
   return (
     <UIStateContext.Provider
       value={{
@@ -14,6 +18,7 @@ export const UIStateProvider = ({ asides, customTrayComponent, children }) => {
         customTrayComponent,
         showDeviceModal,
         setShowDeviceModal,
+        toggleAside,
         showAside,
         setShowAside,
       }}
diff --git a/dailyjs/text-chat/components/ChatAside/ChatAside.js b/dailyjs/text-chat/components/ChatAside/ChatAside.js
new file mode 100644
index 0000000..6b33cb1
--- /dev/null
+++ b/dailyjs/text-chat/components/ChatAside/ChatAside.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Aside from '@dailyjs/shared/components/Aside';
+import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+
+export const CHAT_ASIDE = 'chat';
+
+export const ChatAside = () => {
+  const { showAside, setShowAside } = useUIState();
+
+  if (!showAside || showAside !== CHAT_ASIDE) {
+    return null;
+  }
+
+  return (
+    <Aside onClose={() => setShowAside(false)}>Hello I am teh chat aside</Aside>
+  );
+};
+
+export default ChatAside;
diff --git a/dailyjs/text-chat/components/ChatAside/index.js b/dailyjs/text-chat/components/ChatAside/index.js
new file mode 100644
index 0000000..8e15e50
--- /dev/null
+++ b/dailyjs/text-chat/components/ChatAside/index.js
@@ -0,0 +1 @@
+export { ChatAside as default } from './ChatAside';
diff --git a/dailyjs/text-chat/components/Tray/Tray.js b/dailyjs/text-chat/components/Tray/Tray.js
index 62a7aa3..1af9c31 100644
--- a/dailyjs/text-chat/components/Tray/Tray.js
+++ b/dailyjs/text-chat/components/Tray/Tray.js
@@ -1,14 +1,20 @@
 import React from 'react';
 
 import { TrayButton } from '@dailyjs/shared/components/Tray';
+import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
 import { ReactComponent as IconChat } from '@dailyjs/shared/icons/chat-md.svg';
+import { CHAT_ASIDE } from '../ChatAside/ChatAside';
 
-export const Tray = () => (
-  <>
-    <TrayButton label="Chat">
-      <IconChat />
-    </TrayButton>
-  </>
-);
+export const Tray = () => {
+  const { toggleAside } = useUIState();
+
+  return (
+    <>
+      <TrayButton label="Chat" onClick={() => toggleAside(CHAT_ASIDE)}>
+        <IconChat />
+      </TrayButton>
+    </>
+  );
+};
 
 export default Tray;
diff --git a/dailyjs/text-chat/pages/_app.js b/dailyjs/text-chat/pages/_app.js
index 907f02e..ce35664 100644
--- a/dailyjs/text-chat/pages/_app.js
+++ b/dailyjs/text-chat/pages/_app.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import App from '@dailyjs/basic-call/pages/_app';
 
+import ChatAside from '../components/ChatAside/ChatAside';
 import Tray from '../components/Tray';
 
-App.asides = [];
+App.asides = [ChatAside];
 App.customTrayComponent = <Tray />;
 
 export default App;